[浏览器]浏览器是怎么渲染页面的？

bluesGavin
847 阅读6分钟

前言

最近在整理一些知识点，自己在回顾的过程尝试写文章记录整理。如果有理解不对的地方，感谢大神们可以指出。

为什么提到前端就一定要讲浏览器？

前端这个岗位的出现最根本的原因是互联网的出现，浏览器是最早互联网的唯一入口。人们通过浏览器浏览各种不同网站的内容。这些内容来自服务器中，但浏览器从服务器拿到这些内容之后，应该怎么展示给用户，这就是前端的职责。所以，最早的时候前端工作者本质上做的是告诉浏览器怎么展示数据。

为什么我们要关心浏览器的版本？

当然，用户最终可以看到怎样的页面（页面的炫丽层度）很大程度取决于浏览器的功能支持。可以理解为，我们通过代码告诉浏览器怎么做的同时，浏览器能听懂多少才是决定这段交流最后有效程度的最短木板。因此，在早期浏览器的兼容问题，是前端最大的困扰。市场上流通着各种不同厂商，不同版本的浏览器。而每个浏览器他们的对页面语言（HTML）的理解能力不同，因此如果想要一个产品的页面在不同浏览器上可以展示同样的效果，前端工程师就必须要为每个浏览器做兼容处理。

HTML

跟所有的编程过程一样，如果想要让开发者能跟浏览器交流，我们就得找一种双方都能听得懂的语言。那就是HTML。HTML 中文名称是超文本标记语言 (Hyper Text Markup Language)，值得注意的是HTML 不是一种编程语言，而是一种**标记语言。 **在编写时会发现他跟平常的编程语言不一样，他的写法全是通过标签，来阐述页面的结构的。

如果想学习更多HTML的知识可以看：www.w3school.com.cn/html/index.…

以下是一段html写法例子：

<html>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落。</p>
	</body>
</html>

CSS

HTML只能用来阐述页面内容的结构，大致位置。而我们通常会希望页面能有更多丰富的颜色，形状等。这就是CSS的工作了。CSS 中文名称是层叠样式表* (Cascading Style Sheets)。

如果想学习更多CSS的知识可以看：如果想学习更多HTML的知识可以看：www.w3school.com.cn/html/index.…

以下是一段css写法例子：

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Javascript

有了html和css之后，其实页面的渲染已经是可以完成了的，但随着对页面的交互，功能等体验的追求提高。市场需要浏览器除了最直观的页面之外，加入可以即使运算的逻辑。这些逻辑表述这当用户与页面交互的时候，浏览器应该怎么反馈用户。而完成这一逻辑描述的角色就是Javascript。

Javascript跟HTML和CSS不同，它是正正经经的编程语言。这意味着他可以通过逻辑操作页面上的内容。让页面“活起来”。如果想学习更多CSS的知识可以看：如果想学习更多HTML的知识可以看：www.runoob.com/js/js-tutor…

以下是一段css写法例子：

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

浏览器是怎么渲染的？

我们知道了浏览器主要是通过理解HTML和CSS来进行内容渲染的，那么它渲染流程究竟是怎样的呢？

大致渲染流程图：

流程大致为：

  1. 浏览器在输入URL之后，会向目标服务器获得该页面的html等资源。
  2. 获得html浏览器会用html解析器构建一棵DOM树，
  1. 在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。
  2. JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成。
  1. DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。
  2. 接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。
  1. 最后浏览器根据这棵layout树，将页面渲染到屏幕上去。

DOM树的构建

当服务器返回页面资源给浏览器时，浏览器拿到的其实是一些字节数据。浏览器会根据HTTP请求中注明的编码方式（常见的UTF-8），解析这些字节数据，从而得到字符。

一般浏览器会有默认的编码方式，但是如果HTML的编码与页面的不一致，会导致乱码的情况。所以一般在HTML中都会用类似以下的标签明确告诉浏览器应该用什么编码方式，解析这个html内容。

<meta http-equiv="content-type"content="text/html;charset=utf-8">

得到字符之后，浏览器会对这些字符语义化得到一些信息描述的tokens。再用这些tokens创建一个个的节点。浏览器对html的解析是从html文件的头到尾进行的，期间如果遇到了css或者js代码，浏览器会先用css解析器或者js解析器处理，处理完之后再继续用html解析剩下的html内容，一直到html文件的尾部。这个dom树就算构建成功了。

CSSOM的构建

cssom也有人叫css树，他的构建过程更dom树相似，也是从字节数据——字符——tokens信息——node节点——cssom这样的流程。

生成Render树

DOM树记录这页面节点的空间位置，结合css树，生成一课render树，详细记录着各个节点的形状，位置等信息。render树会把一些不可见的节点，忽略。

绘制页面

得到render树之后，还有一个步骤，就是用render树的信息，得到一个浏览器绘制真正的理解的layout（布局）。浏览器会根据layout调用gpu，绘制页面上的像素。

回流（reflow）与重绘（repaint）

这2个步骤都发生在页面已经渲染完成后。当元素的内容、结构、位置、或尺寸发生了变化，需要重新计算元素样式的过程就是回流。当元素的样式（背景色、边框颜色、文字颜色等）发生变化，需要重新绘制元素的过程就是重绘。

注意回流之后一定会触发重绘，但重绘代表着页面触发了回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。

avatar
文章
阅读
粉丝