一、浏览器渲染原理和关键渲染路径
浏览器构建渲染树，DOM树和CSSDOM树合成为Render Tree渲染树。浏览器的渲染流程，如下所示：JavaScript -> Style -> Layout -> Paint -> Composite。布局与绘制，如下所示： 渲染树只包含网页需要的节点布局计算每个节点精确的位置和大写，盒模型绘制是像素化每个节点的过程 影响回流的操作，如下所示： 添加、删除元素操作stylesdisplay: noneoffsetLeft、scrollTop、clientWidth移动元素位置修改浏览器大小、字体大小 避免布局抖动Layout thrashing，如下所示： 避免回流读写分离 使用FastDOM可以批量的对DOM的读写操作，进行性能提升。
二、复合线程、图层及优化
复合线程，如下所示： 将页面拆分图层进行绘制再进行复合利用DevTools了解网页的图层拆分情况哪些样式仅影响复合 减少重绘的方案 利用DevTools识别paint的瓶颈利用will-change创建新的图层 对于事件处理函数，可以使用防抖处理。React时间调度的基本原理，如下所示：requestIdleCallback的问题通过rAF模拟rIC三、JS 开销及优化
JavaScript的开销缩短解析时间，JavaScript的开销会存在于加载、执行、解析和编译中。JavaScript开销减少的方案，如下所示：Code splitting代码拆分，按需加载Tree shaking代码减重JavaScript减少主线程工作量，如下所示： 避免长任务避免超过1KB的行间脚本使用rAF和rIc进行时间调度 对于渐进式启动Progressive Bootstrapping，可见不可交互与最小可交互资源集。V8优化机制，如下所示： 脚本流字节码缓存懒解析 抽象语法树，如下所示： 源码 -> 抽象语法树 -> 字节码Bytecode-> 机器码编译过程会进行优化运行时可能发生反优化 函数的解析方式，如下所示：lazy parsing懒解析、eager parsing饥饿解析利用Optimize.js优化初次加载时间 对象优化，如下 以相同顺序初始化对象成员，避免隐藏类的调整实例化后避免添加新属性尽量使用Array代替array-like对象避免读取超过数组的长度避免元素类型转换四、HTML 和 CSS 优化
HTML优化，如下所示： 减小iframes使用避免table布局压缩空白符删除注释避免节点深层级嵌套CSS和Javascript尽量外链删除元素默认属性 如果借助工具，可以使用html-minifier去压缩HTML。对于样式计算开销，可以利用DevTools测量样式计算开销。对于CSS优化，如下所示： 降低CSS对渲染的阻塞利用GPU进行完成动画使用contain属性使用font-display属性前端性能优化之浏览器渲染原理和关键渲染路径 复合线程 图层及优化 JS 开销及优化和 HTML 和 CSS 优化
如果觉得《前端性能优化之浏览器渲染原理和关键渲染路径 复合线程 图层及优化 JS 开销及优化》对你有帮助，请点赞、收藏，并留下你的观点哦！
