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

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

摘要：用局部變量存儲(chǔ)本地范圍之外的變量值，如果它們?cè)诤瘮?shù)中的使用多于一次。將它的值存入一個(gè)局部變量，消除一次搜索過(guò)程。地將此值存入一個(gè)局部變量中。

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

第一章 DOM標(biāo)簽

將所有標(biāo)簽放置在頁(yè)面的底部，緊靠 body 關(guān)閉標(biāo)簽的上方。此法可以保證頁(yè)面在腳本運(yùn)行之前完成解析。

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

LazyLoad 還可以下載多個(gè) JavaScript 文件，并保證它們?cè)谒袨g覽器上都能夠按照正確的順序執(zhí)行。

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

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

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

全局變量總是處于運(yùn)行期上下文作用域鏈的最后一個(gè)位置，所以總是最遠(yuǎn)才能觸及的，最慢。

用局部變量存儲(chǔ)本地范圍之外的變量值，如果它們?cè)诤瘮?shù)中的使用多于一次。

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

作用域：

深入原形鏈越深，搜索的速度就會(huì)越慢。
屬性嵌套越深，訪問(wèn)速度越慢。
將它的值存入一個(gè)局部變量，消除一次搜索過(guò)程。

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

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

第三章 DOM Scripting DOM 編程

減少DOM 操作問(wèn)題的量化

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

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

在反復(fù)訪問(wèn)的地方使用局部變量存放 DOM 引用.

將所有改變合并在一起執(zhí)行，只修改 DOM 一次?？赏ㄟ^(guò)使用 cssText 屬性實(shí)現(xiàn)。

從文檔流中摘除該元素；隱藏元素，進(jìn)行修改，然后再顯示它。對(duì)其應(yīng)用多重改變；將元素帶回文檔中；

Example:
1.頁(yè)面頂部可以“折疊/展開(kāi)”的元素稱作“動(dòng)畫(huà)元素”，用絕對(duì)坐標(biāo)對(duì)它進(jìn)行定位，當(dāng)它的尺寸改變時(shí)，就不會(huì)推移頁(yè)面中其他元素的位置，而只是覆蓋其他元素。
2、展開(kāi)動(dòng)作只在“動(dòng)畫(huà)元素”上進(jìn)行。這時(shí)其他元素的坐標(biāo)并沒(méi)有改變，換句話說(shuō)，其他元素并沒(méi)有因?yàn)椤皠?dòng) 畫(huà)元素”的擴(kuò)大而隨之下移，而是任由動(dòng)畫(huà)元素覆蓋。
3、“動(dòng)畫(huà)元素”的動(dòng)畫(huà)結(jié)束時(shí)，將其他元素的位置下移到動(dòng)畫(huà)元素下方，界面“跳”了一下。

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

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

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

減少每次迭代中操作的總數(shù)可以大幅度提高循環(huán)整體性能。地將此值存入一個(gè)局部變量中。倒序循環(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)...
}

超過(guò)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 條件表達(dá)式

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

當(dāng)你使用了太多的遞歸，超過(guò)最大調(diào)用棧尺寸時(shí)，瀏覽器會(huì)出錯(cuò)并彈出error信息。

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

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

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

盡量避免一個(gè)正則表達(dá)式做太多的工作

第六章 Responsive Interfaces 響應(yīng)接口

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

可通過(guò)原生的 Date 對(duì)象跟蹤代碼的運(yùn)行時(shí)間。

當(dāng)多個(gè)重復(fù)的定時(shí)器被同時(shí)創(chuàng)建會(huì)產(chǎn)生性能問(wèn)題。

網(wǎng)頁(yè)工人線程

第七章 Ajax 異步 JavaScript 和 XML

總的來(lái)說(shuō)越輕量級(jí)的格式越好，最好是 JSON jsonp相對(duì)慢一點(diǎn)

設(shè)置http頭設(shè)置緩存 expires etag if-none-match if-modified-since

第八章 Programming Practices 編程實(shí)踐

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

JavaScript 引擎提供的原生方法

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

合并 JavaScript 文件

預(yù)處理 JavaScript 文件

JavaScript 壓縮

JavaScript 緊湊

開(kāi)發(fā)過(guò)程中的編譯（預(yù)處理）

緩存的應(yīng)用 JavaScript 文件

cdn

性能分析工具

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

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

HTTP2.0性能增強(qiáng)的核心：二進(jìn)制分幀

HTTP2.0 首部壓縮

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

HTTP2.0的請(qǐng)求優(yōu)先級(jí)

HTTP2.0的服務(wù)器推送
除了對(duì)最初請(qǐng)求的響應(yīng)外，服務(wù)器還可以額外向客戶端推送資源，而無(wú)需客戶端明確地請(qǐng)求。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87911.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ytwman

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

計(jì)算機(jī)秋招必備！北京互聯(lián)網(wǎng)大廠企業(yè)整理清單！

閱讀 3974·2021-09-27 13:35
性能優(yōu)化全新思路！實(shí)踐騰訊、字節(jié)、阿里、百度、網(wǎng)易等互聯(lián)網(wǎng)公司項(xiàng)目實(shí)戰(zhàn)+案例分析（附PDF源碼）

閱讀 1121·2021-09-24 09:48
如何選擇個(gè)好的虛擬主機(jī)-如何選擇虛擬主機(jī)？

閱讀 2940·2021-09-22 15:42
什么是主機(jī)數(shù)據(jù)注冊(cè)-什么是數(shù)據(jù)時(shí)代？

閱讀 2377·2021-09-22 15:28
Vue基本原理

閱讀 3180·2019-08-30 15:43
【Amaple教程】6. 路由配置

閱讀 2645·2019-08-30 13:52
常用css3選擇器

閱讀 3000·2019-08-29 12:48
WebSocket協(xié)議以及ws源碼分析

閱讀 1483·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

Web 性能優(yōu)化：理解及使用 JavaScript 緩存

**前端優(yōu)化 - 收藏集 - 掘金**

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

JavaScript 是如何工作的：深入網(wǎng)絡(luò)層 + 如何優(yōu)化性能和安全

JavaScript 是如何工作的：深入網(wǎng)絡(luò)層 + 如何優(yōu)化性能和安全

發(fā)表評(píng)論

0條評(píng)論

ytwman

男|高級(jí)講師

TA的文章

計(jì)算機(jī)秋招必備！北京互聯(lián)網(wǎng)大廠企業(yè)整理清單！

性能優(yōu)化全新思路！實(shí)踐騰訊、字節(jié)、阿里、百度、網(wǎng)易等互聯(lián)網(wǎng)公司項(xiàng)目實(shí)戰(zhàn)+案例分析（附PDF源碼）

如何選擇個(gè)好的虛擬主機(jī)-如何選擇虛擬主機(jī)？

什么是主機(jī)數(shù)據(jù)注冊(cè)-什么是數(shù)據(jù)時(shí)代？

Vue基本原理

【Amaple教程】6. 路由配置

常用css3選擇器

WebSocket協(xié)議以及ws源碼分析

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！