網(wǎng)絡(luò)性能優(yōu)化實(shí)戰(zhàn)
首屏一秒渲染原則
對(duì)于APP里面的H5頁(yè)面首屏渲染時(shí)間不能超過(guò)1秒，首屏不要加載太多資源。
- 服務(wù)器響應(yīng)必須小于200ms
- 盡量少的重定向
- 盡量少的第一次渲染請(qǐng)求數(shù)
- 避免過(guò)多阻塞的JS、CSS
- 給瀏覽器留200ms的渲染時(shí)間
優(yōu)化我們的JS執(zhí)行效率和渲染時(shí)間
加載優(yōu)化
減少HTTP請(qǐng)求
盡量減少頁(yè)面對(duì)后臺(tái)的請(qǐng)求數(shù)，能合并的合并。
- 合并CSS、JavaScript等代碼
- 合并小圖片，使用雪碧圖
使用響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)，避免重定向
響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)是指通過(guò)同一網(wǎng)址提供相同HTML代碼的網(wǎng)站設(shè)計(jì)方法，使用戶不用考慮所使用的是PC、Pad、APP設(shè)備，自動(dòng)適應(yīng)所使用的設(shè)備屏幕。
使用瀏覽器緩存
使用瀏覽器緩存減少對(duì)服務(wù)器的請(qǐng)求，所有可緩存靜態(tài)資源(JS、CSS、圖像、媒體文件、PDF文件)都應(yīng)該在服務(wù)器端啟用瀏覽器緩存(緩存一切可以緩存的資源)。注： HTML不是靜態(tài)資源。
- 設(shè)置Expires報(bào)頭為將來(lái)某個(gè)時(shí)間，比如設(shè)置為1周。則瀏覽器在這一周內(nèi)訪問(wèn)將使用已經(jīng)緩存的資源，不會(huì)發(fā)出GET請(qǐng)求去網(wǎng)絡(luò)查看資源是否發(fā)生改變。除非用戶手動(dòng)清除了緩存。
對(duì)于設(shè)置了緩存的網(wǎng)絡(luò)請(qǐng)求我大致畫(huà)了一個(gè)流程圖如下：
- 上面提到的使用外聯(lián)式引用CSS、JavaScript可以啟動(dòng)瀏覽器的緩存功能
啟用壓縮、合并功能
通過(guò)對(duì)HTML、CSS、JavaScript等資源進(jìn)行壓縮合并。并在服務(wù)器端設(shè)置GZip。
- 文件資源壓縮：將多余的空格、換行符、縮進(jìn)、注釋等不必要的字節(jié)去掉從而提高下載、解析、執(zhí)行速度，這一類(lèi)的在線工具比較多，這里列舉幾個(gè)如下：
- 合并文件：每一個(gè)CSS、JS文件都是一個(gè)HTTP請(qǐng)求，適當(dāng)將相關(guān)的多份文件合并成一個(gè)文件以減少HTTP的請(qǐng)求數(shù)。
- 啟動(dòng)網(wǎng)絡(luò)服務(wù)器壓縮功能：Apache、Nginx、IIS都支持配置壓縮功能。
由于我們后臺(tái)項(xiàng)目采用了.NET架構(gòu)，所以我們?cè)诖酸槍?duì)IIS進(jìn)行壓縮功能的配置。IIS默認(rèn)是啟動(dòng)壓縮功能的，IIS支持“靜態(tài)內(nèi)容壓縮”和“動(dòng)態(tài)內(nèi)容壓縮”兩種，如下圖，
首屏加載、按需加載、預(yù)加載
首屏應(yīng)該盡量控制在1秒之內(nèi);對(duì)于相當(dāng)屏幕不用的資源應(yīng)該放到用戶需要的時(shí)候再加載(延遲加載、上拉滾屏加載);可感知和不可感知的加載(Loading加載進(jìn)度條、提前加載下一頁(yè))。
渲染優(yōu)化
HTML中添加Viewport來(lái)加速頁(yè)面的渲染
- <meta name="viewport" content="width=device-width, initial-scale=1">
減少DOM節(jié)點(diǎn)
DOM節(jié)點(diǎn)太多會(huì)影響頁(yè)面的渲染，盡量減少DOM節(jié)點(diǎn)
動(dòng)畫(huà)優(yōu)化
- 盡量使用CSS3動(dòng)畫(huà)
- 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
- 適當(dāng)使用Canvas動(dòng)畫(huà) 5個(gè)元素以內(nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)(iOS8可使用webGL)
CSS優(yōu)化
避免內(nèi)聯(lián)式和嵌入式代碼(CSS)
- 避免在HTML標(biāo)簽中寫(xiě)style屬性(內(nèi)聯(lián)式)
- 避免在<style>標(biāo)簽中定義CSS(嵌入式)
使用<link>將CSS寫(xiě)在頭部<head>標(biāo)簽中,而不要使用@import
合并CSS以減少文件個(gè)數(shù)** 每一個(gè)文件就是一個(gè)HTTP請(qǐng)求
避免CSS表達(dá)式
CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染，請(qǐng)避免CSS表達(dá)式
移除空的CSS規(guī)則
空的CSS規(guī)則增加CSS文件的大小，影響CSS樹(shù)的執(zhí)行，需要移除空的CSS規(guī)則
盡量少用Web字體
Web字體需要下載，解析，重繪當(dāng)面頁(yè)面
不聲明過(guò)多的Font-Size
過(guò)多的Font-Size引發(fā)CSS樹(shù)的效率
值為0時(shí)不需要任何單位
JavaScript執(zhí)行優(yōu)化
避免內(nèi)聯(lián)式和嵌入式代碼(JS)
- 避免在HTML標(biāo)簽中寫(xiě)類(lèi)似于onclick這類(lèi)屬性(內(nèi)聯(lián)式)
- 盡量避免使用<script>標(biāo)簽定義JS代碼(嵌入式)
JavaScript寫(xiě)在尾部或異步
- 優(yōu)先考慮在<script>標(biāo)簽中使用src屬性引入外部JS文件
- 能夠異步延遲加載的JS盡量放到首屏加載完成之后加載，避免因?yàn)橐螺d、解析、執(zhí)行再去渲染HTML造成頁(yè)面的阻塞：
- <script async src="async.js">
- // 如何異步加載多個(gè)第三方JS組件
- // https://gist.github.com/zenorocha/5161860
- (function() {
- var script,
- scripts = document.getElementsByTagName('script')[0];
- function load(url) {
- script = document.createElement('script');
- script.async = true;
- script.src = url;
- scripts.parentNode.insertBefore(script, scripts);
- }
- load('//apis.google.com/js/plusone.js');
- load('//platform.twitter.com/widgets.js');
- load('//s.widgetsite.com/widget.js');
- }());
減少重繪(外觀發(fā)生變化)和回流(布局發(fā)生變化)
避免不必要的DOM操作，盡量改變Class而不是Style
緩存DOM選擇和列表.length
每次DOM選擇和列表length都要計(jì)算，特別是在for循環(huán)里面使用時(shí)，請(qǐng)用一個(gè)變量保存這個(gè)值以減少每次for循環(huán)時(shí)的重新計(jì)算
盡量使用ID選擇器
ID選擇器是最快的
圖片優(yōu)化
優(yōu)先考慮其它圖片代替方案
網(wǎng)絡(luò)上往往最耗流量的就是圖片，特別是用戶在手機(jī)上訪問(wèn)，優(yōu)先考慮有沒(méi)有其它的方案可以代替圖片，比如：
- CSS3
- SVG，是一個(gè)XML文件，在任何屏幕分辨率上任意縮放都是邊緣清晰的，清晰度不會(huì)被破壞。比GIF和JPEG格式的文件要小很多
- IconFont,阿里巴巴矢量圖標(biāo)庫(kù)
- Srcset(響應(yīng)式圖片)
壓縮圖片
可以使用圖片壓縮工具對(duì)圖片進(jìn)行壓縮使圖片盡可能小
使用圖片壓縮工具，比如騰訊智圖
選擇適當(dāng)?shù)膱D片格式
WebP優(yōu)于JPG,PNG8優(yōu)于GIF;請(qǐng)勿使用BMP和TIFF格式.這里借用Google的一張圖片格式選擇方案：
WebP是一種加快圖片加載速度的圖片格式,圖片壓縮體積只有JPEG的2/3,目前Facebook,Google、taobao等知名公司都在自己的應(yīng)用里面使用 WebP格式的圖片。
目前Chrome、Android可以很好地支持WebP格式，iOS可以通過(guò)第三方方案來(lái)支持WebP。
使用CSS Sprite雪碧圖
將多個(gè)圖片整合到一個(gè)圖片中，再利用CSS屬性(background-image、background-position、background-repeat)來(lái)精確定位要顯示的圖片，減少了HTTP的請(qǐng)求數(shù)和請(qǐng)求大小。
避免圖片和iframe等的空的Src
空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率。
CDN加速
通過(guò)CDN來(lái)加速是一項(xiàng)相對(duì)而言成本比較高的優(yōu)化手段，所以這些把它放在所有優(yōu)化方法的最后，但它是一項(xiàng)非常有效的優(yōu)化方案
CDN(Content Delivery Network)即內(nèi)容分發(fā)網(wǎng)絡(luò)，將源站內(nèi)容分發(fā)至全國(guó)所有的節(jié)點(diǎn)，縮短用戶查看對(duì)象的延遲，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度與網(wǎng)站的可用性，解決網(wǎng)絡(luò)帶寬小、用戶訪問(wèn)量大、網(wǎng)點(diǎn)分布不均等問(wèn)題。
【本文為51CTO專欄作者“朱成林”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】
