Achieve - 前端实验室-优快云博客

原创 AI 时代，我为什么还要写一个自己的工具箱

最近写了一个工具站，在写这个工具站的过程中，也有了一些思考，这里分享一下我的心路历程，希望大家有所收获。

2025-12-23 11:22:49 402

数字摘要，实际就是一个哈希算法，通过对数据计算生成固定长度的摘要值，用于验证数据是否被篡改，应用场景十分广泛，如果你在开源项目看的多，会发现很多开源的项目在提供文件下载的同时，会提供一个哈希值，如 sha256 等等，提供给用户用于校验文件是否在分发过程中被篡改。这种算法无法通过摘要值反推内容，不同的原始数据生成的哈希值基本不可能相同，而且长度固定，也就是所谓的单向、唯一、定长。MD5：生成 128 位摘要，早期用于文件校验（如 HTTP 静态资源校验），但存在碰撞漏洞。

2025-11-26 10:44:46 550

原创【每日一面】webpack plugin 原理

问：什么是 Webpack Plugin？它的核心作用是什么？答：Webpack Plugin 是 Webpack 插件系统，本质是一个实现了apply方法的 JavaScript 类或函数。Plugin 通过 Webpack 提供的构建生命周期的回调钩子介入构建全流程（如初始化配置、模块编译、资源输出等），实现代码压缩、资源生成、环境注入、打包分析等需求。

2025-11-24 10:07:44 810

原创深度解析 JavaScript 作用域与作用域链

理解了 JavaScript 的作用域和作用域链对我们理解闭包、模块化、高阶函数等特性能够有更好的帮助，也能让我们在实际开发中，更合理运用块级作用域（let/const）、模块化（ES Module），规避变量污染、逻辑混乱等问题，写出更健壮、可扩展的 JavaScript 代码。

2025-11-21 13:55:47 525

原创【每日一面】如何解决内存泄漏

问：有没有遇到过内存泄漏？怎么排查处理的答：前端页面上出现内存泄露，使用 Chrome devtools -> memory 工具排查，选择时间轴分配（Allocations on timeline）功能后开始录制操作，在页面上进行相关组件的操作，停止录制后，查看内存曲线，重点关注内存曲线上升的和下降的位置，如出现只升不降，没有明显回落的区域，再重点操作，重新录制对应位置的操作，逐步缩小定位。对于这种重点关注的区域，可以同时使用堆快照追踪持续增长的对象。

2025-11-19 10:08:34 556

原创【每日一面】webpack loader 原理

Loader 是 webpack 的核心插件机制，专门用于转换非 JavaScript/JSON 类型的文件，让这些文件变成 webpack 可以处理的模块。如果没有 Loader，webpack 将无法打包 css、图片等资源。source：资源文件内容，在 Loader 执行阶段中，我们说每个 Loader 接收的是上一个 Loader 的处理结果，但是对于第一个 Loader，接收的是原始文件。sourceMap：（可选）代码的 sourcemap 结构。meta。

2025-11-17 10:00:00 268

原创 JavaScript 原型／原型链

回到我们开篇的问题，class 关键字帮我们做了什么？instanceof 关键字又帮我们简化了什么？这两个问题的答案已经十分清晰了，但也不妨在这里做个总结：class 本质是一个语法糖，他帮我们处理绑定每个对象的原型，实现属性的共享。// 无 class 的写法// true// 对应的 class 写法显而易见的，class 的写法更符合我们面向对象的编程习惯，function 的写法则相对不那么直观。

2025-11-15 10:00:00 1599

原创【每日一面】BOM 是什么

问：了解过 BOM 吗？他和 DOM 有什么差异？

2025-11-13 12:03:20 389

原创【每日一面】装饰器原理

