记一次 React 渲染 markdown 引发的内存泄露最
最近在开发的时候遇到了一个性能问题，这里记录一下解决方案，并且借此机会讲一下如果遇到类似的问题大家可以如何排查。 背景 最近在用 React 做一个 AI 产品，目前市面上的 AI 产品有个很常见的效果就是机器人的回答是逐字输出并会解析为 MarkDown 格式。但是同事在使用的时候发现，偶尔的时候页面会突然开始卡顿，然后两三秒后页面直接崩溃并报错误代码 5。而且随着聊天越来越长，这个问题的复现几率会逐渐增大。 那啥也别说了，开干吧。...
git忽略已提交的文件
比如dist目录被提交了，如何忽略呢？ 你可以按照以下步骤将 目录从 Git 仓库中忽略： 1. 将 目录添加到 文件中 ： 打开你项目根目录下的 文件，如果没有就创建一个，然后添加以下内容： 2. 从 Git 缓存中移除 目录 ： 运行以下命令将 目录从 Git 缓存中移除，这样它不会再被追踪： 3. 提交更改 ： 现在将更改提交到仓库： 这样，Git 就会忽略 目录中的文件了。 但是git log里面已经多次记录过dist目录，会有...
一图看懂ArrayBuffer、Blob、File、FileReader、MediaSource之间的关系
本文主要介绍了 ArrayBuffer、Blob、File、FileReader、MediaSource 之间的关系。ArrayBuffer 是固定长度的二进制数据缓冲区，通过 TypedArray 或 DataView 操作，常用于网络技术处理二进制数据。Blob 是类文件对象，File 是其子类。它们可通过特定方式创建、操作和应用。FileReader 用于异步读取文件内容。MediaSource 是媒体资源接口，与其他对象存在一定...
使用JS简单实现一下apply、call和bind方法
文章介绍了 JavaScript 中 apply、call 和 bind 方法，apply 以数组形式传参，call 以参数列表传参，两者用于函数调用时绑定 this 值，bind 会返回新函数并处理参数合并。还讲解了这三个方法的自定义实现及测试示例。 关联问题: apply和call区别在哪 bind如何合并参数 怎样实现bind方法 1.方法介绍 apply、call和bind都是系统提供给我们的内置方法，每个函数都可以使用这三种方...
前端如何优雅通知用户刷新页面
前言 老板：新的需求不是上线了嘛，怎么用户看到的还是老的页面呀 窝囊废：让用户刷新一下页面，或者清一下缓存 老板：那我得告诉用户，刷新一下页面，或者清一下缓存，才能看到新的页面呀，感觉用户体验不好啊，不能直接刷新页面嘛？ 窝囊废：可以解决（OS：一点改的必要没有，用户全是大聪明） 产品介绍 c端需要经常进行一些文案调整，一些老版的文字字眼可能会导致一些舆论问题，所以就需要更新之后刷新页面，让用户看到新的页面。 思考问题为什么产生 项目是...
谈谈前端水印实现的几种方式
遇到问题 日常工作中，经常会遇到很多敏感的数据，为防止数据的泄露，我们要在数据上做一些”包装“。目的就是让那些有心泄露数据的”不法分子“迫于严重的”舆论压力“而放弃不法行为，使之”犯罪未遂“，达到不战而屈人之兵的效果。而在安全部门工作的我们，数据安全的观念早已深入骨髓，每个文字，每张图片，都要留心是否有泄露的风险，怎么防止数据泄露，是我们一直思考的问题。比如图片的水印，就是我们工作过程中经常涉及到的问题。因为本身工作内容就是审核平台的开...
小白也能看懂的JavaScript作用域链和闭包
这篇文章主要介绍了 JavaScript 中的作用域链和闭包。先讲解了全局作用域、函数作用域和块级作用域的概念及特点，包括变量的访问规则和小测验。接着阐述了作用域链，通过代码和图解解释了词法作用域、outer 及作用域链的概念。然后说明了闭包的概念、产生原因，通过示例展示其应用，并给出了相关测验。最后总结了闭包的优缺点。 关联问题: 作用域链如何优化 闭包内存如何管理 全局作用域有何限制 前言 在之前的写文章中我们已经对js的运行机制有...
基于 prefetch 的 H5 离线包方案
对于电商 来讲，使用 技术开发的页面占比很高。由于 加载速度非常依赖网络环境，所以为了提高用户体验，针对 加载速度的优化非常重要。 是最常用的优化技术，通过提前下载 渲染需要的 资源，加载时直接使用本地缓存资源避免额外的网络请求提高加载速度。本文主要是介绍团队在离线包技术方案上的探索，以及基于 的离线包实现方案如何减少维护成本和开发成本。 离线包技术发展到现在已经比较成熟。离线包技术主要是分为两部分，一部分是客户端离线包容器，另一部分是...
前端实现文本对比，并高亮显示差异！
你有没有想过，常见的代码差异对比是如何都实现的呢？其实这里面涉及到非常复杂的文本对比算法，本文就来看看如何通过现有工具库 jsdiff + diff2html 实现文本对比，并高亮显示差异！ 文本对比 文本对比可以借助 jsdiff 来实现， 是一个 JavaScript 库，用于实现文本差异比较。这个库提供了多种方法来计算和展示两个文本之间的差异，可以用于多种文本差异比较的场景，比如版本控制、文档比较、代码编辑器中的变更高亮等。 js...