浅谈浏览器渲染机制和性能优化

浏览器渲染机制和一些性能优化方法

在学习前端一些知识后，分享一下学习到的浏览器渲染机制

渲染机制

浏览器是多线程的工具，通过客户端响应完成，浏览器就会开辟一个栈内存同时分配一个主线程去执行和解析代码，在遇见服务器返回的html文件中的外部引入文件时（例如css,js和img），就会把这些外部的文件放入一个任务队列里面等待DOM完全被读取，生成DOM树，就会读取任务队列里面的任务队列，直到生成CSSOM，CSSOM和DOM树就会一起生成Render Tree（渲染树）,渲染树再通过回流和重绘，最终发送给GPU，展示在页面。

大概步骤如下：

1. 解析HTML生成DOM树，再解析CSS生成CSSOM树；在生成的CSSOM过程中，会发生Event Loop（事件循环）,并且还有宏任务和微任务的实现（具体可以去看一下微任务、宏任务与Event-Loop的介绍）；
2. DOM树和CSSOM树结合，生成渲染树；
3. 在回流（Layout）阶段，浏览器计算元素节点等在设备视口的位置和大小；
4. 重绘（Painting）阶段，根据渲染树和回流的结果，拿到节点的像素；
5. 最后将像素反馈给GPU，展示在页面上。

性能优化

请求

http
减少HTTP的请求次数和大小
资源的合并和压缩，对于css和js等文件进行压缩，减少扩展文件数量
实现页面的图片懒加载，使用css精灵图
音频文件做成流文件
使用CDN加速
使用浏览器缓存

DOM

DOM操作
放弃传统的dom操作 ，使用虚拟DOM例如，React，vue等
分离读写
样式集中转化
缓存布局信息
减少js修改样式，多使用CSS3

CSS

CSS操作
适量使用硬件加速
适当使用样式减少重排