全部文章
共 1299 篇文章
Editor.js 开发 Notion 风格富文本编辑器
前言 开发一个编辑博客内容的富文本编辑器，风格类似于 Notion 块级的编辑器，研究了 开源项目，和它的风格接近，editorjs 界面简洁，操作个人感觉很高级，插件灵活易扩展，样式可编辑修改，开发成本也没有那么复杂 介绍 Editor.js 亮点 用户界面友好 ：Editor.js 提供了一个直观且易于使用的用户界面，能够轻松地创建和编辑文档 模块化编辑 ： 使用块级元素（blocks）的方式组织文本，每个块负责处理不同类型的内容，...
React父组件刷新导致子组件重新渲染问题
React更新原理分析 要想知道这个问题的原因，我们得知道一些 的原理,在react中在每次更新产生后都会进行一个叫做 的过程，在其中react中会找到此次更新中fiber树发生的变化，并将他们打上一些标记,在下一个阶段中在根据这些标记对该fiber节点进行一些操作，比如当一个fiber节点被打上 标记就说明待会该fiber节点对应的dom节点需要被插入dom树，理所当然的如果我们想要每次更新都能迅速的完成那么我们肯定就不能傻乎乎的去比...
你真的会写侧边栏收起动画吗
业务背景 侧边栏的展开与收起, 是非常常见的前端交互. 下面这段代码是个基础版的demo, 使用html+tailwind编写的 这段代码的视觉效果就是下面这样的. 通过点击左上角的toggle来进行宽度切换. 为了实现toggle的效果, 我们+上一段js代码 总结下, 使用两栏布局, 右侧固定200px, 左侧自适应, 点击toggle可以隐藏和展示右侧区域. 动画如下 问题 功能已经实现, 而且逻辑也非常简单. 但是却存在一个体验...
带你使用 React、Vite、TypeScript、Less、Zustand、Ant Design 开发 Chrome V3 插件
一、使用 创建 项目 选择 和 进入项目，并进行 安装 此时项目文件夹目录为： 二、修改 项目 因为我们是开发 插件，需要 页面等文件，所以需要对之前的项目进行删除，并添加我们自己的配置 1\. 项目修改 1. 删除项目根目录下的 文件 2. 删除 目录下的 3. 删除根目录下的 文件夹 4. 在根目录下创建 文件，此乃插件入口文件 5. 创建 页面：在 目录下创建 文件夹， 文件夹中创建 文件夹， 文件夹下创建 文件（这些新建的文件内...
数据量太大，DOM节点加载过多，怎么保证前端在渲染的时候页面不会卡（性能优化）
一、定时器分批渲染 既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用 ，JavaScript虽然没有多线程，但是setTimeout和setInterval两...
构建浏览器工作原理知识体系（开篇）
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 作为一个前端工程师，浏览器是我们密不可分的朋友，想要深耕前端，就必须和浏览器“交心”💞。 为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆。 所以本文我将用一条知识线将浏览器工作原理的知识串联起来，因为本文的...
构建浏览器工作原理知识体系（浏览器内核篇）
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 书接上回～ 系列文章目录： 1. 2. 3. ✊构建浏览器工作原理知识体系（网络协议篇） 待更新 4. ✊构建浏览器工作原理知识体系（网页加载超详细全过程篇） 待更新 为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定...
纯 CSS 实现文字换行环绕效果
⌛ 三年前。。。 🧔♂️ 一同事问我：“你说用 css 能不能直接实现这个效果，不想用 js 写，好麻烦啊” 我回答道：“应该不行吧，好像没什么好用的方法。。。” ✅ 现在，三年之约已到，我终于找到了纯 css 实现的方法 省流，实现代码 起源 前几天在翻 chrome 的博客时偶然看到了这么一个东西 Chrome 110 年初登陆， 属性是一个小而强大的 CSS 功能，它为首字母的位置设置样式。您可以将字母放置在下降或上升状态。该...
超详细的大文件分片上传⏫实战与优化⚡(前端部分)
大文件分片上传实战与优化(前端Part) 1\. 需求分析 1.1 分析 实现大文件上传, 其中包括以下功能 秒传: 文件已存在, 直接给前端返回文件 url 记录文件的 hash 与元数据到数据库中 上传文件前先计算 hash 和获取文件元数据请求接口进行比对 若比对成功则说明文件已存在, 直接返回前端文件 url 断点续传: 上传过程意外中断, 下次上传时不需要从头上传整个文件 前端将文件分片上传, 后端接收分片然后进行合并 上传分...