小纯洁w-CSDN博客

原创 react 下拉列表加载数据卡顿

CellMeasurer 使用 key 作为识别不同单元格的标识，当列表中某个单元格的 key 改变时，它就会被识别为一个新的单元格，CellMeasurer 会对其进行重新测量。正确使用 key：如果一个列表项的内容发生改变，你需要确保它的 key 属性与之前不同，以强制 CellMeasurer 重新测量。避免嵌套使用：在可能的情况下，尽量避免嵌套使用 CellMeasurer。如此一来，无论每项内容的高度是多少，我们都可以确保只渲染位于视口内的项，不会因为下拉列表内容过多导致页面卡顿。

2024-05-23 09:21:56 261

原创 HTTP缓存配置和使用Node.js来实现EXETC和Last-Modified的相关配置。

此函数需要两个参数：一个是文件路径，另一个是回调函数。每当你想添加一张新的图片，只需要在服务器的代码中添加一个新的else if语句来处理那张图片的路径，并在你的HTML文件中给那张图片添加一个新的。你可能需要修改你的代码来更灵活地处理大量的图片路径，比如，你可以遍历一个目录来发送目录中的所有图片，或者你可以使用一个数据库来管理你所有的图片和它们的路径等等。需要注意的是，无论你的服务器能支持多少图片，最重要的是你的服务器的性能能否承受这么大的负载，并且能否在浏览器请求这些图片的时候快速地提供服务。

2024-05-22 09:15:40 563

原创 react使用usecontext 设计与实现复杂表单与多个表格相互联动计算

这个例子涉及到两个子组件：一个负责接收和显示数据的表格组件(TableView)，一个负责接收用户输入更新总体数据的表单组件(InputForm)。这行代码中，我们首先提取了当前的data数组（也就是prevData），然后创建了一个新数组，这个新数组包含了所有原有的元素以及新的元素（也就是newData），这样我们保留了所有旧的数据并添加了新的数据。一旦数据状态被改变，React会重新渲染所有使用data的组件，因此包括TableView组件，这样用户就可以看到新的数据反映在UI上。

2024-05-21 09:47:25 489

原创 echarts 大数据量数据造成卡顿处理

数据进行筛选和抽样来减少渲染点数

2024-05-20 10:17:03 1113

原创前端动画跳针优化

首先启用 React Concurrent Mode，需要使用 React 的实验性版本并在你的主组件中使用 createRoot API 来初始化你的 React 树。需要注意的是，Concurrent Mode 仍然是 React 的实验性特性，可能会有一些未知的副作用和问题，所以在正式生产环境中使用前，需要进行充分的测试。这样，你就启用了 Concurrent Mode，此时，React 可以开始在后台预加载和预渲染组件，而不会影响到当前的用户界面。

2024-05-17 10:50:08 807

原创 websocket 如果重连还是失败的处理方法

这只是一个基本的实现，依据你的具体场景和需求，你可能需要对其进行相应的调整。例如，你可能需要处理轮询响应，把数据渲染到UI，或者在出现错误时停止轮询等。

2024-05-16 10:06:19 392

原创点击按钮后响应事件延迟

因为JavaScript的事件循环机制会按照任务队列的顺序来执行任务，所以实际的执行时间还是会受到其他任务的影响。如果在这300ms内再次点击按钮，原本的setTimeout会被clearTimeout清除，并重新设定，所以只有最后一次点击会被处理。需要注意的是，Web Worker运行在独立的线程中，不能直接操作DOM或者获取主线程的全局变量，它们只能通过主线程和Web Worker之间的消息传递进行交互。在上述代码中，如果300ms的窗口期内有多次点击事件，只有第一次会被处理，其他的都会被忽略。

2024-05-15 11:19:56 449

原创前端对象存储优化之隐藏类优化

隐藏类描述了对象的属性布局，主要包括了属性名称和每个属性所对应的偏移量，比如point对象的隐藏类就包括了x和y属性，x和y属性的偏移量会存储在隐藏类中。当我们要读取对象的属性时，V8会查看对象的map，通过属性的名称找到其在对象中的偏移量，从而直接读取到属性的值。当添加新的属性到对象时，V8会创建一个新的隐藏类并通过back_pointer指针指向老的隐藏类，新的隐藏类中只记录进行了变更的属性信息，随后对象指向隐藏类的指针会指向新的隐藏类。错开添加的属性可能导致隐藏类的改变，这会阻碍后续的属性查找。

