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