-
用户输入网址，浏览器向服务器发出请求，服务器返回html文件；
-
浏览器开始载入全部的html代码，发现
<head>标签内有一个<link>标签引用外部CSS文件，浏览器又发出CSS文件的请求，服务器返回这个CSS文件； -
浏览器继续载入html中
<body>部分的代码，并且CSS文件已经拿到手了，开始边解析DOM变渲染； -
浏览器在代码中发现一个
<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； -
浏览器继续执行时，发现刚刚请求的图片文件返回了，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
-
浏览器发现了一个包含一行Javascript代码的
<script>标签，赶快运行； -
浏览器发现了两个个包含外部引用的
<script>标签，请求并运行，发送了第一个js请求之后不是阻塞，而是会继续发送第二个JS的外部链接请求，结果出现了意外，第二个js的内容先返回了，这时候浏览器不会执行第二个js的代码，而是会等第一个js的代码返回执行后才执行第二个js的代码； -
浏览器发现了一个
<script>外部标签，但是包含了async属性，说明是一个异步请求的js，发送请求但是不必等返回执行； -
在Javascript中，脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个
<div>（style.display=”none”）。杯具，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码； -
终于等到了
</html>的到来，这次渲染终于完成了，触发DOMContentLoaded事件（jQuery中的$(document).ready();方法）。 -
等待所有的图片资源、异步加载的JS文件请求完成了，浏览器赶紧触发了
onload事件。
另外经过测试（chrome），在onload事件以前，浏览器标题的loading图标都会一直存在。
为方便查看，写了一个小小的测试Demo，为模拟模拟请求的不同延时，页面打开大概需要20s，打开Condole查看。
http://www.eamonning.com/demo/htmlRender/
网友评论