1.网页的渲染过程 webkit渲染html+css
1-1.获取dom分割层
1-2.计算样式
1-3.重排 放置dom的位置 layout
1-4.节点填充 重绘 paint
1-5.网页GPU纹理图片展现到页面(元素偏移、缩放)
1-6.网页合成层 生成屏幕最终图像
2.网页就像摆积木一样 一旦积木位置发生变化 就是重排 颜色变化就是重绘
3.合成层这个阶段GPU参与
4.根元素 position transform 半透明 canvas css的滤镜 GPU CSS3D webGL transform 硬件加速
5.圆角 阴影 颜色等等这些外观一定会造成重绘
6.元素尺寸变了 元素位置变了 内容变了引起盒子变化都会造成重排 页面初始化正准备执行优化后的队列的时候-》突然改变了某个元素例如width变化了， 优化后缓存的队列都作废
const width = $(window).width();
优化代码
requestAnimationFrame(function(){
$('#test').width(....)
})
专门做读写分离的库
https://github.com/wilsonpage/fasdom
7.不要以为单独的层是万能的
8.GPU vs CPU
相同：两者都有总线和外界联系，有自己的缓存体系，以及运算单元，两者都为了完成计算而生。
不相同：CPU主要负责的操作系统和应用程序 GPU显示相关和数据处理
网友评论