資訊專欄INFORMATION COLUMN
摘要：嵌套對象成員會造成重大性能影響盡量少用。一般來說你可以通過這種方法提高代碼的性能將經常使用的對象成員數組項和域外變量存入局部變量中。在反復訪問的地方使用局部變量存放引用小心地處理集合因為他們表現出存在性總是對底層文檔重新查詢。
前言
本期我來給大家推薦的書是《高性能JavaScript》,在這本書中我們能夠了解 javascript 開發過程中的性能瓶頸,如何提升各方面的性能，包括代碼的加載、運行、DOM交互、頁面生存周期等。同樣我們今天還是用思維導圖的方式來精讀一遍。（思維導圖圖片可能有點小，記得點開看，你會有所收獲）
加載和執行
管理瀏覽器中的 JavaScript 代碼是個棘手的問題,因為代碼執行阻塞了其他瀏覽器處理過程,諸如用戶 界面繪制。每次遇到
在 JavaScript 中,數據存儲位置可以對代碼整體性能產生重要影響。有四種數據訪問類型:直接量,變 量,數組項,對象成員。它們有不同的性能考慮。
直接量和局部變量訪問速度非常快,數組項和對象成員需要更長時間。局部變量比域外變量快,因為它位于作用域鏈的第一個對象中。變量在作用域鏈中的位置越深,訪問所需 的時間就越長。全局變量總是最慢的,因為它們總是位于作用域鏈的最后一環。避免使用 with 表達式,因為它改變了運行期上下文的作用域鏈。而且應當小心對待 try-catch 表達式的 catch 子句,因為它具有同樣效果。嵌套對象成員會造成重大性能影響,盡量少用。
一個屬性或方法在原形鏈中的位置越深,訪問它的速度就越慢。一般來說,你可以通過這種方法提高 JavaScript 代碼的性能:將經常使用的對象成員,數組項,和域外變 量存入局部變量中。然后,訪問局部變量的速度會快于那些原始變量。通過使用這些策略,你可以極大地提高那些需要大量 JavaScript 代碼的網頁應用的實際性能。
DOM 編程
DOM 訪問和操作是現代網頁應用中很重要的一部分。但每次你通過橋梁從 ECMAScript 島到達 DOM 島 時,都會被收取“過橋費”。為減少 DOM 編程中的性能損失,請牢記以下幾點:
最小化 DOM 訪問,在 JavaScript 端做盡可能多的事情。在反復訪問的地方使用局部變量存放 DOM 引用.小心地處理 HTML 集合,因為他們表現出“存在性”,總是對底層文檔重新查詢。將集合的 length 屬性緩 存到一個變量中,在迭代中使用這個變量。如果經常操作這個集合,可以將集合拷貝到數組中。
如果可能的話,使用速度更快的 API,諸如 querySelectorAll()和 firstElementChild。注意重繪和重排版;批量修改風格,離線操作 DOM 樹,緩存并減少對布局信息的訪問。動畫中使用絕對坐標,使用拖放代理。使用事件托管技術最小化事件句柄數量。
算法和流程控制
正如其他編程語言,代碼的寫法和算法選用影響 JavaScript 的運行時間。與其他編程語言不同的是, JavaScript 可用資源有限,所以優化技術更為重要。
for,while,do-while 循環的性能特性相似,誰也不比誰更快或更慢。除非你要迭代遍歷一個屬性未知的對象,否則不要使用 for-in 循環。改善循環性能的最好辦法是減少每次迭代中的運算量,并減少循環迭代次數。
一般來說,switch 總是比 if-else 更快,但并不總是最好的解決方法。當判斷條件較多時,查表法比 if-else 或者 switch 更快。
瀏覽器的調用棧尺寸限制了遞歸算法在 JavaScript 中的應用;棧溢出錯誤導致其他代碼也不能正常執行。如果你遇到一個棧溢出錯誤,將方法修改為一個迭代算法或者使用制表法可以避免重復工作。
運行的代碼總量越大,使用這些策略所帶來的性能提升就越明顯。
字符串和正則表達式
密集的字符串操作和粗淺地編寫正則表達式可能是主要性能障礙,但本章中的建議可幫助您避免常見缺陷。當連接數量巨大或尺寸巨大的字符串時,數組聯合是 IE7 和它的早期版本上唯一具有合理性能的方法。如果你不關心 IE7 和它的早期版本,數組聯合是連接字符串最慢的方法之一。使用簡單的+和+=取而代之, 可避免(產生)不必要的中間字符串。
回溯既是正則表達式匹配功能基本的組成部分,又是正則表達式影響效率的常見原因。回溯失控發生在正則表達式本應很快發現匹配的地方,因為某些特殊的匹配字符串動作,導致運行緩慢 甚至瀏覽器崩潰。避免此問題的技術包括:使相鄰字元互斥,避免嵌套量詞對一個字符串的相同部分多次 匹配,通過重復利用前瞻操作的原子特性去除不必要的回溯。
提高正則表達式效率的各種技術手段,幫助正則表達式更快地找到匹配,以及在非匹配位置上花費更少 時間(見《更多提高正則表達式效率的方法》)。正則表達式并不總是完成工作的最佳工具,尤其當你只是搜索一個文本字符串時。
雖然有很多方法來修整一個字符串,使用兩個簡單的正則表達式(一個用于去除頭部空格,另一個用于 去除尾部空格)提供了一個簡潔、跨瀏覽器的方法,適用于不同內容和長度的字符串。從字符串末尾開始 循環查找第一個非空格字符,或者在一個混合應用中將此技術與正則表達式結合起來,提供了一個很好的 替代方案,它很少受到字符串整體長度的影響。
快速響應用戶界面
JavaScript 和用戶界面更新在同一個進程內運行,同一時刻只有其中一個可以運行。這意味著當 JavaScript 代碼正在運行時,用戶界面不能響應輸入,反之亦然。有效地管理 UI 線程就是要確保 JavaScript 不能運行 太長時間,以免影響用戶體驗。最后,請牢記如下幾點:
JavaScript 運行時間不應該超過 100 毫秒。過長的運行時間導致 UI 更新出現可察覺的延遲,從而對整體 用戶體驗產生負面影響。
JavaScript 運行期間,瀏覽器響應用戶交互的行為存在差異。無論如何,JavaScript 長時間運行將導致用 戶體驗混亂和脫節。
定時器可用于安排代碼推遲執行,它使得你可以將長運行腳本分解成一系列較小的任務。
網頁工人線程是新式瀏覽器才支持的特性,它允許你在 UI 線程之外運行 JavaScript 代碼而避免鎖定 UI。網頁應用程序越復雜,積極主動地管理 UI 線程就越顯得重要。沒有什么 JavaScript 代碼可以重要到允 許影響用戶體驗的程度。
Ajax
高性能 Ajax 包括:知道你項目的具體需求,選擇正確的數據格式和與之相配的傳輸技術。
作為數據格式,純文本和 HTML 是高度限制的,但它們可節省客戶端的 CPU 周期。XML 被廣泛應用 普遍支持,但它非常冗長且解析緩慢。JSON 是輕量級的,解析迅速(作為本地代碼而不是字符串),交 互性與 XML 相當。字符分隔的自定義格式非常輕量,在大量數據集解析時速度最快,但需要編寫額外的 程序在服務器端構造格式,并在客戶端解析。
當從頁面域請求數據時,XHR 提供最完善的控制和靈活性,盡管它將所有傳入數據視為一個字符串, 這有可能降低解析速度。另一方面,動態腳本標簽插入技術允許跨域請求和本地運行 JavaScript 和 JSON, 雖然它的接口不夠安全,而且不能讀取信息頭或響應報文代碼。多部分 XHR 可減少請求的數量,可在一次響應中處理不同的文件類型,盡管它不能緩存收到的響應報文。當發送數據時,圖像燈標是最簡單和最 有效的方法。XHR 也可用 POST 方法發送大量數據。
除這些格式和傳輸技術之外,還有一些準則有助于進一步提高 Ajax 的速度:
減少請求數量,可通過 JavaScript 和 CSS 文件打包,或者使用 MXHR。
縮短頁面的加載時間,在頁面其它內容加載之后,使用 Ajax 獲取少量重要文件。
確保代碼錯誤不要直接顯示給用戶,并在服務器端處理錯誤。
學會何時使用一個健壯的 Ajax 庫,何時編寫自己的底層 Ajax 代碼。
Ajax 是提升你網站潛在性能之最大的改進區域之一,因為很多網站大量使用異步請求,又因為它提供 了許多不相關問題的解決方案,這些問題諸如,需要加載太多資源。對 XHR 的創造性應用是如此的與眾 不同,它不是呆滯不友好的界面,而是響應迅速且高效的代名詞;它不會引起用戶的憎恨,誰見了它都會 愛上它。
編程實踐JavaScript 提出了一些獨特的性能挑戰,關系到你組織代碼的方法。網頁應用變得越來越高級,包含的 JavaScript 代碼越來越多,出現了一些模式和反模式。請牢記以下編程經驗:
通過避免使用 eval_r()和 Function()構造器避免二次評估。此外,給 setTimeout()和 setInterval()傳遞函數參 數而不是字符串參數。
創建新對象和數組時使用對象直接量和數組直接量。它們比非直接量形式創建和初始化更快。
避免重復進行相同工作。當需要檢測瀏覽器時,使用延遲加載或條件預加載。
當執行數學遠算時,考慮使用位操作,它直接在數字底層進行操作。
原生方法總是比 JavaScript 寫的東西要快。盡量使用原生方法。
構建并部署高性能 javascript 應用開發和部署過程對基于 JavaScript 的應用程序可以產生巨大影響,最重要的幾個步驟如下:
合并 JavaScript 文件,減少 HTTP 請求的數量
使用 YUI 壓縮器緊湊處理 JavaScript 文件
以壓縮形式提供 JavaScript 文件(gzip 編碼)
通過設置 HTTP 響應報文頭使 JavaScript 文件可緩存,通過向文件名附加時間戳解決緩存問題
使用內容傳遞網絡(CDN)提供 JavaScript 文件,CDN 不僅可以提高性能,它還可以為你管理壓縮和緩 存
所有這些步驟應當自動完成,不論是使用公開的開發工具諸如 Apache Ant,還是使用自定義的開發工具 以實現特定需求。如果你使這些開發工具為你服務,你可以極大改善那些大量使用 JavaScript 代碼的網頁 應用或網站的性能。
工具當網頁或應用程序變慢時,分析網上傳來的資源,分析腳本的運行性能,使你能夠集中精力在那些需要 努力優化的地方。使用網絡分析器找出加載腳本和其它頁面資源的瓶頸所在,這有助于決定哪些腳本需要延遲加載,或者 進行進一步分析。傳統的智慧告訴我們應盡量減少 HTTP 請求的數量,盡量延遲加載腳本以使頁面渲染速度更快,向用戶 提供更好的整體體驗。使用性能分析器找出腳本運行時速度慢的部分,檢查每個函數所花費的時間,以及函數被調用的次數, 通過調用棧自身提供的一些線索來找出哪些地方應當努力優化。雖然花費時間和調用次數通常是數據中最有價值的點,還是應當仔細察看函數的調用過程,可能發現其 它優化方法。這些工具在那些現代代碼所要運行的編程環境中不再神秘。在開始優化工作之前使用它們,確保開發時 間用在解決問題的刀刃上。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96946.html
摘要：強制類型轉換本章介紹了的數據類型之間的轉換即強制類型轉換包括顯式和隱式。強制類型轉換常常為人詬病但實際上很多時候它們是非常有用的。隱式強制類型轉換則沒有那么明顯是其他操作的副作用。在處理強制類型轉換的時候要十分小心尤其是隱式強制類型轉換。 前言 《你不知道的 javascript》是一個前端學習必讀的系列，讓不求甚解的JavaScript開發者迎難而上，深入語言內部，弄清楚JavaSc...
摘要：可以將耗時任務拆解出去，降低主線程的壓力，避免主線程無響應。主線程接收發消息每個實例通過接收消息，通過發送消息。收發主線程消息和主線程代碼類似，在代碼中，也是接收消息，這個消息來自主線程或者其它。 1 引言 本周精讀的文章是 speedy-introduction-to-web-workers，是一篇 Web Workers 快速入門的文章，借精讀這篇文章的機會，談談對 Web Wor...
摘要：目前我們的業務項目采用的來進行優化和首屏性能提升。可變性需要讓開發人員降低開發時的基準線，來保證每一個用戶的體驗。對于路由的切分以及庫的引入來說，這一個原則至關重要。快速生成一份站點的性能審查報告。 The Cost Of JavaScript 2018 關于原文 原文是在Medium上面看到的，Chrome工程師Addy Osmani發布的一篇文章，這位的Medium上面的自我介紹里...
摘要：從社區和過往的經驗而言異步編程的難題已經基本解決無論是通過事件還是通過模式或者流程控制庫。本章主要介紹了主流的幾種異步編程解決方案這是目前中主要使用的方案。最后因為人們總是習慣性地以線性的方式進行思考以致異步編程相對較為難以掌握。 前言 如果你想要深入學習Node，那你不能錯過《深入淺出Node.js》這本書，它從不同的視角介紹了 Node 內在的特點和結構。由首章Node 介紹為索引...
閱讀 3024·2021-10-08 10:18
閱讀 741·2019-08-30 15:54
閱讀 1072·2019-08-29 18:43
閱讀 2449·2019-08-29 15:33
閱讀 1310·2019-08-29 15:29
閱讀 1611·2019-08-29 13:29
閱讀 1031·2019-08-26 13:46
閱讀 1707·2019-08-26 11:55
