你真的会写侧边栏收起动画吗
业务背景 侧边栏的展开与收起, 是非常常见的前端交互. 下面这段代码是个基础版的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 断点续传: 上传过程意外中断, 下次上传时不需要从头上传整个文件 前端将文件分片上传, 后端接收分片然后进行合并 上传分...
avaScript 中深拷贝对象的现代方式
您知道吗，JavaScript 现在有一种本地内置的方法可以进行对象的深层复制？ 没错，这个 函数内置于 JavaScript 运行时中： 您是否注意到在上面的示例中我们不仅复制了对象，还复制了嵌套数组，甚至 Date 对象？ 一切都按照预期工作： 没错， 不仅可以做到以上，还可以： 克隆无限嵌套的对象和数组 克隆循环引用 克隆各种 JavaScript 类型，例如 、 、 、 、 、 、 、 、 等等 转移任何可转移对象（Transf...
chrome插件开发
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。 谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。 要开发谷歌浏览器插件，开发者通常需要创建一个包含 清单文件（manifest.json）、背景脚本（background script）、内容脚本（content scri...