-
前端性能监控异步请求耗时应优先使用PerformanceAPI自动采集，通过performance.getEntriesByType('resource')获取完整阶段耗时；兼容旧浏览器需手动埋点并用requestIdleCallback延迟上报；须过滤缓存、重定向、CORS限制及cancel请求等干扰。
-
顶部公告横幅需用bodypadding-top“推下”内容防遮挡，动态读取高度并存localStorage实现关闭持久化，响应式用flex控制文字与按钮布局，iOS加transform优化重绘。
-
window.matchMedia能实时响应系统深色模式切换，但必须显式绑定change事件监听器；直接读取matches属性仅获当前快照，不自动更新；需配合CSS@media和客户端安全执行以避免闪动与内存泄漏。
-
不能。:focus-within匹配任意可聚焦后代获得焦点的父元素，开箱即用且性能优；:has(.child:focus)需目标子元素真实可聚焦并严格满足结构关系，兼容性差、性能开销大。
-
iOSSafari底栏遮挡问题需设viewport-fit=cover并配合env(safe-area-inset-bottom)计算底部安全距离，禁用user-scalable=no，优先用padding-bottom而非fixed定位，安卓需@supports或JSfallback。
-
JavaScript的trim系列方法仅去除Unicode规范定义的空白字符（如空格、制表符、BOM等），不处理全角空格；trimStart()/trimEnd()是ES2019标准方法，替代已废弃的trimLeft()/trimRight()；所有方法均返回新字符串且不修改原串。
-
html2canvas是将HTML元素转为图片的最可行方案，因其能遍历DOM、计算样式并重绘；原生Canvas不支持直接绘制HTML元素，仅接受特定图像类型作为drawImage参数。
-
应改用rem实现语义化字号体系：以:root的font-size为基准，通过简单倍数（如1rem=16px）统一控制，避免px堆砌导致维护困难，同时注意图标字体、placeholder等场景需禁用rem。
-
惰性单例通过首次调用才创建实例，避免页面加载时冗余内存分配；闭包封装实例变量与判断逻辑，确保延迟实例化且仅执行一次；如登录弹窗仅在首次调用show()时生成DOM、绑定事件，后续复用，显著降低首屏内存占用。
-
:last-child不生效的根本原因是目标元素并非父容器的最后一个子节点，常见干扰包括注释、空白文本节点、其他标签或JS动态插入的非目标元素；应检查DOM结构或改用更鲁棒的:last-of-type。
-
虚拟列表的核心思路是只渲染可视区域内的元素：通过滚动位置与容器尺寸计算起始/结束索引，用占位元素维持滚动高度，节流更新视图，并可扩展支持动态高度。
-
应选择高对比度的文字与背景颜色组合以提升可读性，尤其确保普通文本对比度达4.5:1、大号文本达3:1，推荐使用黑色#000000与白色#FFFFFF等高对比配色，并借助WebAIMContrastChecker等工具验证，同时优化链接的a:link、a:visited、a:hover状态样式，避免仅依赖颜色区分，从而提升无障碍访问体验。
-
首先在Notion创建名为“HTML学习库”的表格数据库，将“Name”列重命名为“HTML标签”，接着添加“标签类型”“是否掌握”“最后复习时间”等属性列以结构化管理学习内容；然后在每条记录中通过“/code”嵌入HTML代码示例并添加使用说明；利用筛选功能查看未掌握内容，按类型排序实现高效复习；最后通过导出为PDF或Markdown文件实现跨设备同步学习进度。
-
本文详解为何inline-block元素在设置固定宽度（如500px）时仍会换行堆叠，并推荐使用现代CSSFlexbox布局实现可靠、响应式的左右并排布局，同时兼顾间距控制与适配性。
-
HTML表格性能优化的核心是减少渲染负担和提升响应速度。主要方法包括：1.虚拟滚动，仅渲染可视区域数据，动态替换滚动内容；2.分页加载，按需获取数据，减轻DOM压力；3.数据预处理与缓存，提前计算并存储结果以提高交互效率；4.CSS与DOM操作优化，使用table-layout:fixed和批量插入减少重绘回流；5.针对百万级数据采用后端分页、服务端渲染、WebWorkers及Canvas/WebGL替代方案；6.平衡体验方面采用渐进式加载、功能优先级划分、用户反馈机制和保障可访问性。
