从JS引擎角度剖析DataFlux前端性能，多维度提升网站用户体验

性能与体验一直都是前端开发中老生常谈的话题，也是开发出一款优秀web应用必须要考虑的问题。随着google V8引擎的发布，Node的诞生，前端能做的事情也越来越多，浏览器的能力也被无限放大和利用。如何在能够在完成迭代需求的基础上，逐步优化网站性能以及体验，充分利用浏览器的能力突破性能瓶颈，提升交互体验，趋优网站亲和性，则成为了一个前端开发必须逾越的鸿沟。

这篇文章我们结合DataFlux前端应用，从浏览器和Javascript引擎角度来剖析前端性能，指出DataFlux前端应用在性能优化这块的优缺点。

在文章开始前，先大体聊聊 DataFlux 这款产品为什么要注重性能以及交互体验。DataFlux是一个实时大数据分析平台。看名称我们可以扣到两个字眼，“实时”、“分析”，小编认为“实时”应该对应及时、准确，而“分析”则应该对应直观、参考、预测、趋势。所以极致优化网站目前性能，提升交互体验更是成为了重中之重。

其实性能与交互问题可以简单一句话描述“能够在最短的时间内，让用户看到自己想看到的东西”。而能够由前端去实现的无非就是降低交互延迟，减少页面卡顿，美化页面效果。

首先我们谈谈怎么以前端的角度去降低交互延迟。

降低交互延迟我们可以从两个方面去考虑，网络请求、代码逻辑，网络请求可以细分成文件请求以及 AJax异步请求。

我们可以用chrome打开Dataflux SaaS应用网站,然后打开开发者工具，如下图：

影响网络请求延迟的原因可能是当前网络环境因素、服务器数据返回的延迟、包内容过大等等因素造成，一般对于服务器数据返回所造成的延迟，前端开发很难对其进行优化，当然对于一些不常变更，及时性要求不是那么高的数据，我们可以在前端做一个本地缓存处理，下次加载可以先加载本地缓存，然后再异步请求去更新数据。

如果是因为数据包过大也让引起的延迟，我们可以采用分步加载数据包，优先加载用户关注高的数据的方式去降低延迟。

对比dataflux下图我们可以看出一些东西：同样大小的数据包，「query_data」这个接口用了156ms的响应时间而另外一个接口只用了73ms，也就排除了是由当前网络环境的影响，可以确定是服务端在处理数据能力上的延迟。并且我们可以看出「query_data」是还是一个调用比较频繁的请求，这里面对交互体验的影响还是蛮大的。

所以这里我的建议是后端同学可以优化优化代码

从JS引擎角度剖析DataFlux前端性能，多维度提升网站用户体验

静态文件请求的优化点

聊完了ajax异步请求，我们聊聊静态文件请求的优化点，静态文件影响的延迟包括几个方面：体积过大，数量过多，脚本同步执行阻塞渲染。

对于体积过大的问题，我们可以用各种工具对文件压缩，分模块加载，设置响应缓存以及浏览器缓存的方式减缓延迟，这里面我着重提一下http缓存以及浏览器缓存，因为其他因素都可以由各种前端框架的cli去配置实现，着实没啥可说。http 缓存是 web 性能优化中非常重要的一种手段，把一些常用资源在首次加载时缓存到浏览器本地，再次加载时可大大减少请求次数，缓存的资源越多，性能当然越好。

PS:缓存的规则主要有两种，强制缓存和对比协商缓存，两种缓存分别通过Http报文头部不同的字段进行控制。

因为脚本的同步执行造成的阻塞渲染，我们都知道浏览器解析渲染 DOM Tree 和 CSS Tree，解析执行 JavaScript，几乎所有的操作都是在主线程中执行。因为 JavaScript 可以操作 DOM，影响渲染，所以 JavaScript 引擎线程和 UI 线程是互斥的。换句话说，JavaScript 代码执行时会阻塞页面的渲染。

解决这个问题无非是让脚本加载执行的时候，不影响到渲染。所以我们可以把样式文件放到head头部，而脚本文件放到body尾部。或者在script标签上加defer属性，来表明脚本在执行的时候，不会影响页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。但采用这种方法，会有一种缺陷。在有些浏览器中。并不会按照你自己文件的顺序执行下来。并且有的浏览器还会忽略这种属性。还有一种方式就是利用html5中一个很有用但是经常被忽略的特性，就是预加载(perfetch)，他的原理是：利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就加快了。当然这些新的特性，对浏览器的版本要求还是比较高的，如果对兼容性要求比较高的话，还是老老实实用尾部大法吧。

回到我们的应用，看下图：从图中我们可以看出，在静态文件缓存利用上我们做的还是比较好的

也用到了上面说到的prefetch特性。当然这也得益于vue-cli 的强大。。不足之处就是由的文件体积过大，会导致首次加载时间过长，执行效率降低。这里我的建议是，能够剔除文件之中不需要的模块，减少重复代码来减小文件体积。

代码逻辑方面的优化

至于代码逻辑方面的优化，我们可以从页面渲染以及执行效率两方面着手。

影响页面渲染的因素有很多，总结下来也是一句话，dom元素不要过多，不要频繁触发”重排(reflow)”，同时尽量减少因为JavaScript 引擎线程和 UI 线程的互斥性阻塞页面的渲染的影响。

dom元素不要过多：

调整页面布局结构，去除不必要的dom节点

频繁触发”重排(reflow)”：

需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。所以我们可以从在脚本中减少例如增加、修改、删除 DOM元素或者对 DOM集合的操作。在css文件中对于一下会触发重排的元素放到class的开头，触发repaint的元素放到后面, 在遍历选择某个元素样式时不要嵌套太深..等的方式减少reflow次数。

我看可以看dataflux应用的部分截图：

可以看出平台是非常依赖浏览器的GPU渲染能力，因为我们主要的方向都是在数据展示分析上，所以上面一些问题是目前我们必须要面对的问题，上图中，因为一个节点要展示的图表有可能十个，几十个甚至还可能出现地图类型的图表。在这些图表我们使用的svg元素，毕竟在处理大型渲染区域的环境上，svg优于canvas，但是这也衍生出一个问题，页面的html元素会越来越多，导致页面结构越来越复杂，解析速度会越来越慢。所以在这个问题上我们的解决方案是，优先展示用户关注的图表，只渲染屏幕区域内的元素，屏幕区域外的元素直接删除，数据缓存等方式去优化页面卡顿，反应迟缓等问题。当然除了上面说的，在代码风格上，因为我们用的是vue，所以也尽量遵循vue官方的风格指南以及cookbook。

以前端开发的方式去优化整个网站的用户体验

最后聊聊如何以前端开发的方式去优化整个网站的用户体验

其实我们比其他人的优势是更懂得如何去设计网页和增加网站实用性。举几个例子：

1. 使用“for”属性允许用户点击标签，就可以选择到表单中整个的输入区域，这对单选框和复选框扩大点击区域十分重要。但要注意选择内容的匹配
2. 在链接上应该给用户一个视觉上的提示，告诉他/她网页中的哪些链接是已访问过的。
3. 使用输入框或输入域时，选择使用“focus”或其它方式，展示出哪一个区域在当前是处于激活状态的，这一点对用户很有帮助
4. 图片标签应该加上alt图片描述，另外当你的图片存在链接时，图片描述应该包括链接地址
   ….

篇幅有限，欢迎大家使用 Dataflux.cn~

当然上面都是小编的一些个人经验总结，如有不妥之处还请多多包涵