- 博客(38)
- 收藏
- 关注
RSS订阅原创 前端数据实时更新的巧妙实现，大揭秘！
如今，Web 应用愈发复杂，用户对实时交互体验的要求也越来越高，比如：社媒的即时通讯、大屏的数据更新、实时消息的提醒等，这些都表明实时交互已成高品质应用的必备特性。而作为开发者，我们常面对复杂的开发环境，要应对即时通讯与数据实时更新的问题。那么，该如何精准高效实现这些功能呢？我们将共同探讨下，轮询Web Socket三种解决方案，最终根据当下场景选出最优方案，打造更为出色的产品。上述文章中，介绍了轮询Web SocketSSE三种方案。
2025-01-14 10:37:47
1004
原创 “不定高”虚拟列表，面试官总考这玩意儿
不定高的意思很简单，就是不知道每一项item的具体高度，如下图：现在我们有个问题，在不定高的情况下我们就不能根据当前滚动条的scrollTop去计算可视区域里面实际渲染的第一个item的index位置，也就是start的值。没有start，那么就无法实现在滚动的时候只渲染可视区域的那几个item了。这篇文章我们讲了不定高的虚拟列表如何实现，首先给每个item设置一个预估高度itemSize。然后根据传入的长列表数据listData初始化一个positions数组，数组中的topbottomheight。
2025-01-02 09:42:16
777
原创 给我 2 分钟，保证教会你在 Vue3 中实现一个定高的虚拟列表
有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。一个常见的虚拟列表是下面这样的，如下图：其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。在定高的虚拟列表中，我们可以根据可视区域的高度和每个item的高度计算得出在可视区域内可以渲染多少个item。
2024-12-23 09:51:07
856
原创 利用Chrome浏览器使用Overrides调试线上代码，真是太方便啦！
在Network中选择一个文件，右击 Override content 修改文件，并按ctrl+s保存，就会在本地生成对应页面的代码。利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，太尴尬了。想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，那赶快试试下面这种方法吧。打开Select folder for overrides，选择要存放代码的文件夹。如果想去掉修改的内容，删除对应修改的内容或直接删除本地文件，再刷新即可。
2024-12-12 15:32:54
493
原创 动图展示 10 大 Git 命令，让你轻松掌握Git
当我们想要合并的两个分支的同一文件中的同一行代码上有不同的修改，或者一个分支删除了一个文件而另一个分支修改了这个文件时，Git 就不知道如何取舍了。对一个提交执行 cherry-pick 时，我们会在活动分支上创建一个新的提交，其中包含由拣选出来的提交所引入的修改。如果我们在当前分支上提交我们想要合并的分支不具备的改变，那么 git 将会执行 no-fast-forward 合并。如果你有一个远程 Git 分支，比如在 GitHub 上的分支，当远程分支上包含当前分支没有的提交时，可以使用取回。
2024-12-10 13:51:57
683
原创 前端性能优化 - 提升 LCP（Largest Contentful Paint）
是一个关键的 Web 性能指标，用于衡量网页的加载性能。具体来说，LCP 是指从用户请求页面开始到页面主体内容（如大图像、视频或大块文本）完全加载并显示在视口中所需的时间。LCP 越短，用户感受到的页面加载速度就越快，这对提升用户体验和页面留存率至关重要。为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。三个关键指标中其它两个指标是FID（First Input Delay，首次输入延迟）和。
2024-12-09 14:05:11
1252
原创 10s 搭建一个前端新项目，就这么简单！
在启动一个新的前端项目时，利用框架自带的脚手架进行初始化是最常见做法，但随后往往需要进行一系列的配置。随着时间积累，社区已经出现了很多预配置模板，这些模板不仅集成了常用的配置，还融入了最佳实践，使开发者只需简单下载即可投入开发。本文就来分享一些前端社区中热门的前端模板，助力更高效地启动新项目！
2024-12-05 17:01:31
1428
原创 如何使用流式渲染技术提升用户体验
本文从理论上探讨了流式渲染相关实现方案，理论上，流式渲染很简单。HTTP 标准和 Node.js 很早之前就支持了这一特性。但在工程实践中，它很复杂。例如对于 react 来说，流式渲染不仅仅需要 react 作为 UI 来支持，也需要借助 nextjs 这种元框架（meta framework）提供服务端的能力。
2024-12-04 10:10:36
1307
原创 Vue：我们将成为最快的响应式框架！
是一个轻量级的信号库，由 StackBlitz 推出，目标是创建一个具有最低开销的 signal 库。Github 地址：https://github.com/stackblitz/alien-signals这个库旨在通过一些限制条件来实现卓越的性能：基于 Push-Pull 模型不使用动态对象不使用 Array/Set/Map不进行递归调用类属性少于 10 个。
2024-12-03 11:22:49
1066
原创 TypeScript之类型收窄
试想在消息模式中，我们会监听和发送不同的事件，这些都是以名字进行区分，不同的事件还会携带不同的数据，这就应用到了可辨别联合。是存在的，我们在 radius 定义的时候将其设为可选属性，但又在这里将其认为一定存在，前后语义也是不符合的。当联合类型中的每个类型，都包含了一个共同的字面量类型的属性，TypeScript 就会认为这是一个。不同值的结果，它也能识别 JavaScript 中一些怪异的地方，就比如在上面的列表中，当进行收窄的时候，如果你把所有可能的类型都穷尽了，TypeScript 会使用一个。
2024-12-03 11:18:55
117
原创 Vite6.0发布啦！
今天，我们在Vite的发展历程中又迈出了一大步。Vite的团队[2]、贡献者[3]以及生态系统合作伙伴都很高兴地宣布Vite 6版本发布了。这是成果丰硕的一年。Vite的采用率持续增长，自一年前Vite 5发布以来，每周的npm下载量从750万次跃升至1700万次。Vitest[4]不仅越来越受用户青睐，而且还开始形成自己的生态系统。例如，Storybook[5]拥有了由Vitest提供支持的新测试功能。
2024-11-27 13:51:58
1229
原创 关于代码评审(CodeReview)那些不得不说的事儿
CodeReview 国内也称「代码评审或者代码审查」，也简称CR，是指在软件开发过程中，工程师对其他人所写代码做审阅（后文统称CodeReview），以达到控制代码质量的目的。通常的流程都是由代码写作者发起，请团队内其他人审阅代码，其他人对代码提出改进建议，再由代码写作者修改重新提交，直至代码通过大家的审阅为止。
2024-11-26 11:06:01
618
原创 TypeScript之常见类型
第一种组合类型的方式是使用联合类型，一个联合类型是由两个或者更多类型组成的类型，表示值可能是这些类型中的任意一个。这其中每个类型都是联合类型的成员（members）。// OK// OK// Error复制代码。
2024-11-21 10:59:45
214
原创 leetcode——电话号码的字母组合
给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。来源：力扣（LeetCode）著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。
2024-11-19 17:48:55
255
原创 TypeScript 之基础入门
TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
2024-11-18 15:34:05
638
原创 Node.js 23 发布了！
Node.js 23 现已推出，带来了新功能、性能改进和更好的开发者体验。此次版本提升了兼容性和稳定性，提供了更多工具来构建高效的应用程序。此外，Node.js 22 将在 10 月 29 日当周被提升为长期支持 (LTS) 版本，进入长期维护阶段，以确保稳定和安全的更新。支持使用 require() 加载原生 ES 模块——在 v23.0.0 之前，该功能是通过 --experimental-require-module 启用的。
2024-11-18 14:11:03
566
原创 leetCode——二进制手表
二进制手表顶部有 4 个 LED 代表 小时（0-11），底部的 6 个 LED 代表 分钟（0-59）。每个 LED 代表一个 0 或 1，最低位在右侧。例如，上面的二进制手表读取 “3:25”。给定一个非负整数 n 代表当前 LED 亮着的数量，返回所有可能的时间。
2024-11-15 13:46:46
1051
原创 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？
可以看到，innerHTML 的总计算量不管是 js 计算还是 DOM 操作都是和整个界面的大小相关，但 Virtual DOM 的计算量里面，只有 js 计算和界面大小相关，DOM 操作是和数据的变动量相关的。出于可维护性的考虑，这显然不可能。很多人都没有意识到，在一个大型列表所有数据都变了的情况下，重置 innerHTML 其实是一个还算合理的操作... 真正的问题是在 “全部重新渲染” 的思维模式下，即使只有一行数据变了，它也需要重置整个 innerHTML，这时候显然就有大量的浪费。
2024-11-14 17:30:19
1451
原创 leetcode——单词搜索
给定一个二维网格和一个单词，找出该单词是否存在于网格中。单词必须按照字母顺序，通过相邻的单元格内的字母构成，其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一个单元格内的字母不允许被重复使用。来源：力扣（LeetCode）著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。
2024-11-11 16:24:17
909
原创 clean-code-javascript系列之注释
记住， 使用版本控制！不需要僵尸代码， 注释掉的代码， 尤其是日志式的注释。它们仅仅添加了干扰。让函数和变量名称与合适的缩进和格式化为你的代码提供视觉结构。注释是代码的辩解， 不是要求。多数情况下， 好的代码就是文档。因为有版本控制， 把旧的代码留在历史记录即可。
2024-11-08 13:38:58
279
原创 clean-code-javascript系列之格式化
格式化是主观的。就像其它规则一样， 没有必须让你遵守的硬性规则。重点是不要因为格式去争论， 这 里有来自动格式化， 使用其中的一个即可！因 为做为工程师去争论格式化就是在浪费时间和金钱。针对自动格式化工具不能涵盖的问题（缩进、 制表符还是空格、 双引号还是单引号等）， 这里有一些指南。
2024-11-07 10:00:58
233
原创 为什么前端打包出来的静态文件名字是一串 Hash 值 ？
前端打包时使用 Hash 值作为静态文件名，主要是为了缓存优化、版本管理和避免缓存污染。当文件内容发生变化时，打包工具会生成不同的 Hash 值，确保文件名唯一，从而强制浏览器加载最新版本的资源，避免加载旧缓存文件引发的问题。同时，如果文件内容没有变化，文件名保持不变，浏览器可以继续使用缓存中的资源，从而减少网络请求，提升加载性能和用户体验。通过这种方式，前端应用可以高效地管理静态资源，保证用户始终访问到最新内容。
2024-11-07 09:50:43
957
原创 浏览器系列之 Cookie 和 SameSite 属性
2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，在灰度期间，就导致了阿里系的很多应用都产生了问题，为此还专门成立了小组，推动各 BU 进行改造，目前阿里系基本已经改造完成。所有的前端团队估计都收到过通知，也着实加深了一把大家对于 Cookie 的理解，所以很可能就此出个面试题，而即便不是面试题，当问到 HTTP 相关内容的时候，不妨也扯到这件事情来，一能表明你对前端时事的跟进，二还能借此引申到前端安全方面的内容，为你的面试加分。
2024-11-06 17:22:07
1605
原创 clean-code-javascript系列之错误处理
抛出错误是一件好事情！他们意味着当你的程序有错时运行时可以成功确认， 并且通过停止执行当前堆栈 上的函数来让你知道， 结束当前进程（在 Node 中）， 在控制台中用一个堆栈跟踪提示你。
2024-11-06 09:51:27
146
原创 clean-code-javascript系列之并发
Promises 是回调的一个非常简洁的替代品， 但是 ES2017/ES8 带来的 async 和 await 提供了一个 更加简洁的解决方案。你需要的只是一个前缀为。回调不够简洁， 因为他们会产生过多的嵌套。在 ES2015/ES6 中， Promises 已经是内置的全局类型 了，使用它们吧！函数链来编写逻辑了。如果你能使用 ES2017/ES8 的高级功能的话， 今天就使用它吧！关键字的函数， 接下来就可以不需要。
2024-11-04 13:59:31
158
原创 clean-code-javascript系列之测试
测试比发布更加重要。如果你没有测试或者测试不够充分， 每次发布时你就不能确认没有破坏任何事情。测试的量由你的团队决定， 但是拥有 100% 的覆盖率(包括所有的语句和分支)是你为什么能达到高度自信 和内心的平静。这意味着需要一个额外的伟大的测试框架， 也需要一个好的。没有理由不写测试。这里有， 选一个适合你的团队的即可。当为团队选择了测试框架之后， 接下来的目标是为生产的每一个新的功能／模 块编写测试。
2024-11-01 15:30:36
27
原创 中级前端的面试秘籍
最近也是收到了不少小伙伴的私信，说是最近要找工作需要点技术理论支撑。我抽空整理了一些常见的面试题，供大家参考~，后续如果感觉还不错，我会出一篇从中级到高级进阶的面试秘籍。
2024-10-31 14:57:52
1571
原创 leetcode——N皇后
n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。上图为 8 皇后问题的一种解法。给定一个整数 n，返回所有不同的 n 皇后问题的解决方案。每一种解法包含一个明确的 n 皇后问题的棋子放置方案，该方案中 'Q' 和 '.' 分别代表了皇后和空位。提示：皇后，是国际象棋中的棋子，意味着国王的妻子。皇后只做一件事，那就是“吃子”。当她遇见可以吃的棋子时，就迅速冲上去吃掉棋子。当然，她横、竖、斜都可走一到七步，可进可退。
2024-10-31 14:39:03
372
原创 clean-code-javascript系列之SOLID
最小化需要修改一个类的次数时很重要的， 因为如果一个类拥有太多的功能， 一旦你修改它的一小部分， 将会很难弄清楚会对代码库中的其它模块造成什么影响。这是针对一个非常简单的里面的一个恐怖意图， 它的正式定义是： “如果 S 是 T 的一个子类型， 那么类 型为 T 的对象可以被类型为 S 的对象替换（例如， 类型为 S 的对象可作为类型为 T 的替代品）而不需 要修改目标程序的期望性质 （正确性、 任务执行性等）。在 JavaScript 中能比较好的说明这个原则的是一个类需要一个巨大的配置对象。
2024-10-31 14:35:38
114
原创 clean-code-javascript系列之类
因为这个原因， 我说， 使用方法链然后再看看你的代码 会变得多么简洁。在你的类／方法中， 简单的在每个方法的最后返回。有许多好的理由去使用继承， 也有许多好的理由去使用组合。这个格言 的重点是， 如果你本能的观点是继承， 那么请想一下组合能否更好的为你的问题建模。很多情况下它真的 可以。很难为经典的 ES5 类创建可读的的继承、 构造和方法定义。如果你需要继承（并且感到奇怪为啥你不需 要）， 则优先用 ES2015/ES6的类。不过， 短小的函数优先于类， 直到你发现你需要更大并且更复杂的 对象。
2024-10-30 14:31:51
117
原创 clean-code-javascript系列之对象和数据结构
正因为如此， 使用 getters 和 setters 来访问对象上的数据比简单的在一个对象上查找属性 要好得多。JavaScript 没有接口或类型， 所以坚持这个模式是非常困难的， 因为我们没有。这个可以通过闭包来实现（针对 ES5 或更低）。
2024-10-29 14:13:52
863
原创 leetcode——最接近的三数之和
给定一个包括 n 个整数的数组 nums 和 一个目标值 target。找出 nums 中的三个整数，使得它们的和与 target 最接近。返回这三个数的和。假定每组输入只存在唯一答案。来源：力扣（LeetCode）链接：. - 力扣（LeetCode）. - 备战技术面试？力扣提供海量技术面试资源，帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。
2024-10-29 11:31:16
491
原创 clean-code-javascript系列之函数
这是软件工程中最重要的一条规则， 当函数需要做更多的事情时， 它们将会更难进行编写、 测试和推理。当你能将一个函数隔离到只有一个动作， 他们将能够被容易的进行重构并且你的代码将会更容易阅读。没有参数是最理想的， 一个或者两个参数也是可以的， 三个参数应该避免， 超过三个应该被重构。通常， 如果你有一个超过两个函数的参数， 那就意味着你的函数尝试做太多的事情。由于 JavaScript 允许我们不定义类型/模板就可以创建对象， 当你发现你自己需要大量的参数时， 你 可以使用一个对象。
2024-10-28 15:38:40
524
1
原创 clean-code-javascript系列之变量
我们要阅读的代码比要写的代码多得多， 所以我们写出的代码的可读性和可搜索性是很重要的。使用没有 意义的变量名将会导致我们的程序难于理解， 将会伤害我们的读者， 所以请使用可搜索的变量名。如果你的类名/对象名有意义， 不要在变量名上再重复。// 将它们声明为全局常量 `const`。的工具可以帮助我们找到未命名的常量。// 86400000 是什么鬼？// 等等， `l` 是啥？
2024-10-25 15:15:00
971
mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、
2024-11-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
暂无认证
