-
JavaScript的unshift方法用于在数组开头添加一个或多个元素，返回新数组长度并直接修改原数组。1.它按照传入顺序将元素插入数组最前；2.会改变原始数组结构，适用于小规模数据或不需保留原数组的场景；3.与push不同，它操作的是数组头部，性能上为O(n)，因需移动所有元素；4.频繁操作大数组可能导致页面卡顿、内存效率下降；5.替代方法包括使用扩展运算符创建新数组、concat()合并数组（保持不可变性），以及splice()（语义不清且性能类似unshift）。
-
文件上传预览可通过JavaScript实现，常用方法包括FileReader、URL.createObjectURL()、第三方库等。方案一使用FileReader读取图片并预览；方案二通过URL.createObjectURL()提升大文件处理效率；方案三利用<object>或<iframe>预览PDF等非图片文件；方案四借助filepond等第三方库增强功能；方案五结合Canvas实现图片高级处理。性能优化可采用分片读取、WebWorkers、服务端处理等方式。安全方面需验证文
-
掌握WebCodecsAPI需了解音视频编码及JS技巧，1.复用解码器并动态配置；2.编码器动态调整码率；3.使用EncodedVideoChunk/EncodedAudioChunk封装数据；4.处理音频采样率与声道布局；5.VideoFrame的copyTo高效图像处理；6.结合WebTransport实现低延迟传输。兼容性方面Chrome/Edge支持较好，调试可用开发者工具、控制台输出和chrome://media-internals。性能优化包括实例重用、合理配置参数、WASM加速、减少内存分配
-
实现平滑滚动的核心是使用CSS的scroll-behavior:smooth;属性，将其应用于html或body元素即可让页面锚点链接自动具备平滑滚动效果；2.该属性兼容主流浏览器，老旧浏览器会优雅降级为即时跳转，不影响功能；3.常见问题是固定头部遮挡目标内容，可通过为锚点目标元素设置scroll-margin-top（值等于头部高度）解决；4.替代方案是JavaScript的window.scrollTo()或element.scrollIntoView()配合behavior:'smooth'，可实现
-
事件循环中的“饥饿”问题是指某些任务长时间占用事件循环，导致其他任务无法执行。判断“饥饿”现象的方法包括：1.观察任务响应时间是否明显变长或出现超时；2.使用性能分析工具（如浏览器开发者工具、Node.js的perf_hooks模块）监控事件循环；3.通过日志记录关键任务执行时间并进行对比；4.关注用户反馈，如卡顿或无响应现象。解决“饥饿”问题的策略包括：1.合理分解任务，将长时间同步任务拆分为多个异步小任务，使用setTimeout、setImmediate或process.nextTick控制执行节奏
-
字体图标在HTML中作为图片替代方案，其核心优势在于矢量性、变色灵活性和更优加载性能。它通过引入包含图标字形的字体文件，并用CSS类名映射到具体图标来实现功能。常用的五种高效字体图标方案包括：1.FontAwesome：图标丰富、风格多样，支持按需加载；2.阿里巴巴矢量图标库（iconfont.cn）：可自定义选择或上传SVG生成专属字体文件，灵活便捷；3.GoogleMaterialIcons：契合MaterialDesign风格，简洁统一；4.RemixIcon：开源免费，风格一致性强；5.自定义SV
-
Node.js事件循环的六个阶段分别是timers、pendingcallbacks、idle/prepare、poll、check和closecallbacks。1.timers阶段执行setTimeout()和setInterval()回调；2.pendingcallbacks处理系统操作回调如TCP错误；3.idle/prepare为内部阶段，用于准备下一轮循环；4.poll阶段为核心，负责检查I/O事件并等待新事件；5.check阶段执行setImmediate()回调；6.closecallba
-
最直接的HTML颜色板实现方式是使用<inputtype="color">，它无需额外代码即可提供基础颜色选择功能；2.若需高度定制化，则需结合JavaScript、CSS和Canvas构建自定义调色器，核心包括色相条、饱和度/亮度选择区、颜色预览和数值输入框；3.技术难点主要在于颜色模型（如HSL与RGB）间的精确转换、Canvas的高效绘图与实时更新、用户交互的流畅性以及跨浏览器兼容性；4.优化用户体验需注重直观布局、实时颜色预览、平滑交互响应，并确保可访问性，例如支持键盘操作和屏幕阅读器
-
display切换方案的核心思路是通过媒体查询将表格元素转换为块级元素，实现垂直堆叠布局，并利用data-label属性和伪元素恢复表头信息。具体步骤：1.使用语义化HTML结构；2.在小屏幕媒体查询中设置display:block并隐藏表头；3.通过data-label和::before伪元素显示列标题；4.调整样式优化对齐与布局。局限性包括代码冗余、内容过长影响体验、可访问性问题、交互限制及不适用于复杂比较型表格。其他响应式策略有横向滚动、列隐藏、翻转表格和使用JavaScript库，各自适用于不同场
-
实现CSS渐变文字的核心技巧是使用background-clip:text与color:transparent结合。1.将文字设为透明；2.为文字添加渐变背景；3.使用background-clip:text使背景仅在文字区域内显示。这种方式依赖于background-image接受渐变函数，而color属性无法直接设置渐变。为确保兼容性，需添加-webkit-前缀，也可借助Autoprefixer自动处理。此外，还可拓展玩法，如使用图片纹理、动态背景、结合text-shadow或filter等效果，增强
-
调整浮动高度需修改关键帧中translateY的像素值，如将-20px改为-40px；调整速度则通过改变animation属性中的持续时间，如将3s改为5s变慢或1s变快；要让多个元素以不同节奏浮动，可为每个元素设置不同的animation-delay和animation-duration，例如:nth-child(1)设delay为0s、duration为3s，:nth-child(2)设delay为1s、duration为4s，:nth-child(3)设delay为2s、duration为5s；除t
-
使用figure和figcaption标签能实现图片或其他媒体与其标题的语义化组合，1.figure作为自包含内容单元，可包裹img、video、code等媒体或内容；2.figcaption为其提供描述性标题，可置于媒体前后；3.语义化结构使屏幕阅读器能识别标题与内容的关联，提升可访问性；4.搜索引擎借此理解媒体上下文，增强SEO效果；5.相比div+p，figure+figcaption不仅实现视觉组合，更明确传达内容关系；6.适用场景包括代码片段、图表、音视频、引用块及多图组合；7.正确使用可提升内
-
兼容旧浏览器主要通过使用polyfill和降级策略实现，其核心是渐进增强与优雅降级理念；2.Polyfill通过JavaScript模拟新特性，填补旧浏览器缺失的API，如html5shiv让IE识别HTML5标签，而转译（如Babel）则是将ES6+语法转换为ES5；3.两者区别在于polyfill解决运行时API缺失，转译解决语法兼容性，现代开发常结合使用Babel和core-js；4.使用polyfill可能带来性能问题，包括文件体积、执行开销和内存占用，可通过按需加载、CDN加速、缓存、压缩和延迟
-
Array.prototype.forEach是JavaScript中用于遍历数组并执行副作用操作的方法，它不返回新数组且无法中断循环。1.forEach适用于遍历数组并执行如打印、修改DOM或累加等无返回值的操作；2.它不支持异步等待，回调中的async/await不会阻止循环继续执行；3.使用时需注意不能通过return、break或continue控制流程；4.避免在遍历过程中修改原数组长度，可能导致跳过元素或无限循环；5.回调中this的指向需通过thisArg指定或使用箭头函数保持上下文。
-
article用于表示独立、完整的内容单元，如博客文章或新闻报道，可脱离上下文理解；2.section用于组织内容，划分主题或区域，不具备独立性；3.article可嵌套section，如一篇文章包含多个章节，section也可包含多个article，如首页展示多篇文章；4.其他语义化标签包括nav、aside、header、footer和main，分别表示导航、辅助内容、页眉、页脚和主内容区域；5.语义化标签不仅替代div，更向浏览器和搜索引擎提供结构说明，提升可访问性和SEO。
