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