了解html页面的渲染过程以备学习前端的性能优化(续)

2020-04-16 08:17:17易采站长站整理

通过网络请求可以看出,example.css已经加载完成,other.js处于pending状态,但此时script标签底下的三张图片已经下载下来了,这是由浏览器的预先加载的功能所致。但是由于浏览器的渲染被other.js脚本阻塞住,所以,这三张图片连同它上面的“Hi again”都不会显示出来。另外,此时last.js中的代码还没有执行。

接下来,当other.js加载完成之后,浏览器就会构建出渲染树,显示出“Hi again”,并显示出图片。由于last.js先前已经被下载,所以last.js会立即执行。整个渲染过程完成。如下图所示:

 

由此看出,Chrome会预先加载body中的脚本资源(样式文件没有测试),由JavaScript脚本动态加载的JS不会影响图片文件的下载,但是会影响它下面图片的渲染。

 

2、Firefox中的测试结果

    在Firefox浏览中打开页面后迅速截图,如下所示:

和在Chrome中有很明显的不同,"Hi there!",已经显示在了页面上,但是背景色是白色,说明此时样式文件还没有下载下来。而在Chrome中是不会显示的,要等到样式文件加载完成。

接下来,当整个页面加载完成之后,截图如下所示:

从请求的瀑布流中可以看出,和Chrome类似,浏览器对last.js进行了预加载,和Chrome中不同的是,火狐没有对图片进行预加载,而是等到other.js加载完成之后再进行的加载。

火狐中,样式文件并没有影响文档的渲染(最典型的现象就是,网页一开始显示的很乱,没有样式,当样式文件下载下来之后就显示正常了),在body中,由JavaScript动态加载的JS文件会阻塞它后面的图片的下载。

3、在Opera浏览器中

经过在Opera中测试,发现Opera浏览器比较“守规矩”,所有的资源都是按顺序加载的,并没有出现所谓的预先加载,下面是一张总的效果图:

Opera中,样式文件会阻塞页面的渲染,这和Chrome类似,但是,有Opera的请求瀑布流可以看出,页面中的所有的资源都是按部就班的加载的,other.js提前于last.js加载。没有预加载。

测试二、样式文件在body的开始部分,脚本文件的位置和测试一的一样。