淺談前端網(wǎng)絡、JavaScript優(yōu)化以及開發(fā)小技巧
我要評論一、網(wǎng)絡優(yōu)化
YSlow 有23條規(guī)則。這幾十條規(guī)則最主要是在做消除或減少不必要的網(wǎng)絡延遲，將需要傳輸?shù)臄?shù)據(jù)壓縮至最少。
1）合并壓縮CSS、JavaScript、圖片，靜態(tài)資源CDN緩存
通過構(gòu)建工具Gulp ，可以在開發(fā)的時候就將合并壓縮的事情一起做掉。
之所以要做合并壓縮是因為：HTTP 1.x不允許一個連接上的多個響應數(shù)據(jù)交錯到達（多路復用），因而一個響應必須完全返回后，下一個響應才會開始傳輸。
也就是說即使客戶端同時發(fā)送了兩個請求，而且CSS資源先準備就緒，服務器也會先發(fā)送HTML響應，然后再交付CSS。
使用CDN是為了讓用戶訪問的時候能用最近的資源，減少來回傳輸時間。
HTTP2.0改進了HTTP1.x很多方面。
2）CSS放頂部，JavaScript放底部
CSS可以并行下載，而JavaScript加載之后會造成阻塞。
但凡事還是會有例外，如果把行內(nèi)腳本放在樣式表之后，會明顯地延遲資源的下載（結(jié)果是樣式表下載完成并且行內(nèi)腳本執(zhí)行完畢時，后續(xù)資源才能開始下載）。
這是因為行內(nèi)腳本可能含有依賴于樣式表中樣式的代碼，比如document.getElementsByClassName()。
<head>
<link rel="stylesheet" href="css/all-normal.css" type="text/css" />
</head>
<body>
<div id="content"></div>
<script>
var content = '';
for(i=1; i<1000000; i++)
content += '寫入頁面';
document.getElementById('content').innerHTML = content;
</script>
<img src="images/ui.png" />
</body>
下面通過Chrome的工具查看下：
3）優(yōu)化DNS解析，減少重定向
在做一個“女神評選活動”的時候，需要在微信中訪問能夠獲取用戶的openid，微信獲取用戶基本信息是需要經(jīng)過幾個步驟的：
先獲取code，再通過code獲取openid，最后再跳轉(zhuǎn)訪問靜態(tài)頁面。
由于公司將業(yè)務分成了多個小組，所以短短的三步其實需要三個小組配合，需要重定向多個域名。
下圖是未優(yōu)化前的瀑布圖，但不是最壞情況，有時候訪問到靜態(tài)頁面需要經(jīng)過10多秒，完全不能接受，下圖中會跳轉(zhuǎn)4個域名：
后面不跳index那個域名，直接跳轉(zhuǎn)到微信操作域名，減少一個域名的跳轉(zhuǎn)，各小組代碼再做優(yōu)化，但效果還是不理想，僅僅快了幾秒。
最后發(fā)現(xiàn)其實是在與微信的服務器做交互的時候，DNS解析花了太多時間！不得已，在服務器的host中添加一條記錄，直接通過IP指向。
下圖是最終優(yōu)化結(jié)果，雖然達不到秒開，但至少可以接受了：
二、JavaScript優(yōu)化
1）圖片預加載
在做一個“秋名山活動”的時候，使用了圖片預加載。這個活動中有120多張圖片。
流程很簡單，就是答題，最后給評論結(jié)果，再分享出去。
如果一下子加載那么多圖片，一定是愚蠢的想法，最后決定，在頁面載入的時候先加載一些通用圖片。
在答題的時候當前頁面，預先加載后面頁面中的圖片，防止訪問頁面的時候直接不展示圖片，圖片也做了適當?shù)暮喜ⅰ?/p>
將網(wǎng)站地址放在gtmetrix.com 測試，下面是最終的瀑布圖，可以發(fā)現(xiàn)圖片都在其他靜態(tài)資源的后面，這樣能盡早的展現(xiàn)頁面給用戶：
優(yōu)化還遠遠沒有結(jié)束，在Chrome中分別模擬了good 2G、good 3G以及4G后，有結(jié)果的情況并不理想。
good 2G：
good 3G：
4G：
2）減少分支
在寫業(yè)務邏輯的時候，經(jīng)常會用到if else，switch之類的邏輯判斷，如果每次都做這么多判斷，很容易影響性能。
所以可以通過多種方式來避免過多的判斷。
1. 惰性模式
這是在看《JavaScript設計模式》的時候看到的。
減少每次代碼執(zhí)行時的重復性分支判斷，通過對對象重定義來屏蔽原對象中的分支判斷。
惰性模式分為兩種：第一種文件加載后立即執(zhí)行對象方法來重定義，第二種是當?shù)谝淮问褂梅椒▽ο髸r來重定義。
公司有個頁面要提供給第三方APP，但是最終發(fā)現(xiàn)第三方APP不能使用localStorage緩存，最終只得做兼容的方式。
但為了避免每次引用方法的時候都做判斷，就使用加載后立即重定義：
var getFn = function() {
if (sore.enabled)
return sore.get;
return cookie.get;
}();
var setFn = function() {
if (sore.enabled)
return sore.set;
return cookie.set;
}();
2. 建立映射關系
頁面中經(jīng)常需要彈出框提示，后面就自己做了一個，但彈出框會有很多款式。
如果用簡單工廠模式創(chuàng)建的話，免不了switch分支判斷，后面就直接用賦不同的key，還能緩存起來，只初始化一次。
/**
* 彈出框單例模式
*/
var factories = {};
var DialogFactory = function(type, options) {
if (factories[type])
return factories[type];
return factories[type] = new iDialog(options);
};
/**
* 提示框
*/
var Alert = function(content, options) {
var d = DialogFactory('alert', options);
//其他邏輯省略
return d;
};
/**
* 確認框
*/
var Confirm = function(content, options) {
var d = DialogFactory('confirm', options);
//其他邏輯省略
return d;
};
3）第三方代碼異步加載
第三方代碼，例如百度統(tǒng)計、微信SDK等，這些完全可以在將業(yè)務資源加載完后再添加。
/**
* 百度統(tǒng)計設置
*/
util.baidu = function(key) {
global._hmt = global._hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//#/hm.js?" + key;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
};
4）cookie與localStorage緩存
有了緩存后，就能減少與服務器的通信，在本地操作。
公司有個查違章的業(yè)務，在本地添加好車輛后，再次進入頁面的時候就需要能直接選擇事先添加好的車輛。
最理想的方式就是添加好后，就在本地緩存起來，下次進入直接調(diào)取緩存。
我會優(yōu)先使用localStorage，下面的表格就是對比：
|
cookie |
localStorage | |
|
數(shù)據(jù)生命周期 |
可設置失效時間 | 除非被清除，否則永久保存 |
|
數(shù)據(jù)大 |
大約4KB | 大約5M |
|
與服務器通信 |
每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 不參與和服務器的通信 |
本地存儲，之前的歷史大概如下圖所示：
localStorage在瀏覽器兼容方面，IE8居然也支持了。
5）事件委托
使用事件委托技術能讓你避免對特定的每個節(jié)點添加事件監(jiān)聽器。
事件監(jiān)聽器是被添加到它們的父元素上，通過事件冒泡，觸發(fā)執(zhí)行。
在開發(fā)的時候，經(jīng)常會出現(xiàn)動態(tài)添加元素的情況。
如果每次都重新綁定一次事件，那會有很多多余操作，而綁定在此元素的父級，就只需綁定一次即可。
document.getElementById('ul').onclick = function(e) {
var e = e || window.event,
tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
tar.style.background = 'black';
}
}
6）節(jié)流與去抖動
節(jié)流(throttle)：預先設定一個執(zhí)行周期，當調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進入下一個新周期。
例如mousemove 事件、window對象的resize和scroll事件。
去抖動(debounce)：當調(diào)用動作n毫秒后，才會執(zhí)行該動作，若在這n毫秒內(nèi)又調(diào)用此動作則將重新計算執(zhí)行時間。
例如文本輸入keydown 事件，keyup 事件，做autocomplete等。
節(jié)流與去抖動最大的不同的地方就是在計算最后執(zhí)行時間的方式上。著名的開源工具庫underscore中有內(nèi)置了兩個方法。
在做公司內(nèi)部的一個系統(tǒng)的時候，需要方希望在左右滾動表格的時候，能將第一列固定在最左邊，方便查看。
為了讓操作能更流暢，我再這里用了節(jié)流，有些瀏覽器會出現(xiàn)卡頓，就得需要增加周期時間。
三、小技巧
1）在手機中打印變量
在移動頁面的時候經(jīng)常需要調(diào)試字段，又不能用console.log，每次alert的話，碰到對象就看不到內(nèi)容了。
只能自己寫個小方法來打印出來，JSON.stringify，通過這個方法能夠方便的實現(xiàn)功能。
var print = function(obj, space) {
space = space || 4;
var html = JSON.stringify(obj, null, space);
html = html.replace(/\n/g, '<br>').replace(/\s/g, ' ');
var pre = document.createElement('pre');
var div = document.createElement('code');
pre.style.cssText = 'border:1px solid #000;padding:10px;background:#FFF;margin-bottom:20px;';
div.innerHTML = html;
pre.appendChild(div);
var body = document.querySelector('body');
body.insertBefore(pre, body.children[0]);
};
print({a:1, b:'demo', c:{text:'content'}});
2）chrome插件JSON-handle
服務器返回的很多都是JSON格式的數(shù)據(jù)，通常寫好后給你個接口，順便給你幾個demo參數(shù)。
在瀏覽器中打開后，就是一串字符串，但要給人看的話，就得格式化一下了，這個插件就是用來讓人看的。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 前端性能優(yōu)化是一個不斷追求的過程，前面的文章雖然講解了一些性能優(yōu)化，但是關于性能優(yōu)化的路還有很長，很多東西都沒有提及。今天，我在前面的基礎之上，再來簡單總結(jié)一些2016-12-14
網(wǎng)站前端性能優(yōu)化之javascript和css篇
之前看過Yahoo團隊寫的一篇關于網(wǎng)站性能優(yōu)化的文章，文章是2010年左右寫的，雖然有點老，但是很多方面還是很有借鑒意義的。關于css的性能優(yōu)化，他提到了如下幾點2016-12-14Yahoo對Web前端優(yōu)化的14條經(jīng)驗拔萃
Yahoo在前端優(yōu)化過程中逐漸形成了一些約定俗成的規(guī)則,這些經(jīng)驗非常寶貴并不斷被人們翻譯和分享,35條版本流傳甚廣,我們這里精簡出Yahoo的Web前端優(yōu)化的14條經(jīng)驗拔萃,一起來2016-05-30web前端性能優(yōu)化之合理的優(yōu)化網(wǎng)站圖片可以帶來更多的流量
無論什么網(wǎng)站都少不了圖片，據(jù)統(tǒng)計，60%的網(wǎng)站流量均來自網(wǎng)站圖畫，可見網(wǎng)站的圖片對網(wǎng)站流量的影響，但是該怎么優(yōu)化圖片呢？下面分享web前端圖畫極限優(yōu)化策略，需要的朋友2016-01-08- 這篇文章主要介紹了一張圖看懂移動HTML5前端性能優(yōu)化的相關資料,需要的朋友可以參考下2015-11-02
- 上篇文章的留言里有好多朋友是對我css架構(gòu)就http請求的問題提出質(zhì)疑,我本想回答的，但不知道從何說起.希望這里面的東西有你想要的答案吧,感興趣的朋友可以了解下吧2013-01-13
- Web 前端性能優(yōu)化是個大話題，是個值得運維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術2011-05-12