本文探讨了浏览器如何渲染网页，包括DOM构建、CSSOM解析、渲染树创建和回流重绘过程。详细解释了重绘与回流的区别，并提供了优化渲染效率的最佳实践，如减少DOM操作、优化CSS选择器等。
今天我们讨论的话题将专注于网页渲染以及它在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的直观表示。<
最低0.47元/天 解锁文章
扫一扫
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
