image.png
    image.png
    image.png
    image.png
    Animation21.gif
    image.png

    • 示例源码

    image.png

    • 解析 dom(html) 和 css

    image.png
    image.png

    • 生成渲染树

    image.png
    image.png

    • 重排

    image.png
    image.png

    • 重绘

    image.png
    image.png

    • 把之前生成的位图传递给 CPU ，CPU 再将这个位图传递给 GPU，GPU 再渲染到屏幕

    image.png
    image.png

    • 上面就是整个的渲染的流程，下面是总结

    image.png

    image.png

    image.png
    https://csstriggers.com/ 这个网站会详细的介绍：修改哪些属性会触发哪一阶段

    image.png

    image.png
    image.png
    image.png

    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    http://jsbin.com/dizak/3/edit?html,css,output
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    http://jankfree.org/ 国外的一个网站，它上面有很多视频、文章专门来研究这个高性能动画的