contain:strict能显著提升移动端长列表渲染性能，因为它通过contain:layout、contain:paint和contain:size三个子属性，将元素隔离为独立的渲染上下文，使浏览器可跳过非视口内元素的布局与绘制；1.contain:layout确保内部布局变化不触发外部重排；2.contain:paint限制绘制范围，避免内容溢出并支持独立复合层；3.contain:size要求元素有明确尺寸，使浏览器无需遍历子元素即可确定大小，从而优化计算；使用时需注意：必须设置固定高度或最小高度

伪类是描述元素特定状态的CSS关键词，:hover需元素可交互且支持悬停（如非移动端、pointer-events:auto），:focus匹配所有焦点来源而:focus-visible仅限键盘导航意图，伪类顺序应遵循LVHAF规则以确保样式正确生效。

JavaScript字符串不可变，所有方法均返回新字符串；判断子串用includes()更清晰；split()/join()适合分隔符处理；提取片段优先用slice()；注意Unicode安全性。

用Flex布局解决中间栏被挤压问题：左右栏设min-width（如200px），中间栏设flex:1，父容器必须display:flex且不设flex-wrap:wrap。

ESLint是成熟灵活的JavaScript代码检查工具，能自动化统一代码风格、降低阅读成本、减少错误并捕获潜在bug；通过三步快速接入：安装、初始化配置、集成编辑器，并需合理设置env、parserOptions、extends和rules。

本文详解高阶函数transformer因少传参数而报“firstUpperisnotafunction”错误的根本原因，指出问题在于调用时遗漏了必需的字符串参数，而非参数顺序本身有问题。

使用innerHTML插入带onclick的按钮时，无法访问类实例方法（如this.setChange()），根本原因在于内联事件处理器中this指向DOM元素而非类实例，且内联脚本无法访问模块作用域内的局部变量。解决方案是改用addEventListener+箭头函数保持词法作用域。

通过link标签的media属性可针对不同设备加载对应CSS文件，如移动设备、打印场景或高分辨率屏，实现响应式设计并提升性能。

IE中不存在“HTML5编码”，乱码主因是<metacharset>位置错误、UTF-8BOM干扰或X-UA-Compatible强制降级；HTML5标签不识别属DOM构建问题，需html5shiv解决。

合理使用padding是解决页面拥挤最直接有效的解法——它通过在元素内部撑开空间提升可读性与层次感，需注意响应式调整和box-sizing避免溢出。

HTML5的离线应用功能主要依赖于ApplicationCache（简称AppCache），它允许网页在没有网络连接的情况下依然可以加载和运行。虽然AppCache已被现代浏览器逐步弃用（推荐使用ServiceWorkers替代），但在一些旧项目中仍可能遇到。以下是其基本配置方法。什么是ApplicationCacheApplicationCache是HTML5提供的一种机制，通过一个缓存清单文件（cachemanifest），告诉浏览器哪些资源需要离线存储，从而实现离线访

ES6模块通过import/export明确依赖关系、避免全局污染、支持静态分析与tree-shaking、提供严格作用域和语义化导出，是大型项目模块化的刚需解决方案。

rgb()和rgba()是颜色通道直控方式而非亮度控制工具，通过独立调节红、绿、蓝通道（0–255）及alpha透明度实现精确对比度控制，兼顾可读性与视觉层次。

Sentry是一个开源错误监控工具，通过SDK捕获JavaScript运行时错误、Promise异常、资源加载失败等问题，支持自动上报和手动捕获异常，结合sourcemap、release版本、用户信息和性能监控，提升前端异常的可见性与排查效率。

gap仅在flex容器上对直接子元素生效；常见失效原因包括flex-wrap换行后行间距不受控、align-items:stretch导致高度差异、子项margin叠加、flex拉伸引发视觉错觉；正确用法需清margin、明方向、分设row/column-gap、禁用%单位。