Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)

简介: 本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。

数据的批量加载

当两个节点之间有许多link对象时,可以使用批量加载功能box.startBatch()来提高数据加载效率。
批量加载会批量重绘界面,来减少界面重绘次数,提高效率。

使用方法:

  box.startBatch(() => {
   
            for (var i = 0, len = 1500; i < len; i++) {
   
                var to = new twaver.Node({
   
                    name: 'to',
                    location: {
    x: Math.random() * 600, y: Math.random() * 500 }
                });
                box.add(to);

                var link = new twaver.Link(node1, to);
                box.add(link);
            }
        })
AI 代码解读

传入一个回调函数即可。
在这里插入图片描述

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-25 18:40:42
 */
import React, {
    useEffect, useState } from 'react'
import {
   
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
   
    const [network, setnetwork] = useState({
   })
    const init = () => {
   
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({
    x: 0, y: 0, width: 800, height: 800 });

        let node1 = returnNodeFun(box, {
    name: "第一个node", location: {
    x: 100, y: 100 } })
        // 数据的批量加载
        // 当两个节点之间有许多link对象时,可以使用批量加载功能box.startBatch()来提高数据加载效率。
        // 批量加载会批量重绘界面,来减少界面重绘次数,提高效率。
        box.startBatch(() => {
   
            for (var i = 0, len = 1500; i < len; i++) {
   
                var to = new twaver.Node({
   
                    name: 'to',
                    location: {
    x: Math.random() * 600, y: Math.random() * 500 }
                });
                box.add(to);

                var link = new twaver.Link(node1, to);
                box.add(link);
            }
        })
    }
    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>数据序列化</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo
AI 代码解读

学习参考:TWaver Documents

目录
相关文章
Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
本文介绍了Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
283 7
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
本文介绍了Twaver HTML5中的网元管理容器(ElementBox),包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化,并通过控制台输出相关的事件信息。
64 4
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
本文介绍了Twaver HTML5中的页管理容器(TabBox)和选中模型(SelectionModel)。文章解释了如何使用TabBox来管理Tab页,并通过示例代码展示了SelectionModel的多种功能,包括追加选中元素、设置选中元素、选中所有元素、移除元素选中状态、清除所有选中状态等。此外,还介绍了如何监听选中状态的变化事件以及如何设置不同的选中模式,如多选、单选和不可选。
53 2
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
349 2
jquery中html()方法的使用
jquery中html()方法的使用
64 1
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
38 2
html最大限度提高加载速度
要提高HTML页面的加载速度,可以采用多种策略:优化HTML结构,精简标签和合并文件;使用异步加载资源,如添加`async`或`defer`属性;压缩文件,利用HTMLMinifier减小文件大小;优化图片,采用合适格式和尺寸;利用CDN托管静态资源;设置HTTP缓存头以利用浏览器缓存;减少HTTP请求,合并文件;启用Gzip压缩;优化服务器响应时间;使用优雅降级和渐进增强确保兼容性。综合应用这些方法能显著提升加载速度和用户体验。
Twaver-HTML5基础学习(22)层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)、属性管理容器(PropertyBox)
本文介绍了Twaver HTML5中的多种管理容器:层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)和属性管理容器(PropertyBox)。文章解释了这些容器的作用、如何获取它们,并提供了一些基本的操作方法。这些容器分别用于管理图层、告警、表格列和属性对象,是TWaver中数据管理和组织的重要部分。
53 1
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
50 0