![]() To see the messages, turn on verbose logging. To help find them, Chromium will print console messages if you call one of these APIs for a subtree of an element with content-visibility:hidden. If you're using content-visibility to improve performance, audit your code to make sure these APIs are not getting called. The browser is only able to skip rendering work if you are also careful not to call any DOM API that forces some of rendering to occur on one of the skipped subtrees. This enables the rendering work to be done just in time to be seen by the user. Most of the rendering, such as styling and layout of the element's subtree are skipped.Īs the element approaches the viewport, the browser no longer adds the size containment and starts painting and hit-testing the element's content. The browser determines the size of the element without considering any of its contents, and it stops there. What does this mean? In short, if the element is off-screen its descendants are not rendered. If the element is off-screen (and not otherwise relevant to the user-relevant elements would be the ones that have focus or selection in their subtree), it also gains size containment (and it stops painting and hit-testing its contents). An element that has content-visibility: auto gains layout, style and paint containment. The content-visibility property accepts several values, but auto is the one that provides immediate performance improvements. content-visibility ensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer. You can play around with the values to see what works best, or you can use another CSS property called content-visibility to apply the needed containment automatically. It may be hard to figure out which containment values to use, since browser optimizations may only kick in when an appropriate set is specified. Skipping rendering work with content-visibility # This allows us to potentially skip painting the descendants if the element is offscreen. Nothing can visibly overflow the element, and if an element is off-screen or otherwise not visible, its descendants will also not be visible.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |