清泉逐流

做着努力,等待幸福到来

浏览器如何加载渲染页面

作者:Eamonn 时间 : 2015-11-26 16:27 标签:前端 网络

  1. 用户输入网址,浏览器向服务器发出请求,服务器返回html文件;

  2. 浏览器开始载入全部的html代码,发现<head>标签内有一个<link>标签引用外部CSS文件,浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

  3. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,开始边解析DOM变渲染;

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

  5. 浏览器继续执行时,发现刚刚请求的图片文件返回了,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

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

  7. 浏览器发现了两个个包含外部引用的<script>标签,请求并运行,发送了第一个js请求之后不是阻塞,而是会继续发送第二个JS的外部链接请求,结果出现了意外,第二个js的内容先返回了,这时候浏览器不会执行第二个js的代码,而是会等第一个js的代码返回执行后才执行第二个js的代码;

  8. 浏览器发现了一个<script>外部标签,但是包含了async属性,说明是一个异步请求的js,发送请求但是不必等返回执行;

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

  10. 终于等到了</html>的到来,这次渲染终于完成了,触发DOMContentLoaded事件(jQuery中的$(document).ready();方法)。

  11. 等待所有的图片资源、异步加载的JS文件请求完成了,浏览器赶紧触发了onload事件。

另外经过测试(chrome),在onload事件以前,浏览器标题的loading图标都会一直存在。

为方便查看,写了一个小小的测试Demo,为模拟模拟请求的不同延时,页面打开大概需要20s,打开Condole查看。

http://www.eamonning.com/demo/htmlRender/


转载注明: http://www.eamonning.com/blog/view/498
» 日志标签