筑基篇-原生三剑客
关注
分享
扫一扫
文章平均质量分 74
HTML5密室 / CSS奇技场 / JavaScript原力觉醒
尘寰ya
这个作者很懒，什么都没留下…
展开
-
为什么js操作DOM成本比较高？
DOM 操作成本高的本质原因：树形结构复杂性、跨线程通信、重排/重绘的触发。优化核心思路：减少操作次数、避免同步布局、利用浏览器优化策略。现代框架的价值：通过虚拟 DOM、异步更新等机制，开发者无需手动优化，但仍需理解底层原理以应对极端场景。原创 2025-04-25 20:58:21 · 477 阅读 · 0 评论 -
在微任务执行过程中又产生了新的微任务，新产生的微任务和宏任务谁先执行？
（在当前事件循环中继续清空微任务队列），宏任务必须等待所有微任务（包括新产生的）执行完毕后才会执行。原创 2025-04-24 20:27:58 · 85 阅读 · 0 评论 -
js的事件循环机制
事件循环本质：单线程下通过任务队列实现异步。核心规则：同步代码 → 清空微任务 → 执行一个宏任务 → 循环。应用注意：避免在微任务中执行耗时操作（可能阻塞渲染），合理使用宏任务/微任务调度。理解事件循环机制对解决异步问题、优化性能至关重要！原创 2025-04-24 20:24:07 · 343 阅读 · 0 评论 -
为什么浏览器16.6ms渲染一次
浏览器16.6ms的渲染周期是为了匹配60Hz屏幕的刷新节奏，通过垂直同步和渲染流水线的协同，确保用户获得流畅的视觉体验。开发者需遵循这一机制进行性能优化，避免丢帧和卡顿。原创 2025-04-24 19:33:45 · 457 阅读 · 0 评论 -
Symbol类型的作用是什么？如何实现一个私有属性？
JavaScript 没有真正的私有属性，但可通过。在 JavaScript 中，原创 2025-04-19 01:04:36 · 219 阅读 · 0 评论 -
Map和Object的区别是什么？WeakMap有何特殊用途？
在 JavaScript 中，MapObject和WeakMap是三种键值对存储结构，但它们在设计目的和使用场景上有显著差异。以下是它们的核心区别及WeakMap.sizeforEachfor...of：Object 的键为数值时，按数值升序排列（如→ 迭代顺序为'1''2'原创 2025-04-19 01:04:15 · 359 阅读 · 0 评论 -
解释迭代器（Iterator）和生成器（Generator）的作用，手写一个迭代器。
是处理数据遍历和流程控制的核心机制。在 JavaScript 中，原创 2025-04-19 01:03:48 · 375 阅读 · 0 评论 -
解释迭代器（Iterator）和生成器（Generator）的作用，手写一个迭代器。
是处理数据遍历和流程控制的核心机制。在 JavaScript 中，原创 2025-04-19 01:03:24 · 327 阅读 · 0 评论 -
for...of和for...in的区别是什么？
是两种不同的循环语句，它们的核心区别体现在。普通对象默认不可迭代，但可通过实现。在 JavaScript 中，原创 2025-04-19 01:03:03 · 267 阅读 · 0 评论 -
如何实现类的私有方法和属性（ES6+提案）？
在 ES6+ 中，实现类的私有属性和方法可以通过以下两种主要方式实现，其中在类中声明以类似属性，方法名以。原创 2025-04-19 01:01:48 · 346 阅读 · 0 评论 -
解释Array.from和扩展运算符（...）的区别
都用于将类数组（array-like）或可迭代对象（iterable）转为真正的数组，但它们在。在大多数现代浏览器引擎中，两者的性能差异可以忽略不计。的映射功能可能更高效，因为它避免了额外的。属性和索引元素，但不可迭代的对象。在 JavaScript 中，原创 2025-04-19 01:01:27 · 248 阅读 · 0 评论 -
什么是可选链操作符（Optional Chaining）？如何替代传统的判空写法？
可选链操作符（Optional Chaining）是 JavaScript 中用于简化深层嵌套对象属性访问的语法（的嵌套属性，避免因中间路径不存在而抛出错误。），它允许安全地访问可能为。原创 2025-04-19 01:00:49 · 401 阅读 · 0 评论 -
解释??（空值合并运算符）和||的区别。
在 JavaScript 中，空值合并运算符（JavaScript 中以下值被视为。）都用于提供默认值，但它们的。原创 2025-04-19 01:00:13 · 249 阅读 · 0 评论 -
如何用Object.entries和Object.fromEntries实现对象转换？
可以灵活实现对象的过滤、映射、排序、合并等操作。这种模式在处理数据转换、配置管理、API 数据处理等场景中非常高效。是处理对象转换的利器。它们可以将对象转换为数组进行操作，再转换回对象。：将 URL 查询字符串转为对象。在 JavaScript 中，：保留值大于 2 的属性。：将键名大写，值翻倍。：按键名字母顺序排序。：深层次转换嵌套对象。原创 2025-04-19 00:59:53 · 291 阅读 · 0 评论 -
ES6模块化与CommonJS模块化的区别是什么？如何动态导入模块？
ES6 模块化和 CommonJS 模块化是 JavaScript 中两种主流的模块系统，它们在设计理念、语法、运行机制等方面存在显著差异。通过动态绑定解决循环依赖，但需注意模块未完全执行时的引用状态。输出值的拷贝，修改导出值不会影响已导入的副本。输出值的引用，修改导出值会影响所有导入方。部分加载可能导致不一致状态。原创 2025-04-19 00:59:15 · 614 阅读 · 0 评论 -
如何用Proxy实现数据双向绑定？
通过Proxy数据代理：使用 Proxy 拦截 get/set 操作依赖收集：在 get 时收集依赖函数触发更新：在 set 时执行所有依赖函数模板编译：解析指令和插值表达式事件绑定：处理用户输入事件这种实现方式虽然简化，但完整展示了现代前端框架响应式系统的核心原理。实际生产环境建议使用成熟的框架（如 Vue 3），它们在此基础上做了大量性能优化和边界情况处理。原创 2025-04-19 00:57:53 · 857 阅读 · 0 评论 -
前端面试-JavaScript核心机制
这些问题覆盖JavaScript核心机制和ES6+的深度与广度，适合考察候选人对语言本质的理解和实际编码能力。原创 2025-04-16 00:08:05 · 1058 阅读 · 0 评论 -
解释模板字符串的标签函数（Tagged Template）是什么，并给出示例
标签模板函数（Tagged Template）是 JavaScript 中模板字符串的高级用法，允许通过自定义函数处理模板字符串的各个部分。该函数接收模板的静态字符串和动态表达式值，可进行灵活操作（如转义、翻译、格式化等）。原创 2025-04-18 01:07:09 · 416 阅读 · 0 评论 -
let、const和var的区别是什么？解释暂时性死区（TDZ）
是三种变量声明方式，它们在作用域、变量提升、重复声明等行为上有显著区别，同时。变量提升（Hoisting）指在代码执行前，声明会被提升到作用域顶部，但。在 JavaScript 中，原创 2025-04-18 01:06:42 · 353 阅读 · 0 评论 -
解构赋值的常见用法有哪些？如何解构嵌套对象？
解构赋值是 ES6 引入的高效语法，用于从数组或对象中提取数据并赋值给变量。合理使用解构赋值，可显著提升代码可读性和简洁性，尤其在处理复杂数据结构时效果更明显。原创 2025-04-18 01:05:58 · 307 阅读 · 0 评论 -
箭头函数与普通函数的区别是什么？能否作为构造函数？
适合需要。原创 2025-04-18 01:05:28 · 233 阅读 · 0 评论 -
async/await 的“传染性”
作用域隔离：用 IIFE/模块化限制异步影响范围架构分层：分离同步入口与异步核心逻辑事件驱动：通过消息机制解耦调用关系按需异步：动态导入、懒加载关键资源拥抱 Promise：必要时回归基础 API 控制流程合理搭配这些策略，即可在享受便利性的同时，避免其传染性对代码结构的破坏。原创 2025-04-18 01:05:01 · 374 阅读 · 0 评论 -
解释`async/await`的底层实现原理（结合生成器和Promise）。
的底层实现结合了和，通过自动化的流程控制将异步代码转换为类似同步的写法。生成器函数（function*）可以通过yield关键字暂停执行，并通过.next()方法恢复执行。需要一个执行器（如co库）来自动驱动生成器的执行，处理yieldBabel 等工具将。原创 2025-04-18 01:04:16 · 245 阅读 · 0 评论 -
手写一个符合Promise A+规范的Promise类。
【代码】手写一个符合Promise A+规范的Promise类。原创 2025-04-18 01:03:47 · 150 阅读 · 0 评论 -
解释`Promise.all`、`Promise.race`、`Promise.allSettled`的区别。
通过合理选择这些方法，可以更高效地管理复杂的异步操作流程。原创 2025-04-18 01:03:21 · 792 阅读 · 0 评论 -
什么是“回调地狱”？如何用Promise或Async/Avoid解决？
是指 JavaScript 中多层嵌套的回调函数导致代码结构混乱、难以维护的现象。常见于多个异步操作依赖前序结果的场景，代码呈现“金字塔”形状，可读性和错误处理能力极差。原创 2025-04-18 01:02:51 · 359 阅读 · 0 评论 -
js如何实现一个异步的并行任务队列？给出代码示例。
这样的实现既保持了代码简洁性，又提供了生产环境所需的并发控制、错误隔离等关键特性，可直接用于爬虫调度、批量接口请求等实际场景。原创 2025-04-18 01:02:09 · 286 阅读 · 0 评论 -
解释浏览器中的EventLoop机制，区分宏任务和微任务。
是 JavaScript 异步执行的核心机制，负责协调任务（如事件回调、定时器、网络请求等）的执行顺序。，能帮助开发者优化代码性能，避免因任务堆积导致的页面卡顿，并正确管理异步逻辑的执行时机。：微任务执行过程中新生成的微任务会立即加入队列，并在当前阶段全部执行。的优先级管理，特别是。原创 2025-04-18 00:59:32 · 503 阅读 · 0 评论 -
解释“作用域链”的概念，并说明其与闭包的关系。
作用域链是 JavaScript 在查找变量时遵循的层级路径。每个执行上下文（Execution Context）都有一个关联的。闭包是函数能够访问并记住其词法作用域的能力，即使该函数在其词法作用域之外执行。是变量访问机制和函数特性的核心概念，两者紧密相关。闭包通过保留对外部函数变量对象的引用，延长了作用域链的生命周期。，作用域链由这些变量对象按嵌套关系依次链接而成。闭包通过作用域链访问外部变量。在 JavaScript 中，原创 2025-04-18 00:58:09 · 362 阅读 · 0 评论 -
什么是“内存泄漏”？闭包在哪些场景下容易引发内存泄漏？
是指程序中不再需要的内存由于某些原因未被垃圾回收机制（Garbage Collection, GC）释放，导致内存占用持续增长，最终可能引发性能下降甚至程序崩溃。闭包作为事件回调时，若未及时移除监听器，会长期持有对 DOM 元素或外部对象的引用。闭包通过作用域链间接引用 DOM 元素，即使元素已从页面移除，仍无法被回收。闭包用于缓存数据时，若缓存策略不当，可能长期保留不再使用的数据。闭包中意外将对象暴露到全局作用域，导致长期驻留内存。在 JavaScript 中，原创 2025-04-18 00:57:09 · 307 阅读 · 0 评论 -
ajax总结
1 后端基础ajax1.1 URL互联网资源都有一个URL：统一资源定位符 uniform resouce locator资源：网页，图片，视频，程序，链接…htttp://www.baidu.com/phone?name=‘wangcai’&age=100协议：http://IP地址/域名：baidu.com ， www仅仅是前缀baidu.com ，一级域名（我们买的就是这个）www.baidu.com ，二级域名 ，（自己配的）news.baidu.com ，二级域原创 2021-03-22 15:35:37 · 191 阅读 · 0 评论 -
鼠标cursor、轮廓outline、防止拖拽文本域resize
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 鼠标cursor */ /* cursor:d原创 2020-11-14 21:18:52 · 188 阅读 · 0 评论 -
盒子模型的外边距塌陷和合并问题及解决方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2020-11-14 18:08:23 · 357 阅读 · 0 评论 -
文本在一行显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px;原创 2020-11-14 20:51:00 · 706 阅读 · 0 评论 -
清楚浮动
1.额外标签法＜div style="clear:both;">＜/div>//或者下面＜br style="clear:both;" />2.父级添加overflow:hidden;，触发BFC的方式实现清除浮动效果3.:after 案例：百度 淘宝网 网易 .clearfix::after{ content: "."; display: block; height: 0; cl原创 2020-11-14 15:58:52 · 166 阅读 · 0 评论 -
图片文字对齐
图片文字对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 600原创 2020-11-14 21:41:15 · 123 阅读 · 0 评论 -
如何通过闭包实现函数柯里化（Currying）？
是一种将接受多个参数的函数转换为一系列接受单个参数的函数的技术。其本质是通过闭包逐步传递参数，直到所有参数收集完毕再执行原函数。在 JavaScript 中，通过闭包实现函数柯里化（Currying）的核心思路是。通过闭包实现的柯里化，是函数式编程中的重要工具，能够显著提升代码的模块化和灵活性。若原函数参数个数不定（如使用。原创 2025-04-17 01:09:53 · 226 阅读 · 0 评论 -
解释词法作用域和动态作用域的区别，JavaScript属于哪一种？
是两种不同的作用域规则，它们的核心区别在于。在 JavaScript 中，原创 2025-04-17 00:53:07 · 458 阅读 · 0 评论 -
闭包在模块化开发中的应用是什么？实现一个简单的模块化示例。
闭包形成的函数作用域可以保护模块内部变量不被外部直接访问，同时通过暴露的方法实现可控操作。尽管现代开发中更多使用 ES6 模块化，但理解闭包在模块化中的应用仍对维护旧代码和深入理解 JavaScript 作用域机制至关重要。闭包是 JavaScript 模块化开发的基石之一，通过函数作用域和返回对象的结合，实现了。，通过返回公共接口实现模块的。通过参数传递依赖（如。原创 2025-04-17 01:00:32 · 249 阅读 · 0 评论 -
什么是IIFE？它如何帮助解决变量污染问题？
在全局作用域和模块化规范之间架起桥梁，通过简单、直接的方式实现代码隔离，至今仍适用于旧项目维护或快速原型开发。是一种在定义后立即执行的函数模式。它的核心目的是通过函数作用域隔离代码，避免变量污染全局环境。在全局作用域中直接定义的变量、函数或对象会挂载到。在 JavaScript 中，IIFE 的常见写法是通过。原创 2025-04-17 00:57:16 · 261 阅读 · 0 评论