????????記錄一些知識，便于自己以后的學習，別無它用。
名詞
關鍵渲染路徑
???????瀏覽器收到服務器返回的 HTML，CSS，JavaScript 字節(jié)數據并對其進行解析和轉變成像素的渲染過程被稱為關鍵渲染路徑。
瀏覽器渲染過程
1. 處理 HTML 標記并構造 DOM 樹
???????字符編碼
??????????????將 HTML 的原始字節(jié)數據轉換為文件指定編碼的字符
???????令牌化
??????????????瀏覽器會根據 HTML 規(guī)范將字符串轉換成各種令牌
??????????????(如<html>、<p>、<body>這些標簽和這些標簽中的字符串和屬性等都會被轉化為令牌，每
??????????????個令牌具有特殊的含義和規(guī)則)
???????生成節(jié)點對象
??????????????每個令牌都會被轉換成定義其屬性和規(guī)則的對象，即節(jié)點對象
???????構建 DOM 樹
??????????????將節(jié)點對象構建成 DOM 樹型結構
2. 處理 CSS 標記并構造 CSSDOM 樹
???????瀏覽器解析遇到 <link> 標簽時，瀏覽器就開始解析 CSS 并構建 CSSOM 樹
3. 將 DOM 與 CSSOM 合并成一個渲染樹(Render Tree)
4. 根據渲染樹來布局(Layout)，以計算每個節(jié)點的幾何信息
???????從渲染樹(Render Tree)的根節(jié)點開始遍歷，采用盒子模型的模式來表示每個
???????節(jié)點與其他元素之間的距離，從而確定每個元素在屏幕內的位置大小
5. 繪制(Paint) DOM 節(jié)點
???????將渲染樹(Render Tree)繪制成像素
重繪與回流
重繪(repaint)
???????將渲染樹的每個節(jié)點都轉換為屏幕上的實際像素
???????改變元素的背景色，文字顏色，邊框顏色等不影響元素周圍，布局的屬性時，屏幕的一部分要
???????重畫，但元素的幾何尺寸沒有變
回流(reflow)
???????計算節(jié)點在設備視口內的確切位置和幾何信息
???????元素的變化影響到了布局，需要重新渲染便開始回流，瀏覽器從 root frame 開始遞歸往下，一
???????次計算所有的結點幾何尺寸和位置。
回流必將重繪，重繪不一定回流
flush隊列
???????因為每句 JavaScript 操作 DOM 都回流或者重繪，對于瀏覽器壓力很大，所以瀏覽器會維護一個隊列，用于存放回流和重繪的操作，等隊列中的數量一定時或者一定時間后，會一次性批處理執(zhí)行隊列中的操作。
當獲取布局信息的操作的時候，會強制隊列刷新
offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedSytle()
getBoundingClientRect
感謝以下博客的博主，將知識分享出來
https://juejin.im/post/5ca0c0abe51d4553a942c17d
https://juejin.im/post/5d136700f265da1b7c6128db
