html5渲染,HTML的渲染过程

页面的渲染有以下特点：

单线程事件轮询

定义明确、连续、操作有序(HTML5)

分词和构建DOM树

请求资源并预加载

构建渲染树并绘制页面

具体来说：

当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：

HTML的响应流被阻塞在了网络中

有未加载完的脚本

遇到了script节点，但是此时还有未加载完的样式文件

渲染树构建自DOM树，并且会被样式文件阻塞。

由于是基于单线程的事件轮询，即使没有脚本和样式的阻塞，当这些脚本或样式被解析、执行并且应用的时候，也会阻塞页面的渲染。

一些不会阻塞页面渲染的情况：

定义的defer属性和async属性的

没有匹配的媒体类型的样式文件

没有通过解析器插入script节点或样式节点

下面，通过一个例子来说明一下(完整的代码)：

Hi there!

6 　　　　document.write('

7 　　8

Hi again!

9 　　10 11

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

Hi there!

首先，解析器遇到了example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，但是解析器并没有被阻塞，继续往下解析。接下来，解析器遇到script标签，但是由于样式文件没有加载下来，阻塞了该脚本的执行。解析器被阻塞住，不能继续往下解析。

渲染树也会被样式文件阻塞，所以这时候没有浏览器不会去渲染页面，换句话说，如果example.css文件下载不下来，Hi there! 是显示不出来的。

接下来，继续。。。

Hi there!

document.write('

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

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

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

Hi there!

6 　　　　document.write('

7 　　8

Hi again!

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

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

在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描

查找那些将来可能能够用到的资源文件的url

在渲染器使用它们之前将其下载下来

但是，猜测预加载不能发现通过javascript脚本来加载的资源文件(如，document.write())。

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

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

Hi there!

html5渲染,HTML的渲染过程相关推荐

mustache 渲染文本一直渲染不出来
今天在模板上页面上渲染文本但是渲染了半天,什么也没有渲染出来为什么呢,你看我前台的html页面如此: <script type="text/x-template" id= ...
【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )
文章目录一. 减少布局嵌套二. 布局渲染时间测量 1. FrameMetrics 使用流程 2. FrameMetrics 参数解析 3. FrameMetrics 代码示例三. 布局渲染优化总 ...
python 服务端渲染_客户端渲染和服务器渲染的区别
我们都知道,网页上的很多内容之所以能那么丰富,是因为大量的css.js去渲染出这个页面.那么他们是如何渲染的呢?那么就要说到我们本文的两种渲染方式了,即客户端渲染和服务端渲染. 正文本文将分别讲述两 ...
图片渲染延迟_前向渲染与延迟渲染
如果您开发过3D游戏,那么您可能会在现代图形引擎的研究中遇到术语"前向渲染"和"延迟渲染". 而且,通常,您必须选择一种在游戏中使用.但是它们是什么,它们有什么 ...
前端后分离深入分析 ——浏览器渲染和服务器渲染区别
1.为什么会有服务器渲染与客户端渲染? 首先理解服务器和浏览器客户端之间传递的是什么--HTML,CSS,JavaScript的文件以及数据载体json(xml)等文件,而文件都是静态,之所以动态是应 ...
Deferred Shading,延迟渲染（提高渲染效率，减少多余光照计算）
Deferred Shading,看过<Gems2> 的应该都了解了.最近很火的星际2就是使用了Deferred Shading. 原帖位置: http://blog.csdn.ne ...
Vue - 条件渲染与列表渲染
条件渲染 v-if v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. <div id="app"><h3 v-if="ok&q ...
服务端渲染和客户端渲染区别？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: ...
渲染除了计算机渲染有没有云训啊,80%的设计师都在用云渲染渲图，云渲染究竟怎么样？...
设计师都知道渲染的快慢主要和电脑的CPU性能有关,CPU性能太低,渲染速度就会很慢,而且在渲染的时候电脑就不能做其他事了. 与其耽搁时间,不如想想如何提高效率,所以云渲染就出现了! 云渲染,顾名思义, ...

html5渲染,HTML的渲染过程

html5渲染,HTML的渲染过程相关推荐

最新文章

热门文章