客户端从服务器获取到需要渲染的页面源代码后开辟一个‘GUI渲染线程’，自上而下解析代码，最后绘制出对应的页面，自上而下渲染解析代码的过程是‘同步’的，但也有些操作是“异步”的。
- 关于css资源的加载
-
遇到
<style>内嵌样式 =>‘同步’交给GUI渲染线程解析 -
遇到的是
<link>外链样式 => ‘异步’开辟一个新的‘HTTP网络请求线程’ [‘异步：’不等待资源信息请求回来，GUI渲染线程继续向下渲染；待GUI渲染线程同步操作都处理完成后再把HTTP网络线程请求回来的资源文件解析渲染 ]
注意：同一源下，根据不同的浏览器，最多只允许同时开辟4~7个线程“HTTP的并发数” -
遇到
@import导入样式=>‘同步’开辟一个新的‘HTTP网络请求线程’去请求资源文件，但在资源文件没有请求回来之前，GUI渲染线程会被‘阻塞’，不会允许其继续向下渲染
- 遇到
<script>资源请求 默认都是‘同步’的，必须基于HTTP网络线程，把资源请求回来之后，并且交给“JS渲染进程”渲染解析完成之后，GUI渲染线程才能继续向下渲染，所以<script>默认也是“阻碍GUI渲染”的
-
async属性
<style async>开辟一个HTTP网络请求线程去加载资源文件，同时GUI渲染线程继续向下渲染[把同步改成异步]，但是一旦资源请求回来就中断GUI渲染，先把请求回来的js进行渲染解析 -
defer属性
<style defer> 和<style async> 相似，不同的是defer与link类似，是在GUI同步代码渲染完成后才会对请求回来的js进行渲染解析
- 遇到
<img>或者音频资源 ‘异步’同<link>
页面渲染步骤#
- 生成DOM tree : 自上而下渲染完页面，整理好整个页面的DOM结构关系
- 生成CSS tree: 把所有的样式资源请求加载回来后，按照引入css顺序，依次渲染样式代码，生成样式树
- 生成 Render tree(Dom tree + CSS tree) 注意： display：none;不会在渲染树内生成
