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
}