🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 解析页面流程 前面有提到http交互,那么接下来就是浏览器获取到html,然后解析,渲染 **这部分很多都参考了网上资源,特别是图片,参考了来源中的文章** ### 流程简述 浏览器内核拿到内容后,渲染步骤大致可以分为以下几步: ``` 1. 解析HTML,构建DOM树 2. 解析CSS,生成CSS规则树 3. 合并DOM树和CSS规则,生成render树 4. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算 5. 绘制render树(paint),绘制页面像素信息 6. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上 ``` 如下图: :-: ![img](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/date/2018-03-26/browser_rending.png)