webapp 性能優化

時間 2019-11-19

標籤 webapp 性能優化欄目無線简体版

原文原文鏈接

webapp 不像傳統頁面，它生命週期更長，在手機端上，硬件環境並無pc上那麼好。因此性能的優化尤其重要。 webapp的性能優化主要分爲兩個方面 網絡請求優化 和 頁面渲染優化 ，咱們對於性能優化主要經過這連個方面來處理。css

壓縮資源文件

咱們在使用某些框架的時候（例如：JQuery）, 會發現有兩個文件 jquery.js 和 jquery.min.js， jquery.min.js 的體積會小不少，這樣在請求的時候會比較快。html

因此在項目中使用到的資源文件（js、css、image）在發佈以前須要進行壓縮處理, 這裏有些在線的壓縮的工具在線壓縮，若是使用寫項目管理工具，能夠考慮用 gulp 請求。jquery

var gulp = require('gulp'),
 uglify = require('gulp-uglify'),
 rename = require('gulp-rename'),
 sourcemaps = require('gulp-sourcemaps'),
 minifycss = require('gulp-minify-css');

gulp.task('js', function(){
 return gulp.src('./test.js')
 .pipe(sourcemaps.init())
 .pipe(rename({suffix: '.min'}))
 .pipe(uglify())
 .pipe(sourcemaps.write('./'))
 .pipe(gulp.dest('./'));
});

gulp.task('css', function(){
 return gulp.src('./test.css')
 .pipe(rename({suffix: '.min'}))
 .pipe(minifycss())
 .pipe(gulp.dest('/'));;
});

合併請求

開發過程當中，維護一個很長的js或是css文件是一個很困難的事情，經常會吧它分爲不少的小得js和css文件，可是若是按照傳統的方式寫script/link 標籤加載，會多不少請求，有http 1請求的緣由，每一個請求都會有一個rtt（請求迴路）時間，一旦請求數量增多，那麼請求的時間也會變長。在發佈以前咱們可使用一些工具將這些資源文件合併爲一個, 咱們常使用gulpweb

var gulp = require('gulp'),
 uglify = require('gulp-uglify'),
 rename = require('gulp-rename'),
 concat = require('gulp-concat'),
 sourcemaps = require('gulp-sourcemaps'),
 minifycss = require('gulp-minify-css');

gulp.task('js', function(){
 return gulp.src('./app/**/**.js') //app 下全部的js 文件
 .pipe(sourcemaps.init())
 .pipe(concat('./app.js')) //合併全部文件
 .pipe(gulp.dest('./'))
 .pipe(rename({suffix: '.min'}))
 .pipe(uglify())
 .pipe(sourcemaps.write('./'))
 .pipe(gulp.dest('./'));
});

gulp.task('css', function(){
 return gulp.src('./app/**/*.css')
 .pipe(concat('./app.css')) //app 下全部的 css文件
 .pipe(gule.dest('./')) 
 .pipe(rename({suffix: '.min'}))
 .pipe(minifycss())
 .pipe(gulp.dest('/'));;
});

cdn 和 gzip

CDN 的全稱是 Content Delivery Network ，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。經過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。ajax

GZIP 最先由 Jean-loup Gailly 和 Mark Adler 建立，用於UNⅨ系統的文件壓縮。咱們在Linux中常常會用到後綴爲.gz的文件，它們就是GZIP格式的。現今已經成爲Internet 上使用很是廣泛的一種數據壓縮格式，或者說一種文件格式。
HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。這通常是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來.通常對純文本內容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點擊網址後會很快的顯示出來.固然這也會增長服務器的負載. 通常服務器中都安裝有這個功能模塊的。json

咱們能夠將靜態的資源發佈到cdn上，並開啓 gzip 會大大的提升頁面加載數據gulp

lazyLoad

webapp 首屏加載速度是一個重要的指標，那麼怎麼讓咱們首頁最快速度加載出來呢？首頁中咱們能直接看到的只有一屏，那麼剩下的咱們能夠作 lazyload，先加加載能直接看到，讓後異步延遲加載剩下的內容。api

數據緩存

webapp 中有不少和後臺的交互，首頁加載的時候能夠先使用上次的緩存數據，等請求成功後再刷新這部分的顯示，在一些短暫時間的重複請求，可使用 sessionStorage 緩存這些數據，使用一些手段設置緩存時間，短暫時間的內的重複請求就能夠直接從緩存中獲取數據了。瀏覽器

//封裝請求方法
function getData(url, params, onloadSuccess){
 var key = url; //使用 url + params 作key
 for(var str in params){
 key += str += params[str];
 }
 if(sessionStorage.getItem(key)){
 //若是有緩存直接從緩存中取
 onloadSuccess(JSON.stringify(sessionStorage.getItem(key)));
 reutrn ;
 }
 $.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'post',
 success: function(data){
 sessionStorage.setItem(key, data); //緩存數據
 onloadSuccess(data);
 }
 });
}

css動畫GPU加速消除閃屏


.animate{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;

 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -ms-perspective: 1000;
 perspective: 1000;
}

js動畫

有些動畫須要一些js控制沒法使用css動畫的狀況，咱們能夠考慮使用js動畫來作。可使用window.requestAnimationFrame.緩存

window.requestAnimationFrame() 這個方法是用來在頁面重繪以前，通知瀏覽器調用一個指定的函數，以知足開發者操做動畫的需求。這個方法接收一個函數做爲參數，改函數在重繪前調用。

它穩定性比 setTimeout 要好，可是並非全部的瀏覽器都支持這個api，咱們須要一個兼容性代碼處理。

window.requestAnimationFrame = (function() {
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 function(callback) {
 return window.setTimeout(callback, 1000 / 60);
 };
})();

佈局優化

PC 上有不少用float來作的佈局，float的佈局在須要更大的計算量，在頁面渲染的時候嚴重影響到了加載速度，儘可能考慮用 inline 和 inline-block 替代, flex box 是專爲響應式設計佈局方式，在移動端兼容性良好，能夠考慮大範圍使用，這裏推薦下阮一峯大大的教程 Flex 佈局教程：語法篇

優化頁面上的dom數量

在mobile端，若是頁面中的dom數量過多，在頁面滾動的時候會出現卡頓，閃爍等等不良的狀況，因此咱們要刪除一些頁面上沒必要要的dom元素或者將一些dom元素做爲延遲加載。

優化dom查詢性能

先看一下這個部分的代碼

1
2
3

for(var i = 0; i< 100; i++){
 var a = $('.test');
}

上面的代碼每次循環的時候都會去進行一次dom查詢，顯然是沒必要要的消耗，咱們須要在dom查詢以前緩存，避免沒必要要的dom操做。

var a = $('.test');
for(var i = 0; i< 100; i++){
 // do somethings
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。