-
SVG动画主要有三种实现方式：CSS、SMIL和JavaScript。CSS最常用，适合简单动画，性能好且易上手，可通过transition和@keyframes实现颜色、位置等变化，但无法直接动画d属性等路径数据。SMIL是SVG内置的声明式动画方案，语法直观，可直接在SVG标签内使用animate等元素定义动画，优势在于无需JS或CSS，但因Chrome等浏览器放弃支持，兼容性差，已逐渐被淘汰，仅适用于简单、独立场景。JavaScript则提供最强控制力，适合复杂交互、动态数据驱动、路径变形（morp
-
掌握JavaScript正则技巧可提升性能与可读性：1.预编译正则并复用变量，避免重复解析；2.合理使用g、i、m、u修饰符，按需启用；3.优先使用非捕获组(?:)和惰性匹配.*?；4.结合match、replace、split等字符串方法简化操作。
-
JavaScript排序分两部分：一是正确使用原生sort()（注意字符串默认排序、数字需传比较函数、对象按字段排序、原地修改等）；二是手写冒泡、选择、插入、快排、归并五种算法，各注明稳定性、时间复杂度及实现要点。
-
核心是通过编译时优化减少运行时开销。1.预解析构建AST，拆分静态与动态内容，合并静态节点；2.静态提升将不变片段提取为常量；3.生成高效渲染函数，利用with减少查找，优先字符串拼接；4.缓存编译结果避免重复解析。
-
JavaScript是单线程的，因其运行时仅维护一个调用栈和一个任务队列，异步操作由WebAPI或libuv处理后再回调，但同步耗时任务（如死循环、大JSON解析）仍会阻塞主线程。
-
构建可复用组件需封装、独立与易集成，WebComponents提供原生支持。1.使用CustomElements定义自定义标签，通过customElements.define()注册继承HTMLElement的类，实现自定义元素；2.结合ShadowDOM隔离样式与结构，在构造函数中调用attachShadow()并设置shadowRoot.innerHTML，避免全局污染；3.支持属性与事件，通过observedAttributes监听属性变化，attributeChangedCallback触发更新，
-
使用类选择器为当前页面导航项添加.active样式是最直接的高亮方式，结合JavaScript通过属性选择器自动匹配URL可实现动态高亮，再利用:hover、:focus伪类增强交互体验，结构化选择器则确保多级菜单样式精准应用。
-
JavaScript无安全模式，须主动防御：禁用eval/Function、避免innerHTML拼接、校验URL跳转、强制CSP策略。
-
forEach不产生新数组，仅执行副作用；map必须返回等长新数组，用于转换。二者均跳过稀疏数组空位，且内部return不能中断循环。
-
使用fixed定位实现悬浮按钮效果更佳，.floating-btn设置position:fixed;bottom:20px;right:20px;可使按钮固定在视窗右下角，不随页面滚动移动，真正实现“悬浮”效果，而absolute会受父元素定位影响，适合不同场景。
-
箭头函数无独立this绑定，沿作用域链继承外层普通函数的this，故不可用作对象方法、事件回调或构造函数；无arguments对象和yield支持；单表达式自动返回，块级需显式return。
-
根本原因是iOSSafari对表单提交更严格，会过滤未交互或无效状态的控件；需手动检查数据完整性、用JS主动收集而非依赖原生submit，并验证控件可交互性。
-
应使用<picture>而非<img>的核心场景是需按媒体条件或格式切换完全不同的图片资源；仅适配分辨率时用srcset即可。<picture>必须包含带src和alt的<img>作为兜底，否则不渲染且影响SEO与无障碍。
-
默认box-sizing为content-box易触发重排，建议设为border-box；margin-collapse动态修改会强制layout；outline不建新图层而box-shadow会；display:none完全跳过渲染，visibility:hidden仍执行layout。
-
::before和::after仅用于在元素内容前后插入装饰性、非语义的生成内容，必须配合content属性（如""、"→"、url()或attr()）才能生效；适用于轻量装饰与视觉反馈，不可替代真实DOM节点。
