對於提公升頁面效能這個老生常談的話題，其實仔細研究起來，或多或少還是能充實自己的知識儲備。
這裡主要說的是瀏覽器渲染這塊，其他的http請求傳輸這塊又是另外乙個提公升效能方向了。
從瀏覽器得到頁面開始：
不同的瀏覽器核心，對渲染執行可能不同
1.解析html，生成dom tree
2.解析css,生成style rules樣式規則
3.js檔案操作dom api和css api來操作dom tree和css rule tree
4.css rule tree 對映dom tree來生成render tree，render tree是由包含有顏色和大小等屬性的矩形組成
5.計算各個座標，然後使用gui開始畫
當dom尺寸發生變化時，會發生reflow。也就是下圖中的layout階段，會重新計算座標，繪製render tree
reflow 和repaint的區別（可以參考
下圖是webkit的主流程：
下圖是 geoko 的主流程：
對比兩者，發現主流程基本相同，不同的是webkit中dom tree和css rules 對映生成render tree的過程
為attachment。
在geoko中則是frame constructor 並且稱呼為frame tree
個人理解的大致流程就是如上所述的，對於更深入的如何解析，如何對映，如何生成渲染樹。可以參考（
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...
瀏覽器渲染原理
瀏覽器中輸入url到頁面返回的全過程 根據網域名稱，進行dns網域名稱解析 拿到解析的ip位址，建立tcp連線 向ip位址傳送http請求 伺服器處理請求 返回響應結果 關閉tcp連線 瀏覽器解析html 瀏覽器布局渲染 通過url向伺服器傳送請求,web服務端返回html文字 字串 拿到 後，瀏覽...
瀏覽器渲染原理
1.http請求階段 2.http響應階段 3.瀏覽器渲染階段 瀏覽器渲染頁面的機制和原理 程序 process 乙個程式就是乙個程序 執行緒 thread 棧記憶體 stack 用來提供環境 客戶端 瀏覽器 瀏覽器核心 拿到 後，瀏覽器在記憶體條中開闢出一塊棧記憶體，用來給 的執行環境，同時分配乙...