问：什么是装饰器？有什么作用？答：装饰器是一种元编程语法，可以在不修改原有代码的前提下，动态地为类、方法、属性等添加一些能力，本质上还是一个函数，它接收目标对象、属性名、属性描述符（或类本身）作为参数，返回修改后的目标对象或属性描述符。在使用的时候，是声明式的使用，在装饰器函数前加上一个符号，在需要使用的函数、类、方法、属性上一行的位置添加，如下：扩展延伸先说个题外话，你需要知道的是，装饰器现在还是在提案阶段（TC39 Stage 3），自 2015 年提出以来，到现在依然没有成为规范的一部分，

2025-11-12 12:35:26 766

原创深入浅出 SPA/MPA

虽然SPA 和 MPA 是两种架构，但是随着技术发展，这两种架构的边界变得模糊，并非选了 SPA 就不能选MPA，有时候我们会混合使用，架构的选型，永远是对用户体验、性能、开发效率以及SEO等内容的平衡，也是对业务场景的适配。对比维度单页应用（SPA）多页应用（MPA）架构本质仅 1 个 HTML 页面作为载体，所有视图通过 JS 动态渲染多个独立 HTML 页面，每个页面对应 1 个 URL，页面切换需重新请求 HTML页面载体单一入口 HTML（如index.html）

2025-11-07 12:16:51 696

原创【每日一面】实现一个深拷贝函数

问：知道浅拷贝和深拷贝吗？为什么要用深拷贝？答：拷贝，可以认为是赋值，对于 JavaScript 中的基础类型，如 string, number, null, boolean, undefined, symbol 等，在赋值给一个变量的时候，是直接拷贝值给变量，而对于引用类型，如 object, array, function 等，则会拷贝其引用（地址）。使用深拷贝，是为了避免操作公共对象的时候，影响到其他使用该对象的组件。

2025-11-03 21:17:54 993

原创深入浅出 ES Module

在 JavaScript 模块化发展历程中，为解决等问题，先后出现了 CommonJS（CJS）、AMD、CMD、UMD、ES6 Module（ESM）五大主流方案。不同方案因设计目标、运行环境（浏览器 / Node）的差异，形成了各自的语法特性与生态定位。其中ES6 Module是 ES6 官方定义的，旨在统一浏览器与服务器端的模块化语法，解决传统模块化方案（如 CommonJS、AMD）的碎片化问题。

2025-10-31 12:22:35 749

原创【每日一面】你怎么理解 Proxy 的

