【前端如何進行網站性能優化】前端如何進行網站性能優化

發布時間:2020-03-07 11:30:00

JS很快,在JS中修改DOM對象也很快。在JS的世界里,一切都是簡單而快速的。但DOM操作不是JS的獨舞,而是兩個模塊之間的協作。

【前端如何進行網站性能優化】前端如何進行網站性能優化

JS很快,在JS中修改DOM對象也很快。在JS的世界里,一切都是簡單而快速的。但DOM操作不是JS的獨舞,而是兩個模塊之間的協作。

JS引擎和渲染引擎(瀏覽器內核)是獨立實現的。當我們使用js來操作DOM時,它本質上是js引擎和渲染引擎之間的一種跨境通信。跨境通信的實現并不簡單,它是以網橋接口為橋梁的。

我們對DOM的操作不限于訪問,而是修改它。當對DOM的更改導致其外觀(樣式)發生更改時,將觸發回流或重畫。

實質上,這個過程是由DOM修改觸發的渲染樹的變化引起的。重畫不一定會導致回流,但回流肯定會導致重畫。如果你想做一個艱難的比較,你可以做更多的回流比繪制,而且成本也更高。但***,他們都是吃表演,所以他們不善于挑選。在我們的開發中,我們應該從代碼級別開始,盡量減少回流和重畫的數量。

documentfragment接口表示沒有父文件的最小文檔對象。它用作文檔的輕量級版本,用于存儲已排列或未格式化的XML片段。由于文檔片段不是真正的DOM樹的一部分,因此其更改不會導致DOM樹的重新呈現操作(回流),也不會導致性能問題。它顯示為一個容器,與實際的DOM樹分離以緩存批處理DOM操作。

當我們運行此代碼時,我們可以得到與前兩個相同的結果。如您所見,domsfragment對象允許我們調用各種domapi,就像真正的DOM一樣,因此我們的代碼質量是有保證的。而且它的身份也是非常純粹的:當我們試圖將它附加到真實的DOM中時,它會在交出其緩存的所有子節點后撤退,***地完成容器的任務,而不是出現在真實的DOM結構中。這種結構清晰的特性使得DOM片段作為一種經典的性能優化方法受到了廣泛的歡迎。

事件循環中有兩種異步隊列:宏隊列和微隊列。

完整的EventLoop過程可以概括為以下階段:

初始狀態:調用堆棧為空。微隊列為空,宏隊列中只有一個腳本(整個代碼)。

全局上下文(腳本標記)被推入調用堆棧以同步代碼執行。在執行過程中,通過調用一些接口,可以生成新的宏任務和微任務,并將其推送到各自的任務隊列中。執行同步代碼后,腳本將從宏隊列中刪除。這個過程本質上是隊列宏任務的執行和退出。

執行渲染操作并更新接口(黑板上的鍵)。

檢查是否有webworker任務,如果有,則處理它。(此過程重復,直到兩個隊列都為空)

當我們使用Vue提供的接口或對更新數據作出反應時,此更新不會立即生效,而是會被推送到隊列中。在適當的時間,隊列中的更新任務將被批量觸發。這是異步更新。

最典型的例子是,例如,有時我們會遇到以下情況:

我們在三個更新任務中修改同一狀態三次。如果采用傳統的同步更新策略,則需要對DOM進行三次操作。但實質上,需要呈現給用戶的目標內容只是第三次的結果,也就是說,只有第三次的操作才有意義——我們白白浪費了兩次計算。

但是,如果我們將這三個任務放入異步更新隊列,它們將首先在JS級別批量執行。當進程進行渲染時,只需要對DOM操作一次就可以得到有意義的計算結果——這就是異步更新的好處。


聯系我們,談您的需求

立即咨詢
云南快乐十分开奖今天走势图 手机填大坑真赢钱的 吉祥麻将官方版 购买幸运赛车 天津11选5号码定位走 单机麻将大全集 喜乐彩怎么玩 陕西11选五在线预测 大唐麻将的挂怎么买 四川快乐12开奖结果 jrsnba录像回放 平阳台炮麻将下载 白小姐四肖五码 10bet线上娱乐城百家乐 信誉好的棋牌游戏有哪些 英超转播权 福州麻将玩法