導(dǎo)語：
前幾天發(fā)了一個前端優(yōu)化的辦法渣触，看的人還挺多的嗅钻，于是馬上把它們深度總結(jié)一下，也方便以后自己翻閱學(xué)習(xí)秃流。

一位優(yōu)秀的前端工程師都必須懂得的前端優(yōu)化技巧舶胀，你會幾個？

前端優(yōu)化是復(fù)雜的嚣伐，針對方方面面的資源都有不同的方式轩端。
我們先來明確一下前端優(yōu)化的目的是什么 ?

1. 從用戶角度而言基茵，優(yōu)化能夠讓頁面加載得更快壳影、對用戶的操作響應(yīng)得更及時宴咧，能夠給用戶提供更為友好的體驗。

2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)柿冲、或者減小請求所占帶寬兆旬，能夠節(jié)省可觀的資源。

接著宿饱，前端性能優(yōu)化可以分為兩大類分別是：

頁面級別優(yōu)化谬以，包含了http請求數(shù)以及內(nèi)聯(lián)腳本位置優(yōu)化为黎，
代碼級別的優(yōu)化，包含DOM操作優(yōu)化铭乾，CSS選擇符優(yōu)化以及圖片優(yōu)化等

這里寫目錄標(biāo)題

一，頁面級別優(yōu)化
1. 減少 HTTP請求數(shù)3斗蒋，資源合并與壓縮4泉沾，合并 CSS经瓷，js舆吮。5揭朝，CSS sprite(雪碧圖)6，圖片懶加載7色冀，將 CSS放<typo id="typo-419" data-origin="在" ignoretag="true">在</typo> head中潭袱，js放在尾部
二，代碼級別的優(yōu)化
1锋恬，對dom的操作2屯换，慎用 with3，減少作用域鏈查找4与学，字符串拼接5彤悔，需要的時候<typo id="typo-488" data-origin="在" ignoretag="true">在</typo>引入

一，頁面級別優(yōu)化

1. 減少 HTTP請求數(shù)

這一點(diǎn)是最有效的索守，首先晕窑，我們先來了解請求是怎么樣的？每個請求都是有成本的疾牲，既包含時間成本也包含資源成本。

一個完整的請求都需要經(jīng)過 DNS尋址盔沫、與服務(wù)器建立連接架诞、發(fā)送數(shù)據(jù)很泊、等待服務(wù)器響應(yīng)委造、接收數(shù)據(jù)這樣一個 “漫長” 而復(fù)雜的過程。（如下圖）

image

時間成本就是用戶需要看到或者 “感受” 到這個資源是必須要等待這個過程結(jié)束的，資源上由于每個請求都需要攜帶數(shù)據(jù)跑筝，因此每個請求都需要占用帶寬。所以請求越多虏两，就會花費(fèi)更多時間，更多資源引颈，更多寬帶。

至于你要怎么優(yōu)化這個請求次數(shù)呢粱年，這就是多方面因素影響的了完箩。

根據(jù)你的網(wǎng)頁頁面結(jié)構(gòu)，進(jìn)行針對性優(yōu)化秩彤。

如果你的頁面像百度首頁一樣簡單，那么你的請求就會很少降盹。對頁面整體結(jié)構(gòu)進(jìn)行分析，拆分出不同的模塊剑辫，比如拆分成輪播圖妹蔽、推薦信息列，用戶資本信息等等乳丰，然后對一些進(jìn)行合并請求等等。

合理設(shè)置 HTTP緩存

緩存的力量是強(qiáng)大的什燕，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請求。以首頁為例乘陪，當(dāng)瀏覽器沒有緩存的時候訪問一共會發(fā)出 205個請求，共 3M數(shù)據(jù) (如下圖)

image

而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有 31個請求，共 280多 K數(shù)據(jù) (如下圖)森缠。

image

那么怎樣才算合理設(shè)置 ?原則很簡單恰画，能緩存越多越好跨晴，能緩存越久越好。例如：

1. 很少變化的圖片資源可以直接通過 HTTP Header中的Expires設(shè)置一個很長的過期頭 ; 2. 變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久焚鹊。

3，資源合并與壓縮

