摘要:高性能小結文章轉載于我的博客最近看完了動物叢書的高性能,覺得那本書的小結部分寫得非常不錯,簡潔輕快易懂概括性很強。由于局部變量存在于作用域鏈的起始位置,因此訪問局部變量比訪問跨作用域變量更快。
高性能javascript小結
文章轉載于我的CSDN博客:http://blog.csdn.net/hello_world_20/article/details/46793317
最近看完了動物叢書的《高性能javascript》,覺得那本書的小結部分寫得非常不錯,簡潔、輕快易懂、概括性很強。無奈書是圖書館借的,網上也沒有類似的總結,所以寫篇博客,記錄下來,也希望能夠幫助到大家。
第一章:減少javascript對性能的影響:
閉合標簽之前,將所有的 標簽放到頁面底部。這能確保在腳本執行前頁面已經完成了渲染。不然 script 標簽會阻塞頁面的渲染。
合并腳本。頁面中的 script 標簽越少,加載也就越快,響應也更迅速。無論外鏈文件還是內嵌腳本都是如此。因為每一次 script 外部文件都會有一次HTTP請求
有多中無阻塞下載javascript的方法
使用defer屬性
使用動態創建的 script 元素來下載并執行代碼。
使用XHR對象下載javascript代碼并注入頁面中
第二章:數據訪問
對象成員的嵌套也會開銷系統資源。location.href永遠會比window.location.href快。
訪問直接量和局部變量的速度最快,相反,訪問數組元素和對象成員相對較慢。
由于局部變量存在于作用域鏈的起始位置,因此訪問局部變量比訪問跨作用域變量更快。變量在作用域鏈中的位置越深,訪問所需時間就越長。由于全局變量總處在作用域鏈的最末端,因此訪問速度也是最慢的。
避免使用with語句,因為它會改變運行期上下文作用域鏈。同樣,try-catch語句中的catch子句也有同樣的影響,因此要小心使用。
嵌套的對象成員會明顯影響性能,盡量少用
屬性或方法在原型鏈中的位置越深,訪問它的速度也越慢。
局部通常來說,你可以通過把常用的對象成員、數組元素、跨域變量保存在變量中來改善javascript的性能,因為局部變量訪問速度最快。
第三章:DOM編程
最小化DOM訪問次數,盡可能在javascript端處理
如果需要多次訪問某個DOM節點,請使用局部變量存儲它的引用
小心處理HTML集合,因為它實時聯系著底層文檔。把集合的長度緩存到一個變量中,并在迭代中使用它。如果需要經常操作集合,建議把它拷貝到一個數組中。
如果可能的話,使用速度更快的API,比如querySelectorAll()和firstElementChild()
要留意重繪和重排;批量修改樣式時,“離線”操作DOM樹,使用緩存,并減少訪問布局信息的次數。
動畫中使用絕對定位,使用拖放代理
使用事件委托來減少事件處理器的數量
第四章:算法和流程控制
for、while和do-while循環性能相似,所以沒有一種循環類型明顯快于或慢于其他類型
避免使用for-in循環,除非你需要遍歷一個屬性數量未知的對象
改善循環性能的最佳方式是減少每次迭代的運算量和減少循環迭代次數
通常來說,switch總是比if-else快,但并不總是最佳解決方案
在判斷條件較多時,使用查找表比if-else和switch更快
瀏覽器的調用棧大小限制了遞歸算法在javascript中的應用;棧溢出錯誤會導致其他代碼中斷運行
如果你遇到棧溢出錯誤,可將方法改為迭代算法,或使用Memoization來避免重復計算。
第五章:字符串和正則表達式
當連接數量巨大或尺寸巨大的字符串時,數組項連接是唯一在IE7及更早版本中性能合理的方法
如果不考慮IE7及更早版本的性能,數組項連接是最慢的字符串連接方法之一。推薦使用簡單的+和+=操作符替代,避免不必要的中間字符串
回溯既是正則表達式匹配功能的基本組成部分,也是正則表達式的低效之源
回溯失控發生在正則表達式本應該快速匹配的地方,但因為某些特殊的字符串匹配動作導致運行緩慢甚至瀏覽器崩潰。避免這個問題的辦法是:使相鄰的字元互斥,避免嵌套量詞對同一字符串的相同部分多次匹配,通過重復利用向前查看的原子組去除不必要的回溯
提高正則表達式效率的各種技術手段會有助于正則表達式更快地匹配,并在非匹配位置上花更少的時間
正則表達式并不總是完成工作的最佳工具,尤其當你只搜索字面字符串的時候
盡管有許多方法可以去除字符串的首尾空白,但使用兩個簡單的正則表達式(一個用來去除頭部空白,另一個用于去除尾部空白)來處理大量字符串內容能提供一個簡潔而跨瀏覽器的方法。從字符串末尾開始循環向前搜索第一個非空白字符,或者將此技術同正則表達式結合起來,會提供一個更好的替代方案,它很少受到字符串長度的影響
第六章:快速響應的用戶界面
任何javascript任務都不應當執行超過100毫秒。過長的運行時間會導致UI更新出現明顯的延遲,從而對用戶體驗產生負面的影響。
javascript運行期間,瀏覽器響應用戶交互的行為存在差異。無論如何,javascript長時間運行將導致用戶體驗變得混亂和脫節
定時器可用來安排代碼延遲執行,它使得你可以把長時間運行的腳本分解成一系列的小任務
Web workers是新版瀏覽器支持的特性,它允許你在UI線程外部執行javascript代碼,從而避免鎖定UI
第七章:Ajax
作為數據格式,純文本和HTML只適用于特定場合,但它們可以節省客戶端的CPU周期。XML被廣泛應用而且支持良好,但是它十分笨重且解析緩慢。JSON是輕量級的,解析速度快(被視為原生代碼而不是字符串),通用性與XML相當。字符分隔的自定義格式十分輕量,在解析大量數據集時非常快,但需要編寫額外的服務端構造程序,并在客戶端解析。
當從頁面當前所處的域下請求數據時,XHR提供了最完善的控制和靈活性,盡管它會把接收到的所有數據當成一個字符串,且這有可能降低解析速度。另一方面,動態腳本注入允許跨域請求和本地執行javascript和JSON但是它的接口不那么安全,而且還不能讀取頭信息或相應代碼。Multipart XHR可以用來減少請求數,并處理一個響應中的各種文件類型,但是它不能緩存接收到的響應。當需要發送數據時,圖片信標是一種簡單而有效的方法。XHR還可以用POST方法發送大量數據。
除了這些格式和傳輸技術,還有一些準則有助于加速你的Ajax
減少請求數,可通過合并javascript和CSS文件,或使用MXHR
縮短頁面的加載時間,頁面主要內容加載完成后,用Ajax獲取那些次要的文件
確保你的代碼錯誤不會輸出給用戶,并在服務端處理錯誤
指導何時使用成熟的Ajax類庫,以及何時編寫自己的底層Ajax代碼
第八章:編程實踐
通過避免使用eval()和Function()構造器來避免雙重求值帶來的性能消耗。同樣的,給setTimeout()和setInterval()傳遞函數而不是字符串作為參數
盡量使用直接量創建對象和數組。直接量的創建和初始化都比非直接量形式要快
避免做重復的工作。當需要檢測瀏覽器時,可使用延遲加載或條件預加載
在進行數學計算時,考慮使用直接操作數字的二進制形式的位運算
javascript的原生方法總會比你寫的任何代碼都要快。盡量使用原生的方法
第九章:構建并部署高性能javascript應用
合并javascript文件以減少HTTP請求數
使用YUN Compressor壓縮javascript文件
在服務器端壓縮javascript文件(Gzip編碼)
通過正確設置HTTP響應頭來緩存javascript文件,通過向文件名增加時間戳來避免緩存問題
使用CDN提供javascript文件,CDN不僅可以提升性能,它也為你管理文件的壓縮與緩存
第十章:工具(截稿時期是2010年)
使用網絡分析工具找出加載腳本和頁面中其他資源的瓶頸,這回幫助你決定哪些腳本需要加載延遲,或者需要進一步分析
盡管傳統的經驗告訴我們要盡量減少HTTP請求數,但把腳本盡可能延遲加載可以加快頁面渲染速度,給用戶帶來更好的體驗
使用性能分析工具照吃腳本運行過程中速度慢得地方,檢查每個函數所消耗的時間,以及函數被調用次數,通過調用棧自身提供的一些線索來找出需要集中精力優化的地方
盡管耗費的時間和條用次數通常是數據中最有價值的部分,但仔細觀察函數的調用過程,你也許會發現其他優化目標
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86104.html
摘要:最近在全力整理高性能的文檔,并重新學習一遍,放在這里方便大家查看并找到自己需要的知識點。 最近在全力整理《高性能JavaScript》的文檔,并重新學習一遍,放在這里方便大家查看并找到自己需要的知識點。 前端開發文檔 高性能JavaScript 第1章:加載和執行 腳本位置 阻止腳本 無阻塞的腳本 延遲的腳本 動態腳本元素 XMLHTTPRequest腳本注入 推薦的無阻塞模式...
摘要:性能訪問字面量和局部變量的速度是最快的,訪問數組和對象成員相對較慢變量標識符解析過程搜索執行環境的作用域鏈,查找同名標識符。建議將全局變量存儲到局部變量,加快讀寫速度。優化建議將常用的跨作用域變量存儲到局部變量,然后直接訪問局部變量。 缺陷 這本書是2010年出版的,這本書談性能是有時效性的,現在馬上就2018年了,這幾年前端發展的速度是飛快的,書里面還有一些內容考慮IE6、7、8的東...
摘要:所以在此次開發中,嘗試了小步快跑快速迭代的方法。開發,不僅是在開發運用上的提升,還是一個開源項目的完整實踐。由于時間原因,在開發完基礎版本后就去做別的項目。所以,好的文檔是項目的開門鑰匙。兩個項目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈: laker.me--進擊的程序媛Github:...
摘要:游戲開發實戰主要講解使用來開發和設計各類常見游戲的思路和技巧,在介紹相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧,在介紹HTML5 Canvas相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。在本書...
閱讀 1120·2023-04-26 02:46
閱讀 623·2023-04-25 19:38
閱讀 638·2021-10-14 09:42
閱讀 1234·2021-09-08 09:36
閱讀 1353·2019-08-30 15:44
閱讀 1318·2019-08-29 17:23
閱讀 2236·2019-08-29 15:27
閱讀 801·2019-08-29 14:15