从浏览器渲染原理,浅谈回流重绘与性能优化
[TOC] 前言 “回流(重排)”和“重绘”基本上算是前端的高频词之一,你可以在各个文章及面试题中见到,我们在讨论这个词的时候,其实讨论的是浏览器的渲染流程。 所以在讨论“回流重绘”之前,我们还需要掌握一些知识;在它之中,我们还需要更深入一点;在这之后,我们还要懂得怎么去把理论结合到项目实践中去。 通过这篇文章,你可以学习到的知识: 1、追本溯源,“回流”和“重绘”这个词是如何引出的,在了解这两个词之前我们还需要了解什么 2、浏览器的渲染流程,“回流”和“重绘”的原理 3、优化浏览器渲染性能,减少“回流”和“重绘”,动手将这些优化应用到实际开发中 浏览器的渲染引擎 浏览器的主要组件有:用户界面、浏览器引擎、渲染引擎、网络、用户界面后端、JavaScript解释器、数据存储。 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。浏览器在解析HTML文档,将网页内容展示到浏览器上的流程,其实就是渲染引擎完成的。 渲染流程 我们在这里讨论Gecko和Webkit这两种渲染引擎,其中Firefox 使用的是 Gecko,这是 Mozilla 公司“自制”的呈现引擎。而 Safari 和 Chrome 浏览器使用的都是 WebKit。 WebKit 渲染引擎的主流程: Mozilla 的 Gecko渲染引擎的主流程: 从图 3 和图 4 可以看出,虽然 WebKit 和