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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介:

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

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

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

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

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

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

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

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

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

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

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

从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),他的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就加快了。当然这些新的特性,对浏览器的版本要求还是比较高的,如果对兼容性要求比较高的话,还是老老实实用尾部大法吧。

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

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

代码逻辑方面的优化

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

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

dom元素不要过多:

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

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

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

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

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

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

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

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

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

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

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

相关文章
|
1天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
5天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
12 1
|
12天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
26 3
|
12天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
22 2
|
16天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
17 3
|
6天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
9天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
17 0
|
12天前
|
前端开发 JavaScript UED
前端性能优化:打造流畅用户体验的秘诀
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘诀
21 0
|
20天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
104 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
88 2