1、瀏覽器渲染原理
2、瀏覽器渲染過程
（1）渲染引擎解析html生成dom樹（讀取html,將位元組轉換成字元，確定標籤，再將標籤轉換成節點，以節點構建dom）
（2）解析css樣式成css規則樹（讀取css檔案，將位元組轉換成字元，確定標籤，將標籤轉換成節點，構建css規則樹）
（3）根據dom樹和css規則樹生成渲染樹（render tree）（一邊載入、一邊解析、一邊渲染）
（4）對渲染樹進行布局處理，確定顯示的位置
（5）遍歷渲染樹將每個節點繪製出來
載入js:解析時遇到js,會阻塞dom樹的構建，優先js引擎解析js後才會繼續構建dom。原因是js會對dom節點進行操作，瀏覽器為了防止無效操作，節省資源，只能阻塞dom樹構建。
若在html頭部載入js,會影響頁面的首繪，為了加快頁面渲染，一般將js放到html底部載入。
3、關鍵渲染路徑詳述
關鍵渲染路徑：瀏覽器將html、css、js等資源，解析、構建、渲染、繪製、最後呈現給使用者看到介面的整個過程。
4、dom樹與渲染樹的關係
dom樹是html解析構建的，渲染樹是dom樹和css規則樹一起生成的。渲染樹與dom樹不完全對應
dom樹與html標籤是一一對應的關係，包括隱藏元素(dispaly:none)、head、visibility:hidden的元素
渲染樹不包括head和隱藏元素（dispaly:none），visibility:hidden是存在。
5、css會阻塞dom解析嘛？
但是css會阻塞渲染樹的渲染，因為渲染樹是依賴css規則樹的樣式。
6、回流與重繪
回流（reflow）：重排，當節點發生改變，影響了節點的幾何屬性（如寬、高、內邊距、外邊距、float、position、display:none）,導致節點位置發生變化，需要重新生成渲染樹。
重繪（repaint）：節點 發生改變，不影響空間位置和大小，只是一些背景顏色、字型顏色等變化，會觸發重繪。
回流一定會觸發重繪，重繪不一定會觸發回流。
7、避免回流的方式
（1）避免逐個修改樣式，盡量一次修改
（2）可以將多次修改的dom元素設定display:none，操作完再顯示
（3）避免多次讀取某些屬性
（4）讓元素脫離動畫流，減少回流
（5）讓要操作的元素離線處理，處理完後一起更新
（6）避免使用table布局
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...
瀏覽器渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...
瀏覽器渲染過程
瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹，不...