2024-04-06 分類: 網(wǎng)站建設
渲染引擎逐行解析HTML,為了盡快將頁面呈現(xiàn)出來,它不會等到HTML都被解析完才創(chuàng)建并布局RenderTree。它會在處理后續(xù)內(nèi)容的同時把處理過的局部內(nèi)容先展示出來,下面我們就和創(chuàng)新互聯(lián)一起來了解一下在成都網(wǎng)站制作都需要注意那些問題。
之前理解有誤,外部JS并不是瀏覽器逐行解析到script后再向服務器發(fā)起請求的,而是瀏覽器請求到HTML代碼后,在生成DOM的最開始階段,并行發(fā)起css、圖片、js的請求,無論他們是否在HEAD里。但是JS的執(zhí)行順序是根據(jù)瀏覽器解析script標簽順序來的,因為JS引擎(負責對JS的解析與執(zhí)行)是單線程的,所以JS的執(zhí)行勢必會對DOMTree的構建造成阻塞。
了解了以上背景知識后,對該問題進行解答:為什么JS調(diào)用盡量放到網(wǎng)頁底部?
1.JS的下載和執(zhí)行會阻塞DOMTree的構建,對于在首屏范圍內(nèi)的HTML代碼段里的script標簽會截斷首屏內(nèi)容,造成首屏大片空白從而影響網(wǎng)站的用戶體驗。
2.如果JS中有對DOM的操作并且沒有把這部分代碼放入document.ready接口內(nèi),那么,當JS執(zhí)行的時候DOM可能還未加載完,這樣便會出錯。比如:對按鈕綁定點擊事件這時候按鈕還沒被渲染出來對他綁定就會出現(xiàn)問題
(這里的首屏時間指的是瀏覽器第一次painting的時間。首屏內(nèi)容的顯示可以是不完整的。)
在學習這些文檔過程中,遇到了很多不能理解的點:
1.為什么script標簽的位置不一定會影響首屏時間。
對于頂部的script,肯定會阻塞瀏覽器對之后的HTML解析,這種情況下不就影響首屏時間了嗎?
2.為什么放到網(wǎng)頁頂部的JS不一定阻塞頁面渲染
除了首屏看得見的資源(主要是圖片資源)外,其他資源一律需要通過js來控制,而不能隨意地發(fā)起http請求(包括首屏看不到的資源)。按照這個原則,js只能放在body標簽閉合之前,并且js邏輯不能隨意書寫。
js對其他資源的控制,需要對部分資源請求進行延時,因此將script盡可能放到底部可以防止阻塞的產(chǎn)生。
文章題目:網(wǎng)站制作之性能優(yōu)化——為什么JS調(diào)用盡量放到網(wǎng)頁底部?
文章路徑:http://www.rwnh.cn/news5/322455.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、關鍵詞優(yōu)化、響應式網(wǎng)站、網(wǎng)站收錄、網(wǎng)站設計、虛擬主機
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容