您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)css中瀏覽器渲染過程的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
說明
1、根據(jù)HTML構(gòu)建HTML樹(DOM)。
2、根據(jù)CS構(gòu)建CSS樹(CSSOM)。
3、將兩棵樹合并成一顆渲染樹(render tree)。
4、Layout布局。
(文檔流、盒模型、計算大小和位置)
5、Paint繪制。
(把邊框顏色、文字顏色、陰影等畫出來)
6、Compose合成。
(根據(jù)層疊關(guān)系展示畫面)
如果是塊級元素,就會設(shè)置好寬高,不存在任何問題。但如果是圖片,此時是無法得知高度的(行內(nèi)元素),只有等待第五步繪制以后再能確定高度。而圖片的繪制需要時間,在尚未繪制完成的時候,獲取到的高度則會出現(xiàn)問題。合理的解決方案是使用setTimeout延時獲取div的高度。
<div></div> <script> var odiv = document.getElementById('bgImg'); odiv.innerHTML = '<img src="test.jpg">' setTimeout(() => { var oHeight = odiv.scrollHeight; console.log(oHeight); },100) </script>
關(guān)于“css中瀏覽器渲染過程的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。