web前端——浏览器
&& 浏览器如何渲染HTML这个问题我之前是没想过的，机缘巧合今天了解起这方面的知识。希望能对小伙伴们有所帮助。
渲染，也就是把请求的内容显示到浏览器屏幕上。
& 渲染引擎会在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）
& 为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会处理后续内容的同时把处理过的局部内容先展示出来。& &&
渲染html的顺序&
1. 下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。&
2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时下载过程会启用单独连接进行下载。&
4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。&
5. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
接下来我们举个例子来说明一下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&标题&/title&
type=&text/css& rel=&stylesheet& href=&../css/reset.css&&
&p&这是段落&/p&
&img src=&../images/arrow.jpg& alt=&这是一张图片&/&
&script type=&text/javascript& src=&../js/myjs.js&&&/script&
如上图代码所示：
1.浏览器开始载入 HTML 代码，发现 &head& 标签内有一个 &link& 标签引用外部 CSS 文件；
type=&text/css& rel=&stylesheet& href=&../css/reset.css&&
2.浏览器发出 CSS 文件的请求，服务器返回这个 CSS 文件；
3.浏览器继续载入 HTML 中 &body& 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
4. 客户端浏览器在&body&里的标签中发现一个&img&标签并且引用了服务器进而的一张名为arrow.jpg的图片。浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载&img&标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。
&img src=&../images/arrow.jpg& alt=&这是一张图片&/&
5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
6. 把body里的标签加载及渲染完后，浏览器又发现了JavaScript 代码的 &script& 标签，赶快运行它。
&script type=&text/javascript& src=&../js/myjs.js&&&/script&
7. 浏览器又立刻向服务器发出请求加载myjs.js文件，服务器响应。
8. 浏览器在myjs.js文件中发现了一段代码是让&div&标签隐藏的代码（style.display=”none”），此时浏览器又要重新去重新渲染这部分被隐藏代码。
9. 最后到浏览器发现了&/html&为止。
到这里浏览器的渲染任务就算完成了。接下来我们来讲讲两个词“回流”和“重绘”。
reflow（回流）
浏览器要花时间、花精力去渲染页面，当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。&
reflow 几乎是无法避免的。只要引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。 当 然，reflow 问题是可以优化的，我们可以尽量减少不必要的 reflow。比如例子中的 &img& 图片载入问题 —— 给图片设置宽度和高度就可以避免的 reflow。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
repaint（重绘）
repaint，中文叫重绘。如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：686次
排名：千里之外浏览器加载和渲染html的顺序
浏览器加载和渲染html的顺序
编辑：www.fx114.net
本篇文章主要介绍了"浏览器加载和渲染html的顺序"，主要涉及到浏览器加载和渲染html的顺序方面的内容，对于浏览器加载和渲染html的顺序感兴趣的同学可以参考一下。
前阵子，在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享，这里再总结一下吧。
浏览器加载和渲染html的顺序
1.&IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2.&在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
5. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
1.&不能并行下载和解析（阻塞下载）。
2.&当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有
代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修
改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.
如何加快HTML页面加载速度
1.&页面减肥：
a. 页面的肥瘦是影响加载速度最重要的因素。
b. 删除不必要的空格、注释。
c. 将inline的script和css移到外部文件。
d. 可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥。
2.&减少文件数量：
a. 减少页面上引用的文件数量可以减少HTTP连接数。
b. 许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。
3. 减少域名查询：
a. DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好。
4. 缓存重用数据：
a. 对重复使用的数据进行缓存。
5. 优化页面元素加载顺序：
a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载HTML相关的东西，像什么不是最初显示相关的图片、flash、视频
等很肥的资源就最后加载。
6. 减少inline JavaScript的数量：
a. 浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大。
b. 不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容。
7.&使用现代CSS和合法的标签：
a. 使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片。
b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥。
8.&Chunk your content：
a. 不要使用嵌套table，而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table，这样就不需要等到整个页面（或
大table）内容全部加载完才显示。
9.&指定图像和table的大小：
a. 如果浏览器可以立即决定图像或table的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作。
b. 这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。
c. image使用height和width。
HTML页面加载和解析流程
1.&用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2. 浏览器开始载入html代码，发现&head&标签内有一个&link&标签引用外部CSS文件。
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
4. 浏览器继续载入html中&body&部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
5. 浏览器在代码中发现一个&img&标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了一个包含一行Javascript代码的&script&标签，赶快运行它。
8.&Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个&style&（style.display=”none”）。杯具啊，突然就少了这么一个元
素，浏览器不得不重新渲染这部分代码。
9.&终于等到了&/html&的到来，浏览器泪流满面……&
10.&等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。
11.&浏览器召集了在座的各位&div&&span&&ul&&li&们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，
重新渲染页面。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：前阵子，在组内给大家做了一次关于&浏览器加载和渲染HTML的顺序&的分享，这里再总结一下吧。
1.浏览器加载和渲染html的顺序
浏览器加载和渲染html的顺序
IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载
样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
JS、CSS中如有重定义，后定义函数将覆盖前定义函数
2. JS的加载
不能并行下载和解析（阻塞下载）
当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.
3.如何加快HTML页面加载速度
页面减肥。页面的肥瘦是影响加载速度最重要的因素删除不必要的空格、注释。将inline的script和css移到外部文件，可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥
减少文件数量。减少页面上引用的文件数量可以减少HTTP连接数。许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了
减少域名查询。DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
缓存重用数据。使用缓存吧
优化页面元素加载顺序。首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载DHTML相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
减少inline JavaScript的数量。浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大，不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
使用现代CSS和合法的标签。使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片，使用合法的标签避免浏览器解析HTML时做&error correction&等操作，还可以被HTML Tidy来给HTML减肥
Chunk your content。不要使用嵌套tables
指定图像和tables的大小。如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作，这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。
根据用户浏览器明智的选择策略。IE、Firefox、Safari等等等等
页面结构的例子
4.HTML页面加载和解析流程
用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=&none&）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了＜/html＞的到来，浏览器泪流满面&&
等等，还没完，用户点了一下界面中的&换肤&按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，&大伙儿收拾收拾行李，咱得重新来过&&&，浏览器向服务器请求了新的CSS文件，重新渲染页面。
5.Yahoo对网页设计性能的建议，个人感觉是说得非常好的。
英文版：/performance/rules.html
中文翻译：/smjack/archive//1396895.html
原文链接：
阅读(...) 评论()3406人阅读
前阵子，在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享(PS:这前面html几个字在51testing上可能展示有点问题)，这里再总结一下吧。
1.浏览器加载和渲染html的顺序
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数
2. JS的加载
2.1 不能并行下载和解析（阻塞下载）
2.2 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.
3.如何加快HTML页面加载速度
1，页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥
2，减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了
3，减少域名查询
DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
4，缓存重用数据
使用缓存吧
5，优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6，减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
7，使用现代CSS和合法的标签
使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥
8，Chunk your content
不要使用嵌套tables
而使用非嵌套tables或者divs
&table&...&/table&
&table&...&/table&
&table&...&/table&
&table&...&/table&
&table&...&/table&
&table&...&/table&
将基于大块嵌套的tables的layout分解成小tables，这样显示时不用加载整个页面(或大table)的内容
9，指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
10，根据用户浏览器明智的选择策略
IE、Firefox、Safari等等等等
11，页面结构的例子
· LINK ...
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
· SCRIPT. ...
JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
· SCRIPT. ...
Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down
the initial appearance of the page load.
Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
If any images are used for rollover effects, you should preload them here after the page content has downloaded.
4.HTML页面加载和解析流程
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文件，重新渲染页面。
5.Yahoo对网页设计性能的建议，个人感觉是说得非常好的。
英文版：/performance/rules.html
中文翻译：/smjack/archive//1396895.html
参考资料：
/blog/133384
/liuzhantao/blog/.html
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：27746次
排名：千里之外
(1)(1)(6)(4)