多维表格/业务库表格大数据量性能瓶颈

先说最终结论:Angular 组件创建性能损耗是当下主要的性能瓶颈

理由:
基于以往编辑器性能优化的经验,编辑器在动态渲染内容时会创建很多壳子组件(也就是Angular 组件),排查的时候就发现如果略这些壳子组件性能可以有一倍的提升,所以有了对编辑器的一次大的性能优化 #TECHW-20 编辑器性能优化:使用 ListRender 渲染列表 ,核心就是自己写列表的渲染去掉中间的壳子组件。
排查业务组件库表格性能问题(styx-table),发现了同样的问题,就是在组件进入 reflow 之前会有很长一段时间的 js 的执行时间,300 条数据、9个字段 大概有 350ms 的纯脚本的执行时间,这 350ms 应该是 angular 组件创建的性能损耗。
v-table 上简单测试,渲染 240 行、30 个字段,各种场景下:

  1. 壳子组件(grid-cell)500ms
  2. 使用模版(ng-template)100ms
  3. 直接绑定 40ms

初步方案:
表格核心部分的渲染不基于 Angular 组件,而是基于原生 HTML 或者 WebComponent 组件(需要验证性能表现),这种方案的带来的问题是需要自己重写每一种字段的显示组件,无法复用组件库或者业务组件库组件,而单元格的编辑可以通过桥接、定位的方式复用业务组件库组件

测试表现:

在这里插入图片描述

<div class="grid-cell"><div class="text-column"><span class="d-block">{{ data.value }}</span></div>
</div>

模版

<ng-template #text let-data="data"><div class="grid-cell"><div class="text-column"><span class="d-block">{{ data.value }}</span></div></div><!-- <ng-template [ngTemplateOutlet]="text2" [ngTemplateOutletContext]="{ data }"></ng-template> -->
</ng-template>

模版套模版

<ng-template #text let-data="data"><!-- <div class="grid-cell"><div class="text-column"><span class="d-block">{{ data.value }}</span></div></div> --><ng-template [ngTemplateOutlet]="text2" [ngTemplateOutletContext]="{ data }"></ng-template>
</ng-template><ng-template #text2 let-data="data"><div class="grid-cell 22"><div class="text-column"><span class="d-block">{{ data.value }}</span></div></div>
</ng-template>

组件

<!-- 使用组件 -->
<v-table-text
[value]="data.value"
></v-table-text>
<!-- 内部模版 -->
<!-- <v-table-text2 value="{{value()}}"></v-table-text2> -->
<span class="d-block">{{ value() }}</span>

组件套组件

<!-- 使用组件 -->
<v-table-text
[value]="data.value"
></v-table-text>
<!-- 内部模版 -->
<v-table-text2 value="{{value()}}"></v-table-text2>
<!-- <span class="d-block">{{ value() }}</span> -->

模版套模版性能损甚至比组件套组件损耗大

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/359936.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day9 —— 大数据技术之ZooKeeper

ZooKeeper快速入门系列 ZooKeeper的概述什么是ZooKeeper&#xff1f;ZooKeeper的特点和功能使用ZooKeeper的原因 ZooKeeper数据模型ZooKeeper安装ZooKeeper配置ZooKeeper命令行操作常见服务端命令 ZooKeeper的概述 什么是ZooKeeper&#xff1f; ZooKeeper是一个开源的分布式协…

ZOOM太卡怎么办?公司如何解决ZOOM会议卡顿?

ZOOM作为一种常见的办公工具&#xff0c;尤其在跨国公司和外资企业中&#xff0c;在线会议非常普遍。然而&#xff0c;由于ZOOM的服务器部署在国外&#xff0c;国内用户使用时可能会遇到卡顿、不稳定和声音断续等问题。那么&#xff0c;如何有效解决ZOOM卡顿的问题呢&#xff1…

数据库管理-第212期 上期SQL性能优化勘误与扩展(20240624)

数据库管理212期 2024-06-24 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09;1 环境2 方案1问题3 问题引申总结 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海…

OS中断机制-外部中断触发

中断函数都定义在中断向量表中,外部中断通过中断跳转指令触发中断向量表中的中断服务函数,中断指令可以理解为由某个中断寄存器的状态切换触发的汇编指令,这个汇编指令就是中断跳转指令外部中断通过在初始化的时候使能对应的中断服务函数如何判断外部中断被触发的条件根据Da…

【机器学习项目实战(二)】基于朴素贝叶斯的中文垃圾短信分类

完整代码、数据集和相应的报告 链接已经放在了正文最下方, 供大家参考学习 摘要 ​ 本文探讨了中文垃圾短信分类的问题,通过收集实际数据集,运用多种机器学习算法进行分类,并对比了不同算法在垃圾短信分类任务上的性能。本研究旨在提高中文垃圾短信的识别准确率,为构建更…

《UDS协议从入门到精通》系列——图解0x2A:通过周期读ID数据

