- 博客(1660)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 7种在 JavaScript 中分解长任务的技术
动画帧回调函数实际上拥有自己的 “队列”，在渲染阶段的特定时间运行，这意味着其他任务很难插队将其挤到队列的末尾。但它的问题是，没有技术上的保证来确定它何时或是否会运行。来看一个简单的例子：我们在屏幕上有一个用于递增计数的按钮，旁边还有一个大大的循环在执行一些繁重的工作。Scheduler 接口是 Chromium 浏览器相对较新的功能，旨在成为一种一流的工具，用于以更多的控制和更高的效率来安排任务。由它安排的所有任务都会被置于任务队列的前端，防止其他任务插队并延迟执行，尤其是在以如此快速的方式排队时。
2025-04-03 08:45:20
3
转载 智能识别图片：前端与AI的融合之美
有不同的标签构成语义化的html结构(页面的基础)，例如：main 比div 优秀， label +input=>文件输入框， p=>段落标签；：将AI技术整合到前端的聊天界面中，使得用户可以与智能机器人进行对话，并且机器人能够理解用户的意图并做出相应的回应，提供帮助和信息。：结合前端的界面设计和后端的情感分析模型，实现能够识别用户情绪和情感的应用，例如在社交媒体上分析用户发帖的情绪倾向。：利用前端技术构建用户友好的界面，与后端的智能推荐算法结合，为用户提供个性化的推荐内容，如商品、音乐、视频等。
2025-03-31 08:45:27
6
转载 不会吧，2025年了，还没有用cursor，不会吧
我个人觉得最惊艳的是 cursor 会理解我的操作意图，有一天我希望修复一个 bug，于是尝试输出了几个变量的值，跟踪代码在哪一步出现了异常，当我理清思路鼠标点击要修改的地方， cursor 直接把我接下来要写的 bug 修复代码直接生成了，我觉得这一点确实是目前其它 AI ide 或者插件没带给我的体验。唤醒，适合小范围代码提问优化或者修改，比如我全选了一个组件，让它帮我补全关键注释或者帮我编写 readme 文档，对于不爱写注释和文档的同学简直是福音。
2025-03-27 08:46:02
44
转载 如何从0设计开发一款JS-SDK
那么我们需要暴露两个实例，供其他开发者使用，为了满足易扩展的原则，我们将声明两个类，来实现（如果每个实例都很多能力，可以拆分成两个SDK也是可以的）这样我们每一个小的功能点都放在一个类中，不对外的设置为私有方法，对外的可以设置为公共方法，其他的通过引用就可以让SDK保持良好的可扩展性。当然一切都要根据实际情况，有些SDK是时间的各种处理，自己处理时间的成本太高，不妨引入小型的Dayjs时间库。模块化实现方法，尽量小的封装函数，保持函数功能的单一性原则，这样就可以更好的增加SDK的能力。
2025-03-24 08:45:42
12
转载 一次性上传 1000 张图片, 总量 10GB 的方案设计
多文件的上传任务是一个耗时的任务，这个过程可能会出现不确定的情况，比如网页关了，或者浏览器关了，而前端无法记住文件在客户机器上的位置，如果没有持久化的存储，那么用户就必须手动再去选择一下文件或者文件夹，用户体验没那么友好。如果用的是HTTP1.1,就要考虑并发控制的问题了，因为你不可能1000个请求一次性无脑发出去，那么这样，用户就必须等1000个上传任务完成，才能操作页面，因为接下来的网络请求都要排队，要等1000个图片上传完。最近有一个上传文件方面的需求，上传图片，用户可以选择文件夹上传。
2025-03-19 08:45:21
16
转载 深入探讨浏览器渲染过程
这定义了一个安全连接，是通过另一个称为 TLS 握手的握手过程完成的，它涉及几个步骤。每次浏览器渲染网页时，它都会经历这个多步骤的过程：将 HTML 字节解析为字符，识别标记，将它们转换为节点，最后构建 DOM 树。在这里，“浏览器” 是一种 “客户端”，在本文的语境中，它们是一个东西，而 “服务器”是指托管网站的网络服务器。它只包含将在屏幕上显示的元素。CSS 对象模型（CSSOM）是应用于 HTML 文档的 CSS 样式的表示，它类似 DOM 树，但表示的是 CSS 样式而不是 HTML 结构。
2025-03-17 08:45:15
26
转载 如何在前端开发中实现零停机部署
在本文中，我们将探讨在前端开发中实施零停机部署的实用策略，帮助你平稳地交付更新，而不影响用户的体验。零停机部署是一种技术，通过这种技术，对应用程序或网站的更新可以在不造成任何服务中断的情况下进行部署。这种方法可以在不向所有用户暴露新功能的情况下，在实际环境中测试新功能，从而在管理新功能发布的同时实现零停机。功能标志，也称为功能切换，可以让你在不部署新代码的情况下控制新功能或更新的可见性。自动化有助于维持可靠且可重复的部署过程，从而实现更快更高效的更新，并最大限度地减少潜在的停机时间。
2025-03-14 08:45:40
43
转载 大厂都在做的前端稳定性到底是啥呢？
引言在一次公司的前端无法访问的事故复盘后，我们调查了关于应用稳定性前端可以做些什么。对于前端稳定性其实在整个用户访问到页面到请求都需要全链路的监控与追踪，每一个环节都值得我们深入探究一下。本文就从应用服务器、静态资源、页面渲染、接口请求4大方面来各个击破，看看前端稳定性到底需要如何建设。应用服务器应用服务器在整个链路的最上游，从用户在地址栏输入域名访问后，流量通过网关（由于网关层的稳定性在大多数公...
2025-03-12 08:45:30
22
转载 Vue响应式机制深度解析：你真的掌握了吗？
背景vue3最新版本目前已更新至3.5了，很多同学经过这几年的使用，相信对vue3的常用api都已经烂熟于心了。但每每被问到源码时，还是虽表面强装镇定，实则内心慌的一批。。。就比如我们经常使用的reactive，很多同学最后就只会憋出一句：reactive的原理是proxy，然后……，就没有然后了今天我就带着大家将reactive方法一撸到底。总览话不多说，直接上图，接下来将带着大家跟着这张图结合...
2025-03-10 08:31:33
18
转载 HTML中不为人知的细节小知识
HTML作为Web开发的基石，看似简单却隐藏着许多容易被忽视的细节。本文将深入探讨一些鲜为人知的HTML特性、语义化技巧和实用代码示例，帮助开发者提升代码质量和开发效率。1. 原生懒加载的威力loading="lazy"属性自HTML5开始支持，可显著优化页面加载性能：<imgsrc="large-image.jpg"loading="lazy"alt="示例图片"><ifra...
2025-03-06 08:45:29
30
转载 前端体验优化之渐进式图片
前言关于前端的性能及体验问题，图片的加载绝对是重中之重，尤其是在一些有着许多大图的页面，在网络不稳定或稍慢的时候，我们经常能够看到页面中图片的位置是一片空白，等图片加载完成才开始慢慢渲染，在这段时间对用户的体验其实是非常不友好的。那么我们应该如何来进行优化呢？大家想说的是不是：把图片压缩一下不就好了？是的，图片压缩是我们前端开发过程必备的一步，但是光靠图片压缩并不能解决所有的图片体验问题，有些图片...
2025-03-04 08:45:36
16
转载 看破一道百度面题：正则表达式如何实现JS模板编译
今天为大家推荐的这篇文章主要介绍正则表达式实现 JS 模板编译的相关内容。包括模板编译的核心流程、正则表达式的基础知识和用途，以 Vue 和 React 为例解释模板编译原理，阐述使用正则表达式实现模板编译的优点、实现方式（基础、优化、递归）及性能优化建议以下是正文：面试官问：下面这段代码怎么实现页面渲染？letstr ='我是{{name}},年龄{{age}},性别{{sex}}'let...
2025-03-03 08:45:41
15
转载 Chrome 133+ 全新 DOM 操作方法：moveBefore
背景Chrome 133 版本（将于 2 月 4 日发布稳定版）引入了一个新的 DOM 操作方法：Node.prototype.moveBefore。这一方法虽然看似简单，但其意义重大，因为它能够在移动 DOM 元素时保留元素的状态。传统的 DOM 移动操作通常需要先移除元素再重新插入，这会导致元素的状态重置，而moveBefore则避免了这一问题。要点1、保留元素状态moveBefore方...
2025-02-27 08:45:49
22
转载 React+AI 技术栈（2025 版）
原文链接：React + AI Stack for 2025[1]，2025年1月3日，by Vishwas GopinathReact 问世已有一段时间，如今依旧表现强劲。然而科技领域瞬息万变，AI（人工智能）正给行业带来翻天覆地的变革。本文我们来探讨一下 2025 年的 React+AI 技术栈会是什么样。如果你正在规划新项目，或是考虑升级现有的开发框架，本文或许能给你一些启发。核心：Reac...
2025-02-25 08:45:36
54
转载 基于web-see的前端监控方案实现
1、需求背景最近在研究前端项目的监控，找到了web-see这个工具，jake/web-see[1]，还有使用demo，github.com/xy-sea/web-…[2]。这个工具提供了上报错误、定位错误源码、记录用户行为等功能。2、实现方案参考web-see-demo，运行node服务，提供接口：错误上报、错误列表查询、获取源码等该接口。为了实现获取源码的功能，需要将前端项目sourcemap...
2025-02-24 08:45:14
23
转载 你为什么用不好TypeScript
前言本文章是我在团队日常开发中发现的一些问题的总结，有不对的地方欢迎大家指出，互相学习、共同进步~~类型不会复用在日常开发中，一般我们对于每个接口都要定义好请求参数的类型和返回参数的类型。而对于一些比较常见的功能，我们一般会有固定的参数和一些固定的返回字段。例如列表接口，我们一定会带上page和rows,这个时候我们就可以先写一个基础的列表请求类型如:interfaceReqPage { c...
2025-02-20 08:45:43
14
转载 面试官：在Node.js中创建线程的都有哪几种方法？
在 Node.js 中，由于其单线程的特性，主线程用于执行非阻塞的 I/O 操作。但在需要执行 CPU 密集型任务时，仅依靠单线程可能会导致性能瓶颈。幸运的是，Node.js 提供了几种方法来开启和管理线程，以利用多核 CPU 的优势。为什么要开启子线程在 Node.js 中开启子线程的原因主要是为了处理并发任务和提高应用性能。Node.js 本身是基于事件循环的单线程模型，这意味着所有的 I/O...
2025-02-18 08:45:31
27
转载 聊聊前端技术调研到底应该怎么做？
由于某次需求的需要，我进行了一次技术调研，内容是调研前端将 pdf 文件转为图片的解决方案，我接到这个需求的第一时间，立马打开搜索引擎，翻看了十分钟后，~很快啊~得出了一个口头结论但这肯定是不行的，十分钟就能整明白的事情就不叫技术调研了，也无需技术调研，然而如何摆好一个技术调研的正确姿势，也没有啥标准模板，让开发人员写文档本来就够痛了，再加上一个没有标准的场景，痛上加痛，既然我想做好这次技术调研，...
2025-02-17 08:45:38
21
转载 页面跳转如何优雅携带大数据Array或Object
前言在小程序或者app开发中，最常用到的就是页面跳转。而页面跳转就经常会携带数据到下一个页面，常见的做法是通过 URL 参数将数据拼接在 navigateTo 的 URL 后面。然而，这种方式在处理较大数据（如数组或对象）时会显得笨拙且有限。下面将讨论通过 URL 传递参数的局限性，以及使用 EventChannel 进行数据传递的好处，并提供代码示例进行解析。一、使用 URL 参数传递数据的局限...
2025-02-13 08:45:26
22
转载 三种不同架构中的 React Suspense
React Suspense 的发展历程颇为曲折：多年间它几乎没有被使用，且被认为收效甚微，仅是呈现加载状态的一种炫酷方式。然而，随着 React 18 的推出，Suspense 提供了一整套新的优势，值得重新审视。遗憾的是，这些优势从平淡无奇到较为深奥不等，并且对应用架构的依赖性较高。接下来我们将看看当今最常见的三种渲染架构，以及 React Suspense 在其中所扮演的角色。简要概述客户端...
2025-02-12 08:46:04
25
转载 aiCoder：利用AST实现AI生成代码的合并工具
背景Mike Molinari 最近发布了一个名为aiCoder的项目，这是一个利用抽象语法树（AST）技术来实现 AI 生成的代码片段与现有代码文件无缝合并的工具。与传统的基于行的合并方法不同，aiCoder 通过解析代码的语法结构，确保 AI 生成的代码片段能够以 “外科手术般的精度” 插入到现有代码中，同时保留代码的逻辑结构和注释。要点aiCoder 的核心创新在于使用AST（抽象语法...
2025-02-11 08:45:41
86
转载 JavaScript 中处理 `null` 和 `undefined` 的演进
在 JavaScript 引入可选链（optional chaining）和空值合并运算符（nullish coalescing operator）之前，开发者需要使用多种方法来安全地访问对象的嵌套属性以及处理可能为null或undefined的值。这些方法虽然有效，但存在一些痛点。ES2020 引入的可选链和空值合并运算符则极大地简化了这些问题的处理。1. 使用逻辑与运算符 (&...
2025-02-10 08:45:17
36
转载 什么是源代码映射？
源映射的必要性早期的 Web 应用的复杂性较低。开发者直接将 HTML、CSS 和 JavaScript 文件部署到 Web 上。在开发工作流中，更现代、更复杂的 Web 应用可能需要使用各种工具。例如：1.模板语言和 HTML 预处理器：Pug、Nunjucks、Markdown。2.CSS 预处理器：SCSS、LESS、PostCSS。3.JavaScript 框架：Angular、React...
2025-01-24 08:45:18
58
转载 学 TypeScript 常被忽视的小概念 declare
背景declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。$('#foo');//orjQu...
2025-01-23 08:45:55
53
转载 5年前端刚会用VsCode Debug Vue项目
说真的，做了5年前端我也换过几家公司我发现我的前端同事都不会debug，都是用的console.log，那我也不学这里说的是在vscode里debug，不是代码里写debugger后用浏览器调试反正console也能勉强用反正前端大多时候也不怎么写复杂的业务逻辑就算写 那我就多console几下，到时候一起删了好了就这样，我console了5年。。。期间中途也有忍不住的时候，但是我还是忍了。直到今...
2025-01-22 08:45:21
71
转载 优秀前端人都知道的H5 移动端调试全攻略
随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。一、概要因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。文章会列举目前适合移动端调试的多种方案，快来选择你的最佳实践吧！二、iOS 设备Safari：iphone 调试利器，查错改...
2025-01-21 08:46:02
232
转载 前端金额运算精度丢失问题及解决方案
前言前端开发中难免会遇到价格和金额计算的需求，这类需求所要计算的数值大多数情况下是要求精确到小数点后的多少位。但是因为JS语言本身的缺陷，在处理浮点数的运算时会出现一些奇怪的问题，导致计算不精确。本文尝试从现象入手，分析造成这一问题原因，并总结和整合一些通用的解决方案，以供大家参考。现象回顾下面的是JS进行数值运算过程中常见的问题，这个问题有个专业的名称叫精度丢失。在 JavaScript 中整数...
2025-01-16 08:45:45
97
转载 2024 年前端性能报告
一起来看 2024 年的 Web Almanac 性能篇数据说明本报告的大部分内容均基于 Chrome 用户体验报告 (CrUX) 中的真实用户数据。Chrome 用户体验报告（CrUX）反映了真实世界中 Chrome 用户在热门网站上的体验，是 Web Vitals 项目的官方数据集，展示了所有用户中心的核心 Web Vitals 指标。CrUX 数据基于全球真实浏览器用户收集，并通过多种 Go...
2025-01-15 08:45:59
84
转载 老板：给你20天，写一个可拖拽动态表单低代码生成器
本文用于复盘之前实现的表单生成器需求，记录整体的思路，由于开发时间只有20多天不到一个月，成品比较粗糙，请见谅。效果展示需求上面的视频就是最终完成的效果，还存在一些瑕疵，比如拖拽样式优化、input组件后缀样式优化等。首先「表单生成器页面」分为上下两个部分：上层：标题、首页附页切换、保存功能下层：表单生成器左侧：数据项配置中间：面板显示右侧：表单项设置各自的功能为：上层：切换首页附页、校验并保存已...
2025-01-14 08:46:03
141
转载 目前最快的 Node.js HTTP 客户端库 Undici 发布 v7 版本！
最初发布于 2018 年的现代 Node.js HTTP 客户端库 —— Undici，在 2024 年取得了显著的增长。下载量从 2023 年的超过 1.89 亿次飙升至 2024 年（1 月至 11 月）的惊人的 4.37 亿次以上，这突显了它在 Node.js 生态系统中的关键作用。今天，Node.js Undici 工作组欣然宣布 Undici v7 的发布。此版本引入了对 fetch()...
2025-01-10 08:45:51
69
转载 聊聊前端常见的数据加密
前言你是否有过这样的经历？在注册一个新网站时，需要填写个人信息，例如姓名、邮箱、手机号码，甚至身份证号码。你可能会担心，这些信息会被泄露，被不法分子利用。前端数据加密，就是解决这个问题的关键技术之一。它可以在数据传输到服务器之前，对其进行加密处理，即使数据被窃取，也无法被轻易破解。什么是前端数据加密？前端数据加密是指在数据从用户浏览器传输到服务器之前，对其进行加密处理的技术。它将明文数据转换为密文...
2025-01-09 08:45:28
55
转载 只会用 2005 年的 Git 老命令？这 7 个 Git 新命令，很实用！
自 Git 在 2005 年诞生以来，诸如 clone、pull、push、merge、checkout 和 commit 等核心命令便已存在，支撑着日常的开发工作。随着版本控制需求的演变，Git 持续迭代更新，引入了诸多增强功能和新命令。本文将聚焦于近年来新增的七个 Git 命令，探索它们如何进一步提升工作效率！git switch：安全切换分支git switch 命令是在 Git 2.23....
2025-01-08 08:45:20
40
转载 使用 Service Worker 让首页秒开
我们可以用 Stale-While-Revalidate 加速页面访问，策略分 3 步在收到页面请求时首先检查缓存，如果命中缓存就直接从缓存中返回给用户将缓存返回用户的同时，在后台异步发起网络请求，尝试获取资源的最新版本获取成功后更新缓存，下次使用而这一切的幕后功臣便是 Service Worker，作为一个后台代理在网络与缓存之间搭建桥梁，提供了丰富的缓存管理和资源控制能力，从而实现这一高效策略...
2025-01-07 08:46:06
49
转载 2024年细讲前端工程化【万字长文年终总结】冲冲冲！
何为前端工程化前端工程化是指将软件工程的原理和方法应用到前端开发中，以提高开发效率、代码质量和可维护性。随着 Web 应用的复杂度不断增加，传统的前端开发方式已经难以满足需求，因此引入了工程化的概念来更好地管理和优化前端开发流程。前端工程化主要包括以下几个方面：1.项目构建工具使用自动化构建工具（如 Webpack, Vite, Parcel 等）来处理和打包前端资源（JavaScript, CS...
2025-01-06 08:46:04
93
转载 利用Chrome浏览器使用Overrides调试线上代码，真是太方便啦！
利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，太尴尬了。想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，那赶快试试下面这种方法吧。第一步：在浏览器开发者工具中打开下面的面板sources-->overrides!第二步：打开Select folder for overrides，选择要存放代码的文件夹第三步：点击允许访问文件...
2025-01-03 08:45:49
108
转载 Node+Websoket极速构建一个私有ChatGPT！AI套壳居然如此简单！
随着人工智能Chatgpt的出现，各种国产的AI大模型应用而出，如豆包、文心一言、通义千问、kimi等等，同时，我们也发现有各种各样的套壳APP在割韭菜！作为一个程序员，我们不能助长这种套壳App的嚣张气焰，我们要用魔法打败魔法，实现一个只属于我们自己的ChatGpt!在这篇文章中，我将介绍如何利用Node.js和WebSocket实现一个基于kimi（Moonshot 月之暗大模...
2024-12-31 08:45:16
96
转载 老婆：去给我做一个刷题工具！（Node 实现）
今天为大家分享一篇比较有意思的文章，看看无所不能的程序员是如何满足老婆的'刁钻'需求的。^_^以下是正文：背景老婆：难道你不能将机构的pdf的试卷，转换成驾考宝典一样的刷题程序吗？我：女人你成功引起了我的注意，安排！巴啦啦能量，nodejs给我力量！今年考公、考编的人真的多。我的老婆也报名了社工（哈哈哈也算是个岸吧）。报了机构最后都有很多份考前密卷，但是这些密卷基本上都是pdf。习惯了用类似驾考宝...
2024-12-30 08:45:56
39
转载 前端性能优化 - 提升 LCP（Largest Contentful Paint）
Largest Contentful Paint（LCP）是衡量页面加载性能的关键指标之一，它记录了页面中最大文本块或图像元素被渲染的时间。优化LCP可以提升用户体验，以下是一些提升LCP的策略：优化关键渲染路径：确保关键资源（如CSS、JavaScript和图像）尽快加载，以便浏览器可以快速渲染页面内容。减少重排和重绘：通过减少DOM操作和使用CSS属性来避免重排和重绘，可以加快页面渲染速度。使...
2024-12-26 08:45:21
317
转载 前端要想学好 NodeJs，这些性能监控指标可不能不会！！！
最近一直在用 NestJs 开发一个企业级的商业化项目，对于要上线的项目，那必然就少不了性能监控了。了解这些指标对我们开发调优的时候至关重要。服务器的性能瓶颈通常为以下几个：CPU 使用率CPU 负载(load)内存磁盘I/O吞吐量 （Throughput）每秒查询率 QPS（Query Per Second）日志监控/真实 QPS响应时间进程监控CPU 使用率CPU 使用率是一个衡量计算机中央处...
2024-12-25 08:45:24
52
转载 一文彻底说清楚SSR渲染
服务器端渲染（Server-side rendering，简称 SSR）已经存在了一段时间，但值得深入了解。这种技术可以让你的网页应用更快，同时更具 SEO 友好性。在本指南中，我们将解释什么是 SSR、为什么你可能需要使用它，以及如何轻松实现它。我们会覆盖基础知识，比较 SSR 和客户端渲染（CSR），并讨论一些实际案例。什么是服务器端渲染？从本质上讲，服务器端渲染是指在服务器上渲染网页，而不是...
2024-12-24 08:45:33
97
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人