web性能優(yōu)化--高性能javascript

ytwman 發(fā)布于2019-08-21 14:27 / 1654人閱讀

摘要：用局部變量存儲本地范圍之外的變量值，如果它們在函數(shù)中的使用多于一次。將它的值存入一個局部變量，消除一次搜索過程。地將此值存入一個局部變量中。

總結(jié)了一下《高性能javascript》書中比較核心的點,并補充了一些點。

第一章 DOM標簽

將所有標簽放置在頁面的底部，緊靠 body 關閉標簽的上方。此法可以保證頁面在腳本運行之前完成解析。

將腳本成組打包。頁面的標簽越少，頁面的加載速度就越快，響應也更加迅速。不論外部腳本文件還是內(nèi)聯(lián)代碼都是如此。

LazyLoad 還可以下載多個 JavaScript 文件，并保證它們在所有瀏覽器上都能夠按照正確的順序執(zhí)行。

了解性能監(jiān)控的API
包括window.performance以及W3C Resourcing Timing

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

作用域也關系到性能，但是要理解速度與作用域的關系。

全局變量總是處于運行期上下文作用域鏈的最后一個位置，所以總是最遠才能觸及的，最慢。

用局部變量存儲本地范圍之外的變量值，如果它們在函數(shù)中的使用多于一次。

 (function(d,$) {
        d.getElementById("test");
        ...
       $(".test").hide();
        ....
    }(document, jQuery))

作用域：

深入原形鏈越深，搜索的速度就會越慢。
屬性嵌套越深，訪問速度越慢。
將它的值存入一個局部變量，消除一次搜索過程。

函數(shù)的節(jié)流與防反跳

參閱underscore庫的throttle函數(shù)（節(jié)流）與debounce函數(shù)（防反跳）。其中，throttle的含義是：每XX秒內(nèi)只執(zhí)行一次；debounce的含義是：當連續(xù)觸發(fā)函數(shù)調(diào)用時，在最后一次觸發(fā)的XX秒以后才開始一次調(diào)用。
如何實現(xiàn)這一機制請看淺談 Underscore.js 中 _.throttle 和 _.debounce 的差異

第三章 DOM Scripting DOM 編程

減少DOM 操作問題的量化

將數(shù)組的 length 屬性緩存到一個變量中

瀏覽器需要重新計算元素的幾何屬性，而且其他元素的幾何屬性和位置也會因此改變受到影響。元素位置改變，尺寸，內(nèi)容，瀏覽器窗口改變尺寸

在反復訪問的地方使用局部變量存放 DOM 引用.

將所有改變合并在一起執(zhí)行，只修改 DOM 一次。可通過使用 cssText 屬性實現(xiàn)。

從文檔流中摘除該元素；隱藏元素，進行修改，然后再顯示它。對其應用多重改變；將元素帶回文檔中；

Example:
1.頁面頂部可以“折疊/展開”的元素稱作“動畫元素”，用絕對坐標對它進行定位，當它的尺寸改變時，就不會推移頁面中其他元素的位置，而只是覆蓋其他元素。
2、展開動作只在“動畫元素”上進行。這時其他元素的坐標并沒有改變，換句話說，其他元素并沒有因為“動畫元素”的擴大而隨之下移，而是任由動畫元素覆蓋。
3、“動畫元素”的動畫結(jié)束時，將其他元素的位置下移到動畫元素下方，界面“跳”了一下。

一個簡單而優(yōu)雅的處理 DOM 事件的技術(shù)是事件托管。它基于這樣一個事實：事件逐層冒泡總能被父元
素捕獲。采用事件托管技術(shù)之后，你只需要在一個包裝元素上掛接一個句柄，用于處理子元素發(fā)生的所有事件。

第四章 Algorithms and Flow Control 算法和流程控制

只有一種循環(huán)比其他循環(huán)明顯要慢：for-in 循環(huán) 最慢。要搜索實例或原形。

減少每次迭代中操作的總數(shù)可以大幅度提高循環(huán)整體性能。地將此值存入一個局部變量中。倒序循環(huán)。

使用遞減循環(huán)

for (var i=items.length; i--; ){ 
    process(items[i]);
 }

var values = [0,1,2,3,4];
var len = values.length;
for (var i = 0; i--) {
     循環(huán)...
}

超過1000次的循環(huán)，使用Duff"s Device

  var i = items.length % 8;
while(i) {
    process(items[i--]);
}

i = Math.floor(items.length / 8);

while(i) {
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
     process(items[i--]);
}

Conditionals 條件表達式

如果條件較少時，if-else 容易閱讀，而條件較多時 switch 更容易閱讀。

當你使用了太多的遞歸，超過最大調(diào)用棧尺寸時，瀏覽器會出錯并彈出error信息。

任何可以用遞歸實現(xiàn)的算法都可以用迭代實現(xiàn)。for循環(huán)代替遞歸（運行的代碼總量越大，使用這些策略所帶來的性能提升就越明顯。）

第五章 Strings and Regular Expressions 字符串和正則表達式

str += "two";
str = str + "one" + "two";
newStr = strs.join("");

盡量避免一個正則表達式做太多的工作

第六章 Responsive Interfaces 響應接口

如果一個函數(shù)運行時間太長，那么查看它是否可以分解成一系列能夠短時間完成的較小的函數(shù)。

