欢迎访问大高互联网络公司!实力接全国网站SEO优化快速上首页,精准锁定流量源,无排名不收费,快速建网站、开发|营销推广,SEO建站一站式服务!
资讯发布

您所在的位置: SEO快排 > 福建 > 厦门 > 正文

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

日期:2020-04-03 04:00:42 作者:大高SEO 厦门

昨天晚上写了一篇关于浏览器的渲染过程的随笔,但只是通过一小段代码解释了一下,并没有通过浏览器测试,说服力不够,而且还有很多不完善的地方,今天在浏览器中测试了一下,并把测试的结果分享给大家,测试过程可能有点乱,希望大家理解。

测试浏览器:Chrome v24.0.1312.52 m,Firefox v18.0,Opera v12.12。

在WebKit内核中,网页在显示的时候会有一个解析器(Parser)去解析html文档,然后去生成渲染树(Render Tree),最终渲染出页面。这是在一个线程中进行的,所以两者不会同时进行。

我分为了以下两种情况,并分别在不同的浏览器中进行测试。

样式文件在head里,其他的连个脚本文件一个在body的开始部分,一个在body的底部。样式文件在body的开始部分,脚本文件的位置和上面的一样。

测试的结果是这样的,在chrome中,样式文件的位置会影响到图片的下载时间,而在另外两个浏览器中这两种情况没有区别。下面是详细的测试过程。

测试一:样式文件在head里,其他的连个脚本文件一个在body的开始部分,一个在body的底部。

测试的代码:

复制代码

代码如下:


<!doctype html>
<html>
<head>
<title>测试页面</title>
<link type="text/css" href="example.aspx?sleep=3" />
</head>
<body>
<div>
Hi, there!</div>

<script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</script>

<div>
Hi, again!</div>
<img src="images/marx.jpg" alt="Marx" />
<img src="images/engels.jpg" alt="Engels" />
<img src="images/Lenin.jpg" alt="Lenin" />

<script src="last.aspx" type="text/javascript"></script>

</body>
</html>


1、在Chrome中的测试情况

我在浏览器中打开页面后,迅速将网页截了一张图,如下所示(点击可以查看大图,下同):

从上图中可以看出,test.htm 文档已经加载完成,页面上还没有显示任何东西,example.css处于pending状态,但是,位于最底部的last.js却加载完成了。这说明chrome进行了预加载,提前下载,放在了浏览器的缓存里了。虽然last.js已经加载完成,但是还没有被执行,因为他前面的样式文件会阻塞脚本的执行。

接下来,当example.css加载完成后,Hi there!显示在了屏幕上,浏览器的截图如下所示

通过网络请求可以看出,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加载完成之后再进行的加载。

更多相关推荐

【本文标题和网址】了解html页面的渲染过程以备学习前端的性能优化(续):http://yl6969.com/fujian/xiamen/9270.html

资讯排行
搜索热点