移动端怎么加快页面显示速度？

速度：唯快不破

做了几年的前端，时间不是很长，感觉很多企业追求最多的就是速度。像武侠片里面说的：唯快不破，“快”给用户带来的体验就会很舒服，试想一下有两个情况，你打开一个页面需要等啊等啊等好久才出来，那你下次还会再进去吗？换我我反正不会再点开，姐没那么有耐心。相反，如果另一个页面分分钟就给你显示出来了，一下子你就能知道这个页面上面有哪些东西，操作起来也很流畅，当然里面的业务是差不多的那种，不包括那种傲娇行业什么的，比如国家推出的一些，明明慢的要死，你还是得耐着性子等下去，真让人尿急。。。

当然“快”是有多种因素决定的，有的时候更是需要后台支持，但是前端人员就是要考虑后台不支持的时候怎么更快。讲多了都是泪，如果性能不好，老板直接来找你：为什么这个页面这么慢才显示出来？自己内心就会哀嚎：人家数据接口没把数据传回来我想快也没办法啊！为啥怪我！不知道大家内心嚎过没有，我反正有，后面就尽量关注一些这方面，下面介绍几个目前我开发用到的有用方法，希望对大家有点帮助或者启发，有任何问题，欢迎指出，更欢迎技术大牛的补充。

1. 必要页面进行缓存
2. 缓存改动少的资源文件
3. 配置CDN
4. 压缩图片，压缩代码
5. AMD，CMD开发方式，按需加载

一、必要页面进行缓存
这个“必要页面”是需要根据业务或者页面使用情况判断的，不是一定的。不过可以参考这些页面：首页，分类页等改动不频繁的页面。
首页就相当于一个门面，体验好不好很大的程度上影响着客户的满意度，客户满意了，接受度高了，回头率才会高，然后后面的就更好开展啦，是啵？
至于缓存多久，缓存到哪？可以根据需求自己考虑，我们是缓存在了local storage里面，缓存时间是30分钟。
第一次加载的时候就将数据缓存下来，然后30分钟之内再进页面就会很快显示。当然这里面也是有一些缺点的，第一次进来比较慢。
二、缓存改动少的资源文件
很多项目都要用到公共方法，一般都是用base，common或者global等单词命名，也有一些基本的样式表也是这样命名的，基本上这些文件是不需要改动的，将他们缓存起来减少一些资源的请求。
三、配置CDN
CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。当然，这是需要付费的，通过第三方的方式进行加速，个人的话还是没必要弄啦。
四、压缩图片，压缩代码
这是从代码层面上面说的，线上代码一般不要log，注释掉的代码直接删除，毕竟用户不关注你那些没用的代码，删除不必要的东西，将代码压缩，现在也有很多压缩和混淆工具，直接线上也行，vue项目里面可以集成uglifyjs等，打包之后注释掉的代码会自动被删除；那些用原生开发的就要辛苦点，首先，写代码的时候就要注意啦，代码尽量简洁点，调试之后不需要的代码记得删除，然后再用工具压缩下，嗯，欧了，然后在引入吧，一般压缩一下文件能小不少，请求的时候速度更快哟。
图片的话应该不用多说，是个开发都知道，图片太大首先请求慢，其次加载慢，所以原则就是能用css写的就用css写，不能的那也要尽量减少图片的大小，100K以内，不能再多了，再多了我不干，哈哈。
五、AMD,CMD的开发模式，按需加载
按需加载这个其实很久前就开始了，也一直被推崇，但是实际项目中，很多公司还是没有按照这种想法来的，特别是一些小公司刚起步的时候，加班多，工资少，很多人都是能搞定就行，交差-收工-回家。等到后期公司规模上去了，人员多了，产品越做越大的时候，问题就会出现啦，之前的那种模式不适合，这个时候再来亡羊补牢，一点点的填坑，悲愤！
AMD是”Asynchronous Module Definition”的缩写，即”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。这里异步指的是不堵塞浏览器其他任务（dom构建，css渲染等），而加载内部是同步的（加载完模块后立即执行回调）。
类似于下面的这种写法：

require(['math'], function(math) {
  math.add(2, 3);
})

但是以上是使用一个模块，在此之前需要定义一个模块，AMD是使用define:

define(id?, dependencies?, factory);

// math.js
define(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add
  }
})

// main.js
require(['math'], function(math) {
  alert(math.add(1, 1));
})

// 如果有依赖
// math.js
define(['dependenceModule'], function(dependenceModule) {
  // ...
})

AMD依赖前置，用到什么都需要先加载进来。
CMD推崇依赖就近，延迟执行。

// CMD
define(function(require,exports, module){
	var a = require('./a');
	a.doSomethine();
	var b = require('/b');
	b.doSomething();
});

// AMD
define(['a','b'],function(a,b){
	a.doSomething();
	b.doSomething();
});

点我-看详细AMD，CMD讲解

以上是本人开发的一点总结，如果和你刚好志同道合，那是我的幸运，因为能力有限，还有很多需要学习的地方，也希望能结交更多的志同道合的伙伴。谢谢。

移动端怎么加快页面显示速度？

猜你喜欢