-
Less的data-uri()函数需静态路径、不支持变量或构建别名,SVG易因BOM/XML声明静默降级,Safari不支持content:url(data:),CSP须配置img-src'self'data:。
-
将垂直菜单改为横向,核心是让li不换行:可用inline-block(需处理空白符间隙)、flex(推荐,干净可控)或float(不推荐,语义错位);注意下拉定位、响应式切换及可访问性。
-
事件循环通过区分宏任务和微任务管理执行顺序,确保异步代码合理调度;2.每个宏任务执行后会清空所有微任务再进入下一宏任务或UI渲染;3.宏任务包括script执行、setTimeout、I/O、UI渲染等,微任务包括Promise回调、queueMicrotask等;4.区分两者可提升性能:微任务保证快速响应,宏任务避免阻塞主线程;5.优化策略包括用Promise处理即时逻辑、用setTimeout/requestAnimationFrame拆分耗时任务;6.排查堵塞需用Performance面板分析长任务
-
desktop-first易踩硬编码坑,因习惯用固定像素值(如100vw、390px、250px)布局,缺乏max-width、box-sizing:border-box、max-width:100%等弹性控制,导致小屏崩坏;正确做法是首行viewport声明、统一盒模型、用clamp()和min()等相对单位,并以max-width媒体查询向下兼容。
-
HTML5通过<audio>和<video>标签原生支持音视频嵌入,配合<source>多格式回退、poster封面、preload预加载及<track>字幕功能,实现跨设备兼容播放。
-
应使用details+summary实现FAQ折叠,它原生支持可访问性、SEO和无需JS的交互;summary仅允许短语级内容,禁用块级标签;需扩大移动端点击区域并修复iOSSafari点击异常。
-
max-width必须配margin:0auto才能居中,因max-width仅限制最大宽度而不控制位置;仅设max-width时内容左对齐、右侧留白,而margin:0auto触发浏览器水平居中逻辑,且避免margin:auto引发的垂直偏移。
-
应使用window.matchMedia异步监听系统主题切换:先获取MediaQueryList实例并立即设置初始UI策略,再通过addEventListener绑定change事件处理函数,避免废弃API;渲染逻辑需解耦、轻量、节流;组件卸载时必须移除监听器;SSR环境需判断window存在性;不支持时降级为localStorage或轮询。
-
scrollBehavior在新DOM渲染完成但未激活前调用,通过读取当前scrollTop捕获用户最后视图位置;返回{x:0,y:0}滚动到顶、{selector:'#id'}滚动到元素、null不滚动、Promise可异步控制。
-
IE10仅支持display:-ms-flexbox,必须前置且不可省略;-ms-flex-pack/-ms-flex-align替代justify-content/align-items;flex需拆解为-ms-flex三值(禁用auto);错位时建议降级为display:table方案。
-
Stylelint和Prettier结合使用可提升CSS代码质量与一致性:Stylelint检查代码规范和潜在错误,Prettier统一代码格式,二者互补。通过安装stylelint、prettier及其集成包,配置.stylelintrc.json和.prettierrc.json,并在VSCode中设置保存时自动格式化,可实现开发时实时校验与格式化;再结合husky和lint-staged在pre-commit阶段拦截不合规代码,确保提交代码符合标准。挑战包括初始配置复杂、规则冲突、团队接受度等,但通
-
input标签无内置状态切换能力,需属性+CSS伪类+JS配合实现;disabled使元素脱离表单流程,readonly仅禁编辑但仍可聚焦和提交;focus/blur需事件监听,验证状态需reportValidity()等主动触发。
-
通过设置父容器为flex布局并使用flex-direction:column,配合margin-top:auto将按钮推至底部,再在按钮容器上应用justify-content实现水平对齐,如居中、靠左或两端分布,适用于表单、弹窗等场景。
-
async函数自动返回Promise,await在async内暂停执行等待Promise完成;多任务需据依赖关系选Promise.all(并行)或链式await(串行),并合理处理错误。
-
Map.prototype.keys()返回惰性迭代器,支持按需消费、条件中断和分页扫描,是实现懒加载式遍历的核心基础,但不减少内存占用且要求扫描期间Map稳定。