原生html、css、javascript渲染過程

一、建構DOM樹

通過HTML解析器将HTML解析為DOM

(這裡也有可能加載

<script src='xxs.js'></script>

，如果有先下載下傳、加載此js檔案，執行js代碼，會引起阻塞）

(浏覽器不是多線程嗎？為什麼要先下載下傳加載解析js，因為先加載完js，避免後加載js造成過多的重繪、重排，雖然出現阻塞，但也減少了重繪重排。)

二、建構CSSOM

通過CSS解析器将CSS解析為CSSOM(CSS對象模型)

加載外部圖像資源

三、布局

将DOM和CSSOM合并為渲染樹(render tree)

四、Javascript引擎

當javascript操作時，可能會引起重繪、重排

document.write('hello')
           

document.getElementById('box').style.width='100px'
           

document.querySelector('.box1').style.background='red'
           

重新建構CSSOM，生成渲染層，生成圖像