页面加载过程

HTTP加载流程

1.DNS域名解析

2.建立TCP连接

3.客户端发起HTTP请求

4.服务端响应HTTP请求

5.客户端得到HTML代码

6.客户端解析HTML代码，请求HTML代码中的资源（js,css,图片）

7.客户端渲染页面

 

客户端的渲染流程

1.解析HTML，构建DOM树

2.解析CSS，构建CSSOM树

3.将DOM树和CSSOM树合并成为渲染树（render tree）

4.计算渲染树中每个节点的位置

5.通过显卡/GPU绘制页面

阻塞加载

1.当我们浏览器获得HTML文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
2.加载说的就是获取资源文件的过程，如果在加载过程中遇到外部CSS文件和图片，浏览器会另外发送一个请求，去获取CSS文件和相应的图片，这个请求是异步的，并不会影响HTML文件的加载。
3.但是如果遇到Javascript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。
为什么HTML需要等待JavaScript呢？因为JavaScript可能会修改DOM，导致后续HTML资源白白加载，所以HTML必须等待JavaScript文件加载完毕后，再继