面試肯定會問到這個吧~

So：再一次的屢屢瀏覽器的渲染機制~

在渲染一開始會先從網絡層獲取請求文檔（HTML、XML）的內容，然后再進行以下基本流程

3.1 解析HTML =》 DOM樹

從HTML文本解析到HTML語法樹，再解析到文檔對象樹（DOM Tree） HTML語法樹生成的兩個過程 1. 詞法解析： 按照詞法規則將HTML文本分割成大量的標記(Token), 并去除其中無關的字符(空格), 2. 語法解析： 匹配Token序列生成語法樹, 有兩種匹配方式：自上而下，自下而上 2.1 自上而下解析器和自下而上解析器。直觀地來說，自上而下的解析器從語法的高層結構出發，嘗試從中找到匹配的結構。而自下而上的解析器從低層規則出發，將輸入內容逐步轉化為語法規則，直至滿足高層規則 2.2 但是HTML無法用常規的自上而下或自下而上的解析器進行解析 原因： 2.2.1 語言的寬容本質， 2.2.2. 瀏覽器對常見無效HTML用法的包容態度, 2.2.3. 解析過程需要不斷重復，源內容在解析過程中通常不會改變，但是HTML中，腳本標記如果包含document.write，就會添加額外的標記，這樣的解析過程實際上就更改了輸入內容 3. 容錯機制： 解析器在對標記化輸入內容進行解析，以構建文檔樹，如果文檔的格式正確就直接進行解析，遺憾的是，HTML文檔不可能不會有格式錯誤的時候，因此解析器必須具備一定的容錯性 3.1 明顯不能再某些外部標記中添加的元素，在此情況下，我們應該關閉所有標記，知道出現禁止添加的元素，然后再加入該元素 3.2 瀏覽器不能直接添加的元素，但開發者忘記添加了，瀏覽器會自動添加 3.3 向inline元素內添加block元素。閉合所有inline元素，直到出現下一個較高級的block元素 3.4 如果這樣仍然無效。可關閉所有元素、直到可以添加元素可止，或者忽略該標記

瀏覽器內核中對HTML頁面真正的內部表示并不是語法樹，而是文檔對象模型，DOM也是樹形結構，以Document對象為根元素,

DOM節點基本和HTML語法樹節點一一對應

2.3 JS解析的影響

DOM樹創建過程中遇到script標簽會創建HTMLScriptElement實例，HTMLScript-Element的父類ScriptElement中包含了對JS腳本的所有處理，包括下載、緩存、執行。 2.3.1 對于外部引用的腳本文件，從腳本下載到腳本執行完，文檔解析過程會一直被阻塞 2.3.2 script屬性： async: 異步加載js文件，采用并行下載，不會阻塞DOM解析, 下載完成后立即解析執行js 2.3.3 script屬性： defer: 異步加載js文件，采用并行下載，不會阻塞DOM解析，并且在解析DOM之后執行腳本 所以： 1. 優化 JavaScript 的首要規則：將腳本放在底部！ 2. 使用無阻塞腳本 3. 動態的script

3.2 解析CSS =》 CSSOM

頁面中所有的CSS由樣式表CSSStyleSheet集合構成，而CSSStyle是一系列CSSRule的集合，每一條CSSRule則由選擇器CSSStyleSelector部分和聲明CSSStyleDeclaration部分構成, 而CSSStyleDeclaration是css樹形和值的key-Value集合

CSS解析完畢后進行CSSRule的匹配過程，尋找滿足每條css規則Selector部分的HTML元素，然后將其Declaration部分應用于該元素，實際上還會考慮樣式的繼承和樣式默認(遵循CSS規則)

3.3 布局： 渲染樹(Render Tree) <= attchment(DOM Tree + Style Rules）

渲染樹用于表示文檔的可視信息，記錄文檔中每個可視元素的布局和渲染方式 HTML頁面通過CSS控制頁面布局，所以渲染樹的每個節點對象都需要知道自己身上的CSS屬性，那么CSSSelector此時就是在找到對應的渲染節點
所以渲染樹的每個Node都存儲了繪制頁面所需的樣式及布局信息，每個節點都知道如何去繪制自己，這也就是渲染樹與DOM樹的區別，渲染樹用于顯示，那些不可見的元素不會出現在渲染樹中 不可見元素 display: none 不會出現在渲染樹中 visiblity: hidden 會顯示在渲染樹中 opacity: 0 會顯示在渲染樹中 filter:alpha(opacity=0)會顯示在渲染樹中

【回流(reflow)】 回流是指窗口尺寸被修改，發生滾動操作，或者元素位置相關的屬性被更新時候，觸發布局過程，在布局過程中要重新計算所有元素的位置信息 回流發生在Render樹上，脫離文檔流指的就是在此時布局是不按照正常布局排列布局 觸發回流的操作： 1. 改變盒模型屬性 2. DOM樹的結構變化 3. 調整瀏覽器窗口大小 4. 獲取某些屬性： offset scroll client getComputerStyle currentStyle 觸發回流一定會觸發后續的重繪操作，相對于一個元素的回流，可能會影響到父元素，例如 浮動導致父元素的高度塌陷/定位屬性等

布局優化方案： 盡量觸發小規模的重繪，不會觸發回流 1. 不要一條一條修改DOM屬性，修改className或者修改CSSText 2. 對于一個元素進行復雜的操作時，可以先隱藏它，操作完成后再顯示 3. 在需要經常獲取那些引起瀏覽器回流的屬性值時，要緩存到變量中 4. 不要使用table布局，因為一個小改動可能會造成整個table重新布局 5. 對于一些進行動畫的元素，可以進行硬件渲染，從而避免重繪和回流

---

【重繪(repaint)】 重繪是指當與視覺相關的樣式屬性值被更新時會觸發繪制過程，在繪制過程中要重新計算元素的視覺信息，使元素呈現新的外觀； 元素的重繪只發生在渲染層 render layer上。所以，如果要改變元素的視覺屬性，最好讓該元素成為一個獨立的渲染層

3.4 繪制 painting

在繪制階段，系統會遍歷渲染樹，并調用渲染器的"paint"方法，將渲染器的內容顯示在屏幕上

以下是兩大內核的渲染流程

參考： https://www.cnblogs.com/xiaohuochai/p/9174471.html https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Painting

轉載自【簡書--貝程教育_前端】

總結

以上是生活随笔為你收集整理的jq动态渲染后获取不到元素高度_浏览器的渲染机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。