今天在某論壇上看到這麼乙個問題。
現在頁面有個空div，我用js向裡面插入一段html,然後獲取div的高度，發現有時候得到的div的高度不準確，請問各位有什麼方法解決一下。
解析html
解析css
構建render tree
布局（layout）
繪製（painting）
瀏覽器獲取到網頁檔案以後，怎麼將**生成美麗的頁面呢？
首先需要將**的結構搭建起來，類似於人的全身骨骼，解析html做的就是這個事情。解析html的所有標籤，然後深度遍歷生成dom tree，如圖所示
有了骨骼以後，接下來就是確定長相了，這是css要做的事情。和解析html類似，css解析各種樣式資訊，生成網頁的「外觀」。但是有個問題，cssa（class選擇器）說，我喜歡藍色，我家網頁的所有文字都要是藍色。cssb（id選擇器）就不樂意了，憑啥啊，我喜歡紅色，我家的標題必須是紅色。由於id選擇器是親生的，那就標題是紅色的吧，於是不同選擇器就有了不同的權重。最後生成cssom，如圖所示：
骨骼和長相都有了，那就組合到一起唄，dom和cssom根據一定的規則組合起來生成了render tree。如下圖：
建立渲染樹後，接下來正式開工，確定各個元素的位置，包括元素在檢視中的位置以及自身的大小，將其安置在瀏覽器的正確位置。
這個階段，瀏覽器會遍歷呈現樹，並呼叫呈現器的「paint」方法，將前期所有的工作結合到一起，將網頁的內容呈現出來。如果網頁只是html+css，那麼可能就到此結束了，but還有神奇的js呢，請看回流和重繪。
如果這個時候我寫了用js操作了dom，將網頁的所有元素設定float:left，那麼問題來了，4、5的工作白幹了，推翻從新再來。如果將所有元素的顏色改變了（並沒有改變結構），比如color:red，還好還好，5的工作白幹，推翻重來。可以想象一下，你辛辛苦苦加班乙個月終於完成工作，產品經理來了一句：「好像要改一下需求…」
所以，盡可能少操作dom，提公升網頁的效能。
【question】再回到最開始的這個問題，為什麼獲取到的div高度有問題？
剛開始一帆風順，進行到第五步之後，又回到了第四步，此時如果是塊級元素，就會設定好寬高，不存在任何問題。但如果是，此時是無法得知高度的（行內元素），只有等待第五步繪製以後再能確定高度。而的繪製需要時間，在尚未繪製完成的時候，獲取到的高度則會出現問題。合理的解決方案是使用settimeout延時獲取div的高度。**如下：
瀏覽器渲染頁面過程
一 瀏覽器載入和渲染html的順序 二 js的載入 3 因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。三 html頁面載入和解析流程 四 domcontentloaded事件 domcontentloaded事件在許多webki...
瀏覽器渲染頁面過程
簡單點來說就是建立了dom以後，還未完全渲染，就去獲取dom的高度，顯然是會出問題的。如下，可找個自行體會 123456789 那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layout 繪製 painting 1.解析htm...
瀏覽器渲染頁面的過程
瀏覽器是如何渲染頁面的？首先，輸入的 在通過dns解析後得到伺服器位址。然後，瀏覽器向伺服器發起http請求，經過tcp ip三次握手確認連線後，伺服器將需要的 發回給瀏覽器。最後，瀏覽器接收到 後進行解析，經過三大步驟 dom構造 布局 繪製頁面。第一步，dom構造 瀏覽器首先將收到的html 通...