高性能JavaScript讀書筆記

第一章:減少javascript對性能的影響:

</body>閉合標簽之前砸民,將所有的<script>標簽放到頁面底部抵怎。這能確保在腳本執(zhí)行前頁面已經(jīng)完成了渲染。不然<script>標簽會阻塞頁面的渲染阱洪。
合并腳本: 頁面中的<script>標簽越少便贵,加載也就越快,響應(yīng)也更迅速冗荸。無論外鏈文件還是內(nèi)嵌腳本都是如此承璃。因為每一次<script>外部文件都會有一次HTTP請求

有多中無阻塞下載javascript的方法
使用defer屬性(不推薦,只有IE支持)
使用動態(tài)創(chuàng)建的<script>元素來下載并執(zhí)行代碼蚌本。
使用XHR對象下載javascript代碼并注入頁面中

第二章:數(shù)據(jù)訪問

對象成員的嵌套也會開銷系統(tǒng)資源盔粹。location.href永遠會比window.location.href快。
訪問直接量和局部變量的速度最快程癌,相反舷嗡,訪問數(shù)組元素和對象成員相對較慢。
由于局部變量存在于作用域鏈的起始位置嵌莉,因此訪問局部變量比訪問跨作用域變量更快进萄。變量在作用域鏈中的位置越深,訪問所需時間就越長。由于全局變量總處在作用域鏈的最末端中鼠,因此訪問速度也是最慢的可婶。
避免使用with語句,因為它會改變運行期上下文作用域鏈援雇。同樣矛渴,try-catch語句中的catch子句也有同樣的影響,因此要小心使用惫搏。
嵌套的對象成員會明顯影響性能具温,盡量少用
屬性或方法在原型鏈中的位置越深,訪問它的速度也越慢筐赔。
通常來說铣猩,你可以通過把常用的對象成員、數(shù)組元素川陆、跨域變量保存在局部變量中來改善javascript的性能剂习,因為局部變量訪問速度最快。

第三章:DOM編程

最小化DOM訪問次數(shù)较沪,盡可能在javascript端處理
如果需要多次訪問某個DOM節(jié)點,請使用局部變量存儲它的引用
小心處理HTML集合失仁,因為它實時聯(lián)系著底層文檔尸曼。把集合的長度緩存到一個變量中,并在迭代中使用它萄焦。如果需要經(jīng)常操作集合控轿,建議把它拷貝到一個數(shù)組中。
如果可能的話拂封,使用速度更快的API茬射,比如querySelectorAll()和firstElemengChild()
要留意重繪和重排;批量修改樣式時冒签,“離線”操作DOM樹在抛,使用緩存,并減少訪問布局信息的次數(shù)萧恕。
動畫中使用絕對定位刚梭,使用拖放代理
使用事件委托來減少事件處理器的數(shù)量

第四章:算法和流程控制

for、while和do-while循環(huán)性能相似票唆,所以沒有一種循環(huán)類型明顯快于或慢于其他類型
避免使用for-in循環(huán)朴读,除非你需要遍歷一個屬性數(shù)量未知的對象
改善循環(huán)性能的最佳方式是減少每次迭代的運算量和減少循環(huán)迭代次數(shù)
通常來說,switch總是比if-else快走趋,但并不總是最佳解決方案
在判斷條件較多時衅金,使用查找表比if-else和switch更快
瀏覽器的調(diào)用棧大小限制了遞歸算法在javascript中的應(yīng)用;棧溢出錯誤會導(dǎo)致其他代碼中斷運行
如果你遇到棧溢出錯誤,可將方法改為迭代算法氮唯,或使用Memoization來避免重復(fù)計算鉴吹。

第六章:快速響應(yīng)的用戶界面

任何javascript任務(wù)都不應(yīng)當(dāng)執(zhí)行超過100毫秒。過長的運行時間會導(dǎo)致UI更新出現(xiàn)明顯的延遲您觉,從而對用戶體驗產(chǎn)生負面的影響拙寡。
javascript運行期間,瀏覽器響應(yīng)用戶交互的行為存在差異琳水。無論如何肆糕,javascript長時間運行將導(dǎo)致用戶體驗變得混亂和脫節(jié)
定時器可用來安排代碼延遲執(zhí)行,它使得你可以把長時間運行的腳本分解成一系列的小任務(wù)
Web workers是新版瀏覽器支持的特性在孝,它允許你在UI線程外部執(zhí)行javascript代碼诚啃,從而避免鎖定UI

第七章:Ajax

