-
HMR通过模块热替换与框架协作保留应用状态。当代码修改时，Webpack等工具触发更新，ReactFastRefresh或VueHMR会尝试用新代码替换旧模块而不卸载组件实例，从而保留useState、data等局部状态，并重新渲染视图。该机制依赖模块接受更新、内存中代码替换及框架层协调，如React保留函数组件状态、Vue更新选项对象并维持响应式数据。但涉及全局状态（Redux/Vuex）、Context变更、副作用清理、key变化或高阶组件时，可能触发回退至重挂载或整页刷新，导致状态丢失。因此，HMR
-
本文详解如何在JavaScript中可靠获取元素原始定义的CSS百分比宽度（如width:60%），解决el.style.width为空、getComputedStyle(el).width返回像素值、以及基于clientWidth手动换算误差大等常见痛点。
-
:empty不生效是因为它只匹配无任何子节点（含空格、换行等文本节点）的元素；常见于HTML中存在空白符导致生成#text节点，需通过v-if或innerHTML=''确保结构为空。
-
跳表通过多层索引实现高效查询，从最高层开始逐层跳跃并缩小范围，平均时间复杂度为O(logn)。其核心参数包括晋升概率p（通常0.5）、最大层数max_level（约log_{1/p}N）、高质量随机数生成器及合理节点结构，确保查询、插入、删除的高效平衡。相比平衡二叉树，跳表实现更简单，并发性能更优，广泛应用于Redis、LevelDB等系统。
-
border-radius圆角不生效的主因是浏览器渲染逻辑：边框本身不被圆角裁剪，仅内容区（含背景）受其影响；需确保border为solid、宽度适中、background-clip:padding-box，并注意父容器overflow和box-sizing的间接干扰。
-
最稳妥方案是用display:flex实现三栏布局，左右固定宽（flex:00宽度），中间自适应（flex:1），兼容性好、语义清晰、响应式隐藏简单。
-
JavaScript数据缓存需按需存储、合理淘汰、安全读写：内存缓存用Map+时间戳+LRU；localStorage需序列化、加版本号、禁存敏感信息；IndexedDB和CacheAPI适用于大容量或离线场景；策略应匹配业务节奏，注重一致性与隔离性。
-
flex:1在含文字列表中无法等宽，因flex-basis:0+flex-shrink:1导致长文本撑开后压缩失衡；可靠方案是flex:00calc(100%/n)配合min-width:0和white-space控制换行或截断。
-
用width/height做加载动画卡顿是因为触发重排，应改用transform:scale()并配合will-change或translateZ(0)提升合成层，确保初始态与0%帧一致，Safari中避免scale(0)改用scale(0.001)，并通过class切换控制启停。
-
HTML5页面跨浏览器兼容性测试需综合使用四类方法：一、在线平台（如BrowserStack）进行多版本实时测试；二、本地部署多浏览器手动验证控制台报错与语义标签解析；三、嵌入API检测脚本动态判断特性支持；四、通过Selenium自动化断言校验核心功能。
-
正确配置viewport和使用标准media查询可解决响应式网页在不同浏览器下的显示差异，确保跨浏览器一致性。
-
q标签不渲染引号的主因是CSSquotes属性未生效或被重置；需确保quotes正确设置、未被none/initial/all:unset覆盖，且提供足够引号对以支持嵌套，老浏览器应改用伪元素硬编码。
-
多行文字和图标底部对齐失效的根源在于align-items作用范围错误；应将图标与文字置于同一grid容器并设align-items:end或baseline，而非在父容器设置后又用align-self冲突。
-
用记事本编写HTML代码并保存为.html文件，选择“所有文件”类型和UTF-8编码，双击即可在浏览器中查看网页效果。
-
npm是Node.js默认包管理器，yarn和pnpm注重性能与确定性，cnpm已被npmmirror.com取代；新手用npm，中大型团队推荐yarn或pnpm。
