前端性能优化的若干点

1.尽量压缩通过网络传输的各种资源，这里推荐使用gzip压缩。使用gzip，需要客户端支持gzip，同时服务端开启gzip。使用gzip压缩js文件等文本资源有很好的效果，压缩图片或者视频虽然也能让文件体积减小，但相应解压工作会大量增加性能开销，实际对性能优化没多大意义。

2.使用CDN，CDN可以让用户就近获取服务器上的资源。

3.减少请求次数。

4.图片懒加载，也即延迟加载。当网页上要展示的图片过多的时候，让未处于浏览器可视区的图片不加载，当图片处于可视区时同时加载。

5.适当降低图片质量。

6.尽量减少重排和重绘，当页面上元素删除或者增加，大小尺寸发生改变时，浏览器会重排，重排也会重绘。当元素字体的颜色改变的时候，浏览器会重绘。

7.程序的局部性。程序的局部性是指在一段时间内，程序的执行只集中在某一段代码。良好的程序一般都具有良好的局部性。程序的局部性有两种形式，时间局部性和空间局部性。时间局部性是指在一段时间内，某句指令被反复调用，比如常见的循环结构。

var a = [1, 2, 3, 4];
var sum = 0;
for (var i = 0; i < a.length; i++) {
  sum += a[i];
}

sum += a[i];这条语句就会在短时间内反复执行，这样具有良好的时间局部性 。

空间局部性是指程序需要用到的数据的内存地址处于相邻的位置。一般间隔步长越短，空间局部性就越好，性能就越高。举个二维数组的例子。

var a = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
];
var sum = 0;
for (var j = 0; j < a.length; j++) {
  for (var i = 0; i < a[j].length; i++) {
    sum += a[j][i];
  }
}

在该例中，每次执行sum += a[j][i]的步长为1，如果把该例换种写法

var a = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
];
var sum = 0;
for (var j = 0; j < 4; j++) {
  for (var i = 0; i < a.length; i++) {
    sum += a[i][j];
  }
}

则每次执行sum += a[i][j]的步长为4，这样程序的空间局部性就很差。 

8.在html中，css在head中引入，js部分放在html末尾，这样让页面先渲染出具有样式的结构。

9.在js中尽量减少操作dom。

10.多利用各种缓存。举一个其中的例子，在vue中计算属性和方法有些时候看起来似乎都可以使用，但计算属性的结果会存于缓存，只有当响应式依赖发生变化时，计算属性的getter才会重新执行，否则直接从缓存中读取结果；而方法在响应式依赖没有变化时，也会重新执行里面的函数。