網(wǎng)站制作之性能優(yōu)化——為什么JS調(diào)用盡量放到網(wǎng)頁(yè)底部？

渲染引擎逐行解析HTML，為了盡快將頁(yè)面呈現(xiàn)出來(lái)，它不會(huì)等到HTML都被解析完才創(chuàng)建并布局RenderTree。它會(huì)在處理后續(xù)內(nèi)容的同時(shí)把處理過(guò)的局部?jī)?nèi)容先展示出來(lái)，下面我們就和創(chuàng)新互聯(lián)一起來(lái)了解一下在成都網(wǎng)站制作都需要注意那些問(wèn)題。

之前理解有誤，外部JS并不是瀏覽器逐行解析到script后再向服務(wù)器發(fā)起請(qǐng)求的，而是瀏覽器請(qǐng)求到HTML代碼后，在生成DOM的最開(kāi)始階段，并行發(fā)起css、圖片、js的請(qǐng)求，無(wú)論他們是否在HEAD里。但是JS的執(zhí)行順序是根據(jù)瀏覽器解析script標(biāo)簽順序來(lái)的，因?yàn)镴S引擎（負(fù)責(zé)對(duì)JS的解析與執(zhí)行）是單線程的，所以JS的執(zhí)行勢(shì)必會(huì)對(duì)DOMTree的構(gòu)建造成阻塞。

了解了以上背景知識(shí)后，對(duì)該問(wèn)題進(jìn)行解答：為什么JS調(diào)用盡量放到網(wǎng)頁(yè)底部？

1.JS的下載和執(zhí)行會(huì)阻塞DOMTree的構(gòu)建，對(duì)于在首屏范圍內(nèi)的HTML代碼段里的script標(biāo)簽會(huì)截?cái)嗍灼羶?nèi)容，造成首屏大片空白從而影響網(wǎng)站的用戶體驗(yàn)。

2.如果JS中有對(duì)DOM的操作并且沒(méi)有把這部分代碼放入document.ready接口內(nèi)，那么，當(dāng)JS執(zhí)行的時(shí)候DOM可能還未加載完，這樣便會(huì)出錯(cuò)。比如：對(duì)按鈕綁定點(diǎn)擊事件這時(shí)候按鈕還沒(méi)被渲染出來(lái)對(duì)他綁定就會(huì)出現(xiàn)問(wèn)題

（這里的首屏?xí)r間指的是瀏覽器第一次painting的時(shí)間。首屏內(nèi)容的顯示可以是不完整的。）

在學(xué)習(xí)這些文檔過(guò)程中，遇到了很多不能理解的點(diǎn)：

1.為什么script標(biāo)簽的位置不一定會(huì)影響首屏?xí)r間。

對(duì)于頂部的script，肯定會(huì)阻塞瀏覽器對(duì)之后的HTML解析，這種情況下不就影響首屏?xí)r間了嗎？

2.為什么放到網(wǎng)頁(yè)頂部的JS不一定阻塞頁(yè)面渲染

除了首屏看得見(jiàn)的資源（主要是圖片資源）外，其他資源一律需要通過(guò)js來(lái)控制，而不能隨意地發(fā)起http請(qǐng)求（包括首屏看不到的資源）。按照這個(gè)原則，js只能放在body標(biāo)簽閉合之前，并且js邏輯不能隨意書寫。

js對(duì)其他資源的控制，需要對(duì)部分資源請(qǐng)求進(jìn)行延時(shí)，因此將script盡可能放到底部可以防止阻塞的產(chǎn)生。

文章題目：網(wǎng)站制作之性能優(yōu)化——為什么JS調(diào)用盡量放到網(wǎng)頁(yè)底部？
文章路徑：http://m.kartarina.com/news5/322455.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)