-
Grid布局更适合后台页面，因其通过grid-template-areas实现语义化区域划分，一层声明即可完成header、sidebar、main、footer的宏观布局与响应式重排，且顶层仅分区、细节交由子容器处理。
-
Map强引用键对象，阻止垃圾回收，可能导致内存泄漏；2.WeakMap弱引用对象键，允许垃圾回收，适合关联私有数据或缓存，避免内存泄漏。
-
防抖是指在事件频繁触发时只执行最后一次操作，常用于搜索功能中优化性能。通过设置延迟（如300ms），当用户停止输入后才发起请求，避免频繁调用。实现方式是封装一个debounce函数，利用setTimeout与clearTimeout控制执行时机。应用于input事件时，每次输入都会重置计时器，仅当间隔超过设定时间才触发搜索。需注意：合理设置延迟时间、过滤空值请求、可结合AbortController取消旧请求，并添加加载状态提升用户体验。该技术适用于实时搜索、自动补全等场景，能显著减少无效请求，提升性能。
-
打印图片问题核心是确保浏览器在print媒体下信任图片尺寸与可见性：需清除隐藏样式、强制重置宽高、用绝对单位控制、添加page-break-inside:avoid防分页错位，并优先使用SVG或内联base64图。
-
应延迟加载iframe并优化嵌入页脚本执行：使用loading="lazy"或IntersectionObserver控制加载时机，嵌入页需任务分片、禁用同步API，同源下可共享依赖，避免缓存失效；WebWorkers不适用iframe加载优化。
-
Babel作为JavaScript编译器，通过解析、转换和生成三阶段处理代码，其插件可自定义语法转换；利用AST和PathAPI，开发者能实现如重命名函数、移除console.log等操作，并通过注释标记扩展语法糖，结合ASTExplorer可提升开发效率。
-
用nth-child实现表格隔行高亮的关键是选中tbody内偶数或奇数tr并设背景色：tbodytr:nth-child(even){background-color:#f5f5f5;}或tbodytr:nth-child(odd){background-color:#eef7ff;}，避免影响表头。
-
现代浏览器支持加速度、陀螺仪、方向和环境光传感器API，通过JavaScript在HTTPS环境下采集设备数据。1.加速度传感器获取含重力的三轴加速度，可结合LinearAccelerationSensor分离线性加速度；2.陀螺仪测量角速度，用于旋转检测，常与加速度计融合使用；3.AbsoluteOrientationSensor提供设备方向四元数，可转欧拉角用于AR或界面调整；4.环境光传感器读取光照强度，实现自动亮度调节；需注意权限、错误处理、性能优化及浏览器兼容性。
-
属性选择器[attr^="value"]匹配属性值严格以指定字符串开头（区分大小写、不可有前置空格）；[attr$="value"]匹配严格以指定字符串结尾；[attr="value"]表示完全相等（含空格大小写），非包含匹配；子字符串匹配应使用[attr*="value"]。
-
JavaScript的this在函数调用时动态绑定，普通调用在非严格模式下指向全局对象（如window），严格模式下为undefined；箭头函数不绑定this，继承外层普通函数的this；call/apply/bind可显式控制this，class方法需手动绑定或用箭头函数避免丢失。
-
浮动导致父容器高度塌陷和边距失效，根本原因是未形成BFC；解决方法有三：用clear:both清除浮动、以padding替代margin临时绕过、或触发BFC（推荐display:flow-root）。
-
应使用HTML5语义标签构建结构，配合CSS重置、Flexbox布局、Grid网格及媒体查询实现响应式设计。具体包括：一、用<header><nav><main><aside><footer>等组织骨架；二、CSS重置默认样式并设基础排版；三、Flexbox实现导航与主侧布局；四、Grid定义页眉页脚二维结构；五、媒体查询适配移动端堆叠与尺寸调整。
-
纯函数需满足：相同输入必得相同输出，且不依赖或修改任何外部状态；所有输入须显式传参，禁用Date.now()、Math.random()等非确定性操作，副作用须显式封装隔离。
-
单页应用路由通过JavaScript实现，核心是监听URL变化并动态加载内容。1.hash模式利用#后片段，兼容性好且无需服务器支持；2.history模式使用pushState实现美观路径，需服务器配置避免404。根据SEO和部署需求选择模式。可手动实现简易路由：定义路由表、监听hashchange或popstate事件、更新DOM。主流框架如React用react-router-dom，Vue用vue-router，Angular用RouterModule，均提供参数传递、权限控制等高级功能。掌握原理
-
本文详解如何通过组合CSSborder-radius与SVGstroke-linecap='butt'属性，解决内联SVG虚线背景在圆角容器中边缘被意外截断的问题，确保虚线完整、圆润地贴合容器轮廓。
