嵌入的js代碼應該放在什麼位置

嵌入的js代碼應該放在什麼位置

js阻塞: 所有瀏覽器在下載js代碼的時候,會阻止其他一切活動,比如 其他資源下載,內容呈現等。直到js代碼 下載、解析、執行完畢   後纔開始繼續並行下載其他資源並渲染內容。

css阻塞: css本身是並行加載的。但是css後面如果跟着js代碼的話, 就會發生阻塞。該css就會阻塞後面資源的下載。

(意思就是 css 加載完畢, js阻塞後面的資源。 相對於 css 阻塞 後面資源)

如果把嵌入的js代碼放到css前面。css就不會發生阻塞了。

​ (意思是 js 下載、解析,但沒有執行, 加載css 及其以後的資源。就不會發生阻塞了)

如果css在前面,js任然會阻塞資源加載。

根本原因: 瀏覽器會維持HTMl 中 CSS 和 JavaScript 代碼順序, 樣式表(css)必須在嵌入的   js代碼 執行  前    先加載、解析完。而嵌入的js代碼會阻塞後面的資源加載,所以就會出現css阻塞資源加載的情況。

應放在以爲位置

​ 1、 放在底部, 雖然放在底部照樣會阻塞所有內容的呈現,但不會阻塞資源下載

​ 2、 如果嵌入的 js 代碼放在 head 中,就要把 嵌入的js代碼放到css前面。 前面講述了我的理解。

​ 3、 使用defer的地方

​ 4、 不要在嵌入的js代碼中代用運行時間長的函數。因爲阻塞,影響用戶體驗。 如果想要調用。使用 異步 調用。

defer 標籤 對腳本進行延遲,直到頁面加載爲止。 https://www.w3school.com.cn/tags/att_script_defer.asp

​ 有的 javascript 腳本 document.write 方法來創建當前的文檔內容,其他腳本就不一定是了。

如果您的腳本不會改變文檔的內容,可將 defer 屬性加入到

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章