前端基础渲染代码

最新推荐文章于 2024-05-20 09:43:33 发布

云南仟龙Mark

最新推荐文章于 2024-05-20 09:43:33 发布

阅读量416

点赞数

文章标签： css html html5

原文链接：https://blog.51cto.com/u_15111999/3895771

版权

今天分享下”前端基础渲染代码“，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。
在我们从互联网上获得HTML的相对应字节数时，DOM树就逐渐构建了。由浏览器更新UI的进程承担。当碰到下列情形时，DOM树的构建会被阻塞：
HTML的回应流被阻塞在了互联网中
有未载入完的脚本制作
碰到了script节点，可是这时也有未载入完的样式文档
渲染树构建自DOM树，而且会被样式文档阻塞。
因为是根据单核的事情轮循，即便沒有脚本制作和样式的阻塞，当这种脚本制作或样式被分析、实行而且使用的情况下，也会阻塞网页页面的渲染。
一些不容易阻塞网页页面渲染的状况：
界定的defer属性和async属性的
沒有配对的网络媒体种类的样式文档
沒有根据在线解析插进script节点或样式节点
下边，根据一个事例来表明一下（详细的编码）：

复制代码

 1 <html>
 2 <body>
 3 　　<link rel="stylesheet" href="example.css">
 4 　　<div>Hi there!</div>
 5 　　<script>
 6 　　　　document.write('<script src="other.js"></scr' + 'ipt>');
 7 　　</script>
 8 　　<div>Hi again!</div>
 9 　　<script src="last.js"></script>
10 </body>
11 </html>

复制代码
代码很容易看明白，如果放在浏览器中打开会立即显示出想要的页面。下面，让我们用慢镜头回放的方式来看看它究竟是怎么渲染的。

1 <html>
2 <body>
3 　　<link rel="stylesheet" href="example.css">
4    <div>Hi there!</div>
5    <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="other.js"></scr' + 'ipt>');
   </script>

复制代码
一旦example.css文件加载完成，渲染树也就被构建好了。

内联的脚本执行完之后，解析器就会立即被other.js阻塞住。一旦解析器被阻塞，浏览器就会收到绘制请求，"Hi there!"也就显示在了页面上。

当other.js加载完成之后，解析器继续向下解析。。。

复制代码

1 <html>
2 <body>
3     <link rel="stylesheet" href="example.css">
4 　　<div>Hi there!</div>
5 　　<script>（ http://www.qlyl1688.com/products/yysbbd.html ）
6 　　　　document.write('<script src="other.js"></scr' + 'ipt>');
7 　　</script>
8 　　<div>Hi again!</div>
9 　　<script src="last.js"></script>

复制代码
解析器遇到last.js之后会被阻塞，然后浏览器收到了另一个绘制请求，"Hi again!"就显示在了页面上。最后last.js会被加载，并且会被执行。

但是，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载（speculative loading）。

在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：

轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描
查找那些将来可能能够用到的资源文件的url
在渲染器使用它们之前将其下载下来
但是，猜测预加载不能发现通过javascript脚本来加载的资源文件（如，document.write()）。

注：所有的“现代”浏览器都支持这种方式。这句话有待商榷，具体请看我下一篇随笔（正在整理中。。。）。

回过来再看上面的例子，通过猜测预加载这种方式是怎么工作的。

1 <html>
2 <body>
3 　　<link rel="stylesheet" href="example.css">
4 　　<div>Hi there!</div>
5 　　<script>...

解析器返现了example.css，并从网络获取，解析器没有被阻塞，继续解析，当遇到了内联的script节点时，被阻塞住，由于样式文件没有加载完成，阻塞了脚本的执行。渲染树同样也被样式文件阻塞住，所以浏览器没有收到渲染请求，看不到任何东西。到目前为止，和刚才提到的那种方式是一样的。但是接下来就有变化了。

预加载器（Speculative loader）继续“阅读”文档，发现了last.js并试图加载它，（注：此时，如果example.css没有加载下来，last.js是不会加载的，一直处于pending状态）。接下来：

复制代码

1 <html>
2 <body>
3 　　<link rel="stylesheet" href="example.css">
4 　　<div>Hi there!</div>
5 　　<script>
6 　　　　document.write('<script src="other.js"></scr' + 'ipt>');
7 　　</script>

复制代码
一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也可以执行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，浏览器会收到第一个渲染请求，“Hi there!” 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后：

复制代码

1 <html>
2 <body>
3 　　<link rel="stylesheet" href="example.css">
4 　　<div>Hi there!</div>
5 　　<script>
6 　　　　document.write('<script src="other.js"></scr' + 'ipt>');
7 　　</script>
8 　　<div>Hi again!</div>
9 　　<script src="last.js"></script>

复制代码
解析器发现了last.js，但是由于预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，所以last.js会被立即执行。之后，浏览器会收到渲染请求“Hi again”也被显示在了页面上。

通过前后两种情况的对比，希望大家可以对页面的渲染有一定的了解，然后再有针对性的做一些优化。

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础渲染代码

今天分享下”前端基础渲染代码“，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。在我们从互联网上获得HTML的相对应字节数时，DOM树就逐渐构建了。由浏览器更新UI的进程承担。当碰到下列情形时，DOM树的构建会被阻塞：HTML的回应流被阻塞在了互联网中有未载入完的脚本制作碰到了script节点，可是这时也有未载入完的样式文档渲染树构建自DOM树，而且会被样式文档阻塞。因为是根据单核的事情轮循，即便沒有脚本制作和样式
复制链接

扫一扫