- 博客(19)
- 收藏
- 关注
RSS订阅原创 JavaScript属性描述符详解
属性描述符是 JavaScript 对象系统的底层核心机制，通过精细控制属性的可写性、可枚举性、可配置性以及自定义存取逻辑，为开发者提供了强大的元编程能力。理解其工作原理有助于实现高级功能（如属性校验、响应式更新等），同时也是深入理解现代前端框架的基础。
2025-06-04 14:41:56
808
原创 语法糖的定义与作用
摘要：语法糖是编程语言中让代码更简洁易读的语法设计，本质是对现有语法的包装，不增加新功能。它在编译阶段会被还原为底层语法，目的是提升代码可读性和开发效率。常见例子包括运算符简化、循环结构、条件表达式等。语法糖虽能优化代码表达，但过度使用可能影响可读性。最终编译器会将其转换为基础语法执行，合理使用能显著改善编程体验。
2025-06-04 13:00:54
734
原创 W3C任务队列机制解析
浏览器事件循环采用多队列机制，任务按类型分组到不同队列（如交互队列、延时队列、微队列），各队列拥有不同执行优先级。微队列（Promise等）优先级最高必须清空，高优先级队列（如用户交互）可插队执行，以此保障关键任务及时响应，避免低优先级任务阻塞。这种设计通过"分类-分级"机制，既维持任务执行顺序性，又优化了用户体验和响应速度。典型表现为微任务优先于宏任务，用户交互优先于定时器回调。
2025-06-02 14:39:10
222
原创 浏览器事件循环标准与实现分析
浏览器的事件循环机制由WHATWG在HTML标准中统一规范，所有现代浏览器均遵循。Chromium基于标准优化实现，使用多类型消息循环和平台适配技术。Firefox和Safari也遵循标准，但采用不同技术路径。核心逻辑一致，确保宏任务和微任务的执行顺序相同。开发者可依赖统一的行为，无需担心兼容性问题。标准驱动实现多样性，但保持核心规则一致。
2025-06-02 10:45:58
881
原创 CSS属性计算过程详解
CSS属性计算过程是浏览器确定元素最终样式值的关键步骤，主要包括以下几个阶段：首先，浏览器收集所有直接指定给元素的CSS声明，包括作者样式、用户样式、浏览器默认样式和内联样式。接着，通过层叠规则解决声明值之间的冲突，优先级依次为重要性、来源、选择器特异性和代码顺序。对于未设置声明值的属性，浏览器会检查是否可继承自父元素，若不可继承则使用属性的初始值。最终，浏览器将相对单位转换为绝对值，得到计算值，但尚未进行实际布局。理解这一过程有助于高效调试CSS问题，如样式覆盖和继承失效等。
2025-05-23 18:42:29
662
原创 CSS包含块概念与应用详解
CSS中的包含块（Containing Block）是决定元素位置和尺寸的关键概念，其规则因元素的定位方式不同而异。静态和相对定位的包含块是最近的块级祖先的内容区；绝对定位的包含块是最近的非静态定位祖先的内边距区，若无则使用视口；固定定位的包含块始终为视口；粘性定位的包含块是最近的滚动祖先的内容区。初始包含块是根元素的视口大小。百分比值的计算（如宽度、高度、内外边距）均基于包含块的尺寸。transform属性会影响绝对定位元素的包含块。理解包含块对于精确控制元素布局至关重要，特别是在处理百分比尺寸和定位时。
2025-05-23 18:23:35
271
原创 为什么 transform 的效率高？
transform 的高效性源于其直接操作合成层的能力，避开了 CPU 密集型的布局和绘制阶段，利用 GPU 的并行计算优势。这是现代 Web 动画和交互优化的核心手段之一。
2025-05-23 17:56:11
672
原创 关于 CSS will-change 属性的详解
will-change 是一个 CSS 属性，用于提前告知浏览器元素的哪些属性即将发生变化，以便浏览器能够提前分配资源进行优化，如创建独立图层或启用 GPU 加速。然而，滥用 will-change 可能导致性能反效果，因此需要谨慎使用。最佳实践包括：精准且短暂地启用 will-change、限制属性数量、避免全局滥用，并通过 JavaScript 动态管理。常见误区包括过度优化、长期占用内存和冗余属性列表。will-change 适用于复杂动画、高频交互元素等场景，但应优先考虑其他优化手段，如减少重绘/回
2025-05-12 22:51:24
338
原创 Static、Relative、Absolute、Fixed、Sticky的应用与区别
定位方式脱离文档流？定位基准常见场景是否支持 z-index？static否无默认布局否relative否自身原始位置微调位置、作为定位容器是absolute是最近的定位祖先或视口弹出层、浮动元素是fixed是视口固定导航栏、悬浮按钮是sticky否（阈值前）最近的滚动祖先或视口吸顶效果、动态固定元素是。
2025-05-12 19:39:12
836
原创 z-index作用范围及层叠上下文解析
z-index 属性用于控制元素的堆叠顺序，但仅对定位元素（如 relative、absolute、fixed 或 sticky）有效，因为这些定位方式会创建层叠上下文。默认情况下，position: static 的元素即使设置了 z-index 也会被忽略。然而，某些 CSS 属性（如 opacity < 1、transform、filter 等）即使不改变定位方式，也会创建层叠上下文，使 z-index 生效。此外，z-index 仅在当前层叠上下文中有效，不同上下文之间的 z-index 无法
2025-05-12 16:58:06
232
原创 DOM树概念及操作详解
DOM（文档对象模型）树是浏览器将HTML或XML文档解析为的树状结构，允许程序动态访问和操作文档内容、结构和样式。以下是关键点的分步解释：DOM树结构为：document → <html> → <body> → <div id=“content”> → <p> → 文本节点"Hello"。
2025-05-09 22:09:37
339
原创 JS中的计时器能做到精确计时吗？
场景适用性典型误差常规动画/UI 更新约 16ms（60Hz）低频定时任务几毫秒到数百毫秒高精度时间测量亚毫秒级严格实时调度需结合外部技术（如 Web Audio）微秒级JavaScript 计时器适用于对精度要求不高的场景，但在高精度需求下需借助其他技术或脱离浏览器环境（如使用 C++ 扩展或硬件方案）。
2025-05-04 16:04:03
785
原创 JS微队列添加函数方法
通过 Promise 的 then 方法可以将回调推入微队列。通过这两种方法，可以确保函数在微任务队列中执行，适用于需要异步但高优先级的场景（如状态更新后立即操作 DOM）。现代浏览器提供了专用的。
2025-05-04 14:00:30
395
原创 W3C不再使用宏队列术语
当前W3C和WHATWG规范中，“宏队列”的说法已被更细分的任务队列类型取代。开发者应关注具体任务类型（如用户交互、定时器、微任务）的优先级差异，而非依赖过时的“宏任务”概念。这一调整旨在提升事件循环的灵活性和浏览器的调度效率。
2025-05-03 17:54:21
472
原创 如何安装JDK和配置环境变量
首先安装JDK这个是安装JDK的地址，自己选位置要新建一个文件夹装JDK文件然后就下一步下一步下一步这是装JRE的文件夹记得新建一个文件夹装JRE文件然后下一步下一步直到完成。接下来开始配置环境变量首先右键我的电脑选择属性点这里再点这里点这里复制JDK的路径地址复制在变量值这里找到PATH路径点击编辑在变量值末尾加上;E:\JAVA\JDK\bi...
2018-09-25 18:56:53
203
原创 如何使用xampp在hbuilder中运行php文件
首先打开xampp，点击图示按钮，打开apache和mysql服务 接着打开xampp根目录文件夹，找到一个htdocs文件夹 打开它，新建一个文件夹,命名为test(命名随意) 我们在hbuilder中打开该文件夹 新建一个php文件 打开它，输入一个echo语句，ctrl+s保存 打开浏览器，在地址栏中输入localhost/test/index....
2018-09-07 11:31:37
2082
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人