瀏覽器加載過程
(1)、瀏覽器通過DNS獲取域名對應IP
(2)、建立TCP連接
(3)、發送http請求
(4)、html邊下載邊渲染
(5)、碰到內嵌JS 和 CSS，啓動新的連接下載，阻塞渲染和JS執行(因此要把腳本放後面)
(6)、獲取到CSS後，重新渲染
(7)、JS按標籤順序下載並執行
(8)、碰到內嵌img，啓動新的連接下載，不會阻塞渲染
(9)、獲取到img後，重新渲染
DNS: (1)客戶機向本地域名服務器dns.company.com發出解析域名www.linejet.com的請求報文。 (2)本地域名服務器查詢本地緩存, 假設沒有該紀錄, 則向根域名服務器NS.INTER.NET發出請求。 (3)根域名服務器查詢本地記錄得到如下結果：linejet.com NS dns.linejet.com （表示linejet.com域中的域名服務器爲dns.linejet.com)
渲染
1、HTML代碼轉化成DOM
2、CSS代碼轉化成CSSOM（CSS Object Model）
3、cascade級聯DOM和CSSOM，生成一棵渲染樹（包含每個節點的視覺信息）
4、生成佈局（layout），即將所有渲染樹的所有節點進行平面合成
5、將佈局繪製（paint）在屏幕上
頁面發生變化時，要重新渲染reflow（重新生成佈局並繪製）。有元素位置發生變化或滾動時，需要重排並重繪。元素位置都沒發生變化時，只需重繪repain。
瀏覽器會將幾個連續的改變累積起來，再一次重新渲染，以減少重新渲染的次數。
腳本讀取位置，尺寸等信息時，瀏覽器不得不把之前累積的變化，重新渲染一次，再返回最新的位置和尺寸。
優化
1、讀取位置和尺寸的腳本最好放在一起，不要與改變頁面的腳本穿插
2、緩存位置和尺寸信息， 不要重複讀取
3、對離線DOM 操作完後，再加入DOM樹。不用加入後再操作。
4、對DOM的複雜改變，可以先隱藏，再操作，再顯示
5、position屬性爲absolute或fixed的元素重排開銷較小，動畫最好設置在它們身上
6、window.requestAnimationFrame(function(){寫操作}) ，把這次寫操作放到下一次渲染
7、儘量避免寫在HTML標籤中寫Style屬性，會阻塞渲染
加載完成
當 HTML 文檔解析繪製完成就會觸發 DOMContentLoaded，而所有資源（圖片和非阻塞腳本）加載完成之後，load 事件纔會被觸發。
另外需要提一下的是，我們在 jQuery 中經常使用的 $(document).ready(function() { // ...代碼... }); 其實監聽的就是 DOMContentLoaded 事件，而 $(document).load(function() { // ...代碼... }); 監聽的是 load 事件。
在chrome network 左下方能看到，打開overview能看到兩條對應的線