- 博客(2250)
- 收藏
- 关注
RSS订阅转载 【JS】2305- JavaScript 冷知识合集：这些特性你都知道吗？
JavaScript有很多奇怪的不容易理解的特性（bug?），想要写出比较健壮的JavaScript代码，又不能不去了解这些知识点。今天带来 一篇短文，介绍了一些常见的冷知识。另外，推荐大家都去看看《Javascript: The Good Parts》这本书，薄薄的一本，也不会耽误刷小视频的时间下面是正文部分。JavaScript 冷知识合集：这些特性你都知道吗？JavaScript 作为一门动...
2025-01-26 23:51:55
6
转载 【React】2304- React 首次推出原生的动画支持！
React 一直是前端开发者最受欢迎的框架之一。但是 React 的动画支持似乎一直是个短板。虽然 Vue 和 Svelte 等其他框架相继推出了便于实现动画的 API ，React 开发者长期以来不得不依赖于第三方库，如 Motion for React 和 React Spring 来补足这一缺陷。最近，这种情况终于迎来了转机。React 团队即将推出了一个名为 <ViewTransit...
2025-01-24 21:58:10
6
转载 【Web技术】2303- 前端在本地开发还能用https？
前言一般情况下，前端在开发本地项目的时候大都用不到https，但有些特殊情况不同，比如你需要使用service worker，又或者需要使用cookie而后端又设置了secure。nextjs本身提供了直接通过https启动项目的方法，所以假如『https://localhost:port[1]』 这种域名就能满足需求的话，建议直接按照nextjs官方提供的方法进行配置即可。API Refere...
2025-01-22 08:08:54
7
转载 【总结】2302- 10年前端的一些开发经验总结
今天带来一位10年老前端的一些思考，看看10年的经验总结下来，有哪些是我们可以学习和借鉴的。作者的观点也不一定适合每个团队或者每个场景，大家还是要结合实际情况来具体分析哈。下面是正文部分。开发注意事项考虑边界值：如果要展示一个列表，就要考虑列表为空、列表长度超过一页的情况；如果展示的是文字，则要考虑文字为空、文字超长的情况；访问a.b.c时，a或b是否可能为undefined。考虑特殊场景：如交互...
2025-01-19 22:50:19
8
转载 【总结】2301- 目前最快的 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-18 21:06:57
36
转载 【总结】2300- Web端接入第三方微信登录
一、微信开放平台申请网站应用1、微信开放平台[1]中注册开发者账号，在管理中心选择网站应用，创建相关应用。按照要求准备好资料，提交审核即可，一般2天左右就会有审核结果。注意：基本信息-应用官网：填写公司官网即可；开发信息-授权回调域：只能填写一个回调域，无需带上http或者https，这个配置十分重要，用户扫码成功后，会跳转到这个回调域；2、应用审核通过后，会显示相关详情信息，在后面的接入流程中会...
2025-01-17 20:05:11
17
转载 【总结】2299- 矢量图SVG应用探索
随着计算机技术的不断发展，图形设计和多媒体制作领域对图像质量、可编辑性和跨平台兼容性的要求越来越高，而矢量图作为一种强大的图像类型，正好满足了这些需求。在软件开发中，基于矢量图无限缩放性、小文件体积、高度可编辑性、跨平台兼容性和透明背景等独特优势，也会被大家广泛使用。01矢量图与SVG矢量图，也称为向量图，是一种基于数学方程和几何属性的图形表示方法。它不同于位图，位图由像素组成，缩放时可能出现失真...
2025-01-16 08:24:19
10
转载 【总结】2298- 关于window.open 被浏览器拦截解决方案
本文转载于掘金社区，作者：keer6https://juejin.cn/post/7414305106825019402前言在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用window.open，但发现该操作会被浏览器拦截。分析原因当浏览器检测到非用户操作产生的新弹出窗口时，会对其进行阻止，因为浏览器认为这可能是...
2025-01-15 08:02:29
28
转载 【总结】2297- 前端金额运算精度丢失问题及解决方案
前言前端开发中难免会遇到价格和金额计算的需求，这类需求所要计算的数值大多数情况下是要求精确到小数点后的多少位。但是因为JS语言本身的缺陷，在处理浮点数的运算时会出现一些奇怪的问题，导致计算不精确。本文尝试从现象入手，分析造成这一问题原因，并总结和整合一些通用的解决方案，以供大家参考。现象回顾下面的是JS进行数值运算过程中常见的问题，这个问题有个专业的名称叫精度丢失。在 JavaScript 中整数...
2025-01-12 20:27:27
16
转载 【总结】2296- 一文彻底说清楚SSR渲染
服务器端渲染（Server-side rendering，简称 SSR）已经存在了一段时间，但值得深入了解。这种技术可以让你的网页应用更快，同时更具 SEO 友好性。在本指南中，我们将解释什么是 SSR、为什么你可能需要使用它，以及如何轻松实现它。我们会覆盖基础知识，比较 SSR 和客户端渲染（CSR），并讨论一些实际案例。什么是服务器端渲染？从本质上讲，服务器端渲染是指在服务器上渲染网页，而不是...
2025-01-11 22:10:49
57
转载 【JS】2295- JavaScript 冷知识合集：这些特性你都知道吗？
JavaScript有很多奇怪的不容易理解的特性（bug?），想要写出比较健壮的JavaScript代码，又不能不去了解这些知识点。今天带来 一篇短文，介绍了一些常见的冷知识。另外，推荐大家都去看看《Javascript: The Good Parts》这本书，薄薄的一本，也不会耽误刷小视频的时间下面是正文部分。JavaScript 冷知识合集：这些特性你都知道吗？JavaScript 作为一门动...
2025-01-10 22:10:15
20
转载 【总结】2294- 太神奇了，仅使用彩色字体实现代码高亮
通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如Prism[1]或highlight.js[2]这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过CSS样式改变代码颜色。但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样那么，有没有办法可以在不改变页面HTML结构的情况下高亮一段代码呢？其实也是有的，之前写过一篇文章，可以利用 CSS Custom Hig...
2025-01-09 23:55:06
13
转载 【总结】22931 JavaScript 实现电子签名
签名板在网页应用中扮演着重要角色，它们能够记录用户的手写签名或者绘图，从而提升了用户体验。在接下来的内容中，我将指导你如何利用 JavaScript 来开发一个功能丰富的签名板。这个签名板不仅支持自定义和响应式设计，还具备对触摸设备的兼容、多样的笔触样式选择，以及将签名导出为不同格式图片的能力。此外，我们还将探索如何整合像 signature_pad 这样的先进工具来增强签名板的功能。最终效果如下...
2025-01-08 23:41:25
26
转载 【面试】2292- 为什么前端打包出来的静态文件名字是一串 Hash 值 ？
前端打包出来的静态文件名带有一串 Hash 值，主要是为了实现以下几个目的：缓存有效性：当文件内容发生变化时，Hash 值也随之改变，这意味着浏览器能够识别文件的更新。如果文件内容没有变化，Hash 值保持不变，浏览器可以从缓存中加载文件，节省网络带宽和提高加载速度。避免缓存问题：在开发和部署过程中，可能会遇到浏览器缓存旧的文件版本的问题。引入 Hash 值后，即使文件的路径没有变化，当文件内容...
2025-01-07 08:35:03
17
转载 【总结】2291- 聊聊前端技术调研到底应该怎么做？
由于某次需求的需要，我进行了一次技术调研，内容是调研前端将 pdf 文件转为图片的解决方案，我接到这个需求的第一时间，立马打开搜索引擎，翻看了十分钟后，~很快啊~得出了一个口头结论但这肯定是不行的，十分钟就能整明白的事情就不叫技术调研了，也无需技术调研，然而如何摆好一个技术调研的正确姿势，也没有啥标准模板，让开发人员写文档本来就够痛了，再加上一个没有标准的场景，痛上加痛，既然我想做好这次技术调研，...
2025-01-06 23:31:50
16
转载 【总结】2290- 聊聊前端常见的数据加密
前言你是否有过这样的经历？在注册一个新网站时，需要填写个人信息，例如姓名、邮箱、手机号码，甚至身份证号码。你可能会担心，这些信息会被泄露，被不法分子利用。前端数据加密，就是解决这个问题的关键技术之一。它可以在数据传输到服务器之前，对其进行加密处理，即使数据被窃取，也无法被轻易破解。什么是前端数据加密？前端数据加密是指在数据从用户浏览器传输到服务器之前，对其进行加密处理的技术。它将明文数据转换为密文...
2025-01-05 21:29:09
19
转载 【面试】2289- 如何回答出让面试官满意的前端性能优化？
相信大家在平常的面试过程中或多或少都被问到过前端性能优化如何实现，但是大部分同学的回答可能说一说自己做了aa、bb、cc...配置；亦或是说了这些配置之后，没有量化的结果去衡量自己的优化到底有没有用。这时候面试官可能就会想：“这位同学的性能优化知识，不成体系，想到哪儿说到哪儿，并且他没有的量化指标，谁知道他是不是从网上背的配置呢。”本篇文章不会提及过多的具体实现，只会提方向，如何回答问题，具体的每...
2025-01-03 23:55:53
32
转载 【总结】2288- 如何回答出让面试官满意的前端性能优化？
相信大家在平常的面试过程中或多或少都被问到过前端性能优化如何实现，但是大部分同学的回答可能说一说自己做了aa、bb、cc...配置；亦或是说了这些配置之后，没有量化的结果去衡量自己的优化到底有没有用。这时候面试官可能就会想：“这位同学的性能优化知识，不成体系，想到哪儿说到哪儿，并且他没有的量化指标，谁知道他是不是从网上背的配置呢。”本篇文章不会提及过多的具体实现，只会提方向，如何回答问题，具体的每...
2025-01-02 23:31:53
30
转载 【总结】2287- TS 超越 JS，成为新的标准
最近，TSH 发布了一年一度的前端状态调查结果，本文将探讨 2024 年前端的现状。前端框架过去一年使用过的前端框架：过去一年使用过的渲染框架：当前前端框架现状：React与Next.js的主导地位：React凭借其强大的社区支持和生态系统，在前端开发中持续占据主导地位。同时，Next.js作为React应用的全栈框架，因其服务端渲染、高效的路由以及对React 19新特性的早期采用，而备受开发者...
2025-01-01 21:52:40
24
转载 【Web技术】2286- 一文彻底说清楚SSR渲染
服务器端渲染（Server-side rendering，简称 SSR）已经存在了一段时间，但值得深入了解。这种技术可以让你的网页应用更快，同时更具 SEO 友好性。在本指南中，我们将解释什么是 SSR、为什么你可能需要使用它，以及如何轻松实现它。我们会覆盖基础知识，比较 SSR 和客户端渲染（CSR），并讨论一些实际案例。什么是服务器端渲染？从本质上讲，服务器端渲染是指在服务器上渲染网页，而不是...
2024-12-31 08:41:23
29
转载 【总结】2285- 2024 年前端性能报告
原文地址：https://mp.weixin.qq.com/s/TZN0IKk4izEgpx3SPQfUhQ一起来看 2024 年的 Web Almanac 性能篇数据说明本报告的大部分内容均基于 Chrome 用户体验报告 (CrUX) 中的真实用户数据。Chrome 用户体验报告（CrUX）反映了真实世界中 Chrome 用户在热门网站上的体验，是 Web Vitals 项目的官方数据集...
2024-12-30 07:49:19
18
转载 【AI】2284- 2024 那些值得关注的 AI 工具都在这儿
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！转眼间，2024 年即将结束，真是 AI 工具百花齐放的一年，在去年 Chris 也整理了 《2023 年度汇总：50+ 优秀 AI 工具推荐》，感兴趣的朋友可以回顾看看。作为一名专注于 AI 领域的科技博主，在这一年里，Chris 认真的向大家分享了非常多有趣、好用的热门 AI 工具，它们涵盖了各个领域，为我们的生活和工作...
2024-12-29 22:15:53
33
转载 【开源】2283- 最新开源：超强的 React 性能测试工具！
在构建大型 React 应用程序时，性能问题常常困扰开发者，主要原因是重复渲染。React Scan 是一个自动检测并高亮显示导致性能问题的渲染工具，帮助开发者精准定位需要修复的组件。文章介绍了 React 重复渲染的几种情况，包括引用类型导致的重新渲染、组件不必要的更新和组件内部状态的频繁变动，并提供了 React Scan 的安装和使用方法。还介绍了一些常见的优化性能的方法，如使用 React...
2024-12-27 22:50:38
35
转载 【总结】2282- 盘点 2024 年前端大事件！
2024 年即将结束，又到了一年一度的前端大事件盘点环节，本文就来看看 2024 年都发生了哪些前端大事件！JavaScriptECMAScript 2024 发布：???? 更新详情Promise.withResolvers()Object.groupBy / Map.groupByString：isWellFormed() / toWellFormed()ArrayBuffer：resize / t...
2024-12-26 08:17:34
29
转载 【总结】2281- 利用Chrome浏览器使用Overrides调试线上代码，真是太方便啦！
利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，太尴尬了。想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，那赶快试试下面这种方法吧。第一步：在浏览器开发者工具中打开下面的面板sources-->overrides!第二步：打开Select folder for overrides，选择要存放代码的文件夹第三步：点击允许访问文件...
2024-12-25 22:31:33
33
转载 【工具】2280- 5 万star！是时候升级下你的终端工具了！
作者：Alienware^https://blog.csdn.net/weixin_45417821/article/details/122579794Tabby 是一名老外在 Github 开源的终端连接的工具，至今已经累积 55K+ star。Tabby 的功能特性大概有：支持多平台，Windows、MacOS（Intel 芯片/M1 芯片）、Linux 都有对应的安装包的；自带 SFTP 功...
2024-12-24 09:24:32
28
转载 【总结】2279- 如何使用流式渲染技术提升用户体验
什么是流式渲染？流式渲染主要思想是将HTML文档分块（chunk）并逐块发送到客户端，而不是等待整个页面完全生成后再发送。流式渲染不是什么新鲜的技术。早在90年代，网页浏览器就已经开始使用这种方式来处理HTML文档。在 SPA （单页应用）流行的时代，由于 SPA 的核心是客户端动态地渲染内容，流式渲染没有得到太多关注。如今，随着服务端渲染相关技术的成熟，流式渲染成为可以显著提升首屏加载性能的利器...
2024-12-23 22:28:48
31
转载 【TS】2278- 学TypeScript常被忽视的小概念declare
背景declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。$('#foo');//orjQu...
2024-12-22 22:09:18
18
转载 【总结】2277- 为什么 try catch 能捕捉 await 后 Promise 的错误？
一次代码CR引发的困惑 “你这块的代码，没有做异常捕获呀，要是抛出了异常，可能会影响后续的代码流程”。这是一段出自组内代码CR群的聊天记录。代码类似如下：constasyncErrorThrow=()=>{returnnewPromise((resolve,reject)=>{//业务代码...//假设这里抛出了错误throw...
2024-12-21 20:28:20
28
转载 【总结】2276- 页面跳转如何优雅携带大数据Array或Object
本文转载于稀土掘金技术社区，作者：不爱说话郭德纲https://juejin.cn/post/7433271555830431784前言在小程序或者app开发中，最常用到的就是页面跳转，上文中详细介绍了页面跳转4种方法的区别和使用，可以点击查看????分析小程序页面导航与事件通讯[1]。而页面跳转就经常会携带数据到下一个页面，常见的做法是通过 URL 参数将数据拼接在 navigateTo 的 URL ...
2024-12-20 13:08:19
23
转载 【工程化】2275- 如何实现一套完整的CI/CD？
CI/CD在项目中的作用不可言喻，避免了手工操作的低级失误以及便捷了开发部署项目。首先实现完整CI/CD，需要一些前置知识。CI是什么？CI是持续化集成。他主要流程其实就是开发将代码上传到Github，持续集成工具（Github action， Jenkins）检测到新的代码提交，会触发构建过程，生成应用镜像，推送到镜像仓库（docker hub, jfroger）。CD是什么？CD是持续化部署，...
2024-12-19 07:38:15
27
转载 【总结】2274- 如果你使用的第三方库有bug，你会怎么办
在当今的前端工程化领域，第三方库的使用已经成为标配。然而，不可避免的是，这些库可能会存在bug，或者是库的一些功能并不能满足需要，需要修改库的某个功能，或添加功能。当遇到这种情况时，我们应该如何应对？本文将介绍三种解决第三方库bug的方法，并重点介绍使用patch-package库来修复bug的全过程。方法一：提issues给第三方库的作者，让作者修复这个方式是比较常见的解决方式了，但有几个缺点：...
2024-12-18 07:59:46
22
转载 【架构】2273- 前端工程化架构设计
本文转载于稀土掘金技术社区，作者：厚礼蟹manhttps://juejin.cn/post/7442531525924061210最近在忙公司前端基础建设的架构设计，头发快掉光了。说是基础建设组，实际就我一个人，我哭。。。虽然还在陆续招人中，招不到人我就“噶”给公司看????背景公司有五条业务线，每条业务线技术栈都比较封闭。做工程化之前，我对每条业务线做了一次技术摸底，发现问题不少：项目框架类型复杂多样...
2024-12-17 08:00:58
23
转载 【总结】2272- Express.js 5.0 正式发布，归来仍是断层式第一！
来自公众号：前端充电宝9 月 11 日，Express.js 5.0 正式发布。自 2010 年开源以来，Express.js 凭借其简洁、灵活与高性能的特点，迅速崛起并持续稳坐 Node.js 框架领域的领先地位，目前每周下载量高达 3000 万次。尽管近年来其更新步伐看似放缓，但自今年初，Express.js 团队推出了前进计划，详细描绘了 5.0、6.0 及 7.0 版本的未来蓝图。本文就来...
2024-12-16 23:13:10
22
转载 【总结】2271- Service Worker：让你的 Web 应用牛逼起来
前言本文首先会简单介绍下前端的常见缓存方式，再引入serviceworker的概念，针对其原理和如何运用进行介绍。然后基于google推出的第三方库workbox，在产品中进行运用实践，并对其原理进行简要剖析。前端缓存简介先简单介绍一下现有的前端缓存技术方案，主要分为http缓存和浏览器缓存。http缓存http缓存都是第二次请求时开始的，这也是个老生常谈的话题了。无非也是那几个http头的问题：...
2024-12-16 09:00:44
50
转载 【Web技术】2270- 都该学学的埋点概念与使用
首先回答一下什么是埋点：埋点是一种用于跟踪用户在网站或应用中行为的数据采集技术，通过记录点击、浏览等操作，帮助团队进行用户行为分析、AB 实验、错误监听，指导优化方向和资源分配为了让读者能够从头到尾彻底学会埋点，我会分别从 埋点的概念与使用、如何实现一个埋点 sdk 入手这篇文章核心围绕埋点的概念与使用展开，涉及到几个维度：???? 埋点的基本概念???? 埋点研发流程优化???? 埋点数据的消费经验我们直接进入主...
2024-12-14 18:08:57
80
转载 【React】2269- 解析 React 渲染原理
本文作者为360奇舞团前端开发工程师简介当我们使用React框架编写代码时，无论是组件的更新、状态的改变，还是父子组件之间的交互，都会涉及到 React 的渲染流程。你可能会有以下疑问：组件渲染的具体流程是什么？引起组件重新渲染的因素有哪些？React.memo、useMemo和useCallback等优化手段的原理是什么？如何合理使用它们？带着这些疑问，让我们开始探索React的渲染过程吧。...
2024-12-13 07:26:06
30
转载 【TS】2268- 学TypeScript常被忽视的小概念declare
背景declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。$('#foo');//orjQu...
2024-12-11 23:19:01
26
转载 【总结】2267- 聊聊前端构建工具该怎么选？
前端 Bundler，即前端打包工具，用于处理和优化前端资源（JavaScript、CSS、HTML、图片、字体等）的工具。它将这些资源组合并捆绑成一个或多个文件，以减少加载时间和提高应用性能为什么需要 bundler随着现代前端开发的复杂度不断增加，Bundler 作为构建过程的重要组成部分，帮助开发者管理复杂的依赖关系、进行代码拆分、实现模块化开发，并优化构建输出，已经成为开发流程中不可或缺的...
2024-12-10 23:22:09
26
转载 【优化】2266- 优化单页应用 (SPA) 加载时间：异步代码块预加载
在本文中，将解释如何通过避免基于路由的懒加载引发的瀑布效应，提升客户端渲染应用的性能。我们会通过注入一个自定义脚本来预加载当前路由的代码块，确保这些代码块能与入口代码块并行下载。我将使用 Rsbuild 来实现脚本注入，但代码可以很容易地适配到 Webpack 和其他打包工具。代码示例基于一个只有两个页面的小型应用：一个首页（路径为/和/home）和一个设置页面（路径为/settings）...
2024-12-09 07:36:24
24
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人