问：Proxy 是什么？怎么使用的？答：Proxy 是用于创建 “对象代理” 的构造函数，它能封装目标对象（target），并通过 “拦截器对象（handler）” 自定义目标对象的基础操作（如属性读取、赋值），实现对对象行为的 “劫持”，手写使用方式。${${${

2025-10-30 11:53:15 1001

原创【每日一面】对 Promise.race 的理解

问：有使用过吗，说说他的作用。答：Promise.race 接收一个 Promise 数组（或者一个具有迭代器的对象）作为参数，返回一个新的Promise，这个新的 Promise 结果是，无所谓这个状态是否是成功（fulfilled）还是失败（rejected）。后续Promise数组中的其他Promise对象状态变更都不再关注。

2025-10-29 11:03:41 604

原创【每日一面】async/await 的原理

问：async/await 的原理是什么？答：关键字本身就是Promise的语法糖，依托于生成器函数（Generator）函数能力实现的。async关键字标志这个函数为异步函数，并且将返回结果封装为一个 Promise，await则是暂停当前执行，等待后续的异步操作完成后再恢复，相当于 Generator 的yield。只是在 Generator 中，需要手动调用next()触发执行， async 函数则内置该操作，自动根据 await 的异步结果执行后续函数步骤。

2025-10-28 17:31:10 711

原创【每日一面】手写防抖函数

问：手写一个防抖函数。

2025-10-27 10:54:13 740

原创 Docker 容器化

Docker 不仅是一项技术创新，更重塑了软件产业的协作模式。Docker 将 Linux 内核的 Namespace、Cgroups、UnionFS 等技术封装成简单易用的工具链条，通过“镜像-容器 ”架构解决了传统部署的行业痛点问题，标准化了应用交付格式，为 k8s 等编排平台提供了基础载体，重塑了软件开发流程，实现“一次构建，到处运行”的理想态，推动了云原生的迅速发展。

2025-10-12 09:55:00 638

原创传统软件部署的痛点

在 Docker 等容器技术普及前，开发、测试、运维团队常被为典型的问题困扰，这些问题不仅可能导致项目的交付周期的延后，还会引发跨团队协作矛盾，甚至导致线上故障，我们逐一来看每个问题。

2025-10-10 16:00:37 681

原创【每日一面】盒子模型

标准的 CSS 盒子模型是怎样的？：标准盒子模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。在 content-box 模式下，width 和 height 属性仅指内容区域的宽度和高度，元素实际占据的宽度 = width + padding + border + margin，高度同理。

2025-10-09 21:38:42 428

原创【每日一面】setTimeout 延时为 0 的情况

你在写代码的过程中，在什么时候才会设置setTimeout的延时为 0？：有如下几种情况。

2025-09-29 10:23:34 695

原创【每日一面】React Hooks闭包陷阱

谈一谈你对 React Hook的闭包陷阱的理解。：JavaScript 闭包特性 + Hooks 渲染机制：函数能够访问其定义时所在的词法作用域，即使函数在作用域外执行，也可以记住定义时的词法作用域的内容，后续执行时，使用这些信息。这里的 idx 正常会在 callback 函数执行结束后释放，但是由于我们返回的是一个函数，函数中依赖这个 idx 变量，所以未能释放，此时这个变量被这个匿名函数持有，而在 fn 变量存续期间，idx 和 op 都是不会释放的，这也就形成了一个闭包。

2025-09-26 16:46:20 696

原创 JavaScript 沙箱

我们从应用场景的角度分析，JS 沙箱聚焦于 “安全防护” 与 “应用隔离” 这两大核心需求：在 Web 浏览器端，JS 沙箱能够限制用户自行编写的代码作用范围。例如，它可实现拦截弹窗广告、抵御 XSS 攻击等功能，避免不可信的 JS 文件对页面正常运行造成干扰。而在服务器端，如 LeetCode 代码提交、在线编辑器等，沙箱可以提供有力保障。它能够防止用户提交的恶意代码突破权限限制，从而避免服务器配置被篡改以及数据被窃取的风险。

2025-09-25 14:00:55 875

原创【每日一面】获取文字的真实宽度

听上去好像没什么用，也很少会遇到问这种问题的面试场景，但现在大厂的面试除了基本的八股外，也在开始搞一些自己的题库用来判断候选人的能力，这种实际就比较灵活化了，无法预测，但也遇到过本文的问题，主要考察两个方面，一是有没有遇到相关的场景，二是前端基本功。浏览器渲染文字时，会先根据 font 相关样式从字体文件中读取字符的“advance width”（字符前进宽度，即字符本身宽度 + 默认间距），再累加得到整个文本的宽度，此过程属于“样式计算（Recalculate Style）” 阶段。简单举两个例子即可。

2025-09-24 15:00:33 427

原创【每日一面】任意 DOM 元素吸顶

本文介绍了前端开发中常见的吸顶效果实现方案，包括CSS和JavaScript两种方式。CSS方案使用position: sticky属性，需要注意生效条件（父容器限制、必须设置触发阈值等）。JavaScript方案通过监听滚动事件动态控制样式，适合更复杂的交互需求。文章还提供了代码示例和避坑指南，如处理吸顶瞬时抖动、高度坍塌等问题。最后提到面试中可能追问的优化和兼容性问题，为开发者提供了实用的技术参考。

2025-09-23 10:45:08 657

原创浅浅的聊一下 WebSocket

浅浅的聊一下 WebSocket第一次看到 ws:// 和 wss:// 时候，感觉好高级啊，还有这种协议。Websocket 历史WebSocket是在2008年6月诞生的1。经由IEFT标准化后，2009年chrome 4第一个提供了该标准支持，并默认启用。于2011年由IEFT标准化为RFC 6455。现在的浏览器均已支持该标准。Websocket 出现的背景思考一下我们经常遇到的一种需求场景，要求在某个网页下，网页的内容可以实时更新。这种情况下，最大众化的方式就是轮询接口了，即通过

2022-03-14 21:25:28 8144

原创浅谈前端水印

又是一个有关安全的问题。一般情况下，我们说的水印是指图片角落上的平台用户名水印。类似于下方图片上的这种，通常只要将图片上传到平台上，平台就会在图片上嵌入水印，当然，有些平台也会提供设置是否需要显示这种水印的开关，或者设置保存的时候才会加上水印。明水印这种水印的实现其实是比较简单的，就是将两张图片合成一张，或者是直接在原图上绘制内容就行了：<img id="pic" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3c3c98.

2021-05-30 21:02:49 1430 2

原创聊两句XSS（跨站脚本攻击）

XSS（跨站脚本攻击），聊两句，五毛的。XSS的危害：窃取Cookie，盗用用户身份信息这玩意儿是大多数XSS的目标，也好解决，可以先治个标，直接设置HttpOnly=true ，即不允许客户端脚本访问，设置完成后，通过js去读取cookie，你会发现document.cookie 无法读取到被标识为HttpOnly的Cookie内容了。配合其他漏洞，如CSRF（跨站请求伪造）这个其实就没那么好解决了，因为XSS利用用户身份构造的请求其实对于服务端来说是合法的。比如说咱在B站上传了一条.

2020-12-27 16:19:56 379

原创 angular浏览器兼容性问题解决方案

问题：edge浏览器下，固定列的边框消失原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签：position: -webkit-sticky !important;position: sticky !important;谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。Edge浏览器在1703之后的版本使用了chromium内核，对css

2020-07-13 23:18:42 1873

原创想学canvas？那一定要看看这篇

canvas简介在学习一项新技术之前，先了解这项技术的历史发展及成因会帮助我们更深刻的理解这项技术。历史上，canvas最早是由Apple Inc. 提出的，在Mac OS X webkit中创建控制板组件使用，而在canvas称为HTML草案及标准之前，我们是通过一些替代方式去绘图的，比如为人所诟病的Flash，以及非常强大的SVG（Scalable Vector Graphics，可伸缩的...

2020-04-01 12:07:06 1088

原创前端缓存

前端缓存缓存概述在计算机领域中，缓存是一项十分重要的技术。在软件开发，亦或者是在硬件设计开发中，缓存对性能的影响是十分显著的。学过Java，会知道在Integer的自动装箱中 [-128, 127] 这个范围中的转换会有些特殊的表现，稍加研究源码，会知道这是因为Integer中的缓存类有关（该缓存类会使用数组存储[-128, 127]范围内的常量）。当然，在实际开发中，可能存在Redi...

2020-02-21 12:07:15 463

原创 ng-zorro-antd中nz-table的问题

前端项目中，我们经常会使用阿里开源的组件库：ant-design，其提供的组件已经足以满足多数的需求，拿来就能直接用，十分方便，当然了，有些公司会对组件库进行二次封装，改造成极具自家风格的产品。在本系列的文章中，不谈高大上的东西，不深究底层源码，只分享一些项目中遇到的小问题。表格（table）——师傅以为是组件库的bug，没想到……不知道正在阅读本文的读者有没有经历过：在使用 ...

2020-01-05 16:55:32 3281

原创《你不知道的JavaScript》笔记（一）

用了一个星期把《你不知道的JavaScript》看完了，但是留下了很多疑惑，于是又带着这些疑惑回头看JavaScript的内容，略有所获。第二遍阅读这本书，希望自己能够有更为深刻的理解。词法作用域……如果是有状态的解析过程，还会赋予单词语义……这本书是以编译原理的部份内容结合JavaScript来开篇的，所以如果没有学过编译原理，这一小部分内容显得有些晦涩。虽然多数人没有...

2019-10-01 19:48:02 336

原创数据结构碎碎念（二）

聊聊数据结构中的栈碎碎念在数据结构碎碎念（一）中，提到了栈，这在计算机领域中可以说是非常重要的一个概念，我们可以在高级语言中找到其使用（如stack<int>），我们还可以在汇编语言中找到（助记符push，及相关的栈的概念），甚至于可以在硬件中看到栈的实现（如x86特有的浮点寄存器结构）。我们在说栈的时候，通常指如下两种情况：编程中使用的栈（stack<int&...

2019-09-23 19:28:15 184

原创部份css样式详解(附实际应用)

本文的所有实例均基于博客园的页面定制。所有表格内容来自W3CSchool。页面背景（background）博客开通之后，很多人最先做的事情一定是改页面的背景，换成一张图片或者换上一个自己喜欢的颜色，这时候用到的就是background属性。但是，在什么地方用呢？所有的html标签都支持这个属性。所以，随便用。我们经常能看到类似background: #fff;这种使用方式，如果...

2019-09-17 07:28:35 282

原创 TypeScript中使用getElementXXX()

如果只是看解决方法，可以直接跳到第二小节简述Angular 1.x版本是用JavaScript编写的，我们在百度Angular经常会搜索到AngularJS，并不是JavaScript的什么衍生版本，就是Angular 1.x。在后续版本中，改用TypeScript来重写了Angular框架。改动较大，所以做了个区分，Angular v1.x就叫AngularJS，v2及后续版本统称为An...

2019-09-11 07:27:12 1210

原创 css或Angular框架限制文本字数

提需求的来了某一期迭代时，新增了一个小功能，即：在单元格中的文本内容，字符超过20个字的时候，需要截断，并显示20个字符+一个省略号，未超过，无视。这需求看上去不怎么复杂，看起来可以用css做（写css写魔怔了，啥都想往这上面靠拢），那先搜一下，字还没打完，就有提示“css限制显示字数，文字长度超出部分用省略号表示”，哎哟我c，这下不就简单了吗？接受挑战于是按照其他人的解决方案，对单元...

2019-09-06 22:15:57 607

原创数据结构碎碎念（一）

碎碎念在大一学习C语言的时候，举过一个用栈实现的括号匹配算法，当时觉得很难，不过现在回顾起来，这个算法也算是比较简单的一个关于栈的应用了。而现在所常见的算法问题也都是什么中缀表达式转后缀表达式，双栈找最小值之类的。难度比之括号匹配稍有提升，不过倒也算是必须要掌握的算法。上述所说的表达式求值在程序设计语言中是一个最基本的问题，也是栈的实现的一个典型范例。为什么说是最基本？我们知道，中缀表达...

2018-09-22 22:56:08 226 6

原创 hihoCoder简单问题合集[持续更新中]

1151：提补交卡提取主要信息：得到最长连续天数在一张补交卡提交之后，总能得到比之前所有连续天数更长的数据。简单来说，我们需要明白，这里的连续天数是如何求到的。显然，两个连续出现的未签到日期的序号之差即为连续天数，而求其中最大，则是找到其中具有最大差值的两个序号。一言以蔽之：只有连续使用补交卡才能获得最大值——即贪心算法+枚举。伪代码如下：if N &amp;gt; M...

2018-03-31 20:21:10 915

原创 #1039：字符消除

提取主要需求：即消除连续出现的两个以上的字符，直到新生成的字符串不满足条件。初步分析设置一个flag标志前一次循环是否有消除操作，如果有，则开始下一次的循环。可该如何判断是否可以消除字符呢？此时追加一个for循环，将字符串的起始位置设为标记点，检查其后的字符是否与标记点字符相同；若相同，则将其位置置为终止位置；若不同，则删除首位置元素（放入最终字符串变量result中，...

2018-03-30 21:32:04 602