- 博客(1047)
- 收藏
- 关注
RSS订阅原创 奇舞周刊第514期：悄无声息间，你的 DOM 被劫持了？
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■悄无声息间，你的 DOM 被劫持了？文档对象模型（DOM）充当着 HTML 和 JavaScript 之间的接口，搭建起静态内容与动态交互之间的桥梁，对现代 Web 开发而言，DOM 的作用不可或缺。你了解 JSX，那你了解 StyleX 么？从Meta内部使用，到大会对外宣传，这期间肯定已经经历大量...
2023-12-08 17:51:50
原创 如何预防NodeJS命令注入
本文作者系360奇舞团前端开发工程师作者：null[图片来源：unsplash.com[1]]前言Node.js和npm为前端生态中提供了统一的开发语言、强大的包管理和模块生态系统、灵活的构建工具和任务自动化、以及丰富的前端框架和库等等。可以说，正是因为nodejs带来的这些工具和资源使前端开发更加高效、便捷，并推动了前端技术的快速发展。但是近年来，Node.js 生态系统中的 npm 软件包中出...
2023-12-07 18:35:26
转载 浏览器跨 Tab 窗口通信原理及应用实践
最近，相信大家一定被这么个动效给刷屏了：以至于，基于这个效果的二次创作层出不穷，眼花缭乱。基于跨窗口通信的弹弹球：基于跨窗口通信的 Flippy Bird：我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动，效果如下：代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation[1]当然，本文的核心不是去一一剖析上面的效果具体的实现方式，而是讲讲其...
2023-12-06 18:33:15
17
原创 前端“量子纠缠”：multipleWindow3dScene 来了
最近前端实现的量子纠缠在网络上火了起来，作者bgstaal的推文：效果如下：量子纠缠那我们一起来看下什么是量子纠缠，以及前端是如何实现的。什么是量子纠缠？在量子力学里，当几个粒子在彼此相互作用后，由于各个粒子所拥有的特性已综合成为整体性质，无法单独描述各个粒子的性质，只能描述整体系统的性质，则称这现象为量子缠结或量子纠缠。量子纠缠是一种奇怪的量子力学现象，处于纠缠态的两个量子不论相距多远都存在一种...
2023-12-05 18:43:07
194
转载 埋点数据可视化的探索与实践
如何进行埋点数据的分析？埋点是数据采集的专用术语，在数据驱动型业务中，如营销策略、产品迭代、业务分析、用户画像等，都依赖于数据提供决策支持，希望通过数据来捕捉特定的用户行为，如页面访问、按钮点击量、阅读时长等统计信息。因此，数据埋点可以简单理解为针对特定业务场景进行数据采集和上报的技术方案，在政采云，前端团队已经有自研 SDK 来解决这个问题。在数据埋点于政采云的落地实践过程中，我们发现另一个可供...
2023-12-04 18:02:41
27
原创 奇舞周刊第513期：Next.js 的路由为什么这么奇怪？
奇舞推荐■■■Next.js 的路由为什么这么奇怪？Next.js 是 React 的全栈框架，主打服务端渲染，也就是 SSR（Server Side Rendering）。它有一套非常强大但也很奇怪的路由机制。这套路由机制是什么样的？为什么又说很奇怪呢？我们试一下就知道了。JavaScript新数组方法介绍，不更改原数据的数ECMAScript 2023 规范最近已经定稿，其中提出的 Arr...
2023-12-01 18:00:15
25
转载 Astro，这个前端框架有点不一样！
前端技术日新月异，最初的静态网站逐渐被由服务端生成的网站所取代，后来又逐渐向客户端渲染的应用转变。不过客户端渲染也存在一些问题，如加载时间变长和搜索引擎优化难度等。Astro 这个新的前端框架结合了服务端渲染和客户端渲染的优点，可以更好地解决这些问题。本文就来介绍一下这两年爆火的前端框架 Astro，它在两年的时间新增了 30k+ star:这个前端框架，有点不一样。#Astro 基本概念Astr...
2023-11-30 18:30:30
69
原创 你需要知道的Shadow DOM
本文作者为 360 奇舞团前端开发工程师什么是 Shadow DOMShadow DOM 简介在现代的前端开发中，组件化和模块化已经成为构建可维护和可扩展 Web 程序的关键。随着 Web 程序规模的增长，很容易遇到样式和逻辑冲突的问题。为了解决这些问题，Web 标准引入了 Shadow DOM，可以帮助我们更好地隔离和封装组件。提到 Shadow DOM 就不得不提 Web Components...
2023-11-29 18:01:08
44
原创 AI模特换装的前端实现
本文作者为 360 奇舞团前端开发工程师随着AI的火热发展，涌现了一些AI模特换装的前端工具（比如weshop网站），他们是怎么实现的呢？使用了什么技术呢？下文我们就来探索一下其实现原理。总体的实现流程如下：我们将下图中的这个模特的图片，使用Segment Anything Model在后端分割图层，然后将分割后的图层mask信息返回给前端处理。在前端中选择需要保留的图层信息（如下图中的模特的衣服...
2023-11-28 18:56:36
205
转载 Bundler 的设计取舍：为什么要开发 Rspack?
技术背景在开发 Rspack 之前，我们已经尝试开发了 n 款构建工具和框架，并在实际的生产环境下重度使用了 webpack、Vite、esbuild、rollup 等构建工具，对各个工具的优劣处和设计取舍深有体会。先介绍下团队背景，我们是公司的前端公共 Infra Team，负责维护（过）公司的前端通用构建工具和框架（有一些是开源的，有一些并没有），包含：通用的前端应用构建引擎（Modernjs...
2023-11-27 18:30:46
53
转载 奇舞周刊第512期：详解 Module Federation 的实现原理
奇舞推荐■■■详解 Module Federation 的实现原理作者讲述了 MF 的基本概念到实现原理再到应用场景，也介绍了在不同场景中存在的一些问题。函数组件 和 函数式编程 有关系么？长期使用React的同学应该知道，React中存在两种组件：Class Component 和 Function Component组件，既然提到「类」和「函数」，那么很自然的，我们会进一步思考：类组件和O...
2023-11-24 22:30:42
53
转载 「React 进阶」React 优雅的捕获并处理渲染异常
一 前言 哈喽，大家好，我是 alien, 今天来聊一聊在 React 应用中，如何发现异常并处理异常的。JSX 是优势也是劣势？在 React 中，出现一次渲染异常的后果是很严重的。比如如下的场景:functionComp({data}){return<div>{data.value}</div>}/*页面*/exportdefaultfu...
2023-11-23 19:02:56
60
转载 语雀是如何防止前端数据被异常篡改并且复原数据的？
每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间不加空格。所以，最近在做这么一个谷歌扩展插件 chrome-extension-text-formatting[1]，通过谷歌扩展，快速将选中文本，格式化为符合 中文文案排版指北[2] 的文本。emmm，什么是排版指南？简单来说它的目的在于统一中文文案、排版的相关用...
2023-11-22 21:00:19
69
转载 [译]装饰器的10年历史
本文作者为 360 奇舞团前端开发工程师https://dev.to/what1s1ove/ecmascript-decorators-the-ones-that-are-real-g96在2015 年，ECMAScript 6 问世，这是 JavaScript 语言的一个重要版本。该版本引入了许多新特性，如 const/let、箭头函数、类等。这些功能大多旨在消除 JavaScript 的怪异之...
2023-11-21 10:16:01
74
原创 [译]JavaScript中Base64编码字符串的细节
本文作者为 360 奇舞团前端开发工程师本文为翻译原文标题：The nuances of base64 encoding strings in JavaScript原文作者：Matt Joseph原文链接：https://web.dev/articles/base64-encoding Base64编码和解码是一种常见的将二进制内容转换为适合Web的文本的形式。它通常用于data URLs，比如...
2023-11-20 18:11:50
3527
转载 奇舞周刊第511期：Vite 5.0 正式发布
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■Vite 5.0 正式发布11月16日，Vite 5.0 正式发布，这是 Vite 道路上的又一个重要里程碑！Vite 现在使用 Rollup 4，这已经代表了构建性能的大幅提升。此外，还有一些新的选项可以改善开发服务器性能。怎么理解 React Server Component 和 Next.js ...
2023-11-17 16:08:16
123
转载 深入前端调试原理
调试是开发者需要掌握的一项重要的技能， 它能够帮助我们快速定位和修复代码中的问题。本文主要介绍前端调试的基本原理。“本文是笔者在学习了 前端调试通关秘籍[1] 后，并结合平时实践过程中一些经验进行的梳理和总结。主要以 Chrome，VSCode 作为调试工具，在其他编辑器中，配置虽有不同，但原理是相通的。本文所使用的示例代码均在 debug-dojo[2] 仓库。从一个简单的示例入手以上面代码为例...
2023-11-16 18:01:09
90
转载 即将到来的 Vue 3 “Vapor Mode”
今年年初，尤雨溪在 2023 新年展望中提到了 Vue 3 “Vapor Mode”：Vapor Mode 是一直在试验的另一种编译策略，其灵感来自于 Solid。给定相同的 Vue SFC，与当前基于虚拟 DOM 的输出相比，Vapor Mode 将其编译成性能更高、使用更少内存且需要更少运行时支持代码的 JavaScript 输出。它仍处于早期阶段，这里有一些相关的要点：Vapor Mode ...
2023-11-15 18:00:53
105
原创 如何使用 Github Action 管理 Issue
本文作者为 360 奇舞团前端开发工程师 Daryl前言很多小伙伴打开 github 上的仓库都只使用Code查看代码，或者只是把 github 当成一个代码仓库，但是 github 还提供了很多好用的功能。其中，GitHub Action就是一个很好用的功能，本文将通过几个管理Issue的示例带大家了解GitHub Action:什么是 Github Actiongithub 给所有用户都提供了...
2023-11-14 18:01:08
546
原创 Webpack 性能优化 二次编译速度提升3倍！
本文作者为 360 奇舞团前端开发工程师 Rien.本篇文章主要记录 webpack 的一次性能优化。现状随着业务复杂度的不断增加，项目也开始变得庞大，工程模块的体积也不断增加，webpack 编译的时间也会越来越久，我们现在的项目二次编译的时间在 5s到6s 之间，对于我们迭代速度非常快的项目来说，二次编译时间长会导致效率非常低下。优化的手段有很多，之前项目原本已经做了很多如环境分离、并行编译等...
2023-11-13 18:05:53
1259
原创 奇舞周刊第510期：浏览器和图形引擎渲染对比
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■■■浏览器和图形引擎渲染对比本文从介绍浏览器渲染引擎开始，逐渐引出和图形引擎的比较，尝试从图形视角探索和理解浏览器的渲染原理。Next.js的崛起：为什么它是现代网站的首选全栈框架在选择前端框架时，可靠性至关重要。在这篇文章中，详细解释了为什么Next.js是一个可靠的选择，以及它充满前景的未来。即将到来...
2023-11-10 20:03:24
347
转载 快速了解CSS 相对颜色
在正式开始介绍之前，可以先想一个问题：如何动态去改变一个颜色的透明度？比如一个颜色:root{ color: red}如何将它变成透明度为 50% 的红色呢？其实在之前这几篇文章中都有提到过一些颜色混合方法，有兴趣的可以回顾一下深入了解CSS颜色混合函数color-mixCSS 颜色混合的N种方式妙用 CSS 动画来实现颜色加深、减淡等混合操作不过这些方式都是“偏方”。现在 Chrome 1...
2023-11-09 17:59:29
122
转载 三种虚拟列表原理与实现
前言工作中一直有接触大量数据渲染的业务，使用react-window多之又多，所以对虚拟列表有了些浅显的理解。今天，我们就照着react-window的使用方式来实现三种虚拟列表。元素固定高度的虚拟列表元素不定高度的虚拟列表元素动态高度的虚拟列表虚拟列表核心原理 我们先来看一下整个虚拟列表元素的表现。动画.gif看右边的元素个数，会发现起初只有6个，之后无论怎么滚动，他都保持着8个元素，由此我们可...
2023-11-08 18:07:18
102
转载 12 + 1 位演讲嘉宾，11 月 18 日，第六届 FEDAY 等你来！
第六届 FEDAY 将于 11 月 18 日在杭州举办。本次会议我们将围绕着前端与 AI、语言框架、图形、端展开分享，给大家带来一场前端技术盛宴。本次会议将会有 12 + 1 位演讲嘉宾给大家带来分享。1 位神秘嘉宾将在会议当天揭晓，敬请期待！欢迎大家来现场参加，文末有嘉宾海报，求分享！报名地址：https://fequan.com/202312 位演讲嘉宾我们之前已经通过公众号推送给大家，并已同...
2023-11-08 18:07:18
139
原创 一个易用的消息订阅发布系统-Pubsub.js
本文作者系360奇舞团前端开发工程师简介随着软件架构越来越复杂，如何有效地解决各个模块之间的通信问题变得尤为重要。一种常见的解决方案就是采用消息订阅发布机制。在这种模式下，每个模块只需要关注自己要发送或接收的消息，而不必关心其他模块的内部实现。今天要介绍的 pubsub.js 就是一个非常实用的消息订阅发布库。它具有使用简单、性能高效、支持多平台等优点，可以很好地满足各种需求。基本使用首先，让我们...
2023-11-07 18:01:21
133
原创 Antd Procomponent 之 proForm - 高级表单
本文作者系360奇舞团前端开发工程师ProForm 在原来的 Form 基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。分步表单，Modal 表单，Drawer 表单，查询表单，轻量筛选等多种 layout 可以覆盖大部分的使用场景，脱离复杂而且繁琐的表单布局工作，更少的代码完成更多的功能。ProForm 高级表单使用 initialV...
2023-11-06 18:09:51
324
转载 奇舞周刊第509期：浅谈 HTML5 Web Worker，性能优化利器？
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■浅谈 HTML5 Web Worker，性能优化利器？多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而，JavaScript 是一门单线程语言，它天生是不支持多线程的。为了克服这一限制，引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性，以及...
2023-11-03 20:01:11
113
转载 一个新的跨 JavaScript 运行时的 Socket API！
今天和大家来一起聊一个即将推出的跨 JavaScript 运行时的 Socket API 。什么是 TCP 套接字TCP（传输控制协议）是互联网的基础网络协议。它是用于发出 HTTP 请求（在 HTTP/3 之前，使用 QUIC ）、通过 SMTP 发送电子邮件、使用数据库特定协议（如 MySQL ）和许多其他应用程序层协议查询数据库的底层协议。TCP Scoket 是一种编程接口，代表两个都同意...
2023-11-02 19:38:46
103
转载 前端代码Review，一次性掰扯明白！
前端代码Review主要关注以下几个方面：❝1.「代码质量」：代码是否简洁、易读、易维护。是否遵循了一致的编码风格和规范，例如ESLint、Prettier等。2.「功能实现」：代码是否实现了预期的功能，是否有潜在的bug或逻辑错误。3.「性能优化」：代码是否进行了必要的性能优化，例如避免不必要的渲染、使用了合适的数据结构和算法等。4.「安全性」：代码是否存在可能的安全风险，例如XSS攻击...
2023-11-01 22:00:26
111
原创 [译]CSS Animations 与 CSS Transitions
本文译者为 360 奇舞团前端开发工程师原文标题：CSS Animations Versus CSS Transitions原文作者：Kirupa Chinnathambi原文出处：《Creating Web Animations: Bringing Your UIs to Life》在 CSS 中有两种设置动画的方式即 CSS animations 和 CSS transitions。它们看上去...
2023-10-31 18:19:28
292
原创 [译]如何编写高性能的 React 代码
本文作者系360奇舞团前端开发工程师本文为翻译，原文标题：How to write performant React code: rules, patterns, do's and don'ts，原文作者：Nadia Makarevich，原文地址：https://www.developerway.com/posts/how-to-write-performant-react-code/写在开头关...
2023-10-30 14:27:41
96
转载 奇舞周刊第508期：将Javascript编译为WASM以提升WEB性能
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■将Javascript编译为WASM以提升WEB性能本文重点介绍了由华为和北京航空航天大学合作研发的 JWST 项目 — JavaScript 到 WASM 的静态编译器，并展示了 JWST 的编译过程。此外还组织 TPAC 全球与会专家进一步探讨该项目的标准孵化成熟度。Next.js 14 正式发布...
2023-10-27 18:24:20
161
转载 JSDoc 真能取代 TypeScript？
这几个月，想必大家都听到过一个新闻：Svelte 弃用 TypeScript，改用 JSDoc 了。TypeScript 我们知道，是用来给 JS 加上类型的，可以实现类型提示和编译时的类型检查。那 JSDoc 能够完成一样的功能么？Svelte 是出于什么原因弃用 TS 的呢？先不着急回答这个问题。我们总得先了解下 JSDoc：可能大家认为的 JSDoc 是这个东西：在代码的注释上加上类型的标识...
2023-10-26 17:24:16
100
原创 原子化真的是现代前端CSS的救星吗
本文作者系360奇舞团前端开发工程师文章标题：从 Tailwind CSS 到 UnoCSS —— 原子化真的是现代前端CSS的救星吗小编前言追忆往昔，穿越前朝，CSS也是当年前端三剑客之一，风光的很，随着前端跳跃式的变革，CSS在现代前端开发中似乎有点默默无闻起来。不得不说当看到UnoCss之前，我甚至都还没听过原子化CSS[1]这个概念（不够卷，惭愧，惭愧），很久没关注过CSS相关的内容了。原...
2023-10-25 18:08:27
109
原创 谈谈node架构中的线程进程的应用场景、事件循环及任务队列
本文作者系360奇舞团前端开发工程师文章标题：谈谈node架构中的线程进程的应用场景、事件循环及任务队列Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，nodejs是单线程执行的，它基于事件驱动和非阻塞I/O模型进行多任务的执行。在理解Node.js的工作原理时，我们需要了解进程、线程、事件循环[1]以及消息队列[2]的概念，本篇文章就基于这几点去详细介绍，帮你慢慢...
2023-10-24 16:58:26
351
转载 二十分钟掌握React核心理念，老鸟快速入门指南
本文作者系360奇舞团前端开发工程师小编前言现在的前端招聘JD里大概率会有一条要求，“Vue，React 有其一经验”，引申的意思可能是：一个成熟且有着现代前端开发经验的开发者，要学会一门框架应该是成本很低的事情。人常说，框架都是相通的，是否如此呢？确实，随着各家不停探索，框架的基本形态和功能设计日趋完善，最根本差异点最终演变成了框架开发者各自的理念差异，不同的理念让框架有了各自的设计模式和最佳实...
2023-10-23 18:59:18
94
原创 前端开发利器之Curl 深度应用与技巧
本文作者系360奇舞团前端开发工程师前言前端开发是一个日新月异的领域，不仅需要深刻理解HTML、CSS和JavaScript等前端技术，还需要掌握与后端服务进行交互的方法。Curl，作为一个强大的命令行工具和库，可以帮助前端开发者轻松地进行HTTP请求和处理数据。本文将深入探讨Curl在前端开发中的高级应用和技巧，以帮助你更好地掌握这一工具。Curl 简介Curl是一个跨平台的命令行工具，支持多种...
2023-10-19 17:36:50
145
转载 [译] Javascript 真的是用了 10 天就做完的吗？
[译] Javascript 真的是用了 10 天就做完的吗？本文为翻译，本文译者为 360 奇舞团前端开发工程师。原文标题：Was Javascript really made in 10 days?原文作者：Computer Things原文地址：https://buttondown.email/hillelwayne/archive/did-brendan-eich-really-make-...
2023-10-17 19:20:37
117
转载 修改 git 的历史 commit，你能想到几种方案？
最近遇到一个 git 的问题：我在某个文件里写了一段不应该提交上去的内容，没注意，提交上去了。后来又提交了很多个 commit。之后我发现了这个，又把它去掉了，提交了一个新的 commit。这样虽然新的 commit 没有这段内容了，但老的 commit 里依然有这个内容。可我不想保留这段内容的记录，也就是想修改历史 commit。这种问题大家会怎么解决呢？我能想到的有三种方案，分别来试一下。我们...
2023-10-16 14:48:54
214
原创 用Golang手写一个Container
本文作者系360奇舞团前端开发工程师前言Docker 作为一种流行的容器化技术，对于每一个程序开发者而言都具有重要性和必要性。因为容器化相关技术的普及大大简化了开发环境配置、更好的隔离性和更高的安全性，对于部署项目和团队协作而言也更加方便。本文将尝试使用 Go 语言编写一个极简版的容器，以此来了解容器的基本原理。前置知识储备：Linux 基础知识Docker 是基于 Linux 容器技术构建的，因...
2023-10-12 17:53:05
338
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人