性能优化 | 浅析web前端速度优化

性能是良好用户体验的基础，通过优化让用户在使用产品时有更快更舒适的浏览体验。我们在与客户交流业务时，客户常有直观感受与疑问是：基金列表响应速度慢，亦或是界面卡顿怎么优化。为让包含非技术外的业务人员也能简单理解性能优化方法，我们本期尝试用浅显、平直的语言讲解性能优化，主要针对是web前端技术方面。

首先简单了解下web应用目前在基金行业内主要以三种形式存在：

• 网上交易（即pc官网）

• 微官网（移动端H5）

• 混合应用（H5 和 原生应用皆有的手机应用）

网上交易是比较常见的打开形式，对于pc端而言，在兼容性的需求会比较高。目前pc端开发，基本需求都是在兼容ie8/ie9， 由于兼容ie8的pc，无法使用目前的比较主流的三大框架（vue2.*， react， angular6）。所以将采用传统的html + jq + css 的形式进行编写。

传统的jq框架如何获得更好的用户体验？

01 做好基础优化

基础优化同样重要，往往也是容易被忽视的部分：

1. 首先针对这种多页面的应用项目，我们要确保每个页面的http请求数在合理的范围内。比如一个100kb的文件， 已经是比同时请求4个 25kb的文件要来的快的。

2. 文件大小体积控制。 比如一个98 kb的包加载的速度肯定是比一个 980kb的包快的。缩小文件体积，可以通过减少代码中的空格以及压缩图片来实现。

3. 合理的利用缓存。无论是什么数据，只要是重新拉取的，肯定会造成一定的额外开销， 所以应合理的使用浏览器缓存， 某些情况下使用代码级缓存。

4. 如果存在列表，使用分页形式进行加载，避免单次的网络请求数据过大。

效果如何？通过以上4点优化方法，数据对比明显可见▼：

如图所示，左边是对应的是优化前的对应图， 可以看到时间最久的大约在1s钟左右，而右侧的打包后的同一页面是在500ms以内，说明基础的优化点已经可以让web页面加载速度有明显变快体验。

02 深度优化：以“缓存”为例

以上的优化点比较初级，积少成多后效果比较明显。如果想进一步提升优化效果，本次以“缓存”为例进行说明。

针对缓存处理， 比如像是静态文件，html文件，图片文件，css， js文件我们采用网络协议进行缓存，保证静态文件每次访问不会重新拉取。

后端接口部分，同样可以做缓存。 针对后端数据中get方法中的资源内容， 以及部分不经变动的接口，我们是可以进行本地缓存的。

答疑时间：

这里需要回答下容易存在疑惑的地方，比如安全、性能方面的考虑。

针对安全方面， 我们存储在浏览器中的数据有没有可能被别人获取到呢？ 答案是有可能，但是概率很低。

• 首先，这两个属性是针对域名进行存储的。通俗来说，就是两个不同的网站并不能访问到相同的存储空间。

• 关于漏洞，对于网站本身而言，网站的XSS防护也要做好，防止代码注入获取到我们网站缓存的信息。

• 接着最重要的一点，是本地不存储敏感信息。什么意思呢？ 也就是我们应用于本地缓存的内容只能是非敏感数据，也就是比如基金列表数据， 基金详情数据，首页展示数据等。本身即可公布的内容。

性能方面，拿来与传统的存储cookie做一个比较：

以上是对比的结果，在各个方面而言，sessionStorage， localStorage是要优于cookie。

03 结尾

缓存的好处总结：

• 减少网络请求数

• 减少后续访问应用的白屏时间

• 对于应用中多次打开对比的页面有较大的性能提升

• 减少了数据获取的时间

性能调优是一个循序渐进的过程，不是一蹴而就的，重在平时的点滴积累。本期性能优化方法也是技术类文章的第一篇，后续会持续更新技术应用与服务应用介绍，敬请期待。