-
HTTPBasicAuth是服务端验证的最快方案，Nginx/Apache原生支持，无需改HTML、不依赖后端；前端JS方案仅为障眼法，无法真正防护。
-
grid-template-columns混用固定值和1fr是标准且推荐的做法；例如三列布局可写为200px120px1fr，其中1fr分配容器宽度减去固定列后的可用自由空间，多fr按比例分配，需确保父容器设display:grid且有明确宽度。
-
实现响应式侧边栏菜单需通过CSS媒体查询和定位控制显示状态。1.HTML结构包含侧边栏与主内容区；2.移动端默认隐藏侧边栏（left:-250px），hover时滑出；3.屏幕≥768px时，侧边栏固定显示，position设为static；4.可选JS添加汉堡按钮控制显隐，提升交互体验。
-
TypeScript中获取DOM元素后需先类型断言再判空访问，否则会因Element无value等属性报TS2339错误，且strictNullChecks未启用将导致运行时null崩溃。
-
移动端CSS渲染卡顿主因是calc()与百分比嵌套引发强制同步计算及递归求值；应改用CSS自定义属性、语义化媒体查询、GPU加速动画、合理PostCSS配置及真机缓存调试。
-
filter:blur()使文字变糊的根本原因是触发图层合成后浏览器光栅化策略改变：Chrome/EdgeGPU加速下双线性插值致边缘发毛，FirefoxCPU光栅化更稳，Safari受系统字体渲染限制易现灰边；will-change:filter仅预分配合成层、优化动画过渡，不提升静态模糊锐度，且滥用会导致内存暴涨；真正有效方案是拆分模糊背景与文字为独立节点，避免文字继承filter，必要时用backface-visibility:hidden重置光栅化上下文或text-shadow降级模拟，移动端需确
-
小屏下grid-template-columns不生效，主因是媒体查询未覆盖初始样式或侧边栏未真正从网格中移除；需确保媒体查询位置靠后、选择器权重足够，并同步重定义网格列与侧边栏尺寸及定位。
-
纯CSS实现左右对齐对话气泡需用flex布局+margin控制位置，气泡容器设position:relative，三角用::before伪元素配合border技巧（如border-width:6px6px00和透明边框）及absolute定位锚定边缘，左侧气泡用margin-right:auto与right:-12px，右侧用margin-left:auto与left:-12px，确保三角始终贴合不悬空。
-
dir属性仅支持ltr、rtl、auto三个值：ltr为默认值，用于英语等左到右语言；rtl用于阿拉伯语等右到左语言，影响标点、光标、剪贴板等底层行为；auto依赖首字符判断方向但极易误判，线上项目不推荐使用。
-
z-index在3D场景中失效是正常现象，因浏览器按Z轴实际坐标（如translateZ值）而非z-index数值决定渲染顺序；需通过调整transform中的Z值精确控制前后关系。
-
closed模式仅使shadowRoot返回null，无法防御事件冒泡、CSS注入、DOM快照或XSS等攻击；真正隔离需组合composed:false、slot/exportparts、DOMPurify等策略，open模式更利于测试与维护。
-
navigator.onLine不可靠，仅反映系统网络接口状态而非服务可达性，需配合fetch心跳检测（带超时、防抖、真实后端校验）和服务端预缓存离线页才能准确判断用户可用性。
-
WeakMap和WeakSet的核心价值在于持有弱引用，不阻止垃圾回收，适合缓存、元数据绑定或私有属性模拟；WeakMap键必须是对象，支持私有数据存储与自动清理；WeakSet仅存对象，用于标记且不可遍历。
-
正确使用表单标签与属性、支持“记住我”功能、避免破坏自动填充机制、测试浏览器兼容性可实现稳定自动填充。1.使用标准input类型并设置autocomplete属性为username和current-password；2.登录成功后通过localStorage保存用户名，页面加载时恢复；3.避免动态修改type、禁用autocomplete或使用非原生输入框；4.在Chrome、Firefox、Safari中测试自动填充与多账号切换效果，确保兼容性。
-
