css,js加載阻塞頁面渲染的理解


頁面要等所有的css加載解析完畢后才會渲染,

css 的加載會阻塞后面dom的解析,

js的加載和執行后阻塞后面dom的解析

defer 的script 的下載不會阻塞dom的解析,defer的script下載完畢后會按順序執行,且在DOMContentLoad 觸發前執行,當所有的defer下載完畢后,再按順序執行。ie10及以下可能不會按順序執行

async 的sciprt 的下載不會阻塞dom的解析,async的scipt下載完畢后不一定會按順序執行,且執行時間在domContentLoad觸發前后都有可能 。在合適的時間執行 ie10及支持

require js 就是使用的 async動態添加的腳本

require js 遵循 amd 即異步的模塊定義,所有的模塊都是異步加載的,使用前必須將所有的模塊提前加載

seajs 遵循的是cmd 即通用的模塊定義,模塊可以預先加載,也可以異步加載,也在需要的時候同步加載。

綜合上面的一些,對於頁面首屏展示的優化建議是

首屏的css最好直接放在style內,然后js放在頁面底部,或者使用ansy或defer

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM