html加载顺序以及影响页面二次渲染额的因素

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

浏览器请求发往服务器以后，返回HTML页面，页面内容开始渲染，具体的执行顺序为：

1. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件。

2. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。

3. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。

4. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。

6. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它。

7. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<style>（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。

8. 终于等到了</html>的到来，实数不容易呀。。。

9. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。

10. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

总结：

1> 影响页面二次渲染的原因

img：图片未加载完的时候，HTML会继续渲染，当图片加载完以后需要重新渲染图片的这部分内容。

display:none：内置样式也会影响加载，原来已经加载完成的元素需要隐藏重新渲染其他的元素排版。

2> 页面文件引用顺序

1.总的来说就是按照html文档的顺序加载

2.为了增加页面的额加载速度，应该把样式文件放在header中，把js文件放在所有的HTML内容之后加载，这样不至于在加载完多有的js文件之后再去加载html文件出现的浏览器的空白区。