zoukankan      html  css  js  c++  java
  • [CSS 3] content-visibility: auto Improve rendering performance

    When page get loaded, browser need to calculate how to render the page even before first pixel get rendered.

    Also means that for the content which is outside or viewport, broswer also need to calculate it.

    With Chrome 85, if you set parent container to :

    .container {
     content-visibility: auto
    }

    makes the initial user load much faster.

    More details

    Specifying the natural size of an element with contain-intrinsic-size #

    In order to realize the potential benefits of content-visibility, the browser needs to apply size containment to ensure that the rendering results of contents do not affect the size of the element in any way. This means that the element will lay out as if it was empty. If the element does not have a height specified in a regular block layout, then it will be of 0 height.

    This might not be ideal, since the size of the scrollbar will shift, being reliant on each story having a non-zero height.

    Thankfully, CSS provides another property, contain-intrinsic-size, which effectively specifies the natural size of the element if the element is affected by size containment. In our example, we are setting it to 1000px as an estimate for the height and width of the sections.

    This means it will lay out as if it had a single child of "intrinsic-size" dimensions, ensuring that your unsized divs still occupy space. contain-intrinsic-size acts as a placeholder size in lieu of rendered content.

    .container {
      content-visibility: auto;
      contain-intrinsic-size: 1000px; /* Explained in the next section. */
    }
  • 相关阅读:
    View基础知识
    数据库性能优化之SQL优化
    poi读取Excel文件和图片
    ab压测工具的一些个人见解
    【压测工具对比系列施压对比】
    【压测工具对比系列性能对比】
    【转】linux sed命令详解
    linux下文件比对功能
    windows下自动更改IP的小工具(bat批处理文件)
    mysql中操作符LIKE与通配符%的使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13634507.html
Copyright © 2011-2022 走看看