網頁生成過程，大致可以分成五步
1. html**轉化為dom
2. css**轉化成cssom（css object model）
3. 結合dom和cssom，生成一棵渲染樹（包含每個節點的視覺資訊）
4. 生成布局（layout），即將所有渲染樹的所有節點進行平面合成
5. 將布局繪製（paint）在螢幕上
在這五步裡面，第一步到第三部都非常快，第四步和第五步很耗時。
網頁生成的時候，至少會渲染一次。而我們需要關注的是使用者訪問過程中，那些會導致網頁重新渲染的行為：
· 修改dom
· 修改樣式表
· 使用者事件（例如滑鼠懸停，頁面滾動，輸入框輸入文字等）
重新渲染，就涉及重排和重繪重排（reflow）即重新生成布局，重排必然導致重繪，如元素位置的改變，就會觸發重排和重繪。
重繪（repaint）
即重新繪製，需要注意的是，重繪不一定需要重排，比如改變某個元素的顏色，就只會觸發重繪，而不會觸發重排。
重排和重繪會不斷觸發，這是不可避免的，但是它們非常消耗資源，是導致網頁效能低下的根本原因。
提高網頁效能，就是要降低重排和重繪的頻率和成本，盡量少觸發重新渲染。
大部分瀏覽器通過佇列化修改和批量顯示優化重排版過程。然而有些操作會強迫重新整理並要求所有計畫改變的部分立刻應用。
本資料作為dom操作最佳實踐的補充
網頁動畫的每一幀（frame）都是一次重新渲染，每秒低於24幀的動畫，人眼就能感受到停頓。一般的網頁動畫，需要達到每秒30幀到60幀的頻率，才能比較流暢。
而大多數顯示器的重新整理頻率是60hz，為了與系統一致，以及節省電力，瀏覽器會自動按照這個頻率，重新整理動畫。所以，如果網頁能夠做到每秒60幀，就會跟顯示器同步重新整理，達到最佳的視覺效果。這意味著，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66ms。
重新整理率
fps(frame per second)，即一秒之間能夠完成多少次重新渲染
這個時候 我們拿 我去年寫的 vuejs 中文社群的**。來試一試
vuejs 中文社群
開啟控制台執行下面的**：
// 返回是否 有 requestanimationframe 方法 1000ms 會執行 60 次
var raf = function ()
);}();
var frame = 0;
var allframecount = 0;
var lasttime = date.now();
var lastfametime = date.now();
var loop = function () 1s內 fps：`, fps);
frame = 0;
lasttime = now;
};raf(loop);
}loop();
然後我們看到了如下的顯示：
mon aug 13 2018 20:14:44 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:45 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:46 gmt+0800 (中國標準時間) 1s內 fps： 55
mon aug 13 2018 20:14:47 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:48 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:49 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:50 gmt+0800 (中國標準時間) 1s內 fps： 58
mon aug 13 2018 20:14:51 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:52 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:53 gmt+0800 (中國標準時間) 1s內 fps： 60
mon aug 13 2018 20:14:54 gmt+0800 (中國標準時間) 1s內 fps： 56
mon aug 13 2018 20:14:55 gmt+0800 (中國標準時間) 1s內 fps： 59
剛剛好 螢幕的重新整理率就在 60 fps 左右， 很流暢。
寫在最後
在現在 vue 、recat 、 angular 三大框架盛行的當今，最原始的 瀏覽器渲染網頁的時候就做哪些事情或許我們已經忘記了一些。
這篇文章也只是做乙個基礎的記憶，網頁是如何進行渲染的，在這三大框架的下，虛擬dom 的出現，對於網頁載入有什麼優勢？
重排、重繪的時候就做哪些事情？ 頁面渲染的效能瓶頸往往出現在**？ 我們如何能夠減少這些效能消耗的操作？
這些疑問，都是這邊檔案做的乙個解釋。
網頁生成的過程及對效能的影響
Web前端學習（1） 上網的過程與網頁的本質
就上網方式而言，常見方式如下 上網過程 其實不論用哪種方式 上網 本質上都是同一件事 我們告訴瀏覽器我們需要乙份網頁。那麼，瀏覽器知道了我們想要乙個網頁後，它是怎麼做的呢？瀏覽器就會向伺服器請求這個網頁，伺服器找到這份網頁後就會返還給瀏覽器，由瀏覽器解釋後顯示出來 這就是我們上網的過程。其具體流程如...
前端效能優化之http請求的過程
在前端面試中，經常會被問到 乙個頁面從輸入url到頁面載入顯示完成，這個過程都發生了什麼 這是前端的經典面試題之一。這個過程涉及的東西很多，區分度很高。大致分為這幾個過程 1.dns解析 2.tcp連線 3.傳送http請求 4.伺服器處理請求並返回http報文 5.瀏覽器解析渲染頁面 6.連線結束...
前端效能優化之http請求的過程
在前端面試中，經常會被問到 乙個頁面從輸入url到頁面載入顯示完成，這個過程都發生了什麼 這是前端的經典面試題之一。這個過程涉及的東西很多，區分度很高。大致分為這幾個過程 1.dns解析 2.tcp連線 3.傳送http請求 4.伺服器處理請求並返回http報文 5.瀏覽器解析渲染頁面 6.連線結束...