Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了</html>的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
求了新的CSS文件，重新渲染页面。
浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。
reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。
分享到：
相关推荐
1.1 浏览器中的5个进程（浏览器、插件、渲染、网路、前四个一个页面打开必备、GPU） 1.2 浏览器发送 HTTP 请求的流程（B/S模式）（注意：http协议是基于tcp/ip协议的，http协议是应用层协议，tcp/ip协议是通信层协议...
FOUC (Flash of Unstyled Content) 无样式内容闪烁如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签
我们将来学习浏览器渲染原理这部分的知识
在深入探讨"JS深度揭秘第七章-浏览器渲染原理及数据交互"这一主题之前，我们先来了解一下相关的标签和概念。"同源策略"是Web安全的核心机制，它限制了来自不同源的文档或脚本之间的交互，以防止恶意网站窃取用户信息...
浏览器原理是互联网领域里非常重要的一个知识点，它涉及到web浏览器如何解读和展示网页的原理。从提供的文件内容来看，文档主要讨论了浏览器的工作机制，特别是在不同浏览器（如Mozilla Firefox、Safari和Chrome）间...
详细介绍浏览器接收请求，到响应过程中每一步实现，了解浏览器的工作原理
浏览器原理
### 浏览器工作原理与实践 #### 一、引言 随着互联网技术的迅猛发展，浏览器作为连接用户与互联网世界的桥梁，其重要性日益凸显。本文将从一位资深从业者的角度出发，深入剖析浏览器的工作原理及其在实际开发中的...
### 浏览器工作原理浅析 #### 一、引言 现代互联网的发展离不开浏览器，作为用户与万维网交互的重要工具，了解浏览器的工作原理对于前端开发者和网站工程师至关重要。本文将详细介绍浏览器的主要组成部分及其工作...
### 浏览器工作原理详解 #### 一、引言 随着互联网的普及与发展，浏览器已成为我们日常生活中不可或缺的一部分。本文旨在深入剖析浏览器的工作机制，帮助读者更好地理解从输入URL到网页完整展示这一过程背后的复杂...
渲染流程就是浏览器展示页面的流程，在这个流程里，浏览器通过获取到服务端返回的HTML、CSS和JS等静态资源进行处理并展示出页面，这里经过的流程按时间线分的话有：构建DOM树、样式计算、布局阶段、分层、绘制、分块...
### 前端必读：浏览器工作原理 #### 一、引言 浏览器作为现代互联网生活中不可或缺的一部分，其背后的工作机制对于理解Web开发至关重要。本文将深入探讨浏览器的基本原理，从用户输入URL到最终页面展示的整个过程...
从用户输入URL到浏览器渲染出页面的整个流程中，浏览器需要完成多个步骤的工作。具体来说： 1. 解析地址并发送HTTP请求获取页面数据。 2. 解析返回的HTTP响应内容，区分内容类型。 3. 通过渲染引擎进行内容解析和...
为此，需要了解H5动画的实现方式、浏览器渲染原理、CSS动画的优点和问题，以及解决CSS动画性能问题的思路。 H5动画的实现方式有多种，包括setTimeout、jQuery.animate()、div.style.left="xxx"、CSS transition/...
浏览器是现代互联网交互的核心工具，其内部工作原理对于Web开发者来说至关重要。本篇文章将深入探讨浏览器的各个组件及其功能，以便更好地理解从输入URL到页面显示的整个过程。 首先，浏览器的主要功能是获取并呈现...
本资源是本人在学习浏览器工作原理的过程中，无意间在GitHub上找到的...内容包括浏览器的基本结构、渲染引擎、渲染树、布局、绘图、浏览器引擎的线程等内容。分享出来，希望对想要了解浏览器工作原理的朋友有一点帮助。
讲述了浏览器的工作原理，中英文对照版，从组成，到解析，渲染等过程都有。