- 博客(234)
- 收藏
- 关注
RSS订阅原创 一文大白话讲透瀑布流布局，并给出能真正投入生产环境的终极方案-＞relative/absolute瀑布流+虚拟列表+DOM复用
本文介绍了实现瀑布流布局的三种方案，重点分析了纯CSS方案的局限性。CSS Grid布局虽然能实现多列展示，但无法满足"元素优先插入最短列"的核心需求；CSS Columns方案虽然能实现内容垂直贴合，但存在排序问题和动态加载困难。最终推荐采用JavaScript方案：结合relative/absolute定位计算最短列，配合虚拟列表和DOM复用技术，实现高性能的瀑布流布局。这种方案既满足瀑布流的视觉要求，又能处理大数据量场景，是真正适合生产环境的终极解决方案。
2026-01-04 17:12:04
891
原创 一文讲清楚利用MutationObserver+IntersectionObserver实现图片懒加载
文章摘要：本文介绍了利用MutationObserver和IntersectionObserver实现高性能图片懒加载的方案。相比传统基于scroll事件的实现方式，新方案具有以下优势：1）避免高频scroll事件带来的性能损耗；2）自动处理动态新增图片；3）提供更精确的视口判断。文章详细讲解了IntersectionObserver的原理和使用方法，并设计了一个完整的LazyImageLoader类，包含视口监听、DOM变化监听、兼容降级等功能，提供了生产级解决方案。核心代码展示了如何通过两个Observ
2025-12-30 16:55:23
964
原创 一文讲清楚DOM动态观察器MutationObserver的原理和使用场景
摘要：DOM动态观察器MutationObserver可用于监听DOM节点的变化，其原理基于观察者模式，通过配置项可监听子节点增删、属性变化等。使用步骤包括创建实例、配置监听项、绑定目标节点等。典型应用场景包括防止内容篡改、自动绑定动态加载元素事件等。使用时需注意避免回调中修改DOM导致死循环，精准控制检测范围，并考虑浏览器兼容性问题。该API属于微任务，适合异步处理DOM变化。
2025-12-26 17:28:36
1002
原创 一文大白话讲清楚script加载和执行顺序，包括script标签、defer、async、动态script等
本文详细分析了script标签的加载和执行顺序，包括普通script标签、defer、async和动态script四种方式。普通script会阻塞HTML解析，按顺序执行；defer异步加载但保持顺序执行，在DOMContentLoaded前完成；async异步加载且立即执行，不保证顺序；动态script默认类似async，但设置async=false后可保证顺序执行。每种方式适用于不同场景，开发者应根据需求选择合适的方法来优化页面加载性能。
2025-12-26 11:50:04
811
原创 一文讲清楚HTML页面生命周期，DOMContentoaded/load/unload/beforeunload/readyState等document和window的状态
HTML页面生命周期包括窗口和文档的加载与卸载过程。window代表浏览器窗口，包含document（HTML内容）、location、history等子集。document的readyState有3个阶段：loading（加载中）、interactive（DOM解析完成）、complete（资源加载完毕）。关键事件包括：DOMContentLoaded（DOM树构建完成）、load（所有资源加载完毕）、beforeunload（关闭前确认）和unload（即将关闭）。开发者可通过这些事件在页面不同阶段执行
2025-12-25 15:34:30
449
原创 一文讲清楚获取对象属性keys和判断是否存在属性key
摘要 本文详细讲解了JavaScript中获取对象属性的几种方法及其区别： Object.keys() - 获取自有、可枚举、字符串类型的属性 Object.getOwnPropertyNames() - 获取自有、所有枚举性、字符串类型的属性 Object.getOwnPropertySymbols() - 获取自有、所有枚举、Symbol类型的属性 Reflect.ownKeys() - 获取自有、所有枚举、所有类型的属性 for...in - 遍历自有或继承的、可枚举、字符串类型的属性 每种方法根据属
2025-12-11 15:17:45
683
原创 一文大白话讲清楚js中的继承（二）原型继承+寄生式继承+寄生组合式继承
【代码】一文大白话讲清楚js中的继承（二）原型继承+寄生式继承+寄生组合式继承。
2025-11-28 17:48:54
272
原创 一文大白话讲清楚js中的继承（一）原型链继承+构造函数继承+组合式继承
本文介绍了JavaScript中的三种继承方式：原型链继承、构造函数继承和组合式继承。原型链继承通过将子类原型指向父类实例实现，但会导致引用属性共享和传参问题；构造函数继承在子类中调用父类构造函数，解决了共享问题但无法继承原型方法；组合式继承结合两者优点，既执行构造函数又挂载原型，是目前最常用的继承方式。文章通过代码示例详细分析了每种方法的优缺点，帮助读者深入理解JavaScript继承机制。
2025-11-28 16:13:32
1053
原创 一文大白话讲清楚new操作符，然后手搓代码
本文详细解析了JavaScript中new操作符的实现原理。new操作符主要完成三件事：1)创建一个新对象；2)将该对象的原型指向构造函数的原型；3)执行构造函数初始化对象属性。文章通过代码示例展示了常规用法和特殊情况（构造函数返回对象时），并最终实现了一个自定义的myNew函数。该函数先创建原型对象，执行构造函数，最后根据返回值类型决定返回结果。整个过程清晰地揭示了new操作符的内部机制，帮助开发者深入理解JavaScript的对象创建过程。
2025-11-28 10:49:09
324
原创 一文大白话讲清楚柯里化函数，然后手搓代码
柯里化函数是将多参数函数转换为分批接收参数的函数。比如把add(1,2,3)变成add(1)(2)(3)的形式。实现原理是：每次调用时判断参数是否足够，不足则返回新函数继续接收参数，直到参数足够才执行原函数。代码实现时需注意this绑定问题，使用fn.call(this,...args)可以确保方法调用时的this指向正确。当原函数涉及this时（如对象方法），必须用call方式才能保持正确的上下文，否则会导致this丢失。柯里化使函数调用更灵活，支持多种传参方式。
2025-11-27 20:52:13
348
原创 一文大白话讲清楚红绿灯交替打印算法，然后手搓代码
本文通过红绿灯交替亮起的现实场景，生动讲解了异步控制算法。核心思路是将每个灯的亮起过程封装为Promise，利用setTimeout实现延时，再通过then链式调用确保顺序执行。关键点在于：1)用Promise包装setTimeout实现可控等待；2)在then中返回新的Promise保证后续操作等待前序完成；3)通过递归实现无限循环。最终实现三灯按指定时长（绿灯1秒、黄灯3秒、红灯2秒）严格交替打印的效果，完美模拟现实中的红绿灯切换场景。
2025-11-27 19:33:03
575
原创 一问大白话讲清楚约瑟夫环（小孩报数）的原理，然后手搓代码
约瑟夫环问题描述了N个人围成一圈报数，数到step的人被淘汰，最后剩下的人是谁。解决思路是用数组标记淘汰状态，维护当前报数、位置和淘汰人数。具体步骤：1）初始化N人数组，标记为未淘汰；2）依次报数，遇到淘汰者跳过；3）报数到step时标记为淘汰并重置计数器；4）重复直到只剩一人。代码通过循环遍历数组，动态调整报数和位置，最终输出幸存者位置。该算法清晰地模拟了淘汰过程，时间复杂度为O(N*step)。
2025-11-19 16:30:12
167
原创 一文大白话配图讲清楚最大字符串长度算法，然后手搓代码
本文介绍了一种寻找字符串中最大不重复子串长度的滑动窗口算法。通过左右两个指针（类似游标卡尺）遍历字符串，右指针移动时记录字符位置，若遇到重复字符则将左指针移到重复字符的下一位。使用map存储字符位置，并实时计算当前子串长度与历史最大值比较。最终给出的JavaScript代码实现了该算法，时间复杂度为O(n)，能高效求解最大不重复子串长度问题。示例输入"abcdec"可正确输出结果。
2025-11-18 15:45:08
149
原创 一文大白话讲清楚instanceof原理，然后再手搓代码
摘要：本文通俗易懂地解释了JavaScript中instanceof操作符的实现原理，将其比作"DNA检测"来判断对象与构造函数的继承关系。通过原型链（proto）逐级向上查找，直到找到匹配的构造函数原型（prototype）或到达原型链末端。文章提供了手写实现代码myInstanceof，包含边界处理、原型获取和循环比较逻辑，并展示了父子类继承场景下的测试用例。这种形象化的解释方式使读者能轻松理解instanceof的底层机制和实现方法。
2025-11-12 16:39:01
239
原创 一文大白话讲清楚Promise的原理，然后手搓Promise
摘要：本文深入浅出地讲解了Promise的工作原理和实现方式。首先解释了JS单线程模式下的异步需求，以及Promise如何通过状态管理解决回调问题。文章详细剖析了Promise的核心机制：pending、fulfilled、rejected三种状态，resolve/reject方法，以及then方法的链式调用原理。最后通过具体代码展示了如何手写实现一个Promise类，包括构造函数、状态管理、then方法实现等关键环节。整个讲解从原理到实践，帮助读者彻底理解Promise的工作机制。（149字）
2025-11-11 18:02:36
960
原创 一文大白话讲清楚Promise.race、Promise.all、Promise.allSettled、Promise.any和Promise.allLimit原理，然后手搓代码
本文简明介绍了Promise的几个常用方法原理及手写实现： Promise.race - 竞速执行，第一个完成的Promise直接返回结果 Promise.allSettled - 等待所有Promise完成（无论成功/失败） Promise.any - 只要有一个成功的Promise即返回，全部失败才返回错误 Promise.all - 所有Promise都成功才返回，有一个失败立即返回错误 Promise.allLimit - 带并发限制的Promise.all，控制同时执行的Promise数量 每种方
2025-11-10 17:36:09
843
原创 一文大白话先搞清楚apply、call和bind的原理，再进行手搓代码
摘要： 本文深入解析了JavaScript中apply、call和bind的原理与实现。通过示例说明函数this指向问题：当函数直接调用时this指向全局对象，而通过call/apply可将其绑定到指定对象。三者核心原理都是将函数临时挂载到目标对象的属性上执行，区别在于参数传递方式（apply接收数组，call接收参数列表，bind返回待执行函数）。文章还手写了这三个方法的实现：通过Symbol创建临时属性，处理参数差异，并针对构造函数调用场景优化bind的逻辑。最终通过删除临时属性和返回结果完成模拟实现。
2025-11-05 16:57:32
869
原创 一文大白话讲清楚节流和防抖的原理，然后再手搓节流和防抖
本文介绍了节流(throttle)和防抖(debounce)的原理及实现。防抖通过延迟执行，在操作停止后才执行函数；节流则强制固定时间间隔执行。文中提供了两个实现方案：防抖使用定时器清除重置，节流通过时间差比较。这两种技术都能有效减少高频操作带来的性能消耗，适用于窗口调整、滚动事件等场景。代码示例展示了具体的实现方法，帮助开发者应对不同的性能优化需求。
2025-11-04 18:01:14
192
原创 一问大白话讲透深度克隆deepClone，先搞清楚为什么，再研究怎么手搓
深度克隆(deepClone)用于解决引用类型复制时数据共享的问题。基本类型直接复制值，而引用类型复制的是地址指针，导致修改新对象会影响原对象。深度克隆通过递归遍历引用类型，拆解为基本类型后再复制，保证数据独立性。简易实现只需处理对象和数组，全量实现还需考虑循环引用、原型链、特殊对象(Map/Set/Date等)。核心步骤包括：判断类型、处理循环引用、递归处理嵌套属性、保持原型链等。全量实现通过WeakMap缓存对象，保证循环引用安全，并支持各种特殊对象类型的深度复制。
2025-11-03 17:48:42
193
原创 根据webpack设计原理手写一个简版webpack
这篇文章介绍了一个简化版webpack的实现原理，包含三个核心部分：模块解析、依赖图构建和代码打包。通过文件读取、Babel转译和正则匹配解析模块依赖关系；采用广度优先遍历构建完整的依赖图；最后通过自执行函数模拟CommonJS模块系统，将所有模块打包成浏览器可执行的代码。代码实现展示了如何从入口文件开始，递归处理所有依赖，最终生成包含模块映射和转换代码的打包文件。这个简化实现揭示了webpack的核心工作机制，包括模块解析、依赖管理和代码打包等关键环节。
2025-08-22 16:17:11
422
原创 Vue2 响应式系统设计原理与实现
Vue2响应式系统基于Object.defineProperty实现数据劫持，通过发布-订阅模式实现数据与视图的同步更新。核心组件包括：Observer类递归转换对象属性为响应式，Dep类管理依赖收集和通知，Watcher类作为订阅者执行回调。系统通过数据劫持触发getter收集依赖，在setter中通知变更。实现示例展示了如何创建简化版Vue类，整合响应式系统并提供$watch方法监听数据变化。测试代码验证了message、count和嵌套属性user.name的变更都能正确触发回调。
2025-08-22 15:54:04
534
原创 大文件上传和秒上传
本文探讨了大文件上传的技术方案及实现方法。传统上传方式存在速度慢、服务器压力大等问题，提出分片上传和断点续传两种解决方案。分片上传通过将文件切分为多个小块分别上传，显著提升传输效率；断点续传则支持从中断位置恢复上传。文章还提供了基于Node.js服务端和React前端的完整实现代码，包括文件检查、分片上传和合并等核心功能，解决了秒传、进度显示等实际问题，为开发者提供了高效可靠的大文件上传技术方案。
2025-08-21 16:52:21
872
原创 弹幕的设计实现和弹幕的最大化显示问题
本文探讨了弹幕系统的设计与实现，重点解决高密度弹幕下的显示优化问题。设计方面采用轨道布局避免垂直重叠，通过计算弹幕宽度和移动时间防止水平重叠，并引入动态速度和会员优先显示策略。实现部分展示了一个基于HTML/CSS/JavaScript的弹幕系统，包含轨道管理、动态速度控制和弹幕生命周期处理等功能。系统通过requestAnimationFrame优化性能，并自动处理窗口大小变化，确保在大量弹幕情况下仍能保持清晰可读的显示效果。
2025-08-21 16:29:29
682
原创 基于Nodejs作为服务端，React作为前端框架，axios作为通讯框架，实现滑块验证
本文介绍了基于Node.js和React实现安全滑块验证系统的方案。系统采用前后端分离架构，前端使用React+axios，后端基于Express框架。核心设计思路包括：1) 服务端生成验证图像和随机缺口位置；2) 通过会话管理确保验证时效性；3) 采用请求频率限制防止DoS攻击；4) 验证结果由服务端判断避免前端作弊。实现细节包含图像生成、会话管理、验证逻辑三部分，服务端使用canvas绘图、uuid生成会话ID、express-rate-limit防护攻击。该系统解决了纯前端验证的安全隐患，提供了完整的
2025-08-21 12:04:01
1295
原创 GraphQL 原理、应用与实践指南
GraphQL是一种现代API查询语言，由Facebook开发，解决了RESTful API的常见痛点。核心原理包括Schema定义、Resolver解析器和结构化查询语法，具有强类型系统、自描述性和单一端点等优势。文章详细介绍了Node.js服务端实现（使用Apollo Server）和前端JavaScript集成（使用Apollo Client），涵盖Schema定义、解析器编写和查询/变更操作。通过图书管理案例展示了GraphQL在复杂数据关系场景下的灵活应用，包括数据获取、添加和更新操作。相比RES
2025-08-12 23:06:23
1395
原创 微前端架构：原理、场景与实践案例
微前端是一种将前端应用拆分为独立模块的架构风格，支持不同技术栈（React/Vue/Angular等）的模块独立开发和部署。核心原理包括应用拆分、构建时/运行时/服务端三种集成方式，以及通过事件、Props或状态库实现通信。适用于大型企业应用、遗留系统改造和多租户平台，但不适合小型项目。通过电商后台案例展示了如何使用qiankun框架实现多技术栈集成，并解决了样式隔离、JS沙箱等关键挑战。该架构能有效降低系统耦合度，实现渐进式升级。
2025-08-12 18:00:20
1020
原创 Emscripten 指南：概念与使用
Emscripten是将C/C++代码编译为WebAssembly和JavaScript的开源工具链。它支持将现有C/C++应用移植到Web环境，提供文件系统模拟和OpenGL转换功能。安装需要Python、Git和CMake等工具，通过emsdk进行安装管理。基础使用包括编译C程序为可运行的网页，生成Wasm二进制和JS加载器。进阶功能包含多种编译优化选项、C与JS互调，以及项目集成方案。常见问题的解决方案涉及虚拟文件系统访问、内存检测和调试技巧。
2025-08-12 17:54:03
672
原创 WebAssembly的原理与使用
WebAssembly（Wasm）是一种高性能二进制指令格式，作为JavaScript的补充，让C++、Rust等系统级语言能在浏览器中高效运行。其核心特点包括：接近原生的执行速度（通过JIT编译）、跨语言支持（C++/Rust/Go等）、与Web安全机制兼容（需通过JS操作DOM）。典型应用场景涵盖游戏开发、多媒体处理、科学计算等计算密集型任务。当前所有现代浏览器均已支持Wasm，未来将扩展GPU访问和多线程能力。Wasm与JS协同工作，JS处理交互逻辑，Wasm专注高性能计算，共同推动Web平台成为更强
2025-08-12 17:41:26
837
原创 小程序生命周期详解
本文系统梳理了微信小程序的生命周期机制，分为应用、页面和组件三个层次。应用生命周期在app.js中通过App(Object)定义，包含onLaunch、onShow等全局回调；页面生命周期使用Page(Object)注册，包含onLoad、onShow等页面状态监听；组件生命周期通过Component(Object)配置，包括created、attached等实例状态回调。文章详细列举了各层级的生命周期函数及其触发时机，并特别说明了组件生命周期的完整流程（创建→挂载→更新→卸载）和页面关联触发机制，为开发者
2025-08-12 10:48:02
478
原创 移动端常见的8大css兼容性问题和处理方法
本文总结了移动端常见的8大CSS兼容性问题及解决方案：1）苹果设备1px变粗问题（通过transform缩放、viewport设置等方法解决）；2）点击高亮效果（使用-webkit-tap-highlight-color禁用）；3）输入框聚焦页面放大（确保字体不小于16px）；4）滚动穿透（禁用底层滚动）；5）字体显示差异（统一使用自定义字体）；6）横屏字体变化（禁用text-size-adjust）；7）刘海屏适配（使用安全区域变量）；8）点击延迟（设置viewport或使用FastClick）。这些方法
2025-08-10 11:02:31
895
原创 WeakRef的作用和使用
WeakRef是JavaScript中的弱引用机制，允许引用对象但不阻止垃圾回收(GC)。其核心特性是通过deref()方法临时访问对象，若对象被回收则返回undefined。与强引用不同，WeakRef不会导致内存泄漏，适用于非关键缓存和对象生命周期跟踪等场景。典型应用包括：1)可重新生成的数据缓存；2)配合FinalizationRegistry实现回收回调。使用时需注意：不可靠的访问性、GC性能影响，以及浏览器兼容性。最佳实践是将其用于非关键数据，避免在核心逻辑中依赖。WeakRef与WeakMap互
2025-08-07 17:53:05
1105
原创 常见网络攻击类型及防护手段
网络攻击形式多样，但核心目标通常是窃取数据、破坏服务或控制设备。技术层面：部署防火墙、WAF、杀毒软件，启用HTTPS、CSRF Token、密码加盐等机制；管理层面：定期安全审计、漏洞扫描，加强员工安全培训（如识别钓鱼邮件）；应急层面：制定应急预案，定期数据备份，确保攻击发生后能快速恢复。通过“预防-检测-响应”的闭环管理，可最大限度降低网络攻击的风险。
2025-08-07 17:34:37
877
原创 一文讲清楚Redux、React-Redux和Redux Toolkit
本文介绍了Redux及其相关工具的核心概念和使用方法。Redux是独立的状态管理库，遵循单一数据源、状态只读和纯函数更新三大原则。文章详细讲解了Redux三大组件：Store（状态存储中心）、Action（状态操作描述）和Reducer（状态更新函数）。通过一个计数器Demo演示了React项目中Redux的基本使用流程，包括创建action、reducer、store以及使用connect连接组件。此外，还介绍了Redux中间件redux-thunk处理异步操作，以及Redux Toolkit如何简化开发
2025-07-23 17:52:24
833
原创 一文讲清楚React性能优化
本文介绍了React性能优化的7种主要方法：1）通过shouldComponentUpdate、PureComponent和memo优化render过程；2）避免使用内联函数；3）使用React Fragments减少不必要的DOM节点；4）采用Immutable实现不可变数据结构；5）利用Suspense和lazy实现组件懒加载；6）使用服务端渲染加速首屏加载；7）其他优化手段。这些方法从渲染机制、代码组织、数据结构等多个维度提升React应用性能，开发者可根据实际场景选择合适方案。
2025-07-18 20:22:32
1078
原创 一文讲清楚React的render优化，包括shouldComponentUpdate、PureComponent和memo
本文介绍了React中三种优化render性能的方法：shouldComponentUpdate、PureComponent和memo。通过实际代码演示，说明当state或props未变化时如何避免不必要的重新渲染。重点讲解了shouldComponentUpdate的使用方法，展示如何通过比较新旧state和props来决定是否需要执行render。文章还通过父子组件示例，验证了props未变化时如何阻止子组件重新渲染。这些技术可以有效提升React应用的性能表现。
2025-07-18 17:56:19
1233
原创 一文讲清楚React Hooks
React Hooks是React 16.8引入的新特性，允许在函数组件中使用状态和生命周期等特性。主要包括：1) useState管理组件状态；2) useEffect处理副作用操作；3) useContext共享上下文数据。其他常用Hooks还有useReducer处理复杂状态、useCallback和useMemo优化性能、useRef获取DOM引用。Hooks解决了类组件代码复用困难、逻辑分散等问题，使函数组件具备类组件的全部能力，同时提供更简洁的代码组织和更好的性能优化手段。
2025-07-10 23:40:49
1251
原创 一文讲清楚React的diff算法
React的diff算法通过优化策略将时间复杂度从O(n^3)降至O(n)，主要采用三种策略： Tree Diff：仅对比同级节点，忽略跨层级移动，删除或创建节点但不移动； Component Diff：同类组件复用结构，不同类则直接替换； Element Diff：通过key标识节点，分为插入、移动和删除三种操作，通过比较新旧位置决定是否移动节点。 源码实现中，React遍历新旧子节点，根据索引和位置关系更新DOM，最终移除未使用的旧节点，高效完成渲染优化。
2025-07-08 11:48:27
1190
原创 一文讲清楚React中的key值作用与原理
React中的key值作用与原理 key在React中相当于身份证号，用于唯一标识组件或元素。它的主要作用是在React的diff算法中，通过比较前后key值是否相同来判断元素是否需要重新渲染，从而提高渲染效率。使用key时需要注意：必须保证key的唯一性，通常使用数据中的id字段；避免使用数组索引(index)作为key，因为当列表顺序变化时会导致不必要的渲染。在列表渲染时，未指定key会触发React的警告提示。正确使用key可以显著优化React应用的性能表现。
2025-07-08 10:34:08
469
超详细webpack示例代码
2025-01-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人