首先是代碼, 從習(xí)慣做起：
? ? 1.優(yōu)化循環(huán)
????????這里每次循環(huán)開始前都需要判斷i是否小于data.length，JavaScript并不會(huì)對(duì)data.length進(jìn)行緩存
? ??????????for (var i = 0; i < data.length; i++) {
? ? ????????????????//do someting
? ? ? ? ? ? ? ?}
? ? ? ? 解決：
? ??????????for(var i = 0, m = data.length; i < m; i++) {
? ? ????????????????//do someting
????????????}
????2. 全局對(duì)象
? ??????另外需要注意的是孽查，垃圾回收器認(rèn)為根對(duì)象永遠(yuǎn)是活對(duì)象，永遠(yuǎn)不會(huì)對(duì)其進(jìn)行垃圾回收。而全局對(duì)象就是根對(duì)象嗜闻，所以全局作用域中的變量將會(huì)一直存在
? ? 3.?閉包導(dǎo)致的內(nèi)存泄露
? ? ? ? 盡量避免使用閉包斩芭，總有其他辦法來解決
? ? 4. 層級(jí)比較深的對(duì)象使用局部變量緩存，避免出現(xiàn)多個(gè)obj.obj.obj......
? ? 5.?字面量代替構(gòu)造函數(shù)
? ??????JavaScript可以通過字面量來構(gòu)造對(duì)象蝶糯，比如通過[]構(gòu)造一個(gè)數(shù)組洋只，{}構(gòu)造一個(gè)對(duì)象，/regexp/構(gòu)造一個(gè)正則表達(dá)式，我們應(yīng)當(dāng)盡力使用字面量來構(gòu)造對(duì)象木张，因?yàn)樽置媪渴且嬷苯咏忉寛?zhí)行的众辨，而如果使用構(gòu)造函數(shù)的話，需要調(diào)用一個(gè)內(nèi)部構(gòu)造器舷礼，所以字面量略微要快一點(diǎn)點(diǎn)鹃彻。
其次是從設(shè)計(jì)層面優(yōu)化：
1. 減少 HTTP請(qǐng)求數(shù)
這條策略基本上所有前端人都知道，而且也是最重要最有效的妻献。都說要減少 HTTP請(qǐng)求蛛株，那請(qǐng)求多了到底會(huì)怎么樣呢 ?首先，每個(gè)請(qǐng)求都是有成本的育拨，既包含時(shí)間成本也包含資源成本谨履。一個(gè)完整的請(qǐng)求都需要經(jīng)過 DNS尋址、與服務(wù)器建立連接熬丧、發(fā)送數(shù)據(jù)笋粟、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè) “漫長” 而復(fù)雜的過程析蝴。時(shí)間成本就是用戶需要看到或者 “感受” 到這個(gè)資源是必須要等待這個(gè)過程結(jié)束的害捕，資源上由于每個(gè)請(qǐng)求都需要攜帶數(shù)據(jù)，因此每個(gè)請(qǐng)求都需要占用帶寬闷畸。另外尝盼，由于瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的 (約10個(gè))，因此請(qǐng)求數(shù)多了以后佑菩，瀏覽器需要分批進(jìn)行請(qǐng)求盾沫，因此會(huì)增加用戶的等待時(shí)間，會(huì)給用戶造成站點(diǎn)速度慢這樣一個(gè)印象殿漠，即使可能用戶能看到的第一屏的資源都已經(jīng)請(qǐng)求完了赴精，但是瀏覽器的進(jìn)度條會(huì)一直存在。
減少 HTTP請(qǐng)求數(shù)的主要途徑包括：
(1). 合理設(shè)置 HTTP緩存
????配置超長時(shí)間的本地緩存 —— 節(jié)省帶寬绞幌，提高性能 (? 強(qiáng)制客戶端緩存靜態(tài)文件? )
????采用內(nèi)容摘要作為緩存更新依據(jù) —— 精確的緩存控制? ?（? 根據(jù)資源改變更改資源后綴【祖娘？a=1asf4g5】實(shí)現(xiàn)客戶端請(qǐng)求更新? ）?
????靜態(tài)資源CDN部署 —— 優(yōu)化網(wǎng)絡(luò)請(qǐng)求? ? ? ? （? ?優(yōu)化網(wǎng)絡(luò)請(qǐng)求，所有靜態(tài)資源? ?）
????更資源發(fā)布路徑實(shí)現(xiàn)非覆蓋式發(fā)布 —— 平滑升級(jí)?
(2). 資源合并與壓縮
如果可以的話啊奄，盡可能的將外部的腳本渐苏、樣式進(jìn)行合并，多個(gè)合為一個(gè)菇夸。另外琼富， CSS、 Javascript庄新、Image 都可以用相應(yīng)的工具進(jìn)行壓縮鞠眉，壓縮后往往能省下不少空間薯鼠。
(4). CSS Sprites
合并 CSS圖片，減少請(qǐng)求數(shù)的又一個(gè)好辦法械蹋。
(5). Inline Images
使用 data:URL scheme的方式將圖片嵌入到頁面或 CSS中出皇，如果不考慮資源管理上的問題的話，不失為一個(gè)好辦法哗戈。如果是嵌入頁面的話換來的是增大了頁面的體積郊艘，而且無法利用瀏覽器緩存。使用在 CSS中的圖片則更為理想一些唯咬。
(6). Lazy Load Images（自己對(duì)這一塊的內(nèi)容還是不了解）
這條策略實(shí)際上并不一定能減少 HTTP請(qǐng)求數(shù)纱注，但是卻能在某些條件下或者頁面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)。對(duì)于圖片而言胆胰，在頁面剛加載的時(shí)候可以只加載第一屏狞贱，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來蜀涨，假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)瞎嬉，那剩余的圖片請(qǐng)求就都節(jié)省了。有啊首頁曾經(jīng)的做法是在加載的時(shí)候把第一屏之后的圖片地址緩存在 Textarea標(biāo)簽中厚柳，待用戶往下滾屏的時(shí)候才 “惰性” 加載佑颇。
2. 將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
前文有談到，瀏覽器是可以并發(fā)請(qǐng)求的草娜，這一特點(diǎn)使得其能夠更快的加載資源，然而外鏈腳本在加載時(shí)卻會(huì)阻塞其他資源痒筒，例如在腳本加載完成之前宰闰，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)簿透，直到腳本加載完成后才會(huì)開始加載移袍。如果將腳本放在比較靠前的位置，則會(huì)影響整個(gè)頁面的加載速度從而影響用戶體驗(yàn)老充。解決這一問題的方法有很多葡盗，在這里有比較詳細(xì)的介紹(這里是譯文和更詳細(xì)的例子)，而最簡單可依賴的方法就是將腳本盡可能的往后挪啡浊，減少對(duì)并發(fā)下載的影響觅够。
3. 將 CSS放在 HEAD中
如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了巷嚣，這就導(dǎo)致頁面由無 CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)喘先，用戶體驗(yàn)比較糟糕。除此之外廷粒，有些瀏覽器會(huì)在 CSS下載完成后才開始渲染頁面窘拯，如果 CSS放在靠下的位置則會(huì)導(dǎo)致瀏覽器將渲染時(shí)間推遲红且。
4. 異步請(qǐng)求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內(nèi)容）
在某些頁面中可能存在這樣一種需求涤姊，需要使用 script標(biāo)簽來異步的請(qǐng)求數(shù)據(jù)暇番。類似：
Javascript:
/*Callback 函數(shù)*/
function myCallback(info){
//do something here
}
HTML:
cb返回的內(nèi)容 :
myCallback('Hello world!');
像以上這種方式直接在頁面上寫
7. 避免重復(fù)的資源請(qǐng)求
這種情況主要是由于疏忽或頁面由多個(gè)模塊拼接而成，然后每個(gè)模塊中請(qǐng)求了同樣的資源時(shí)思喊，會(huì)導(dǎo)致資源的重復(fù)請(qǐng)求
webpack打包工具性能優(yōu)化
1. 去除不必要的插件壁酬，例如一些只在開發(fā)環(huán)境需要使用的插件，例：
webpack.HotModuleReplacementPlugin?代碼熱更新搔涝，用于調(diào)試模式
open-browser-webpack-plugin自動(dòng)打開瀏覽器
webpack-dev-server是一個(gè)小型的Node.js Express服務(wù)器,它使用webpack-dev-middleware來服務(wù)于webpack的包
webpack.NoErrorsPlugin 構(gòu)建過程中有報(bào)錯(cuò)厨喂，不認(rèn)為構(gòu)建完成
devtools
2.?提取第三方庫
?有兩種方法：
（1）利用CommonsChunkPlugin插件提取公共代碼
????plugins: {? new? webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')? ?}
?（2）通過引用外部文件的方式引入第三方庫，比如像下面的配置
????{? ?externals: {'react':? ? 'React'}? ?}
?3. 代碼壓縮
????webpack 自帶了一個(gè)壓縮插件?UglifyJsPlugin庄呈，只需要在配置文件中引入即可蜕煌。
4. 組件按需引入，例如antd
