瀏覽器內部渲染機制
瀏覽器核心：
瀏覽器UI介面
瀏覽器引擎 -> data persistence
渲染引擎： 網路、js直譯器(引擎)、UI backend、css直譯器、html直譯器
// js直譯器，常見的V8引擎
瀏覽器架構：多程序，多執行緒模型。
基於blink核心的chromium瀏覽器為例，常見程序：
1、browser程序：瀏覽器主程序，負責瀏覽器介面和各頁面的管理，開啟瀏覽器就是啟動了這個一個程序。
2、renderer程序：負責頁面渲染，一個頁面對應一個Renderer程序。
3、GPU程序： 如果頁面啟動了硬體加速，瀏覽器就會開啟一個GPU程序，最多隻能有一個。
瀏覽器每個程序內部有多個執行緒，比如保持使用者介面的高度響應，保證ui執行緒不被其他阻礙而影響使用者操作。
// js這門語言，就是單執行緒指令碼，由於執行緒阻塞，如下定時器的console不會被輸出：
setTimeout(function () {
console.log('是否輸出？');
}, 0);
while (true) {
var a = 1;
}
以上執行過程，需要將同步和非同步的兩類程式碼分別壓入堆疊和非同步佇列中，通過Event Loop實現非同步操作。
任務佇列 -> 函式執行堆疊 -> 需要非同步函式 - > 非同步處理模組 -> 非同步到達觸發條件後進行相應回撥，根據同步模組型別，壓入指定任務佇列。
瀏覽器渲染機制： 佈局，繪製，組合檢視。
網頁dom樹和事件機制：
RenderLayer和RenderBlock和RenderObject，RenderLayer對多關係，瀏覽器核心會把dom節點的相關資訊renderObject儲存起來，
生成renderLayer包括：
document節點對應renderView節點，
dom樹中子女節點renderBlock節點，
顯示指定css位置對節點(position: absolute或fixed)，具有透明效果，css 3d屬性的節點，canvas元素或videl元素的節點。
renderLayer的節點使用可以有效減小網頁結構的複雜程度，能減小重新渲染的開銷。
瀏覽器渲染方式：軟體渲染（cpu）、硬體渲染（GPU）
cpu渲染：瀏覽器發生佈局，繪製階段；如果renderObject更新改變，相關聯的renderObject發生改變而不是整個layer的Object發生改變，成為cpu快取。
GPU渲染：發生組合階段，如果頁面某個合成層發生位置的偏移、縮放、透明度等操作，GPU會把更新的合成層進行相應的變化送入compositor(合成器)重新合成即可。
PS：書寫一個div位置從left: 0變化到left: 200px的動畫，使他不觸發重排和重繪。
重新一幀的時候，需要經歷佈局，繪製，組合三個階段。layout和paint時間佔比較高。
// 如果要減少佈局和繪製，則最佳解決是在重新渲染觸發硬體加速而跳過重排和重繪的過程。
dom tree -> render tree（渲染樹，只顯示display: 非none） -> layout tree （佈局樹，經過盒子模型的樹) -> paint ->
composite layer
composite layer: 合成層, 當渲染樹上的節點塗鴉完畢後生成點陣圖,瀏覽器把此點陣圖從CPU運輸到GPU。
瀏覽器解析過程
https://www.cnblogs.com/quincyWang/p/6932382.html
js效能檢測：演算法和時間和空間複雜度
工具：benchmark.js、jsPerf
詳細後續補充…