js和css的順序關係及js載入執行優化探索

2022-04-03 10:58:03 字數 880 閱讀 2138

1. head裡的順序如下,考慮會對請求有何影響:

a. 外部js在css前面

b. 外部js在css後面

c. 內部js在css前面

d. 內部js在css後面

e. 內聯css在外聯css前面

f. 內聯css在外聯css後面

結果:a,b – head裡出現外聯js,無論如何放,css檔案都不能和body裡的請求並行。補充:body裡dom渲染取決於head裡的js執行完。 (圖1)

c – head裡的內聯js只要在所有外聯css前面,css檔案可以和body裡的請求並行(圖2)

d – head裡的內聯js只要在任一外聯css後面,css檔案就不能和body裡的請求並行。補充:原因也是要等js執行完(圖1)

e – firefox/ie下,要等1.css載入完生效。safari/chrome下,則先生效,再載入1.css

f – 等1.css載入完生效

2. 內聯js要等它前面的所有外聯css檔案載入完後執行。之前寫過一篇子資源原理的筆記。

3. 外聯js放在頁面最後,高階瀏覽器會自動做優化。如:

firefox/chrome/safari載入的優化處理相似。見圖3。

4. 內聯長執行時間js,無論放在頁面任何位置,都會影響整個頁面的渲染。測試檔案,如:

button

在頁面初始執行階段如果有長執行時間的內聯js,對效能的影響是非常非常嚴重的!但是,如果把那段執行5s的js放到外部就不會有上述影響,或者移到domreay/onload後執行也可以。

js和css的順序關係

1.head裡的順序如下,考慮會對請求有何影響 a.外部js在css前面 b.外部js在css後面 c.內部js在css後面 d.內部js在css前面 e.內聯css在外聯css前面 f.內聯css在外聯css後面 結果 a,b head裡出現外聯js,無論如何放,css檔案都不能和body裡的請求...

css和js引入加版本引數的作用

media screen 有時候可能會遇到js或者css檔案引用後傳遞引數 css和js帶引數 形如.css?v 與.js?v 使用引數有兩種可能 第一 指令碼並不存在,而是服務端動態生成的,因此帶了個版本號,以示區別。即上面 對於檔案來說 等價於 但瀏覽器會認為他是 該檔案的某個版本!第二種情況最...

jq和js的關係 JS和JQUERY的區別

根據id取元素 js 取到的是乙個dom物件。例 var div document.getelementbyid one jquery 取到的是乙個jquery物件。例 var div one 括號裡面是根據某個東西來找,相當於乙個選擇,如果我們要根據id來找,在樣式表裡的id是用 來表示的,所以在...