JavaScript優(yōu)化專題之Loading and Execution加載和運行
JavaScript 在瀏覽器中的性能,可認為是開發(fā)者所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特征而復雜,也就是說,當JavaScript 運行時其他的事情不能被瀏覽器處理。事實上,大多數(shù)瀏覽器使用單進程處理UI 更新和JavaScript 運行等多個任務,而同一時間只能有一個任務被執(zhí)行。
JavaScript運行了多長時間,那么在瀏覽器空閑下來響應用戶輸入之前的等待時間就有多長。
從基本層面說,這意味著<script>標簽的出現(xiàn)使整個頁面因腳本解析、運行而出現(xiàn)等待。不論實際的JavaScript 代碼是內(nèi)聯(lián)的還是包含在一個不相干的外部文件中,頁面下載和解析過程必須停下,等待腳本完成這些處理,然后才能繼續(xù)。這是頁面生命周期必不可少的部分,因為腳本可能在運行過程中修改頁面內(nèi)容。
典型的例子是document.write()函數(shù),例如:
<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>標簽中添加內(nèi)容。因此,瀏覽器停下來,運行此JavaScript 代碼,然后再繼續(xù)解析、翻譯頁面。同樣的事情發(fā)生在使用src 屬性加載JavaScript 的過程中。瀏覽器必須首先下載外部文件的代碼,這要占用一些時間,然后解析并運行此代碼。此過程中,頁面解析和用戶交互是被完全阻塞的。
HTML 4 文檔指出,一個<script>標簽可以放在HTML 文檔的<head>或<body>標簽中,可以在其中多次出現(xiàn)。傳統(tǒng)上,<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>標簽之前,不會渲染頁面的任何部分。用這種方法把腳本放在頁面的頂端,將導致一個可以察覺的延遲,通常表現(xiàn)為:頁面打開時,首先顯示為一幅空白的頁面,而此時用戶即不能閱讀,也不能與頁面進行交互操作
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 文件中的位置。盡管腳本下載之間互相阻塞,但頁面已經(jīng)下載完成并且顯示在用戶面前了,進入頁面的速度不會顯得太慢。
以上就是關于javascript優(yōu)化內(nèi)容中的Loading and Execution加載和運行的相關介紹,希望對大家的學習有所幫助。
相關文章
layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法
今天小編就為大家分享一篇layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實現(xiàn)圖片轉換成base64的各種應用場景實例分析
這篇文章主要介紹了JS實現(xiàn)圖片轉換成base64的各種應用場景,結合實例形式分析了javascript實現(xiàn)圖片轉換成base64的各種應用場景的相關操作技巧與使用注意事項,需要的朋友可以參考下2018-06-06