浏览器底层渲染机制

# 浏览器底层渲染机制

浏览器向服务器发起请求，获取到对应的html资源文件后，开辟一块栈内存，通过GUI渲染线程来解析渲染页面

GUI渲染线程是“同步”的

- 对于css的处理

• 遇到<style>内联样式，会同步处理，先解析style样式，解析完style后，继续解析文档
• 遇到<link>外联标签，会异步加载资源文件，同时GUI渲染线程继续解析文档，等到文档全部解析完毕，然后解析加载完毕的资源文件
• 遇到@import导入式样式，同步的加载资源文件，等待资源文件获取并解析完，继续进行文档解析

- 对于script的处理

• 默认是同步加载js资源文件，故js资源文件会阻塞GUI渲染线程的解析，等到js资源文件解析完毕才继续解析文档
• 当遇到<script async>标签，会异步加载js文件，同时解析文档，等到资源文件加载完成，暂停解析文档，立即解析js代码，js代码解析完，继续解析文档
• 当遇到<script defer>标签，会异步加载js文件，同时解析文档，等到文档解析完毕，js代码才会解析

- 对于img，auth的处理

• 默认也是异步加载资源文件，也会发送HTTP网络线程进行资源文档的请求，等到文档解析完毕，渲染

注：浏览器最多同时可以创建4-7个HTTP网络线程去请求资源文件，HTTP网络线程并发数
webkit内核浏览器预测解析，chrome的预加载扫描器html-preload-scanner通过扫码节点中的“src”，“link”等属性，提前预加载，避免了资源文件加载的等待时间

# 页面渲染的步骤

- DOM TREE(dom树）,自上而下的渲染完页面，整理整个页面的DOM结构关系

- CSSOM TREE(样式树)  当把所有的样式资源请求加载回来后，按照引入css的顺序，依次渲染样式代码，生成样式树

- Render TREE(渲染树)  把生成的DOM树和CSSOM树合并在一起，生成Render Tree，对于display:none的节点以及img渲染均不会生成到render tree中

- layout 布局/回流/重排，根据Render Tree确定每个节点的位置和大小

- 分层处理  按照层级定位分层分层处理

- painting 按照层级，依次绘制