今天我们讨论的话题将专注于网页渲染以及它在Web开发中至关重要的作用。其实网上已经有许多谈论这个主题的文章了，但大多数文章提供的都是比较碎片化的信息，我需要查阅相当多的资料，才能完整地了解网页渲染。所以我决定写下这篇有一定综合性的文章。相信一方面能够帮助初学者了解网页渲染的原理，另一方面也能帮助有经验的同学细化巩固相关的知识结构。
不同的浏览器引擎运行起来会有些许差异，针对特定浏览器的具体内容会更加复杂。本文并不会涉及某个浏览器的底层原理，而是讨论一些通共的原则。
浏览器如何渲染网页
我们先来了解一下浏览器是如何对网页进行渲染的：
- 浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).
- 样式将被载入和解析，构成层叠样式表模型CSSOM(CSS Object Model).
- 在DOM和CSSOM之上，渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象（这在Webkit内核中被称为renderer或者渲染对象render object，在Gecko内核中被称为框架frame）。渲染树映射除了不可见元素（例如<head>或者含有display:none;的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。换句话讲，渲染树是DOM的直观表示。
- 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout.浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素（tables需要多次pass绘制，pass表示像素处理和顶点处理）。
- 最后布局完成，渲染树将转化为屏幕上的实际内容，这一步被称为绘制painting.
最低0.47元/天 解锁文章
3231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
