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文件加载完毕后,再继