最近在学习前端的性能优化,有必要了解一下页面的渲染流程,以便对症下药,找出性能的瓶颈所在。以下是我看到的一些东西,分享给大家。
参考:Understanding the renderer
页面的渲染有以下特点:
•单线程事件轮询
•定义明确、连续、操作有序(HTML5)
•分词和构建DOM树
•请求资源并预加载
•构建渲染树并绘制页面
具体来说:
当我们从网络上得到HTML的相应字节时,DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时,DOM树的构建会被阻塞:
•HTML的响应流被阻塞在了网络中
•有未加载完的脚本
•遇到了script节点,但是此时还有未加载完的样式文件
渲染树构建自DOM树,并且会被样式文件阻塞。
由于是基于单线程的事件轮询,即使没有脚本和样式的阻塞,当这些脚本或样式被解析、执行并且应用的时候,也会阻塞页面的渲染。
一些不会阻塞页面渲染的情况:
•定义的defer属性和async属性的
•没有匹配的媒体类型的样式文件
•没有通过解析器插入script节点或样式节点
下面,通过一个例子来说明一下(完整的代码):
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js"></body>
</html>
代码很容易看明白,如果放在浏览器中打开会立即显示出想要的页面。下面,让我们用慢镜头回放的方式来看看它究竟是怎么渲染的。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
首先,解析器遇到了example.css,并将它从网络中下载下来。下载样式表的过程是耗时的,但是解析器并没有被阻塞,继续往下解析。接下来,解析器遇到script标签,但是由于样式文件没有加载下来,阻塞了该脚本的执行。解析器被阻塞住,不能继续往下解析。
渲染树也会被样式文件阻塞,所以这时候没有浏览器不会去渲染页面,换句话说,如果example.css文件下载不下来,Hi there! 是显示不出来的。
接下来,继续。。。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"></script>
一旦example.css文件加载完成,渲染树也就被构建好了。
内联的脚本执行完之后,解析器就会立即被other.js阻塞住。一旦解析器被阻塞,浏览器就会收到绘制请求,"Hi there!"也就显示在了页面上。
当other.js加载完成之后,解析器继续向下解析。。。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js">
解析器遇到last.js之后会被阻塞,然后浏览器收到了另一个绘制请求,"Hi again!"就显示在了页面上。最后last.js会被加载,并且会被执行。
但是,为了减缓渲染被阻塞的情况,现代的浏览器都使用了猜测预加载(speculative loading)。
在上面这种情况下,脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候,它会做以下一些事:
•轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描
•查找那些将来可能能够用到的资源文件的url
•在渲染器使用它们之前将其下载下来
但是,猜测预加载不能发现通过javascript脚本来加载的资源文件(如,document.write())。
注:所有的“现代”浏览器都支持这种方式。
回过来再看上面的例子,通过猜测预加载这种方式是怎么工作的。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
解析器返现了example.css,并从网络获取,解析器没有被阻塞,继续解析,当遇到了内联的script节点时,被阻塞住,由于样式文件没有加载完成,阻塞了脚本的执行。渲染树同样也被样式文件阻塞住,所以浏览器没有收到渲染请求,看不到任何东西。到目前为止,和刚才提到的那种方式是一样的。但是接下来就由变化了。
预加载器(Speculative loader)继续“阅读”文档,发现了last.js并视图加载它。接下来:
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
一旦example.css文件加载完成,渲染树也就完成了构建,内联的脚本也可以执行,之后解析器又被other.js阻塞住。解析器被阻塞住之后,浏览器会收到第一个渲染请求,“Hi there!” 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后:
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js">
解析器发现了last.js,但是由于预加载器刚才已经把它给加载下来了,放在了浏览器的缓存里,所以last.js会被立即执行。之后,浏览器会收到渲染请求“Hi again”也被显示在了页面上。
通过前后两种情况的对比,希望大家可以对页面的渲染有一定的了解,然后再有针对性的做一些优化。晚安! (完)^_^
参考:Understanding the renderer
页面的渲染有以下特点:
•单线程事件轮询
•定义明确、连续、操作有序(HTML5)
•分词和构建DOM树
•请求资源并预加载
•构建渲染树并绘制页面
具体来说:
当我们从网络上得到HTML的相应字节时,DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时,DOM树的构建会被阻塞:
•HTML的响应流被阻塞在了网络中
•有未加载完的脚本
•遇到了script节点,但是此时还有未加载完的样式文件
渲染树构建自DOM树,并且会被样式文件阻塞。
由于是基于单线程的事件轮询,即使没有脚本和样式的阻塞,当这些脚本或样式被解析、执行并且应用的时候,也会阻塞页面的渲染。
一些不会阻塞页面渲染的情况:
•定义的defer属性和async属性的
•没有匹配的媒体类型的样式文件
•没有通过解析器插入script节点或样式节点
下面,通过一个例子来说明一下(完整的代码):
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js"></body>
</html>
代码很容易看明白,如果放在浏览器中打开会立即显示出想要的页面。下面,让我们用慢镜头回放的方式来看看它究竟是怎么渲染的。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
首先,解析器遇到了example.css,并将它从网络中下载下来。下载样式表的过程是耗时的,但是解析器并没有被阻塞,继续往下解析。接下来,解析器遇到script标签,但是由于样式文件没有加载下来,阻塞了该脚本的执行。解析器被阻塞住,不能继续往下解析。
渲染树也会被样式文件阻塞,所以这时候没有浏览器不会去渲染页面,换句话说,如果example.css文件下载不下来,Hi there! 是显示不出来的。
接下来,继续。。。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"></script>
一旦example.css文件加载完成,渲染树也就被构建好了。
内联的脚本执行完之后,解析器就会立即被other.js阻塞住。一旦解析器被阻塞,浏览器就会收到绘制请求,"Hi there!"也就显示在了页面上。
当other.js加载完成之后,解析器继续向下解析。。。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js">
解析器遇到last.js之后会被阻塞,然后浏览器收到了另一个绘制请求,"Hi again!"就显示在了页面上。最后last.js会被加载,并且会被执行。
但是,为了减缓渲染被阻塞的情况,现代的浏览器都使用了猜测预加载(speculative loading)。
在上面这种情况下,脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候,它会做以下一些事:
•轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描
•查找那些将来可能能够用到的资源文件的url
•在渲染器使用它们之前将其下载下来
但是,猜测预加载不能发现通过javascript脚本来加载的资源文件(如,document.write())。
注:所有的“现代”浏览器都支持这种方式。
回过来再看上面的例子,通过猜测预加载这种方式是怎么工作的。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
解析器返现了example.css,并从网络获取,解析器没有被阻塞,继续解析,当遇到了内联的script节点时,被阻塞住,由于样式文件没有加载完成,阻塞了脚本的执行。渲染树同样也被样式文件阻塞住,所以浏览器没有收到渲染请求,看不到任何东西。到目前为止,和刚才提到的那种方式是一样的。但是接下来就由变化了。
预加载器(Speculative loader)继续“阅读”文档,发现了last.js并视图加载它。接下来:
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
一旦example.css文件加载完成,渲染树也就完成了构建,内联的脚本也可以执行,之后解析器又被other.js阻塞住。解析器被阻塞住之后,浏览器会收到第一个渲染请求,“Hi there!” 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后:
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="/UploadFiles/2021-03-30/other.js"> </script>
<div>Hi again!</div>
<script src="/UploadFiles/2021-03-30/last.js">
解析器发现了last.js,但是由于预加载器刚才已经把它给加载下来了,放在了浏览器的缓存里,所以last.js会被立即执行。之后,浏览器会收到渲染请求“Hi again”也被显示在了页面上。
通过前后两种情况的对比,希望大家可以对页面的渲染有一定的了解,然后再有针对性的做一些优化。晚安! (完)^_^
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 刘欢.2004-经典20年珍藏锦集【新索】【WAV+CUE】
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- CD圣经上榜天碟1995-乌仁娜-《蒙古草原之歌》[WAV+CUE].
- 【电影原声】武满彻《旭日东升》1993[WAV+CUE整轨]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[320K/MP3][148.54MB]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[FLAC/分轨][405.72MB]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[320K/MP3][80.8MB]
- 女神异闻录5佐仓双叶coop攻略 p5r佐仓双叶对话选项攻略
- 【民谣】张智《尼勒克小镇》[FLAC]
- 林一峰2018-TRAVELOGUE4ESCAPE[香港首版][WAV+CUE]
- MollyLewis《OnTheLips》(2024)[Hi-Res96kHz_24bitFLAC]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[FLAC/分轨][230.77MB]
- 群星《影视剧 春色寄情人 原声带》[320K/MP3][394.18MB]
- 吴牧野《强者独白II 李斯特巅峰作品选》[320K/MP3][216.01MB]
- 女神异闻录5御船千早coop攻略 p5r御船千早对话选项攻略