HTML页面加载流程

最新推荐文章于 2024-04-06 09:09:44 发布

ZhangXD_BLOG

最新推荐文章于 2024-04-06 09:09:44 发布

阅读量3.3k

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/u012054869/article/details/52417391

版权

本文详细介绍了HTML页面在浏览器中的加载和渲染过程，包括从上到下的顺序、CSS和JS的下载与解析如何影响页面渲染，以及浏览器的回流（reflow）现象。浏览器在遇到CSS和JS时会暂停页面元素的下载，导致页面渲染的延迟，而页面重构工程师的工作对于优化这一过程至关重要。

摘要由CSDN通过智能技术生成

浏览器加载显示html的顺序是按下面的顺序进行的：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。

简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：