简要说明html5中页面是如何加载渲染的

网络延时

当你在浏览器栏敲入url回车或者点击一个链接的时候，你的终端（笔记本，台式机或者手机）会连接到因特网上，不管你的网络商是移动，联通电信还是宽带通……台式机还好一些，因为你一打开电脑就能上网，但如果你手机上网，那就需要连接一个离你最近的蜂窝站，告诉它你需要上网，理想情况下，如果这个蜂窝站连的人不多，你上网还比较顺畅，但在大城市中，同时打开手机上网的人总是非常多（看看地铁上的低头族就知道了），那么这个蜂窝站总是很忙，那就只能悲催的排队等候了，这样上网就会很慢，延时很大。4G网络要比3G快很多

DNS请求

一旦建立连接，浏览器会发送一个请求到DNS（Domain Name System）,负责将URL转换为实际的IP地址，这样浏览器就知道去哪里查找主机对应的网站

重定向

有时候DNS会在告诉你IP之前，有可能会将请求重定向为新的url，举个栗子：你请求www.badu.com的时候，DNS有可能为你重定向为另外的一个www.cadu.com。这涉及到性能，因为任何的重定向会增加加载过程的时间。重定向不仅会发生在不同domain之间，也可能发生在同一站点的子域名。更复杂的情况有可能会有多重重定向来定位实际的站点。这会增加页面加载时间。

HTTP请求

一旦浏览器找到服务器的IP地址，就会向服务器发送http请求，也会在请求头增加一些关键属性。栗如user agent，来告诉服务器请求者的操作系统以及浏览器。如果服务器知道请求来自于移动端，它可能会发送一个mobile版本的页面而不是常规的desktop的页面。栗如m.jd.com.

发送HTML文件

服务器收到http请求之后，会发送一个响应，通常是html页面以及携带的响应头。响应头包含额外的信息。栗如是否允许浏览器缓存资源，以及缓存多长时间

解压

客户端发送请求的时候就要告诉服务器浏览器可以接受什么格式的压缩文件(栗如gzip)。这样，服务器传送给client的html，css以及js文件会用gzip压缩，这样客户端的下载会更快，一旦接受到这些文件，浏览器会立马解压。

DOM

接下来浏览器会解析html文档，创建文档对象模型（DOM），最后DOM代表了要显示的整个页面。然而如果你的js脚本事件改变的页面的内容，那么改变将会作用到DOM而不是html。

渲染head

一旦DOM准备好之后，浏览器就会开始渲染HTML文档，每次一个元素，首先是head元素

外部资源

如果有css或者javascript文件，它会加载文件

并行加载

每个外部的文件连接（css或js）都需要一个单独的http请求，现在浏览器可以同时加载多个资源文件，但这个并行是有限制的。若浏览器缓存了资源（图片，js，css等），就不必要从服务器再请求了，具体的缓存策略看服务器的规定。

单线程执行

js脚本是单线程执行的，意味着浏览器同时只能执行一个文件。按照脚本在页面放置的先后顺序，包括以script标签的内联文件和外部资源文件，此时用户可能看到空白页，因为此时页面还没渲染，用户看不到任何东西。所以尽可能将js放置在页面底部，以加快页面渲染速度，给用户更好的体验。

渲染body

接下来渲染body，浏览器会至上而下渲染每个元素，这时会需要css样式来计算每个元素的大小位置颜色等性质。

加载HTML 图像

浏览器碰到img元素时，会首先加载图像文件，对大文件会花比较长的时间加载，如果指定了高度和宽度，在没加载完成前，用户看到的是一个白框。响应式设计中没必要指定宽高，因为图像有可能不同，尺寸依赖于viewport的宽度而定。

加载背景图

浏览器在css中碰到背景图时，会从url加载对应的图片

javascript

在body中碰到javascript时，浏览器的渲染会暂停，以执行脚本。脚本执行完之后接着渲染

onload事件

在所有的页面元素加载和渲染完成之后，document会执行onload的javascript函数，onload意味着只要页面一完成加载就会被触发。