作為數(shù)據(jù)格式,純文本和HTML只適用于特定場合私沮,但它們可以節(jié)省客戶端的CPU周期始赎。XML被廣泛應(yīng)用而且支持良好,但是它十分笨重且解析緩慢仔燕。JSON是輕量級的造垛,解析速度快(被視為原生代碼而不是字符串),通用性與XML相當(dāng)晰搀。字符分隔的自定義格式十分輕量五辽,在解析大量數(shù)據(jù)集時非常快外恕,但需要編寫額外的服務(wù)端構(gòu)造程序杆逗,并在客戶端解析。
當(dāng)從頁面當(dāng)前所處的域下請求數(shù)據(jù)時鳞疲,XHR提供了最完善的控制和靈活性罪郊,盡管它會把接收到的所有數(shù)據(jù)當(dāng)成一個字符串,且這有可能降低解析速度尚洽。另一方面悔橄,動態(tài)腳本注入允許跨域請求和本地執(zhí)行javascript和JSON但是它的接口不那么安全,而且還不能讀取頭信息或相應(yīng)代碼翎朱。Multipart XHR可以用來減少請求數(shù)橄维,并處理一個響應(yīng)中的各種文件類型,但是它不能緩存接收到的響應(yīng)拴曲。當(dāng)需要發(fā)送數(shù)據(jù)時争舞,圖片信標是一種簡單而有效的方法。XHR還可以用POST方法發(fā)送大量數(shù)據(jù)澈灼。
除了這些格式和傳輸技術(shù)竞川,還有一些準則有助于加速你的Ajax

減少請求數(shù)店溢,可通過合并javascript和CSS文件,或使用MXHR
縮短頁面的加載時間委乌,頁面主要內(nèi)容加載完成后床牧,用Ajax獲取那些次要的文件
確保你的代碼錯誤不會輸出給用戶,并在服務(wù)端處理錯誤
指導(dǎo)何時使用成熟的Ajax類庫遭贸,以及何時編寫自己的底層Ajax代碼

第八章:編程實踐

通過避免使用eval()和Function()構(gòu)造器來避免雙重求值帶來的性能消耗戈咳。同樣的,給setTimeout()和setInterval()傳遞函數(shù)而不是字符串作為參數(shù)
盡量使用直接量創(chuàng)建對象和數(shù)組壕吹。直接量的創(chuàng)建和初始化都比非直接量形式要快
避免做重復(fù)的工作著蛙。當(dāng)需要檢測瀏覽器時,可使用延遲加載或條件預(yù)加載
在進行數(shù)學(xué)計算時耳贬,考慮使用直接操作數(shù)字的二進制形式的位運算
javascript的原生方法總會比你寫的任何代碼都要快踏堡。盡量使用原生的方法

第九章:構(gòu)建并部署高性能javascript應(yīng)用

合并javascript文件以減少HTTP請求數(shù)
使用YUN Compressor壓縮javascript文件
在服務(wù)器端壓縮javascript文件(Gzip編碼)
通過正確設(shè)置HTTP響應(yīng)頭來緩存javascript文件,通過向文件名增加時間戳來避免緩存問題
使用CDN提供javascript文件咒劲,CDN不僅可以提升性能顷蟆,它也為你管理文件的壓縮與緩存

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市腐魂,隨后出現(xiàn)的幾起案子帐偎,更是在濱河造成了極大的恐慌,老刑警劉巖蛔屹,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肮街,死亡現(xiàn)場離奇詭異,居然都是意外死亡判导,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門沛硅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來眼刃,“玉大人,你說我怎么就攤上這事摇肌±藓欤” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵围小,是天一觀的道長昵骤。 經(jīng)常有香客問我,道長肯适,這世上最難降的妖魔是什么变秦? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮框舔,結(jié)果婚禮上蹦玫,老公的妹妹穿的比我還像新娘赎婚。我一直安慰自己,他們只是感情好樱溉,可當(dāng)我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布挣输。 她就那樣靜靜地躺著,像睡著了一般福贞。 火紅的嫁衣襯著肌膚如雪撩嚼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天挖帘,我揣著相機與錄音完丽,去河邊找鬼。 笑死肠套,一個胖子當(dāng)著我的面吹牛舰涌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播你稚,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼瓷耙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刁赖?” 一聲冷哼從身側(cè)響起搁痛,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宇弛,沒想到半個月后鸡典,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡枪芒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年彻况,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舅踪。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡纽甘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抽碌,到底是詐尸還是另有隱情悍赢,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布货徙,位于F島的核電站左权,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏痴颊。R本人自食惡果不足惜赏迟,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望祷舀。 院中可真熱鬧瀑梗,春花似錦烹笔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至亿鲜,卻和暖如春允蜈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蒿柳。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工饶套, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人垒探。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓妓蛮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親圾叼。 傳聞我的和親對象是個殘疾皇子蛤克,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容