-
sticky导航卡顿的根本原因是频繁重排重绘，源于复杂布局、不当overflow/transform设置、scroll监听及动态样式计算等，而非sticky本身。
-
相对定位元素位移后仍占原文档流位置；其本质是先按正常流占位再基于原位置偏移，top/left等不引发重排，z-index受层叠上下文限制，absolute子元素以relative父元素为containingblock但不受其后续位移影响。
-
通过font-size、color和text-align类可高效实现文本样式控制，如text-lg设字号、text-blue-600定义颜色、text-center居中对齐，结合响应式类提升开发效率与视觉统一性。
-
保证足够对比度，使用工具检查是否符合WCAG标准，推荐深灰文字配浅色背景以提升可读性；2.品牌色应克制使用，背景宜用浅版品牌色并避免互补色冲突，可通过透明度柔化视觉；3.中性色如浅灰、深灰能平衡页面，暗色模式推荐深灰背景与柔和文本色减少眩光；4.利用CSS媒体查询动态适配明暗模式，通过变量统一管理配色，提升用户体验与可访问性。
-
WebComponents是浏览器原生标准，含CustomElements（需含短横线、继承HTMLElement、用define注册）、ShadowDOM（open/closed模式、slot分发、样式隔离）和template克隆机制，但无内置响应式，通信依赖属性/事件。
-
应使用aspect-ratio或padding-bottom技巧实现视频宽度100%时高度自适应：现代浏览器用video{width:100%;aspect-ratio:16/9;object-fit:cover}，旧浏览器用外层容器padding-bottom:56.25%配合绝对定位video。
-
CSS响应式布局中模块顺序调整和断点排列切换主要依靠Flexbox的order与flex-direction或Grid的grid-template-areas实现，不改变HTML结构；需兼顾视觉流与语义可访问性。
-
在React中应避免直接操作DOM，而应将数据逻辑融入JSX渲染过程；通过条件表达式动态绑定input的value属性，可安全、响应式地控制“正确答案”标识。
-
最常用方法是设display:inline-block，因其既能设置宽高、内外边距，又能同行排列；而inline无法设置宽高和上下margin，块元素默认独占一行。
-
JavaScript单例需靠逻辑控制而非语言特性：闭包模块模式最简可靠；class+静态属性易被绕过；Symbol+WeakMap可防伪造；Proxy拦截new不可行且破坏tree-shaking。
-
小程序中HTML5原生超链接（如<ahref>）完全失效，必须通过各平台SDK接口跳转：微信用wx.miniProgram.navigateTo，支付宝用my.navigateToMiniProgram，抖音用tt.miniProgram.navigateTo，且需前置JS-SDK注入、签名验证及环境判断。
-
用JavaScript创建浏览器扩展的关键是理解其结构和权限机制：需正确编写manifest.json（ManifestV3标准），配合内容脚本、后台serviceworker、弹出页等协同工作，并通过chrome.runtimeAPI通信，调试时依赖chrome://extensions和DevTools。
-
TensorFlow.js是Google推出的JavaScript库，可在浏览器中运行机器学习模型。通过加载预训练模型如MobileNet，对图像进行预处理并预测，实现前端图像识别。示例代码展示从引入库到输出前5个识别类别的完整流程。需注意模型选择、图像预处理一致性、首次加载性能优化及跨域图片问题。使用TensorFlow.js可让Web应用具备本地化、高隐私、低延迟的AI识别能力。
-
根本原因是box-sizing:content-box导致padding和border额外增加宽度；应全局设box-sizing:border-box，图片加max-width:100%;height:auto;，断点依内容临界点选em单位，字体用clamp()动态缩放。
-
优先用function声明需提前调用的函数，用函数表达式处理回调、导出等场景；JS按共享传递，原始类型传值、对象传地址副本；箭头函数无this且不可构造。
