主要分為兩種，在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)）
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）相同
瀏覽器渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...
瀏覽器渲染機制
1.什麼是doctype及其作用 dtd document type definition，文件型別定義 是一系列的語法規則，用來定義xml或 x html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析及切換瀏覽器模式 doctype是用來宣告文件型別和dtd規範的，乙個主要的用途...
瀏覽器的渲染機制
節選自 1 dom document object model，瀏覽器將html解析成樹形的資料結構，簡稱dom。2 cssom css object model，瀏覽器將css 解析成樹形的資料結構。3 dom 和 cssom 都是以bytes characters tokens nodes ob...