前端性能优化总结

1.一个页面中有大量的数据，如何优化页面

1. 从数据上处理：分页分表，比如前端可以把数据分页展示，后端也分段吐数据
2. 从渲染上解决：

　　　　　　异步渲染，比如进入页面先不渲染，然后加载好页面再渲染。

　　　　　　局部渲染：只渲染目前可见区域的数据，再渲染次屏数据。

　　　　　　还有性能瓶颈，可以考虑web worker 做压缩和解码，也可以考虑离屏canvas做预渲染。

　　  3. 减少网络耗时：压缩数据，gzip等

2.一个页面中有大量的图片，如何优化页面

　　　1.图片懒加载，滚动到某个位置再加载图片

　　　　　　通过js将img标签的data-src属性赋值给src属性

　　　2.图片预加载，预先加载图片的前一张和后一张
　　　3.css sprite 精灵图加载（雪碧图）

　　　　　　当网站或者APP有大量小icon,如果上传到图片服务器比如CDN, 要加载所有这些小icon将增加大量请求,而CDN是按流量收费的,这无疑将增加很多成本.

　　　　　　CSS Sprites 技术早已不新鲜,就是将这些小icon合并成一张图片,只需要加载一次,每次通过background-position来控制显示icon,这样就可以节约大量请求,节约成本

　　　4.将图片压缩成base64格式来节约请求　　　　　

　　　　　　将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求.

　　　　　　图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decode  base64编码的图片时需要耗费很多时间的,所以如果选择此方案的话,最好选择一些小图片,不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64

3.为什么不用gzip压缩图片

　　　　图片启用GZip压缩会适得其反

　　　　　　一些开发者使用HTTP压缩那些已经本地已经压缩过的文件，而这些已经压缩过的文件再次被GZip压缩时，是不能提高性能的，表现在如下两个方面。

　　　　　　首先，HTTP压缩需要成本。Web服务器获得需要的内容，然后压缩它，最后将它发送到客户端。如果内容不能被进一步压缩，你只是在浪费CPU做无意义的任务。

　　　　　　其次，采用HTTP压缩已经被过压缩的东西并不能使它更小。

　　　　图片启用GZip压缩，不仅浪费了CPU，还增大了体积，势必影响服务器性能，影响网站速

4.单页面应用首屏优化

　　　　1.压缩代码

　　　　　　无论是否为单页应用，代码的压缩都是要做的。

　　　　　　对于vue-cli生成的项目，在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩

//webpack.prod.conf.js
plugins: [
    ......
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    ......
]

　　　　2.框架和插件按需加载

　　　　　　对于项目中用到的一些UI框架，比如 Onsen UI 、Mint UI 等等。如果我们只使用框架的部分组件，可以不引入整个框架，按需引入用到的组件

　　　　　　对于一些插件，比如表单验证插件，如果只是在个别组件中用的到，也可以不要在main.js里面引入，而是在组件中按需引入

　　　　3.框架和插件从cdn中引入

　　　　　　在开发过程中，我们其实不会要去更改这些第三方库，所以可以把它们放到cdn中，不参与打包。
　　　　　　在 index.html 中使用cdn引入

<script src="https://cdn.example.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.example.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.example.com/axios/0.17.1/axios.min.js"></script>

　　　　　　在webpack.config.js（webpack.base.config.js）中添加externals，表示这些文件可以被引用，但不参与打包。

externals: {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'axios': 'axios'
}

　　　　　　这样配置之后，我们依然可以用import Vuex from 'vuex'来引入模块。

　　　　4.路由懒加载

　　　　　　路由懒加载也就是 把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

　　　　　　结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

　　　　　　　　1.基本引入组件方式

　　　　　　　　　　import Foo from './Foo.vue'

　　　　　　　　2.定义一个能够被 Webpack 自动代码分割的异步组件

　　　　　　　　　　const Foo = () => import('./Foo.vue')

5.性能优化总结

　　　　1.高频操作的防抖和截流

　　　　2.定时器的使用

　　　　　　合理的使用生命周期，比如在组件没用的时候，销毁掉无效的定时器

　　　　　　使用watch代替一直轮询的setInterval定时器

　　　　3.图片内容的懒加载

　　　　　　图片这个东西加载起来很占用时间，同时并不是所有的图片都需要初始化的时候就加载进来

　　　　4.模块组件化

　　　　　　开发中经常会写很多组件，最好做到独立组件与业务组件的分离，或者业务组件在抽离的独立组件之上再做封装

　　　　5.用animation动画代替v-show

　　　　　　v-show本身控制的就是display属性，但是这种控制有的时候显得生硬

　　　　　　用css3的animation动画代替displa:none的操作，如

.animation_show {
    animation: animate_showup 0.5s;
    animation-timing-function: linear;
    opacity: 1;
}
.animation_hide {
    animation: animation_hidedown 0.5s;
    animation-timing-function: linear;
    opacity: 0;
}
@keyframes animate_showup {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes animation_hidedown {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

以上就是基本的前端性能优化方式