- 博客(1172)
- 收藏
- 关注
RSS订阅原创 reset和revert最佳实践
✅安全适合已经 push 到远端的分支不影响其他人❌历史会“变长”会看到「提交 + revert 提交」📌 面试一句话：revert 是“用新的提交修正旧的提交”，不破坏历史。
2025-12-23 17:22:07
561
原创 由于 JS 是单线程的，前端程序永远无法直接做到的能力
JS 主线程一次只能执行一个任务，不能出现两个并行的执行流。webpack 打包产物最终运行在浏览器环境内，受到浏览器 JS 线程限制。
2025-12-10 16:24:54
516
原创 随着AI对话的发展，SSE又火了！
现在 AI 对话发展迅速，而这个功能主要就是基于 SSE，因此我们面试时，SSE 会有很高的频率被问到，这里简单聊一聊 SSE。
2025-12-08 11:23:57
450
原创 先把 Rollup 搞明白，再去学 Vite！
Rollup 的打包结果更适合做库发布（输出 ESM/CJS/UMD），但在前端应用上（尤其配合 plugin）也非常强大（vite 打包器）。、直接利用浏览器原生 ESM + 用 esbuild 做依赖预处理」和「生产构建使用 Rollup 做高质量打包」结合起来，既实现了极快的。：Rollup 能更精准做 tree-shaking（删除未使用导出），产出的 bundle 更小、更“纯净”。启动与 HMR，又保留了 Rollup 的生产打包能力与插件生态。需要转换解析到的包。Vite 把「开发时。
2025-12-03 11:43:37
665
原创 性能优化之页面加载慢的罪魁祸首！
面试官经常问我们性能优化，但我们每次都是想到什么回答什么，要么回答不到面试官的点上，要么太紧张好多都想不起来，这篇文章我从需要性能优化的根因——页面加载慢来告诉你性能优化应该从哪些方面考虑。网络主要就是三个方面：资源太多、网络带宽延迟高、DNS 解析时间长。
2025-12-02 14:20:27
926
原创 面试官最喜欢问的Webpack中的loader和plugin到底有什么区别？
【代码】面试官最喜欢问的Webpack中的loader和plugin到底有什么区别？
2025-12-01 15:26:15
895
原创 原来Webpack在大厂中这样进行性能优化！
webpack 中 minimizer 属性，在 production 模式下，默认就是使用的 TerserPlugin 来处理我们代码的。它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；的技术，通过压缩 HTML、CSS、JavaScript、JSON 等文本资源，显著提升网页加载速度、节省带宽。Terser 是一个单独的工具，拥有非常多的配置，这里我们只讲工作中如何使用，以一个工程的角度学习这个工具。Terser 可以帮助我们压缩、丑化(混淆)我们的代码，让我们的 bundle 变得更小。
2025-11-28 15:46:34
582
原创 设计组件库需要考虑的兼容问题及处理思路
deprecation cycle 弃用周期：组件库或 API 在“彻底删除”某个旧功能之前，会经历一个“先标记弃用 → 给用户时间迁移 → 再真正移除”的周期，这个流程就是 deprecation cycle。兼容 shim（补丁/垫片）：比如 polyfill 让旧浏览器支持新 API，shim 用于组件库或工具库兼容不同版本接口的“垫片”（模拟旧行为或者中间层）。graceful fallback 优雅降级： 当浏览器或环境不支持某项能力时，组件或代码自动降级为可运行的最基本方案，而不是报错或白屏。
2025-11-28 14:46:57
867
原创 关于XSS和CSRF，面试官更喜欢这样的回答！
XSS：攻击者注入脚本并可读取页面内容（更强），根源是输出/DOM 不安全。CSRF：攻击者伪造用户请求，无法直接读取响应，根源是浏览器自动带凭证。后端统一使用 HTML escape 库；富文本走白名单 sanitizer。HttpOnly;Secure;。对需要的页面开启 CSP（report-only 先观测，再 enforce）。SPA：首次获取 CSRF token 并在后续请求中以 header 发送；服务端检查OriginReferer。
2025-11-27 15:57:06
790
原创 从安全的角度看，为什么不推荐混用GET/POST？
因为浏览器会自动发 GET 请求，但不会自动发 POST 请求（除非 form 提交）。通过上表，我们可以发现最主要的影响主要在安全方面（参数暴露位置）和效率方面（缓存）。→ 多数服务器会把这类 POST 当 GET 用，且不会产生副作用。浏览器对 GET 与 POST 的 CSRF 风险处理方式不同。只是不符合“REST 风格”，对浏览器生态不纯正，但不影响安全。如果 GET 是写操作，会带来无穷坑。→ 用 POST body 传递。→ 于是把查询参数放到 body。→ 用户访问速度变慢。
2025-11-27 11:44:49
277
原创 Webpack高级之常用配置项
可选值有：‘none’ | ‘development’ | ‘production’。webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中。hash 本身是通过 MD4 的散列函数处理后，生成一个 128 位的 hash 值（32 个十六进制）你有没有想过一个问题，我们干前端的，为什么要在构建工作内嵌一个服务器（devServer）。见之前的文章：《身为大厂前端的你，不能不知道 Babel + Polyfill！
2025-11-26 21:59:53
509
原创 这些奇怪的JavaScript隐式转换你一定遇到过！
我以上面这几个例子说明：第一个逻辑与，42 是真值，但决定不了整个表达式的逻辑是真还是假，所以能决定“真值性”的是“hello”；当然，情况比我们想得更复杂，如果只是希望通过面试，掌握最基本的就足够了，希望更深度学习可以看官方文档： https://262.ecma-international.org/#sec-toprimitive。但在 JavaScript 中，它们返回的是参与运算的操作数本身（准确来说是决定“真值性” 的那个数）。他们就是利用了“短路”求值的规则，保证的代码健壮性。
2025-11-25 14:36:33
781
原创 【CSS】样式隔离
方案隔离强度是否需要构建框架绑定适用场景BEM / 命名空间弱否无组件库、辅助手段强是无React / 通用组件Vue强是（Vue CLI）VueVue 单文件组件Shadow DOM极强否无Web Components、微前端CSS-in-JS强是React动态主题、复杂交互组件微前端专用方案强是/否无qiankun、micro-app 等架构。
2025-11-25 10:09:48
821
原创 defineProperty如何弥补数组响应式不足的缺陷
在 Vue 2 中，响应式系统的核心是 。然而，由于该 API 的设计限制，它无法直接监听数组索引的变化和长度的修改，从而导致某些数组操作不能触发视图更新。下面我们将结合 原理 详细说明： 只能拦截已知属性名的读写操作。例如：但对于数组： 是数组的一个特殊属性，但 在普通对象上定义 并不会自动同步到数组行为（比如截断元素）。更重要的是：虽然 有局限，但 Vue 2 通过以下 三大策略 在其之上构建了一套“看似完整”的数组响应式系统：如何生效？当一个数组被 时，Vue 会将其 指向 ：✅
2025-11-25 09:59:54
591
原创 浅谈 RequestAnimationFrame
是现代 Web 动画的黄金标准与屏幕刷新率同步 → 更流畅；后台自动暂停 → 更省电；浏览器优化调度 → 更高性能。🎯最佳实践：只要涉及视觉变化的 JavaScript 动画，优先使用，而不是setTimeout。
2025-11-25 09:58:06
662
原创 简单聊聊webpack摇树的原理
Webpack 的 Tree Shaking（摇树）是一项用于消除 JavaScript 上下文中未引用代码的优化手段，它能有效减小打包体积。
2025-11-24 17:58:44
805
原创 我为什么要学MCP？
以下内容完全紧扣官方文档，目的在于提取主要内容方便小白理解。由于是了解 MCP 理论的文章，这里暂时不做 MCP server/client 代码的实战讲解。
2025-11-20 22:43:20
877
原创 面试官问你这些，其实是在问你JavaScript执行原理！
旧书里常讲 VO 是全局的变量对象，AO 是函数的变量对象，而 VO 会绑定到 GO（window/global）上。TDZ 其实是更满足我们直观的编程特性，很多其他语言天然支持，so JavaScript 又在弥补自己的设计缺陷？当成作用域链的一部分，使得“找变量时”会先查这个对象属性。，一个是作用域块，一个是对象，但却是两个不同的东西。ER（环境记录）是用来真正“存变量、查变量”的地方。OER 内没有“自有存储”，所有变量查找实际上是 。环境记录是 JS 变量体系的“底层数据结构”。
2025-11-19 21:43:31
446
原创 事件循环其实很简单！
执行栈/调用栈是针对函数调用来说的，而我们 js 任务的执行依赖于任务队列，先进入队列的任务会先执行，而且一个任务中可能存在多个函数。要注意一个是函数调用的机制，一个是任务执行的机制，不是一回事！之所以函数的执行基于“栈”这种结构，是因为 js 函数允许嵌套，先调用的函数需要等待内部函数的调用执行完毕才能执行，也就是先调用后执行的逻辑，正好满足“栈”这种数据结构。宏任务作为之前的一种笼统叫法，现代浏览器对这些任务做了更细的划分，对他们都统称为了 task，不同的任务具有不同的队列。
2025-11-17 22:47:38
890
原创 跨域问题解决方案的弃子——JSONP
今天一位学弟“哭着”来找我，说他面试美团（实习岗）的时候，被问到了跨域问题的解决方案，回答的并不好。我还正想着，这么常见的问题回答不出来，这不就是基础不过关。但谁知道，面试官让他封装 JSONP 来实现跨域！怪我当时还告诉他们这种方案现在很少用，看一眼八股了解即可，现在可谓是啪啪打脸！既然都问到了这个问题，那这篇文章就来详细讲讲跨域解决方案的弃子——JSONP！
2025-11-16 15:24:56
445
原创 Access-Control-Allow-Origin 在企业中的用法
接上篇文章说道，跨域解决方案中的 CORS 方案，会配置一个的配置项，而且我们一般不直接配置为，这样做的原因是什么以及企业中的最佳实践是怎么样的，这篇文章给你答案！
2025-11-15 21:23:02
945
原创 HTTPS 究竟比 HTTP 好在哪？
定义：攻击者在客户端与服务器之间插入自己，使得双方都以为在直接通信，但实际通信被攻击者观测、记录、修改或伪造响应。被动窃听（Eavesdropping） 只监听并记录流量，不改动（例：抓包收集账号密码）。主动篡改 / 拦截并修改在流量中注入、替换或删除内容（例：把 JS 替换为恶意脚本、在页面注入钓鱼表单）。重放攻击攻击者记录某个合法请求后重新发送（例如重复交易），如果服务器不防重放会被利用。
2025-11-15 21:20:23
1605
原创 跨域问题解决方案汇总
**同源（same-origin）**：协议、域名（host）、端口 三者完全相同称为同源。例如和不是同源（协议不同）。**同源策略（SOP）**：浏览器的一种安全机制，限制从一个源加载的脚本去读取另一个源的响应（以防 CSRF / 数据泄露）。**跨域（cross-origin）**：当请求目标不满足同源时即为跨域，请求仍可发出，但浏览器会阻止 JS 读取响应，除非服务器明确允许（即 CORS -> 跨域资源共享）。
2025-11-15 21:17:42
1032
原创 身为大厂前端的你，不能不知道Babel + Polyfill！
Babel 的工作原理 = “把代码变树 → 改树 → 再变回代码”。Parse（解析）：ESNext（ES 新语法） → AST 语法树Transform（转换）：插件修改 ASTGenerate（生成）：AST → 旧 JS 代码（浏览器都可以识别的代码）Babel 是一个“代码转换工具”，核心就是围绕 AST（抽象语法树）做代码替换，替换成兼容各浏览器的代码旧语法。
2025-11-15 21:15:29
686
原创 原型理解从入门到精通
原型这块知识点，其实在我们工作中的使用非常简单。但是俗话说“面试造火箭，工作拧螺丝”，在面试中，面试官不时就会考察一些花里胡哨的问题，所以，我们只有将这个概念和他的相关知识理解透彻，才能以不变应万变。
2025-11-15 21:08:36
717
原创 通用会话控制方案
后端发放一个签名的 token（通常是 Access Token），包含用户 id、到期时间等。前端携带 token（通常放在 Authorization header 或者放入 HttpOnly cookie）向后端请求；后端不查 session store，而是直接验证 token 的签名与有效期，若通过则鉴权成功。（Base64 编码）
2025-11-15 20:40:07
971
原创 【React】React组件的渲染过程分为哪几个阶段?
3️⃣ Context 变化导致使用 useContext 的组件更新。Mutation 和 Layout 这两步是同步执行的，不允许中断。2️⃣ 组件内部状态更新（setState / useState）Commit 阶段无法被打断，因为涉及到真实 DOM。保证真实 UI 操作的原子性，不会出现中断状态。1️⃣ 父组件渲染导致子组件渲染（默认行为）因为计算可以被暂停，让位给用户输入。需要被提交到 DOM 的更新表。
2025-11-14 14:14:29
437
原创 【WebView】H5 与 Native App 的通信
JSBridge 核心：H5 → Native 通过方法调用 + 回调，Native → H5 通过事件触发或回调适合场景：调用设备能力、支付、分享、登录状态同步等问题点：跨平台差异、异步回调丢失、刷新丢失桥、性能和安全实践：统一桥层、Promise 封装、事件统一监听、参数校验、批量调用避免高频性能问题。
2025-11-11 14:19:08
498
原创 同一网段下无法通过局域网 IP 访问他人的 127.0.0.1 本地 Web 服务
监听地址意思外网/局域网访问127.0.0.1localhost只监听回环接口，仅本机可访问❌0.0.0.0监听全部网络接口，局域网设备可访问✅。
2025-11-06 14:43:57
577
1
原创 国际化实现
会按 cookie → localStorage → queryString → navigator → htmlLang 顺序检测，适合大多数场景。如果使用 SSR（Next.js / Nuxt），在 server-side 渲染时解析 Accept-Language 并注入初始语言到页面。
2025-11-05 10:54:30
364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人