前端面试-浏览器渲染机制

68 阅读 0 评论 45 点赞

我是靠谱客的博主悦耳月光，最近开发中收集的这篇文章主要介绍前端面试-浏览器渲染机制，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在开发WEB应用整一个流程中，用户体验通常都会被提及，而网站的性能，又是与用户体验直接挂钩，因此可以在项目需求规格文档中经常看到项目对性能的需求。

WEB性能优化常见的入手点包括以下几点：

1、 HTTP请求

2、服务器响应速度

3、浏览器响应速度

其中浏览器响应速度包括渲染速度和代码执行的速度。

而本篇文章的目标主要集中在第三点，先整体了解一下浏览器的渲染机制，再通过这个机制有效地改善浏览器的渲染速度。

一、所使用的工具

C++之父曾在The Design AndEvolution Of C++一书中说到，在某一方面中没有合适工具之前是不会去攻克那一方面的难题的。

这里我们所使用的观察工具是谷歌的浏览器chrome所带的开发者工具与FF的开发者工具。

二．浏览器渲染的整个流程

浏览器的整个流程如上图所示。

1、首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

2、然后浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。

3、在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。

4、 JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成。

5、 DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。

6、接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。

7、最后浏览器根据这棵layout树，将页面渲染到屏幕上去。

三、DOM树的构建过程

DOM构建的过程如上图所示。

1、当服务器返回一个HTML文件给浏览器的时候，浏览器接受到的是一些字节数据。

2、然后浏览器根据HTTP响应中的编码方式（通过是UTF8），解析字节数据，得到一些字符。如果这个时候编码方式跟文件的字节编码不一致，便会出现乱码。所以我们通过使用<meta http-equiv="content-type"content="text/html;charset=utf-8">来告诉浏览器我们页面使用的是什么编码。

3、这个时候，浏览器再根据DTD中的对元素（标签）的定义，对这些接受到的字符进行语义化(token)。我们经常在html文件的第一行，定义<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这个DTD就是告诉浏览器，那些字符是有意义的，那些字符是无意义的。DTD常见的有严格、过渡、框架和HTML5三种。不同的DTD中，有不同的元素定义。比如过渡的DTD中就比严格的DTD中多出了<center>、<font>等等一些元素的定义，也就是说使用严格的DTD，即使你在你的HTML文件中使用了<center>，浏览器也会忽略掉的。所以也就有了一些人使用不同的DTD或者不使用DTD的时候，布局会明显不同的原因了。

4、接着，浏览器再使用这些语义块(token)创建对象，形成一个个节点了。

5、然后HTML解析器就会从HTML文件的头部到尾部，一个个地遍历这些节点。当这些节点是普通节点的话，HTML解析器就会将这些节点加入到DOM树中。当这些节点是JS代码的话，HTML解析器就会将控制权交给JS解析器。如果这些节点是CSS代码的话，HTML解析器就会将控制权交给CSS解析器。不过，当外联的JS代码和CSS代码还没从服务器传到浏览器的时候，这个时候如果DOM树上有可视元素的话，浏览器通常会选择在这个时候，将一些内容提前渲染到屏幕上来。

6、当HTML解析器读到最后一个节点的时候，整个DOM树也构建完成了，这个时候就会触发domContentloaded事件。而很多JS库（像JQ）通常会在这个时候有所反应的。

至此，DOM树就全部构建完成了。

码了这么多字，今天就更新到这里，等改天有时间，再把剩下的给码上来！！