如果可以的話璧针，盡可能的將外部的腳本渤昌、樣式進(jìn)行合并迈窟，多個合為一個。另外贫悄， CSS凳寺、 Javascript逆趋、Image 都可以用相應(yīng)的工具進(jìn)行壓縮脑慧，壓縮后往往能省下不少空間。

image

圖片壓縮工具，鏈接：https://tinypng.com/，能夠?qū)D片壓縮超過50%激况，而且畫質(zhì)稍微受一點(diǎn)影響而已。

image

css壓縮工具，鏈接：https://c.runoob.com/front-end/52，能夠?qū)ss壓縮，極大的減少css的大小滨攻。

image

js壓縮工具诞帐，鏈接：https://c.runoob.com/front-end/51，能夠?qū)s壓縮，極大的減少js的大小蚓挤。

4崇呵，合并 CSS汗销，js。

合并 CSS，減少請求數(shù)的又一個好辦法。

例如：

你可以寫了三個css樣式表 css_one.css ， css_two.css 捍岳， css_three.css 這樣你就可以寫一個主樣式
style.css 把三個樣式表都裝進(jìn)去：
@import “css_one.css”;
@import “css_two.css”;
@import “css_three.css”;

然后你就可以只引用style.css就可以了银萍，這樣就能把css合并起來使用，將三個請求變成一個戳气，不過要注意的是纲仍，這三個css里面不能出現(xiàn)相同類名。

同樣击蹲，js也可以用這個方式合并起來。

5，CSS sprite(雪碧圖)

image

通過這種辦法把幾張圖片合并成一個，然后通過容器剪切出對應(yīng)的圖片。

這種辦法特別的好堕虹，往往能把十多個圖片請求變成一個郁稍，優(yōu)化率1000%多，可以說是終極技能了然评，快快學(xué)會吧抖锥。

6，圖片懶加載

就是只把首屏的圖片加載出來竟趾，還沒瀏覽到的部分不加載，等你滑動看到它的時候再加載出來屎飘。

這種優(yōu)化技巧特別普遍肮雨，淘寶陌宿，美團(tuán)等等都是有用到這種優(yōu)化。極大的加快了首屏加載速度沐批，提高了用戶體驗发框。

image

lazy load網(wǎng)址：https://www.lazyloadjs.cn/

7铣减，將 CSS放在 head中鳖枕，js放在尾部

如果將 CSS放在其他地方比如body中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面<typo id="typo-2117" data-origin="由" ignoretag="true">由</typo><typo id="typo-2118" data-origin="無?" ignoretag="true">無 </typo>CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)，用戶體驗比較糟糕。（也就是平時我們看到的亂屏链嘀，過了一兩秒后布局才正常）

除此之外误趴，有些瀏覽器會在 CSS下載完成后才開始渲染頁面，如果 CSS放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲。

而js和dom頁面渲染<typo id="typo-2242" data-origin="公用" ignoretag="true">公用</typo>一個線程熄驼，如果把js放在前面的話携悯，可能會阻塞住頁面的渲染龟劲，導(dǎo)致dom渲染不出來（白屏?xí)r間長），用戶體驗極差答恶。

二裕坊，代碼級別的優(yōu)化

1，對dom的操作

在腳本中 document.images()堰氓、document.forms() 得问、getElementsByTagName()返回的都是 HTMLCollection類型的集合膏萧，在平時使用的時候大多將它作為數(shù)組來使用，因為它有 length屬性孤个，也可以使用索引訪問每一個元素。

不過它可不是一個數(shù)組，在訪問性能上則比數(shù)組要差很多荚板，原因是這個集合并不是一個靜態(tài)的結(jié)果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執(zhí)行這個查詢從而更新查詢結(jié)果。所謂的 “訪問集合” 包括讀取集合的 length屬性辽故、訪問集合中的元素。

因此，當(dāng)你需要遍歷 HTML Collection的時候，盡量將它轉(zhuǎn)為數(shù)組后再訪問帖池，以提高性能帮孔。即使不轉(zhuǎn)換為數(shù)組，也請盡可能少的訪問它，例如在遍歷的時候可以將 length屬性兔辅、成員保存到局部變量后再使用局部變量介时。

例如：

<pre language="javascript" code_block="true">var x = getElementsByTagName('div')
var y = []
funtion deepclone() {
    //深克隆
    return object
}
for(let i = 0; i<x.length; i++) {
    y.push(deepclone(x[i]))
}
123456789</pre>

