-
JavaScript模块打包本质是按依赖关系组织分散代码生成浏览器可运行产物；Webpack“先打包再运行”，Vite“边运行边编译”，开发启动与HMR性能、生产构建路径、配置复杂度及适用场景均有显著差异。
-
答案：前端i18n通过键值映射实现多语言切换，利用语言包对象存储不同语言文本，通过当前语言标识获取对应翻译内容；结合data-i18n属性标记可翻译元素，使用t()函数动态替换文本，并可通过setLanguage()更新界面语言；自动读取navigator.language判断用户偏好，支持插值和模块化扩展，适用于SPA和静态站点的国际化需求。
-
最快实现图片模糊用CSSfilter:blur()，语法为filter:blur(3px)，单位必须带px，推荐范围0.5px–8px，动态控制宜改style.filter或切CSS类。
-
Relative定位先占位再偏移，原位置保留；absolute参照最近已定位祖先，丢失则回退视口；fixed不随滚动容器移动，局部固定优先用sticky；z-index仅在同层叠上下文内生效，opacity等属性会隐式创建新上下文。
-
视频响应式需设max-width:100%和height:auto保比例，现代用aspect-ratio替代padding-top，object-fit控制填充方式，移动端须muted+autoplay+playsinline三者齐备。
-
HTML中Tab键焦点切换异常的修复需四步：一、正确设置tabindex（0参与默认流，负值仅脚本聚焦，避免正数）；二、确保元素可聚焦且CSS未禁用outline或隐藏；三、按语义调整DOM顺序，避免视觉与结构错位；四、必要时用JS拦截Tab事件并手动控制焦点。
-
Grid容器只需最外层设display:grid，内部用grid-column/row定位；避免冗余嵌套、滥用margin和subgrid，优先用gap、grid-template-areas及align-self等高效方案。
-
Word中HTML图片旋转错乱源于EXIFOrientation字段被误处理，根本解决法是清除该元数据并物理重排像素：用exiftool执行“exiftool-Orientation=1-n-ofixed.jpgoriginal.jpg”，确保Orientation值为1且视觉方向正确。
-
SVG可通过内联、img标签、object标签或CSS背景图嵌入HTML；内联和object支持CSS与JavaScript控制样式及交互，img仅用于静态显示；通过width、height和viewBox实现响应式；JavaScript可操作内联SVG实现动态效果，需根据交互需求选择合适方式。
-
text-shadow是HTML5唯一原生支持的跨浏览器发光文字方案，通过多层零偏移、递增模糊半径的阴影叠加实现均匀光晕效果，需兼顾对比度、性能与可访问性。
-
使用百分比宽度可实现响应式布局，元素宽度随父容器变化，配合box-sizing:border-box和媒体查询优化，适用于栅格系统、图片容器等场景。
-
before()方法用于在被选元素前插入内容，作为兄弟节点出现；2.可插入HTML字符串、DOM元素、jQuery对象等；3.与prepend()（内部插入）和after()（后置插入）不同，before()在外部前置内容。
-
使用transition属性设置按钮悬停动画，推荐指定具体属性如background-color和transform以优化性能；2.通过:hover伪类定义悬停样式，实现颜色变化和translateY上移效果；3.添加box-shadow过渡增强立体感，从默认浅阴影变为悬停时深阴影；4.避免在:hover中定义transition，优先使用transform和opacity减少重排，确保动画流畅并适配移动端交互。
-
PSD文件无法直接导入HTML5编辑器，必须经Photopea导出为JSON+Base64PNG，再通过JavaScript加载并手动创建DOM元素还原图层，文字属性需额外转换补全。
-
本文讲解如何正确遍历JavaScript中的嵌套对象，提取每一项中特定键（如numberOfDrinks）的数值，并高效计算其总和，避免常见索引错误。
