浏览器页面渲染过程

1、浏览器页面渲染过程图

浏览器页面渲染过程_第1张图片

2、浏览器渲染过程分析

2.1 CSS加载阻塞DOM渲染,但不阻塞DOM解析

有文件test.html,其部分代码如下截图所示:
浏览器页面渲染过程_第2张图片
CSS加载阻塞DOM渲染
访问test.html页面,通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染,因此起初只看到了页面内容:“Hi,”,其它内容并未渲染出来。
浏览器页面渲染过程_第3张图片
CSS加载不阻塞DOM的解析
通过控制台可查看,DOM渲染被第一个CSS文件阻塞了,但是该文件后面的其它文件还能正常加载,说明CSS不阻塞DOM解析
浏览器页面渲染过程_第4张图片

你可能感兴趣的:(浏览器,前端,浏览器页面渲染过程)