html渲染顺序和优化

博客已经迁移到http://www.cnblogs.com/sundjly/

转载今日头条的阳光无名者     （如有侵权删除）

html渲染顺序：

（1）下载和渲染顺序从上到下。下载渲染同时进行

（2） 遇到语义解释性标签嵌入文件（图片，css样式），IE下载过程会启用单独链接进行下载

（3）样式表css文件下载完成后会和以前样式表一起解析，重新渲染

（4）JS，CSS如果有重定义，后定义函数覆盖前定义函数

js加载：

    （1）不能并行下载和解析（阻塞下载）。

    （2）当引用了JS时候，浏览器发送1个JS request就会一直等待该request返回。因为浏览器需要一个稳定的DOM树结构，而JS中有可能有改变DOM树的代码，如插入节点appendChild，document.write或者location.href等

所以，js可以异步加载，也可以写在html文档的最下面。

加快HTML页面加载速度：

1.页面减肥： 

a.删除不必要的注释和空格

b.将inline（内嵌：写在HTML内）css，js外链的形式导入

c.HTML Tidy工具检查HTML

2.减少文件数量

a.减少页面上引用的文件数量减少http连接数

b.js、css文件能合并就合并

3.减少域名查询：DNS查询和解析域名也需要消耗时间，减少对外部js、css、图片资源的引用，不同域名使用越少越好

4.缓存重用的数据

5.优化页面加载顺序：首先加载页面最初显示的内容和与之相关的js和css，然后加载html相关的东西（最初不显示的图片、flash、视频等）

6.减少inline---js的数量

7.使用合法的css标签

8.不要使用嵌套table

浏览器详细加载解析html：

1.用户输入网址发送请求

2.浏览器开始载入html代码，发现标签有一个标签引用外部css文件

3.浏览器发出加载该css文件的请求，服务器返回这个css

4.浏览器继续载入html中部分代码，并且css文件下载好了，开始渲染页面

5.浏览器在代码中发现一个标签引用一张图片，向服务器发出请求，浏览器不等图片下完，而是继续渲染后面的代码

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

7.浏览器发现一个包含一行js代码的