2024-05-14 11:30:35 1115

原创 Ngrok内网穿透

请注意，每次启动ngrok时，如果你没有配置固定的URL，那么abc1234这样的部分是随机生成的，所以每次都会不一样。比如说，如果你的电脑 IP 是 192.168.1.5，你的 Vue 项目通过 http-server 在 8080 端口上运行，那么其他设备就可以通过在浏览器中输入 192.168.1.5:8080 来访问你的项目。打开你的web浏览器，访问 http://localhost:4040 ，你将看到ngrok 提供的一个实时的Web UI，你可以在这里找到你的公网地址。

2024-05-11 11:07:51 822

原创 uniapp使用render.js和Leaflet进行数据通信和地图加载

然后在脚本部分，通过Leaflet的L.map方法创建一个地图实例，并通过setView方法设置地图的中心位置和初始缩放级别，如var map = L.map(‘map’).setView([51.505, -0.09], 13);接着你可以添加各种图层到地图上，如标题图层，标记，折线，多边形等。用于高效绘制复杂的用户界面。render.js 是 Uniapp 框架中用于在视图层运行的JS库，相较于WXS（微信脚本，微信小程序提供的一种基于JavaScript的脚本语言），它更具有易用性和强大的功能。

2024-05-06 15:18:58 455 1

原创 vite-plugin-obfuscator与webpack-obfuscator代码混淆

vite-plugin-obfuscator 和 webpack-obfuscator 都是用于在构建过程中混淆 JavaScript 代码的工具，他们能帮助保护源代码中的敏感内容不被轻易理解和解析，提高源代码的安全性。两者的选择主要取决于你项目中所使用的构建工具，如果项目基于 Vite，你就需要使用 vite-plugin-obfuscator，如果基于 Webpack，则应该使用 webpack-obfuscator。个人调优后的配置，我们的目的主要是不让用户调试，代码达到不可读即可。

2024-04-29 13:29:55 833

原创 Uniapp 数据持久化与 sqlite

（首先需要打开sqlited的db库 ->创建表->操作表）首先需要在manifest.json里面勾选sqlite模块。3.封装出sqlite使用方法。Uniapp 数据持久化。一、在uniapp中使用。1.sqlite使用方法。

2024-04-23 16:10:31 322

原创 Uniapp 打包流程之离线打包

使用命令 keytool -list -v -keystore sim.jks 查看自己的jks文件信息可以使用 c:\sim.jks 添加文件路径 keytool -list -v -keystore c:\sim.jks。复制代码d: set PATH=%PATH%;这一步执行后会提示输入keystore密码，alias密码，然后提示输入新的alias密码，同样，按规矩来，改为android！36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期。

2024-04-10 13:49:47 1178

原创谷歌浏览器安装 Vue.js devtools 扩展程序

上述办法可以解决插件不是别问题，但仅适用在开发过程中，打包或者上线可以注释或删掉该引入。扩展程序安装完即便你的项目是vue框架搭建的，它也可能识别不出来。

2024-04-09 13:26:41 118

原创 vue 使用element-plus 图标引入

在Vue中使用Element Plus图标，首先确保已经安装了Element Plus。在页面中直接使用图标。

2024-04-08 15:12:07 479

原创浅谈MessageChannel 深拷贝

MessageChannel 是 HTML5 中的 Web Workers API 的一部分，用于在不同文档、不同窗口或者不同线程之间传递消息。而 postMessage 方法是用于发送消息的，它可以接受任何类型的参数，参数会自动进行结构化克隆算法，该算法能够处理循环引用并且可以拷贝大部分的 JS 对象。MessageChannel 的 postMessage 方法可以处理以下类型的特殊对象：循环引用：可以处理对象之间的循环引用情况，如 let obj = {};

2024-04-03 15:53:44 144

原创 uni-app renderjs通信

视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。renderjs与逻辑层通信示例。

2024-04-03 15:34:15 467

weixin_43891869的博客