網絡性能優化實戰

本文轉載自查看原文 2016-09-27 16:26 1931 網絡性能優化 WPO 瀏覽器

這是一篇用於本公司定期技術交流分享的一篇整理文章。

首屏一秒渲染原則

對於APP里面的H5頁面首屏渲染時間不能超過1秒，首屏不要加載太多資源。Google提出了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的請求數。
- minify
啟動網絡服務器壓縮功能：Apache、Nginx、IIS都支持配置壓縮功能。

由於我們后台項目采用了.NET架構，所以我們在此針對IIS進行壓縮功能的配置。IIS默認是啟動壓縮功能的，IIS支持“靜態內容壓縮”和“動態內容壓縮”兩種，如下圖，

另外微軟為我們提供了一份很好的文檔：Configuring HTTP Compression in IIS 7

首屏加載、按需加載、預加載

首屏應該盡量控制在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會重新加載當前頁面，影響速度和效率。
相關網址：Empty image src can destroy your site

CDN加速

通過CDN來加速是一項相對而言成本比較高的優化手段，所以這些把它放在所有優化方法的最后，但它是一項非常有效的優化方案

CDN(Content Delivery Network)即內容分發網絡，將源站內容分發至全國所有的節點，縮短用戶查看對象的延遲，提高用戶訪問網站的響應速度與網站的可用性，解決網絡帶寬小、用戶訪問量大、網點分布不均等問題。

在線工具

參考資料

個人博客

我的個人博客

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 linux性能優化實戰-網絡性能調優 for循環實戰性能優化 MongoDB實戰性能優化性能優化 | Linux性能優化實戰分析 RocketMQ性能優化【實戰筆記】 Linux 性能優化實戰磁盤 MongoDB分片實戰(三)：性能和優化 Java GC性能優化實戰【0192】Android 性能優化之電量+網絡優化 SQL性能優化：如何定位網絡性能問題