1、基本網絡優化

CSS和JS的串聯和壓縮：

• 文件串聯： 或gulp-concat
• JavaScript的壓縮/縮小：或gulp-uglify
• CSS壓縮：或gulp-cssmin

圖像無損壓縮：

• 工作流插件：或gulp-imagemin
• Mac桌面應用程序：
• web應用程序：

利用瀏覽器緩存：對static assets設置合適的緩存時間，大大提高加載頁面的速度。

啟用gzip壓縮設置：如果您的服務器和客戶端支持gzip壓縮，，可以節約90%的響應時間。

2.瀏覽器兼容性快速修復

怎樣很好的支持舊版本的瀏覽器？這里有一些開源的解決方案，可以解決一些常見的舊版本瀏覽器問題。

• ：IE9以下的版本對CSS3的支持有限，因此大多數的新版CSS selectors不可以沒有polyfill。
• ：IE8以下的版本不支持CSS媒體查詢。在樣式表加載之后加載這個，長期忍受IE這一缺點的用戶會感激你的。
• :傳統的瀏覽器polyfill library允許開發人員動態地為常用HTML5功能加載polyfill，包括form、geolocation和Canvas。

3.快速修復收集和平板

這里有幾個很棒的開源JS項目，有助于提升您的移動應用程序的性能。

• ：消除用戶點擊屏幕之后事件觸發的時間延遲。尤其適用于ios，而Android版Chrome可以使用user-scalable=no來消除，IE11+可以使用touch-action: manipulation，移動Safari瀏覽器目前還沒有這樣的設置。
• ：當處于脫機狀態時通知您的用戶，并在重新上線之后存儲用戶的行為。

4.JavaScript的模塊捆綁和軟件包管理

使用bundler組織您的客戶端代碼，例如Webpack、Browserify、RequireJS或JSPM with System.js。尤其當您依賴很多第三方時，在非捆綁本地開發模式和生產開發模式下都可以運行。

Bundlers可以減少JS請求blocking、壓縮代碼，并只加載目前正在頁面上使用的腳本。

5.

Usemin作為工作流程的一部分介紹，自動替換參考模板中沒有進行優化的設置。usemin可以輕松整合串聯、壓縮和文件提速。

原文翻譯自：

轉載請注明：