JavaScript優(yōu)化專題之Loading and Execution加載和運行
JavaScript 在瀏覽器中的性能，可認為是開發(fā)者所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特征而復雜，也就是說，當JavaScript 運行時其他的事情不能被瀏覽器處理。事實上，大多數瀏覽器使用單進程處理UI 更新和JavaScript 運行等多個任務，而同一時間只能有一個任務被執(zhí)行。
JavaScript運行了多長時間，那么在瀏覽器空閑下來響應用戶輸入之前的等待時間就有多長。
從基本層面說，這意味著<script>標簽的出現使整個頁面因腳本解析、運行而出現等待。不論實際的JavaScript 代碼是內聯的還是包含在一個不相干的外部文件中，頁面下載和解析過程必須停下，等待腳本完成這些處理，然后才能繼續(xù)。這是頁面生命周期必不可少的部分，因為腳本可能在運行過程中修改頁面內容。
典型的例子是document.write()函數，例如：
<html> <head> <title>Script Example</title> </head> <body> <p> <script type=”text/javascript”> document.write(“The date is ” + (new Date()).toDateString()); </script> </p> </body> </html>
當瀏覽器遇到一個<script>標簽時，正如上面HTML 頁面中那樣，無法預知JavaScript 是否在<p>標簽中添加內容。因此，瀏覽器停下來，運行此JavaScript 代碼，然后再繼續(xù)解析、翻譯頁面。同樣的事情發(fā)生在使用src 屬性加載JavaScript 的過程中。瀏覽器必須首先下載外部文件的代碼，這要占用一些時間，然后解析并運行此代碼。此過程中，頁面解析和用戶交互是被完全阻塞的。
HTML 4 文檔指出，一個<script>標簽可以放在HTML 文檔的<head>或<body>標簽中，可以在其中多次出現。傳統上，<script>標簽用于加載外部JavaScript 文件。<head>部分除此類代碼外，還包含<link>標簽用于加載外部CSS 文件和其他頁面中間件。也就是說，最好把風格和行為所依賴的部分放在一起，首先加載他們，使得頁面可以得到正確的外觀和行為。例如：
<html> <head> <title>Script Example</title> <– Example of inefficient script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> </body> </html>
雖然這些代碼看起來是無害的，但它們確實存在性能問題：在<head>部分加載了三個JavaScript 文件。因為每個<script>標簽阻塞了頁面的解析過程，直到它完整地下載并運行了外部JavaScript 代碼之后，頁面處理才能繼續(xù)進行。用戶必須忍受這種可以察覺的延遲。
請記住，瀏覽器在遇到<body>標簽之前，不會渲染頁面的任何部分。用這種方法把腳本放在頁面的頂端，將導致一個可以察覺的延遲，通常表現為：頁面打開時，首先顯示為一幅空白的頁面，而此時用戶即不能閱讀，也不能與頁面進行交互操作
Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允許并行下載JavaScript 文件。這個好消息表明，當一個<script>標簽正在下載外部資源時，不必阻塞其他<script>標簽。不幸的是，JavaScript 的下載仍然要阻塞其他資源的下載過程，即使腳本之間的下載過程互不阻塞，頁面仍舊要等待所有JavaScript代碼下載并執(zhí)行完成之后才能繼續(xù)。所以，當瀏覽器通過允許并行下載提高性能之后，該問題并沒有完全解決，腳本阻塞仍舊是一個問題。
因為腳本阻塞其他頁面資源的下載過程，所以推薦的辦法是：將所有<script>標簽放在盡可能接近<body>標簽底部的位置，盡量減少對整個頁面下載的影響。例如：
<html> <head> <title>Script Example</title> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> <– Example of recommended script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> </body> </html>
此代碼展示了所推薦的<script>標簽在HTML 文件中的位置。盡管腳本下載之間互相阻塞，但頁面已經下載完成并且顯示在用戶面前了，進入頁面的速度不會顯得太慢。
以上就是關于javascript優(yōu)化內容中的Loading and Execution加載和運行的相關介紹，希望對大家的學習有所幫助。
相關文章
這篇文章主要給大家介紹了關于利用JS十分鐘判斷數組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
函數式編程已經成為現代JavaScript開發(fā)中的一種主要范式,它提供了一種更清晰、更模塊化、更可維護的代碼編寫方式,本文將深入探討ES8中的一些關鍵特性,并演示如何使用這些特性進行函數式編程實踐,有需要的可以參考下2023-09-09
這篇文章主要介紹了探究一道價值25k的螞蟻金服異步串行面試題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要為大家詳細介紹了原生js實現Flappy Bird小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
今天小編就為大家分享一篇layui table 參數設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript小游戲實現代碼，喜歡用javascript實現游戲效果代碼的朋友可以參考下。2010-08-08
這篇文章主要介紹了js命名空間寫法,以完整實例形式分析了JavaScript命名空間的寫法,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript設計模式之單例模式原理與用法,結合實例形式分析了單例模式的原理、命名空間的使用、閉包、惰性單例形式以及單例模式的基本應用,需要的朋友可以參考下2018-07-07
JavaScript?Array.from及其相關用法詳解(示例演示)
Array.from方法是ES6引入的一個靜態(tài)方法,用于從類數組對象或可迭代對象創(chuàng)建一個新的數組實例,本文將詳細介紹Array.from的基本用法、實際場景中的應用,以及它如何與其他JavaScript特性相結合提升代碼的簡潔性和可讀性,感興趣的朋友一起看看吧2025-03-03
微信小程序也是有列表渲染和條件渲染的,下面這篇文章主要給大家介紹了關于微信小程序如何實現列表渲染和條件渲染的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06