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

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

性能与体验一直都是前端开发中老生常谈的话题,也是开发出一款优秀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

相关文章
|
16天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
86 29
|
8天前
|
编解码 前端开发 UED
深度揭秘:前端工程师如何玩转响应式设计,打造完美用户体验!
随着移动互联网的普及,响应式设计(RWD)成为前端开发的重要技术,旨在使网站适应不同设备的屏幕尺寸。本文介绍响应式设计的核心概念,如流式布局、弹性图片和CSS3媒体查询,并探讨如何利用这些技术及框架(如Bootstrap)构建美观实用的网站,同时关注性能优化、可访问性和SEO。
25 3
|
9天前
|
前端开发 JavaScript UED
惊呆了!这些前端技巧竟然能让你的网站秒变高大上,赶快学起来!
前端技术是网页设计的核心,能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧:动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript,可以实现视觉吸引的动态背景;微交互设计如按钮点击效果能增强用户参与感;响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学,效果显著,值得尝试。
20 3
|
9天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
18 3
|
15天前
|
前端开发 JavaScript API
惊呆了!这些前端技巧竟然能让你的网站支持AR/VR体验!
【10月更文挑战第31天】在数字化时代,用户对网页交互体验的要求日益提高,传统二维网页已难以满足需求。本文介绍如何利用前端技术,特别是Three.js,实现AR/VR体验,提升用户满意度和网站价值。通过示例代码,展示如何创建简单的3D场景,并探讨AR/VR技术的基本原理和常用工具,帮助开发者打造沉浸式体验。
32 6
|
15天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
29 3
|
16天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
48 4
|
14天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
16天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
29 3
|
16天前
|
搜索推荐 前端开发 UED
惊!这些前端技巧竟然能让你的网站在搜索引擎中获得更高排名!
【10月更文挑战第30天】在数字化时代,网站的搜索引擎排名直接影响流量和品牌知名度。本文通过四个真实案例,揭秘前端技巧如何提升搜索引擎排名:1. 关键词优化与布局;2. 高质量内容与多媒体优化;3. 网站结构优化与URL优化;4. 提升页面加载速度。这些技巧不仅提高排名,还能增强用户体验,助力业务发展。
35 3