詳解瀏覽器渲染頁面過程
詳解瀏覽器渲染頁面過程
1.解析HTML文件，創(chuàng)建DOM樹
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
2.解析CSS
優(yōu)先級：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；
特定級：id數(shù)*100+類或偽類數(shù)*10+tag名稱*1
3.將CSS與DOM合并，構(gòu)建渲染樹（renderingtree）
DOM樹與HTML一一對應(yīng)，渲染樹會忽略諸如head、display:none的元素
4.布局和繪制，重繪（repaint）和重排（reflow）
重排：若渲染樹的一部分更新，且尺寸變化，就會發(fā)生重排；
重繪：部分節(jié)點(diǎn)需要更新，但不改變其他集合形狀。如改變某個元素的顏色，就會發(fā)生重繪。
附：
1.重繪和重排何時會發(fā)生：
（1）增加或刪除DOM節(jié)點(diǎn)；
（2）display:none（重排并重繪）；visibility:hidden（重排）；
（3）移動頁面中的元素；
（4）增加或修改樣式；
（5）用戶改變窗口大小，滾動頁面等。
2.如何減少重繪和重排以提升頁面性能：
（1）不要一個個修改屬性，應(yīng)通過一個class來修改
錯誤寫法：div.style.width="50px";div.style.top="60px";
正確寫法：div.className+=" modify";
（2）clone節(jié)點(diǎn)，在副本中修改，然后直接替換當(dāng)前的節(jié)點(diǎn)；
（3）若要頻繁獲取計(jì)算后的樣式，請暫存起來；
（4）降低受影響的節(jié)點(diǎn)：在頁面頂部插入節(jié)點(diǎn)將影響后續(xù)所有節(jié)點(diǎn)。而絕對定位的元素改變會影響較少的元素；
（5）批量添加DOM：多個DOM插入或修改，應(yīng)組成一個長的字符串后一次性放入DOM。使用innerHTML永遠(yuǎn)比DOM操作快。（特別注意：innerHTML不會執(zhí)行字符串中的嵌入腳本，因此不會產(chǎn)生XSS漏洞）。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
js數(shù)組的基本用法及數(shù)組根據(jù)下標(biāo)(數(shù)值或字符)移除元素
js數(shù)組的用法包括創(chuàng)建、取值賦值、添加以及根據(jù)下標(biāo)(數(shù)值或字符)移除元素等等，在本文將為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-10-10
微信小程序之下拉列表實(shí)現(xiàn)方法解析（附完整源碼）
這篇文章主要介紹了微信小程序之下拉列表實(shí)現(xiàn)方法解析（附完整源碼）,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
在網(wǎng)上看到幾個有意思的Javascript代碼，和大家分享一下。直接將代碼拷貝到IE中即可，注意代碼為一樣。不可分行2010-07-07
這里說的滑移其實(shí)就是減速效果，能根據(jù)設(shè)定的坐標(biāo)平面移動。2008-09-09
這篇文章主要介紹了JavaScript中雙嘆號(!!)的作用,需要的朋友可以參考下2014-04-04
顯示一定時間后消失，刷新之后清空變量值，重新開始記錄鍵值。 程序的原理就是檢測按鍵的鍵值，當(dāng)達(dá)到預(yù)定條件時執(zhí)行規(guī)定的函數(shù)。2009-09-09
Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義示例代碼
Echarts中參數(shù)的配置功能很強(qiáng)大,對任何一項(xiàng)的配置都很細(xì)致,下面這篇文章主要給大家介紹了關(guān)于Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了原生JS封裝Ajax插件，為大家介紹不同域之間互相請求資源的跨域,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript引用類型Function實(shí)例詳解
這篇文章主要介紹了JavaScript引用類型Function,結(jié)合實(shí)例形式詳細(xì)分析了javascript引用類型Function概念、定義、原理、相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法
斐波那契數(shù)列來源于兔子繁殖問題,所以也叫兔子序列,下面這篇文章主要給大家介紹了關(guān)于JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-06-06