关注前端开发微信微信号web007007

浏览器渲染原理

作者 管理员 发布时间 2012-10-11 12:01 文章分类 前端文档 文章评论 2条评论 阅读次数

基本概念

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(回流))。

浏览器渲染原理-WEB前端开发网

reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

 

当然,reflow 问题是可以优化的,我们可以尽量减少不必要的 reflow。比如开头的例子中的 <img> 图片载入问题,这其实就是一个可以避免的 reflow —— 给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积,在载入图片前就预留好了位置。

 

repaint(重绘)

 

另外,有个和 reflow 看上去差不多的术语:repaint,中文叫重绘。如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint。repaint 的速度明显快于 reflow(在IE下需要换一下说法,reflow 要比 repaint 更缓慢)。

本文固定链接: http://www.web92.net/768.html | WEB前端开发

该日志由 于2012年10月11日发表在 前端文档 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 浏览器渲染原理 | WEB前端开发
关键字:
  1. 程序设计是困难的,其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖,但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时,我们才能有希望正确的推理出它的效率、安全和正确性。William Strunk的《风格要素》(The Elements of Style)是关于文学风格的经典著作,它是一本关于英文写作的薄手册,在用法、组织和形式上提出忠告。风格的理念应用于编程,在1972年Kreitzberg和Shneiderman的《FORTRAN风格要素》(The Elements of FORTRAN Style)中是不成功的,但在1978年的Kernighan和Plauger的《编程风格要素》(The Elements of Programming Style)中是非常成功的:好的编程不能通过笼统的说教。学习编程的好方法是一次又一次的思考:真正的编程是如何通过一些良好实践的原则和一点常识来进行改进的。他们从他们批评和改进的其他的编程教科书中筛选程序。当我们在这里谈论风格时,我们谈论的不是潮流或者时尚,也不是CSS、布局惯例或排版。我们正在谈论的是能真正提高代码价值的表达式的永恒品质。对于公司来说,他们的评估和他们的代码是息息相关的,风格应该是一个至关重要的受关注内容。我们使用许多编程语言,但在某一方面,Javascript是最重要的,它是浏览器的语言。当人们访问我们的站点时,他们将邀请我们的Javascript程序在他们的机器中执行。我们有义务使那些程序执行好。没有好的关于Javascript编程的课本。在网页使用Javascript的大多数人学习它是通过从糟糕的书、糟糕的站点和糟糕的工具中复制相当糟糕的例子。我们这里有极好的Javascript程序员社区,但我们依旧能从较好的风格实践中获益。为了证明这个问题,我将从公共网站中抽取一些程序,展示它们如何能被改进。这并不是我有意为难任何人。我的意图仅是通过例子展示风格的价值。我不会保留任何秘密:我展示给你的是我们已经传送给世界上的每一个人。淘汰过时结构下面的例子是2005-09-19摘自www.yahoo.com: 这个脚本块用了language属性。这个特性是微软为了支持VBScript引入的。然而Netscape采用它是为了支持非标准偏差。W3C不采取这个language属性,倾向使用MIME类型的type属性取代。不幸的是,MIME类型未得到标准化,所以它有时是”text/javascript”、”application/ecmascript”或其他。幸运的是所有的浏览器都选择Javascript作为默认的编程语言,所以简单的写是最好的。它最小,且工作在最多的浏览器。在脚本中使用HTML的注释的时间要回溯到Netscape Navigator和Netscape Navigator 2的兼容问题上来。后者引入了标签。然而,前者的用户能像文本一样看到脚本,因为在HTML惯例中不能识别的标签被忽略。