浏览器解析、渲染机制

主要分为两种，在head之间是否有外联的css

一、head标签之间有外联css

Chrome(版本：31.0.1650.63),Safari(版本：5.1.7(7534.57.2))，Firefox（24.0）（这里没有IE哦）

1、当浏览器load完一条url时就会提取页面中外联的js和css

2、浏览器开始去加载css和js(不同厂商的浏览器对静态文件并行加载的个数限制不一样)

3、当所有的css加载完成后，html开始解析执行(这个过程中，假如有外联的js位于body之前，那么浏览器就会判断这个js是否加载完成，如果已加载，那么就会执行这个js脚本，脚本执行完成后浏览器接着解析后续的dom；如果这个外联js还没加载完成，那么就悲剧了，浏览器就会block在这里等待js加载完成并且执行；所以这也是为什么在开发页面时要把外联的js放在body标签结束前加载) 

注意，IE的解析跟其他浏览器不一样，主要表现在第3点，就是IE浏览器不用等所有css都加载完成才解析dom

二、head标签之间没有外联css（在body之间引入外联的css）

1. webkit（safari，版本：5.1.7(7534.57.2)）

    当页面加载完成后，就会开始解析html，同时去下载js和css，在解析body时遇到引入外联的css，会判断该css是否已经加载，没加载的话浏览器就会block住（即后面的dom解析就会暂停），直到该css加载完成。

2. IE(7,8,9,10),解析机制同上（safari）

3. Firefox（24.0）

    解析机制跟chrome,safari,IE都不一样，在页面加载完成后，就会去解析html,不管body之间是否有外联的css引入，所以对于firefox来说，在任意地方引入css都不会阻塞dom的解析

4. Opera(20.0),Chrome（31.0.1650.63）渲染机制和第一种情况（head之间有外联css）相同

转载于:https://www.cnblogs.com/2010navy/p/3670719.html