資訊專欄INFORMATION COLUMN
摘要：由于始終沒有還原阻塞時的情形，無法截圖。寫模擬場景，由于當時的場景是外鏈是加載阻塞，而不是執行阻塞，暫時沒有有效模擬。但是可以確定的是，使用或可以有效解決，外鏈阻塞內部執行的問題。
由于始終沒有還原阻塞時的情形，無法截圖。在正常情況下，是無法區別是否使用defer的區別的。后續看一下是否能模擬場景。
寫demo模擬場景，由于當時的場景是外鏈是js加載阻塞，而不是js執行阻塞，暫時沒有有效模擬。
但是可以確定的是，使用defer或async可以有效解決，外鏈js阻塞內部js執行的問題。
Demo詳情：
ndex1里面是一個耗時一秒鐘的操作
結果
如將index1.js加上defer后
發現，耗時的index1，沒有阻塞后續的index2和內嵌js2執行
假如將index1.js加上async
可發現，不但沒有阻塞后續的index2和內嵌js2執行，DOMContentLoad時間也提前了
假如index1和index2都async了
可發現，內嵌的js1和js2，提前，外接index1,和index2順序執行，index1阻塞了index2
假如耗時的index1 async, 后置位index2 defer
可發現，內嵌的js1和js2，提前, index1不阻塞了index2
假如耗時的index1 defer, 后置位index2 async
可發現，內嵌的js1和js2，提前, index1阻塞了index2,DOMContentLoad時間滯后
結論：
1.使用defer, async異步加載，可以使內部的js不被阻塞
2.使用defer屬性的標簽，永遠在DOMContentLoaded事件之前執行完成。
3.defer可以阻塞async的執行，雖然兩個標簽都是異步下載的
回到項目中：
一站式是React渲染，React的js腳本執行一定是在DOMContentLoaded時間之前
我發現給機器人sdk加上defer之后 first paint 仍然是在DOMContentLoad之后，那我猜想，defer并不能使DOMContentLoad提前，會不會不能解決這個問題
然后我找了個外網React CDN的script標簽來模擬這個超時加載sdk的場景，發現首屏時間大大延長
延長時間基本等于js加載時間，2.63s， 而且首次渲染在DOMContentLoad之前，首屏時間沒有截全，但是看看下面這個圖你就明白了，肯定在2S以上，肯定是未加載的js影響了頁面的渲染
然后給其加上defer屬性，基本影響就小很多了，
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100401.html
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
閱讀 3735·2021-11-22 13:52
閱讀 3615·2019-12-27 12:20
閱讀 2392·2019-08-30 15:55
閱讀 2148·2019-08-30 15:44
閱讀 2265·2019-08-30 13:16
閱讀 579·2019-08-28 18:19
閱讀 1890·2019-08-26 11:58
閱讀 3443·2019-08-26 11:47
