js調(diào)用放到網(wǎng)站網(wǎng)頁(yè)底部的原因

2021-04-05    分類： 網(wǎng)站建設(shè)

瀏覽器加載頁(yè)面是按從上到下順序加載的。加載 js 并執(zhí)行的時(shí)候，會(huì)阻塞其他資源的加載。這是因?yàn)?js 可能會(huì)有 dom 、樣式等等操作，所以瀏覽器要先加載這段 js 并執(zhí)行，再加載放在它后面的 html、css。


因此，加入一段巨大的 js 放在最上面，瀏覽器首先要下載并執(zhí)行，這段時(shí)間里面，頁(yè)面是空白的。相比于加載了部分 html 和 樣式 但是沒有 js 交互功能，顯然是后者對(duì)于瀏覽者體驗(yàn)要好。


然而，是否所有 js 都要放在最下面呢？并不是。


舉實(shí)際的例子：


html5shiv是一段 js 腳本，用來是早期 ie 兼容 html5 新增標(biāo)簽的支持。


這個(gè) js 腳本，必須要放在上面 head 部分，為什么呢？因?yàn)樵诶?ie 瀏覽器下面，不支持

這樣的標(biāo)簽，所以用 js 來兼容。如果放在底部，等 ie 瀏覽器先報(bào)錯(cuò)了，才會(huì)執(zhí)行這塊 js 沒多大用。


jquery 這類的庫(kù)，也是建議放在最上面的。首先大的疑問可能是 jquery 這么大，放在上面豈不是阻塞的很厲害？


不過 jquery 通常引用的是 cdn 地址，而且經(jīng)過 gzip 壓縮之后并不是很大，而且引用公共 cdn 上面的 jquery 話，很大幾率早已被用戶緩存下來了。所以可以不需要考慮阻塞產(chǎn)生的性能問題。


而我們都知道，js 是按順序執(zhí)行下來的。也就是你沒運(yùn)行 jquery 之前，先運(yùn)行了調(diào)用 jquery 函數(shù)的代碼，就會(huì)報(bào)錯(cuò)。你可以控制你自己寫的 js 放在頁(yè)面最下面，放在 jquery 下面，但是你無法保證頁(yè)面上其他地方會(huì)不會(huì)有人圖省事直接在 html 代碼里面輸出 js。如果有，那么就會(huì)報(bào)錯(cuò)。


所以我建議，類庫(kù)放在上面加載，其余代碼盡可能放在最底下加載。

文章題目：js調(diào)用放到網(wǎng)站網(wǎng)頁(yè)底部的原因
網(wǎng)頁(yè)地址：http://muchs.cn/news/106515.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、虛擬主機(jī)、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽(yáng)服務(wù)器托管