云社区 博客 博客详情
云社区 博客 博客详情

前端树结构优化

前端小盆友 发表于 2020-08-21 10:55:16 08-21 10:55
前端小盆友 发表于 2020-08-21 10:55:16 2020/08/21
0
0

【摘要】 一、场景和问题树结构,多级嵌套(不确定几级),使用递归方式实现,数据量上万情况下,页面加载很慢。数据结构:十个父级节点,每个父节点有10000个子节点,父子是嵌套关系代码:页面加载:此时页面渲染需要13.5s 二、问题解决2.1 树数据结构扁平化从performance工具定位问题:调用栈createChildren被疯狂调用,在vue源码中,createChildren做的是创建Vue...

一、场景和问题

树结构,多级嵌套(不确定几级),使用递归方式实现,数据量上万情况下,页面加载很慢。

数据结构:十个父级节点,每个父节点有10000个子节点,父子是嵌套关系

代码:

image.png

页面加载:

image.png


此时页面渲染需要13.5s


 二、问题解决

2.1 树数据结构扁平化

image.png

performance工具定位问题:调用栈createChildren被疯狂调用,在vue源码中,createChildren做的是创建Vue实例这件事。创建Vue实例包括依赖收集、响应式监听、数据事件绑定、编译模板等等。

如果能将数据结构扁平化,就只会有一个tree组件,createChildren只执行进行一次。


扁平化数据还有个好处就是:

  • 减少栈的读取,递归的本质是栈的读取,栈的读取是由解析器做的,扁平化可以减少V8引擎的开销。

  • 扁平化数据可以减少dom 的数量。

    image.png



    扁平化后优化到6.5s,我们觉得6.5s还是远远不够

2.2 虚拟长列表

我们可以用懒加载解决海量数据一次性加载的问题,但是最终dom数量还是很大,容易造成页面卡顿。

所以我们使用虚拟长列表解决这个问题:

image.png

     

通过虚拟长列表,我们就控制住了DOM数量。

2.3 其他优化思考

滚动事件加防抖,但要保证滚动的平滑度,使我们需要去权衡的。样式直接在数据中输出,不通过计算:树结构缩进padding距离不通过层级计算,而是在数据中直接给出样式,避免每个节点都计算一次样式的性能问题。


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您没有权限执行当前操作

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消