##repaint and reflow - 重繪和回流
重繪（repaint）：螢幕的一部分重畫；
回流（reflow/layout）：需要重新計算渲染樹（render tree），可能會重新繪製整個螢幕；
回流的原因：html使用流式布局（flow based layout），如果某元件的幾何尺寸發生了變化，就需要重新布局，也就是回流。
回流的過程：從這個root frame開始遞迴往下，依次計算所有節點的幾何尺寸和位置，也有可能增加新的frame。
預防回流應當避免的操作：
增加、刪除、修改dom節點；
移動dom的位置，或者是動畫；
修改css樣式；
resize視窗（移動端沒有這個問題），或者是滾動；
修改網頁的預設字型；
display:none會觸發reflow，而visibility:hidden只會觸發repaint，因為沒有發現位置變化。
總結reflow的幾個原因：
非同步reflow/增量非同步reflow：積攢reflow或repaint的操作一次性完成。
但是如果resize視窗或者改變了預設頁面的字型會立即回流。
一些建議：
不要把dom節點的屬性值放在乙個迴圈裡面當成迴圈的變數，會導致大量地讀寫這個節點的屬性；
盡可能修改層級比較低的dom；
為動畫的html元件使用fixed或者absolute的position；
不要使用table布局，table的乙個小改動會造成整個table的重新布局；
瀏覽器總是並行載入資源
（當html解析器被指令碼阻塞的時候，解析器雖然會停止構建dom，但是仍然會識別該指令碼後面的資源）。
建議：
css優先，引入順序上css資源先於js資源；
js應該盡量少影響dom的構建；
對於css
瀏覽器會優先處理link標籤引入的資源，因此
對於js
script標籤會阻塞html解析，無論是不是內聯script。
改變阻塞模式
async和defer屬性對於內聯的指令碼都是無效的；
1. defer
延遲執行引入的js（這段js載入時html並未停止解析，過程並行）；
整個document解析完畢且defer的指令碼也載入完成之後（順序不定），在執行defer指令碼的js**，然後觸發domcontentloaded事件；
特點：
2. async
非同步執行引入的js（如果已經載入好，就會開始執行，無論此刻是html解析階段還是domcontentloaded觸發之後）；
這種方式下載入的js依然會阻塞load事件，async指令碼可能在domcontentloaded觸發之前或之後執行，但是一定在load觸發之前執行；
多個async指令碼的執行順序是不確定的
向document動態新增script標籤時，async屬性預設是true
向document動態新增link標籤時，是否阻塞渲染是根據瀏覽器的不同而表現不同的
另外，不建議採用document.write和innerhtml來新增script和link標籤。
瀏覽器底層渲染機制（筆記）
瀏覽器底層渲染機制 從伺服器獲取的是檔案流 進製編碼內容 1.瀏覽器首先把16進製制的字元資訊編譯為 字串 2.按照w3c規則進行字元解析，生成對應的tokens,最後轉化為瀏覽器內部可以識別渲染的dom節點 3.按照節點最後解析為對應的樹dom tree css tree 程序是乙個應用程式，乙個...
學習筆記 瀏覽器渲染原理
瀏覽器名稱 渲染引擎 核心 ecmascript引擎 js引擎 ie6 8 trident jscript ie3 8 chakra ie9 firefox 3.5 gecko tracemonkey chrome4 webkit v8safari4 webkit squirrelfish extr...
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...