性能优化

---

title: 性能优化 date: 2018-07-09 17:07:58 tags:

• 前端 categories:
• 前端

---

继续上一内容，更新第四部分，防重复点击-节流函数的使用。

1. 截图分享功能
2. 按钮防重复点击(节流函数应用)
3. 下拉刷新，上拉加载更多(这个地方有坑)

==4. 性能优化方面==

项目用webpack进行打包，所以js,css，图片本身已经进行了压缩，这里挂个链接，写的挺不错的一篇，对于一般的性能优化做了介绍。 前端性能优化

页面重绘，重排也是需要注意的点，防抖节流方面，css优化也是需要注意的。这里也给推荐一篇，读完受益挺多的。 多方面性能优化

像这篇文章里面提到的雅虎军规，这个提的比较早了，挺多年前的，不过即使到现在也是该遵循的，之前有用雅虎提供的一个谷歌插件来测试网站性能，叫做 y-slow， 不过现在好像搜不到了，可以试下这个 用于性能测试的统计分析工具，工具能给我们提供许多帮助，但是最终还是需要自己平时写代码时就注意这些方面。尽量从源头上保证性能。

体积压缩

阐述一下之前项目遇到的问题，首屏加载慢，如上所说，项目已经开启了压缩，服务端开启了gzip，走了CDN,看了下首屏加载还有400K左右，在移动端还是有点偏大，该优化的部分都优化了，怎么办呢，就得从项目体积上想办法了。

首屏加载可以去看看Main.js里面究竟引用了些什么东西。 就像下面的这个，全局引入了echarts，虽然已经是按需引入了，但是全局还是导致了首页渲染速度慢。

main.js


// echarts
import ECharts from './components/ECharts.vue';
// 手动引入 ECharts 各模块来减小打包体积
// import 'echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/markPoint.js';
import 'echarts/lib/component/axis';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/visualMap';
import 'zrender/lib/svg/svg';
import 'echarts/lib/chart/candlestick';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
Vue.component('chart', ECharts);
复制代码

当把这块移到需要用到的地方后，构建项目查看，惊呆了有没有，瞬间减小了一半，变成了236K。

// 国际化
// import VueI18n from 'vue-i18n';
// Vue.use(VueI18n);
// const i18n = new VueI18n({
//     locale: 'zh-CN', // 语言标识
//     // this.$i18n.locale // 通过切换locale的值来实现语言切换
//     messages: {
//         'zh-CN': require('./common/lang/zh') // 中文语言包
//         // 'en-US': require('./common/lang/en')    // 英文语言包
//     }
// });
复制代码

突然发现了甜头，那就继续再看，发现下面还有个 语言包，为了以后项目的国际化，暂时还没有用到的，先去除吧，去除后又是60K左右，这样项目首页就从 450K 变成了 176K，首屏加载已经差不多了。

但是。。。。。。。。。。。

为了更好的性能优化，我们不仅仅只是将组件移出，在需要加载的地方还需要加上懒加载，这样效果会更好一些。

如下： 在views里的vue组件里添加需要懒加载的部分。这样就算结束了这个优化点了。

components: {
        MarketCell, MarketListHeader,
        chart: resolve => {require(['../../../components/ECharts.vue'], resolve)},//懒加载
    },
复制代码

图片懒加载 + loading状态

图片懒加载实现的方式比较多，百度一搜都挺多的，大家多搜搜，我们不做伸手党哈，这里说下加loading状态，这个算是一种思维的体现，告诉我们在做项目的时候，方法是千千万的，换个思路都能完成。

达成的效果就是在图片还未加载成功时显示一张loading效果图。 聪明的大家看代码就知道了，挺取巧的一个办法。

 <div class="news-img-wrap img-loading">
    <img class="news-img" v-lazy.container="news.pic"  alt="">
</div>

.img-loading {
        background: #fff no-repeat url('/static/img/imgLoding.png') center center;
        background-size: cover;
      }
复制代码

外层div固定大小，设个背景图，这样图片未加载出来时会显示loading效果，图片加载失败时也可以直接用onerror 直接指向另一张图片，都是解决方法。

其他方面

路由方面需要设置的几个，404，网络错误，暂无数据，避免页面白屏。

动画方面建议开启3d加速，可以使用 CSS 中的 will-change: transform; 或者 transform: translateZ(0); 这样来将元素提升至单独的图层中。

降低绘制复杂度,某些属性的重绘相对而言更加复杂，比如 filter、box-shadow 等滤镜或渐变效果。因此不要滥用这类效果。