页面渲染需要了解的东西

发表于 | 分类于 | | 阅读次数:

页面渲染需要了解的东西

参考：
https://aerotwist.com/blog/pixels-are-expensive/
https://www.html5rocks.com/zh/tutorials/speed/high-performance-animations/

60FPS，是前台页面显示所追求的效果。
折算下来就是一帧需要 16.667ms

  1. 浏览器在每一帧所需要做的事情

    js => style => layout => paint => composite

  2. css 中常见的属性分类
    参考：
    https://csstriggers.com/
    https://docs.google.com/spreadsheets/d/1Hvi0nu2wG3oQ51XRHtMv-A_ZlidnwUYwgQsPQUg1R2s/pub?single=true&gid=0&output=html

    layout:
    width, height, padding, margin, display, border-width, border
    top, position, font-size, float, background-color, border-color
    text-aligin, overflow-y, font-weight, overflow, left, font-familiy
    margin-bottom, padding-bottom, line-height, vertical-align, right,
    clear, etc

    paint:
    color, border-style, visibility, background, text-decoration, background-image, background-position, background-repeat, etc

    composite:
    opacity, cursor, z-index