《UDS协议从入门到精通》系列——图解0x2A&#xff1a;通过周期读ID数据 一、简介二、数据包格式2.1 服务请求格式2.2 服务响应格式2.2.1 肯定响应2.2.2 否定响应 三、通信示例 Tip&#x1f4cc;&#xff1a;本文描述中但凡涉及到其他UDS服务的&#xff0c;将陆续提供链接跳转方…

CAN总线在新能源行业中的重要应用

2019年10月26日第三届中国&#xff08;佛山&#xff09;氢能源大会中展示了氢燃料电池城市客车&#xff0c;与目前的纯电动汽车和传统汽车相比&#xff0c;作为一种新的驱动形式出现。但是&#xff0c;新能源汽车整车网络的实现依旧离不开CAN总线通讯。 工程师们通过CAN总线读取…

Linux Redhat ens33不显示IP问题

优质博文&#xff1a;IT-BLOG-CN 【第一步】&#xff1a;查看系统网卡设备 : ip addr show 【第二步】&#xff1a;修改网卡配置参数 cd /etc/sysconfig/network-scripts/ vi ifcfg-ens33 修改ONBOOT参数为yes 【第三步】&#xff1a;重启网卡&#xff0c;然后ping检测…

Vue + SpringBoot 实现文件的断点上传、秒传,存储到Minio

一、前端 1. 计算文件的md5值 前端页面使用的elment-plus的el-upload组件。 <el-upload action"#" :multiple"true" :auto-upload"false" :on-change"handleChange" :show-file-list"false"><FileButton content&…

python中的<class ‘complex‘>

一般编程里面不怎么会讲&#xff0c;但是还是挺强大的一个类。 在 Python 中&#xff0c;<class complex> 表示复数类型。复数是一种包含实部和虚部的数学数&#xff0c;可以用 a bj 的形式表示&#xff0c;其中 a 表示实部&#xff0c;b 表示虚部&#xff0c;j 是虚数…

kylinos 国产操作系统离线安装firefox 麒麟操作系统安装新版本firefox

1. 火狐地址&#xff1a; 下载 Firefox 浏览器&#xff0c;这里有简体中文及其他 90 多种语言版本供您选择 2. 选择&#xff1a; 3. 下载完之后&#xff0c;上传到离线机器 4. 解压缩&#xff1a; tar -xvjf firefox-127.0.1.tar.bz2 5. 去点击解压后的文件夹&#xff0c;找…

Redis持久化(RDB、AOF)详解

Redis持久化详解 一、Redis为什么需要持久化&#xff1f; Redis 是一个基于内存的数据库&#xff0c;拥有极高的读写性能&#xff0c;但是内存中的数据在断电或服务器重启时会全部丢失&#xff0c;因此需要一种持久化机制来将数据保存到硬盘上&#xff0c;以便在需要时进行恢复…

Latex学习之“usefont”用法

Latex学习之“\usefont”用法 一、通俗的解释 \usefont 是 LaTeX 中的一个命令&#xff0c;用于在文档中临时改变字体&#xff0c;其基本语法如下&#xff1a; \usefont{字体编码}{字体族}{字体系列}{字体形状}这样看起来好像蛮抽象&#xff0c;你可能以及晕了&#xff0c;什…

《代码大模型安全风险防范能力要求及评估方法》正式发布

​代码大模型在代码生成、代码翻译、代码补全、错误定位与修复、自动化测试等方面为研发人员带来了极大便利的同时&#xff0c;也带来了对安全风险防范能力的挑战。基于此&#xff0c;中国信通院依托中国人工智能产业发展联盟&#xff08;AIIA&#xff09;&#xff0c;联合开源…

Midway + TypeORM项目部署到BT后启动失败,MySQL报错

Midway TypeORM项目部署到BT后启动失败&#xff0c;MySQL报错 前沿 您需要先了解这篇文章&#xff1a;https://blog.csdn.net/weixin_45687201/article/details/139336111 错误日志 服务状态开启后就失败项目日志&#xff0c;输出 \> my-midway-project1.0.0 start \&…

前端vue-cli相关知识与搭建过程(项目创建,组件路由)very 详细

一.关于vue-cli 1.什么是vue Vue (读音 /vju ː /&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一&#xff0c;和 Angular.js…

19、删除链表的倒数第

1、题目描述 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[]示例 …

多商户零售外卖超市外卖商品系统源码

构建你的数字化零售王国 一、引言&#xff1a;数字化零售的崛起 在数字化浪潮的推动下&#xff0c;零售业务正经历着前所未有的变革。多商户零售外卖超市商品系统源码应运而生&#xff0c;为商户们提供了一个全新的数字化零售解决方案。通过该系统源码&#xff0c;商户们可以…

基于Openmv的追小球的云台

介绍 在这篇文章&#xff0c;我会先介绍需要用到且需要注意的函数&#xff0c;之后再给出整体代码 在追小球的云台中&#xff0c;比较重要的部分就是云台&#xff08;实质上就是舵机&#xff09;的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…

qt.qpa.xcb: could not connect to display问题解决

1、问题描述 以服务器pi5作为远程解释器&#xff0c;本地win11使用vscode远程调试视觉时报错如下&#xff1a; qt.qpa.xcb: could not connect to display qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "xxxxx" even though it was …