# 2铲敛，慎用 with

<pre language="javascript" code_block="true"> with(obj){ 
    p = 1
 };
123</pre>

代碼塊的行為實(shí)際上是修改了代碼塊中的 執(zhí)行環(huán)境 咽弦，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪問非局部變量是都是先從 obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用 with相當(dāng)于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的避归，過長的作用域鏈會導(dǎo)致查找性能下降捐下。

因此，除非你能肯定在 with代碼中只訪問 obj中的屬性，否則慎用 with，替代的可以使用局部變量緩存需要訪問的屬性番甩。

3宴胧，減少作用域鏈查找

前文談到了作用域鏈查找問題瞬逊，這一點(diǎn)在循環(huán)中是尤其需要注意的問題。如果在循環(huán)中需要訪問非本作用域下的變量時請在遍歷之前用局部變量緩存該變量，并在遍歷結(jié)束后再重寫那個變量厢绝，這一點(diǎn)對全局變量尤其重要靶病，因為全局變量處于作用域鏈的最頂端沪停，訪問時的查找次數(shù)是最多的，嚴(yán)重影響效率。

低效率的寫法：

<pre language="javascript" code_block="true">// 全局變量 
var globalVar = 1; 
function myCallback(info){    
    for( var i = 100000; i--;){       
    //每次訪問 globalVar 都需要查找到作用域鏈最頂端，本例中需要訪問 100000 次       
    globalVar += i;    
}} 　　
1234567</pre>

更高效的寫法：

<pre language="javascript" code_block="true">   // 全局變量 
var globalVar = 1; 
function myCallback(info){    
    //局部變量緩存全局變量     
    var localVar = globalVar;    
    for( var i = 100000; i--;){       
    //訪問局部變量是最快的        
    localVar += i;    
    }    
//本例中只需要訪問 2次全局變量在函數(shù)中只需要將 globalVar中內(nèi)容的值賦給localVar 中區(qū)   
    globalVar = localVar; 
}　　
123456789101112</pre>

此外笋粟，要減少作用域鏈查找還應(yīng)該減少閉包的使用。

4腾啥，字符串拼接

我們學(xué)會凸舵，字符串是可以用+進(jìn)行拼接的，但是這種性能很低，<typo id="typo-3834" data-origin="他" ignoretag="true">他</typo>的過程就是，重新開辟一個內(nèi)存，然后拼接起來后復(fù)制給原來的字符串。

其實(shí)我們可以直接使用join()，直接把字符串拼接起來。

5，需要的時候在引入

<pre language="javascript" code_block="true">const Recommend = () => import(/* webpackChunkName: "recommend" */ 'components/recommend/recommend')
const Singer = () => import(/* webpackChunkName:'singer' */ 'components/singer/singer')
const Rank = () => import(/* webpackChunkName:'rank' */ 'components/rank/rank')
const Search = () => import(/* webpackChunkName:'search' */ 'components/search/search')
const SingerDetail = () => import(/* webpackChunkName:'singer' */ 'components/singer-detail/singer-detail')
const Disc = () => import(/* webpackChunkName:'disc' */ 'components/disc/disc')
const TopList = () => import(/* webpackChunkName:'toplist' */ 'components/top-list/top-list')
const UserCenter = () => import(/* webpackChunkName:'user' */ 'components/user-center/user-center')
12345678</pre>

這樣子寫草娜，就能夠提高首屏速度，在需要的時候再import，能夠提高性能。

web前端性能優(yōu)化，終極武功秘籍（建議收藏）速址，太棒了

web前端性能優(yōu)化芍锚，終極武功秘籍（建議收藏）蔓榄，太棒了

這里寫目錄標(biāo)題

一，頁面級別優(yōu)化

1. 減少 HTTP請求數(shù)

3，資源合并與壓縮

4崇呵，合并 CSS汗销，js。

5，CSS sprite(雪碧圖)

6，圖片懶加載

7铣减，將 CSS放在 head中鳖枕，js放在尾部

二裕坊，代碼級別的優(yōu)化

1，對dom的操作

3宴胧，減少作用域鏈查找

4腾啥，字符串拼接

5，需要的時候在引入