项目中的性能优化实战

项目背景:使用nuxt.js构建的一个服务端渲染项目

第一轮优化工作:

 

banner图的懒加载:

为什么要做?

减少首屏打开时的资源请求数量,提高资源加载速度。

过程分析:如果使用swiper自带的懒加载轮播切换会有闪烁,体验不好,如果swiper和lazyload同时使用,轮播一圈后第一张显示空白

最后解决方案是:首尾两张图片不用懒加载。

 

学员案例懒加载:

(该模块是由一个横向可滑动的多图形式构成的)

为什么要做?

减少首屏打开时的资源请求数量,提高资源加载速度。

过程分析:通过direction和yoga_o2_session_model_style_id两个字段确定学员案例模块,并添加对应的ref标识

 

 banner和学员案例都是横向滑动的图片,服务器返回的图片宽高比未知,所以需要动态获取到图片的高度之后,再设定懒加载的默认图高度,否则样式展示会有问题。

 

结果验证:请求数量(同一课程):

改动前:53次

 

改动后:30次

 

资源加载时间:

修改前:

 

修改后:

 

需要继续跟进的事情:

这里资源加载的时间虽然变短了,但是管理后台记录的dom ready时间并没有多大变化,思考应该是因为dom ready的时间计算是由js下载并执行完所得,图片懒加载只是减少了图片的资源请求数量,对于js资源影响不大,接下来准备对项目中的第三方库swiper进行替换,减小js包体大小。

dns预解析:

为什么要做?

dns预解析主要是为了减小dns查询时间 

实现过程:

通过nuxt.config.js的配置添加dns预解析

项目中的性能优化实战_第1张图片

项目中的性能优化实战_第2张图片

 

结果验证:

修改前:

修改后:

 

结果分析:对dns查询时间无明显效果,暂时还不知道原因,需继续跟进。



第二轮优化工作:

swiper组件替换:

为什么要做?

第三方swiper库功能确实很强大,但是包体较大,gzip压缩后大概32k左右

项目中的轮播图只是用到了swiper库中很小的一个组件,考虑剔除swiper库,自己封装一个swiper组件,可以减小js包体大小,提升加载速度。

过程分析:

主要用到的技术点就是 touchstart  touchmove  touchend三个手指事件。

这三个事件都有个共同的api可以拿到当前手指滑动的位置,event.changedTouches[0].pageX。这样子剩下的交互基本上全部可以通过手指的位置来做判断。具体的代码逻辑就不在这贴出来了。

阿里监控代码改为cdn异步引入:

为什么要做?

之前训练营这块阿里监控代码是通过npm包引入的,这样的引入方式会在项目打包时将该npm包一起打到项目代码中,该包体大小gzip压缩后13k左右,所以考虑换成cdn引入,剔除该npm包,减少项目包体大小,提高资源加载速度。

项目中的性能优化实战_第3张图片

 

过程分析:

查看阿里官方文档,发现是有cdn方式异步引入的示例代码的,如下

 

但是这段代码中使用了with方法,由于该方法的种种弊端(https://blog.csdn.net/zwkkkk1/article/details/79725934 ),所以代码中一般是不推荐使用的。在严格模式下,该段代码会报错,所以这块需要手动修改一下代码的书写,如下:

项目中的性能优化实战_第4张图片

 

神策sdk从npm包引入改为本地引入:

为什么要做?

nuxt在打包时,针对入口index.vue文件打包会区分 第三方库  和  业务代码,也就是说会将index.vue文件打包成两个js文件,前面将swiper组件剔除后,index.vue文件中剩余的第三方库就是神策的sdk了,所以将神策的sdk引入方式改为本地引入,这样打包可以减少一个vender.js文件

过程分析:

从神策github中找到sensorsdata.min.js文件,放到项目中,通过nuxt.config.js配置在plugin配置项中,该js会在window下暴露一个 sensorsDataAnalytic201505 的全局对象,可直接全局使用。

   项目中的性能优化实战_第5张图片    项目中的性能优化实战_第6张图片

 

优化前后数据对比:

资源加载:

优化前:

进入页面后加载7个js文件,各个js文件大小如图,总大小157kb左右。

优化后:

项目中的性能优化实战_第7张图片

页面打开加载5个js文件(bl.js为阿里监控异步引入代码,理论上对资源加载没啥影响),各个js文件大小如图,总大小105kb左右。

线上数据:

可以看到上线后,访问速度有明显提升,基本稳定在1s之内的速度。

总结:减少不必要的代码,缩小打包后的静态资源文件大小才是硬道理。

 

 

你可能感兴趣的:(埋坑之路,性能优化,cdn)