JavaScript優化專題之Loading and Execution載入與運行_javascript技巧
JavaScript 在瀏覽器中的效能，可認為是開發者所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特徵而複雜，也就是說，當JavaScript 執行時其他的事情不能被瀏覽器處理。事實上，大多數瀏覽器使用單一進程處理UI 更新和JavaScript 運行等多個任務，而同一時間只能有一個任務被執行。
JavaScript運行了多長時間，那麼在瀏覽器空閒下來響應用戶輸入之前的等待時間就有多長。
從基本層面說，這意味著<script>標籤的出現使整個頁面因腳本解析、運行而出現等待。不論實際的JavaScript 程式碼是內聯的還是包含在一個不相干的外部檔案中，頁面下載和解析過程必須停下，等待腳本完成這些處理，然後才能繼續。這是頁面生命週期必不可少的部分，因為腳本可能在運行過程中修改頁面內容。 </script>
典型的例子是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 程式碼，然後再繼續解析、翻譯頁面。同樣的事情發生在使用src 屬性載入JavaScript 的過程中。瀏覽器必須先下載外部文件的程式碼，這要佔用一些時間，然後解析並執行此程式碼。此過程中，頁面解析和使用者互動是被完全阻塞的。 </p> <p>HTML 4 文件指出，一個<script>標籤可以放在HTML 文件的<head>或<body>標籤中，可以在其中多次出現。傳統上，<script>標籤用於載入外部JavaScript 檔案。 <head>部分除此類程式碼外，還包含<link>標籤用於載入外部CSS 檔案和其他頁面中間件。也就是說，最好把風格和行為所依賴的部分放在一起，首先加載他們，使得頁面可以得到正確的外觀和行為。例如：</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <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> </pre><div class="contentsignin">登入後複製</div></div> </div> <p>雖然這些程式碼看起來是無害的，但它們確實存在效能問題：在<head>部分載入了三個JavaScript 檔案。因為每個<script>標籤阻塞了頁面的解析過程，直到它完整地下載並執行了外部JavaScript 程式碼之後，頁面處理才能繼續進行。使用者必須忍受這種可以察覺的延遲。 </p> <p>請記住，瀏覽器在遇到<body>標籤之前，不會渲染頁面的任何部分。用這種方法把腳本放在頁面的頂端，將導致一個可以察覺的延遲，通常表現為：頁面打開時，首先顯示為一幅空白的頁面，而此時用戶即不能閱讀，也不能與頁面進行交互操作</p> <p>Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允許並行下載JavaScript 檔案。這個好消息表明，當一個<script>標籤正在下載外部資源時，不必阻塞其他<script>標籤。不幸的是，JavaScript 的下載仍然要阻塞其他資源的下載過程，即使腳本之間的下載過程互不阻塞，頁面仍舊要等待所有JavaScript程式碼下載並執行完成之後才能繼續。所以，當瀏覽器透過允許並行下載提高效能之後，該問題並沒有完全解決，腳本阻塞仍舊是一個問題。 </p> <p>因為腳本阻塞其他頁面資源的下載過程，所以建議的辦法是：將所有<script>標籤放在盡可能接近<body>標籤底部的位置，盡量減少對整個頁面下載的影響。例如：</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <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> </pre><div class="contentsignin">登入後複製</div></div> </div> <p>此程式碼展示了所建議的<script>標籤在HTML 檔案中的位置。儘管腳本下載之間互相阻塞，但頁面已經下載完成並且顯示在用戶面前了，進入頁面的速度不會顯得太慢。 </script>
以上就是關於javascript優化內容中的Loading and Execution載入和運行的相關介紹，希望對大家的學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Linux系統中執行.sh檔？
Mar 14, 2024 pm 06:42 PM
如何在Linux系統中執行.sh檔？在Linux系統中，.sh文件是一種被稱為Shell腳本的文件，用於執行一系列的命令。執行.sh檔案是非常常見的操作，本文將介紹如何在Linux系統中執行.sh文件，並提供具體的程式碼範例。方法一：使用絕對路徑執行.sh文件要在Linux系統中執行一個.sh文件，可以使用絕對路徑來指定該文件的位置。以下是具體的步驟：打開終
C++ 程式最佳化：時間複雜度降低技巧
Jun 01, 2024 am 11:19 AM
時間複雜度衡量演算法執行時間與輸入規模的關係。降低C++程式時間複雜度的技巧包括：選擇合適的容器（如vector、list）以最佳化資料儲存和管理。利用高效演算法（如快速排序）以減少計算時間。消除多重運算以減少重複計算。利用條件分支以避免不必要的計算。透過使用更快的演算法（如二分搜尋）來優化線性搜尋。
PHP程式必備：安裝這些才能順利運作！
Mar 27, 2024 pm 05:54 PM
PHP程式必備：安裝這些才能順利運作！ PHP是一種流行的伺服器端腳本語言，廣泛用於開發網頁應用程式。要成功運行PHP程序，首先需要在伺服器上安裝一些必備的軟體和工具。在本文中，我們將介紹必須安裝的軟體和工具，並附上具體的程式碼範例，以幫助您順利執行PHP程式。一、PHP解譯器PHP程式的核心是PHP解譯器，負責解析執行PHP程式碼。要安裝PHP解譯器，可以按照
優化WIN7系統開機啟動項目的操作方法
Mar 26, 2024 pm 06:20 PM
1.在桌面上按組合鍵(win鍵+R)開啟運行窗口，接著輸入【regedit】，回車確認。 2.開啟登錄編輯程式後，我們依序點選展開【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】，然後看目錄裡有沒有Serialize項，如果沒有我們可以點選右鍵Explorer，新建項，並將其命名為Serialize。 3.接著點選Serialize，然後在右邊窗格空白處點選滑鼠右鍵，新建一個DWORD(32)位元值，並將其命名為Star
Vivox100s參數配置大揭密：處理器效能如何最佳化？
Mar 24, 2024 am 10:27 AM
Vivox100s參數配置大揭密：處理器效能如何最佳化？在當今科技快速發展的時代，智慧型手機已經成為我們日常生活不可或缺的一部分。作為智慧型手機的重要組成部分，處理器的效能優化直接關係到手機的使用體驗。 Vivox100s作為一款備受矚目的智慧型手機，其參數配置備受關注，尤其是處理器效能的最佳化議題更是備受用戶關注。處理器作為手機的“大腦”，直接影響手機的運行速度
解決 PHP 函數效率低的方法有哪些？
May 02, 2024 pm 01:48 PM
PHP函數效率最佳化的五大方法：避免不必要的變數複製。使用引用以避免變數複製。避免重複函數呼叫。內聯簡單的函數。使用數組優化循環。
優化 Discuz 線上人數顯示的方法分享
Mar 10, 2024 pm 12:57 PM
優化Discuz線上人數顯示的方法分享Discuz是一款常用的論壇程序，透過優化線上人數的顯示，可以提升使用者體驗和網站的整體效能。本文將分享一些優化線上人數顯示的方法，並提供具體的程式碼範例供您參考。一、利用快取在Discuz的線上人數顯示中，通常需要頻繁地查詢資料庫來獲取最新的線上人數數據，這會增加資料庫的負擔和影響網站的效能。為了解決這個問題，我
