首頁猿問關(guān)于window.onload和$...

關(guān)于window.onload和$(document).ready

JavaScript

SMILET 2019-03-21 18:15:57

js代碼window.onload=function(){ console.log(2)}console.log(1)html 代碼什么都沒有，只分別：在head標簽中引入上述jsbody標簽最后引入html標簽外引入然后對比三種情況的控制臺。第一種情況：先1后2，不難理解因為在head中DOM還沒加載完所以先1 等文檔加載完畢輸出2第二種情況：我的理解是在最后引入js dom已經(jīng)加載完畢應(yīng)該先2后1 很不幸本人測試結(jié)果還是先1后2第三種情況：將script寫在整個html跟標簽之外，很不幸還是先1后2測試了jquey的read函數(shù) 結(jié)果相同（手機打字沒有圖不好意思了）

查看完整描述

3 回答

泛舟湖上清波郎朗

TA貢獻1818條經(jīng)驗獲得超3個贊

這個問題的本質(zhì)不是 DOMContentLoaded 和 load 問題。

題主可以打開 devtools，選擇網(wǎng)絡(luò)

刷新頁面，可以看到：

兩者是同步發(fā)生的。

言外之意是，js 阻塞了頁面的載入和渲染。

那么我們再看一下性能面板：

我以第二種情況舉例。

點擊這個重新載入，或者使用快捷鍵：

我們會得到一個火焰圖，由于代碼很簡單，所以我們很容易定位。

由于之前頁面載入的時間是 2.6s，所以這次我們等待 3s 鐘：

可以很清楚的看到，console.log 先執(zhí)行的。

反對回復(fù) 2019-03-29

桃花長相依

TA貢獻1860條經(jīng)驗獲得超8個贊

首先，你聲明的是 js 的回調(diào)函數(shù)，js 引擎在解析時碰到回調(diào)函數(shù)會將它拋到一個事件隊列中，在其它代碼執(zhí)行完且觸發(fā)條件出現(xiàn)時（此處觸發(fā)條件為 window.onload）才會執(zhí)行。
其次，window.onload 發(fā)生在所有文件加載完之后。

反對回復(fù) 2019-03-29