1. 客户端缓存静态文件
客户端在feed流提前加载页面所需要的静态资源，提前调用所需要调用的接口，这部分优化节省了很多时间。
优点：
节省了很多静态资源加载所需要的时间
缺点：
在feed流会很消耗用户的流量，一些用户不想点进来的页面也会消耗流量去加载
2. 客户端识别文章title取消loading效果
前景：
loading效果是客户端做的，为什么不在H5做loading效果呢，因为H5页面的loading需要在H5页面开始加载才会出来，这样就会有刚开始用户点开页面是空白的效果，体验太差了，所以loading做到了客户端，客户端在识别文章加载完成之后取消loading效果，这样为了用户体验更好。
问题：
之前是识别文章加载完成之后取消loading效果，这样用户等待的时间太长了，其实文章已经在页面加载完成之前就出现了。
解决：
所以和客户端商量做一个小优化，就是在客户端检测到详情页出现title的时候取消loading框，因为客户端检测到文章title的时候就意味着文章已经加载完了，但是后续的相关推荐和评论可能并没有加载完，但是用户首屏其实看不到相关推荐和评论，所以不会影响用户体验，这样既不会出现空白的瞬间，还可以让用户先看到文章，后续加载相关推荐和评论。体验上升一个level。
优点：
进一步减少了用户的等待时间
缺点：
暂未发现缺点
3. 将图片都进行懒加载模式
先加载文章，根据用户滑动到位置去加载图片，在加载速度方面其实并没有加快多少，1.5s~2s加载的文章，做了这项优化大概能加快100ms左右。
优点：
速度加快了，但是并不多
缺点：
如果首屏有图片的情况下，体验不是很好，会后出来图片，做了一个优化，就是首屏的图片不使用懒加载解决了这个问题
4. 将JS合并，CSS合并，压缩
将第三方JS和自己写的JS合并压缩，将CSS合并压缩，页面只引用一个JS和一个CSS。减少静态资源加载所消耗的时间，会优化100ms左右。
优点：
静态资源少，加载所消耗的时间短
缺点：
后续维护不好维护，所以留了一般初版
5. 修改详情页的框架
之前的几个操作都是在用vue写的前提下操作的，所以看到的作用都不是很大，所以我就研究了一下市面上一些新闻类app的详情页，发现所有的页面都是用jquery，没有用vue写的，后来通过研究，vue其实在加载的时候会重新渲染dom，导致了加载太慢。
优点：
页面渲染加快了一倍的速度，在之前1.5s~2s打开一个详情页的情况下降低到了在1s内让用户可以看到文章。
缺点：
缺点就是人工耗费的时间太长，两个不同的框架在重构的时候会有很多思想不一样的地方，需要重新捋清楚一遍之前的逻辑重新写。
后续还可以做的优化
之前在研究一些市面上的新闻app时，发现有部分app是通过后端渲染文章页面，执行前端的JS，去后续渲染相关推荐和评论的，这种操作可以让用户更早的去看到文章内容。这项优化只有做过才知道能优化多少，但是因为后端人力不足，所以这个优化没有在这两次迭代中做。
总结：
经过这一系列优化的采坑，发现在以后做一些市面上已经有的东西时，可以去提前借鉴一些他们的案例，这样在后续开发中可以减轻开发人员的工作量。咱们的详情页加载慢，我觉得很大一部分是因为当时在选择使用的框架时没有选择好。
网友评论