前端性能优化方案

一、加载资源优化

1、合并css、压缩JS和CSS代码

减少http请求次数、减少请求的JS和CSS文件大小

2、代码分割

减少http请求
把业务代码和第三方库代码分离出来，因为业务代码更新频率大，而第三方库代码更新迭代相对较慢且可以锁版本，所以可以利用浏览器的缓存来加载这些第三方库

3、图片懒加载

减少页面第一次加载的请求次数；防止并发加载资源过多造成页面阻塞
步骤：1.页面开始加载时不去发送http请求，而是放置一张占位图；2.当页面加载完(window.onload)时，并且图片在可视区域再去请求加载图片信息

4、避免引入大量第三方库

能用css做的效果，不要用js做；能用原生js做的，不要用第三方插件。

5、使用雪碧图

6、使用CDN

让静态资源加载更快，CDN请求最近/最快的服务器

7、tree shaking

移除JavaScript中的未引用代码(dead-code)

二、提高渲染效率

1、尽量使用字体图标或SVG代替传统png图

字体图标和SVG是矢量图，方法不会变形，渲染速度快

2、事件的节流、防抖

提高js运行效率
防抖：仅执行多次触发事件的最后一次
节流：仅执行多次触发事件的第一次

//防抖
var timer;
function action(){
  if(timer){
    clearTimeout(timer);
  }
  timer=setTimeout(()=>{
    alert("要执行的事件")
  },1000)
}
//节流
var timer;
function action(){
  if(timer){
    return;
  }
  timer=setTimeout(()=>{
    clearTimeout(timer)
    alert("要执行的事件")
  },1000)
}

3、基于script标签下载js文件时，使用defer或者async来异步加载

4、减少重流、重绘

(1)减少dom操作，多个操作合并到一起执行
(2)可将元素绝对定位脱离文档流，减少对其他元素的影响
(3)使用预先定义的css class一次性改变样式
(4)使用window.requestAnimationFrame(),把代码推迟到下一次重绘

5、首屏内容使用SSR(Server Side Render)服务端渲染

在服务器端加载执行js，将数据直接输出到html，返回给客户端的是渲染好的html

6、预渲染

通过webpack预渲染插件(prerender-spa-plugin)将一些特定静态页面组件build时就编译为html文件，直接以静态资源的形式输出给搜索引擎
预渲染不执行js，只适用于纯静态页面

三、存储

1、AJAX请求使用缓存

GET请求，默认在客户端进行缓存，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304告诉浏览器去本地拉取数据

2、利用localStorage、Application Cache做一些简单数据的存储，避免向后台请求数据或者说在离线状态下做一些数据展示