js是阻塞頁面的加載儡遮,會影響頁面加載的速度,js文件的大小和算法的復雜程度影響著頁面的加載速度澳厢。瀏覽器在下載和執(zhí)行腳本時出現(xiàn)阻塞的原因在于篙骡,腳本可能會改變頁面或javascript的命名空間宾巍,它們對后面內(nèi)容造成影響咕幻。一個典型的例子就是在頁面中使用document.write()。
瀏覽器從服務(wù)器接收到html代碼顶霞,就開始解析html肄程,根據(jù)html的代碼會自上向下進行構(gòu)建,同時構(gòu)建渲染樹选浑,如果遇到j(luò)s文件加載執(zhí)行蓝厌,將會阻塞DOM樹的構(gòu)建,遇到css文件古徒,又會阻塞渲染樹的構(gòu)建拓提。
如今人們更喜愛相對于呈現(xiàn)用戶面前的“快”網(wǎng)頁,即呈現(xiàn)出來的時間越短隧膘,內(nèi)容也不是很糟糕代态,更受人歡迎,如果一個網(wǎng)頁加載沒有反應(yīng)疹吃,時間超過兩秒甚至更多蹦疑,對于用戶來說,這個網(wǎng)頁是差勁的
所以萨驶,script標簽應(yīng)該放在</body>標簽的前面歉摧,因為,放在body標簽后會避免出現(xiàn)網(wǎng)頁加載空白的情況腔呜,可持續(xù)的給用戶提供視覺反饋叁温,同時在有些情況下,會降低錯誤的發(fā)生核畴。頁面渲染的時候膝但,相對于其他的圖片或css來說js是阻塞的,所以等頁面的渲染樹成行以后再引入js就可以避免白屏現(xiàn)象.
css標簽應(yīng)放在<head></head>標簽之間,如果放在</body>標簽的前面膛檀,當DOM樹構(gòu)建完成锰镀,渲染樹開始構(gòu)建,等構(gòu)建完成咖刃,瀏覽器需要渲染整個頁面泳炉,其實可以邊渲染便構(gòu)建,減少資源的浪費