可通過原生的 Date 對象跟蹤代碼的運行時間。

當多個重復的定時器被同時創(chuàng)建會產(chǎn)生性能問題。

網(wǎng)頁工人線程

第七章 Ajax 異步 JavaScript 和 XML

總的來說越輕量級的格式越好，最好是 JSON jsonp相對慢一點

設置http頭設置緩存 expires etag if-none-match if-modified-since

第八章 Programming Practices 編程實踐

Lazy Loading 延遲加載按需加載（事件監(jiān)聽函數(shù) js文件 css文件 )

JavaScript 引擎提供的原生方法

原生的 querySelector()和 querySelectorAll()方法查詢dom

合并 JavaScript 文件

預處理 JavaScript 文件

JavaScript 壓縮

JavaScript 緊湊

開發(fā)過程中的編譯（預處理）

緩存的應用 JavaScript 文件

cdn

性能分析工具

只直出首屏頁面可視內(nèi)容，其他在客戶端上延遲處理
13.DNS prefeching

目前三種渲染頁面的方式：
1.ajax拉取數(shù)據(jù)
2.后臺直出數(shù)據(jù)和模版，js模版引擎去渲染（降低白屏）
3.后臺直出拼好的頁面（降低白屏）

HTTP2.0性能增強的核心：二進制分幀

HTTP2.0 首部壓縮

HTTP 2.0 在客戶端和服務器端使用“首部表”來跟蹤和存儲之前發(fā)送的鍵-值對，所有的HTTP2.0的請求都在一個TCP鏈接上.HTTP2.0所有通信都是在一個TCP連接上完成。HTTP 2.0 把 HTTP 協(xié)議通信的基本單位縮小為一個一個的幀，這些幀對應著邏輯流中的消息。并行地在同一個 TCP 連接上雙向交換消息。就好比，我請求一個頁面http://www.qq.com。頁面上所有的資源請求都是客戶端與服務器上的一條TCP上請求和響應的！

HTTP2.0的請求優(yōu)先級

HTTP2.0的服務器推送
除了對最初請求的響應外，服務器還可以額外向客戶端推送資源，而無需客戶端明確地請求。

有了HTTP2.0的服務器推送，HTTP1.x時代的內(nèi)嵌資源的優(yōu)化手段也變得沒有意義了。

云服務器 GPU云服務器 web性能優(yōu)化高性能優(yōu)化性能優(yōu)化優(yōu)化系統(tǒng)性能

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87911.html

[譯] 唯快不破：Web 應用的 13 個優(yōu)化步驟

摘要：譯文地址譯唯快不破應用的個優(yōu)化步驟前端的逆襲知乎專欄原文地址時過境遷，應用比以往任何時候都更具交互性。使用負載均衡方案我們在之前討論緩存的時候簡要提到了內(nèi)容分發(fā)網(wǎng)絡。換句話說，元素的串形訪問會削弱負載均衡器以最佳形式歡迎關注知乎專欄 —— 前端的逆襲歡迎關注我的博客，知乎，GitHub。譯文地址：【譯】唯快不破：Web 應用的 13 個優(yōu)化步驟 - 前端的逆襲 - 知乎專欄原文地...

haobowd 2019-08-19 18:37 評論0 收藏0
Web 性能優(yōu)化：理解及使用 JavaScript 緩存

摘要：想閱讀更多優(yōu)質(zhì)文章請猛戳博客一年百來篇優(yōu)質(zhì)文章等著你這是性能優(yōu)化的第篇，上一篇在下面看點擊查看性能優(yōu)化使用分離數(shù)據(jù)的正確方法性能優(yōu)化圖片優(yōu)化讓網(wǎng)站大小減少性能優(yōu)化緩存事件來提高性能性能優(yōu)化種優(yōu)化和加快網(wǎng)站速度的方法隨著我們的應用程序的不斷增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想閱讀更多優(yōu)質(zhì)文章請猛戳Gi...

endiat 2019-08-23 16:09 評論0 收藏0
前端優(yōu)化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
JavaScript 是如何工作的：深入網(wǎng)絡層 + 如何優(yōu)化性能和安全

摘要：是如何工作的深入網(wǎng)絡層如何優(yōu)化性能和安全這是專門探索及其所構(gòu)建的組件的系列文章的第篇。為了使網(wǎng)絡層高效，它需要扮演的角色不僅僅是一個簡單的套接字管理器。套接字組織在按源分組的池中，每個池執(zhí)行自己的連接限制和安全約束。 JavaScript 是如何工作的：深入網(wǎng)絡層 + 如何優(yōu)化性能和安全這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 12 篇。如果你錯過了前面的...

BWrong 2019-08-02 14:06 評論0 收藏0
JavaScript 是如何工作的：深入網(wǎng)絡層 + 如何優(yōu)化性能和安全

摘要：是如何工作的深入網(wǎng)絡層如何優(yōu)化性能和安全這是專門探索及其所構(gòu)建的組件的系列文章的第篇。為了使網(wǎng)絡層高效，它需要扮演的角色不僅僅是一個簡單的套接字管理器。套接字組織在按源分組的池中，每個池執(zhí)行自己的連接限制和安全約束。 JavaScript 是如何工作的：深入網(wǎng)絡層 + 如何優(yōu)化性能和安全這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 12 篇。如果你錯過了前面的...

susheng 2019-08-23 14:44 評論0 收藏0