-
现代浏览器禁止无用户交互的视频自动播放,尤其有声视频;需静音+用户交互后JS调用play()并降级处理。
-
JavaScript地理定位API必须经用户明确授权才能使用,首次调用前可用permission.query()检查状态,需在用户触发相关功能时说明用途并请求权限,拒绝后应提供手动输入等降级方案,且位置数据须遵循最小必要原则处理。
-
应添加transition属性,如transition:transform0.5sease-out,并为常态设置transform:rotate(0deg),否则因缺失过渡声明导致瞬时跳变或卡顿。
-
应使用rgba()或hsla()设置背景透明度,而非opacity属性;因opacity会使整个元素(含文字、子元素)统一变透明且不可逆,而rgba()仅作用于背景色,可确保文字保持100%不透明。
-
用position:fixed+transform居中是最稳妥的方案,需同时设置left:50%、top:50%和transform:translate(-50%,-50%),因transform的50%基于自身宽高,不受视口尺寸影响,兼容IE9+,且响应式宽度下仍精准居中。
-
AsyncIterator是JavaScript中用于异步生成值的迭代器协议,其next()方法必须返回Promise<{value,done}>;而普通Iterator的next()同步返回{value,done},因此AsyncIterator需用forawait...of遍历。
-
CSS引入失败需四步排查:路径是否正确(优先绝对路径)、Network中状态码与Content-Type是否为200/text/css、link是否在head中且未被JS移除、选择器是否匹配或被覆盖。
-
PerformanceMarker可用于标记代码时间点以测量交互延迟,通过performance.mark和measure记录开始结束时间并计算耗时,帮助定位性能瓶颈;结合React或Vue生命周期可监控组件渲染性能,同时支持自定义指标如首屏时间;配合ChromeDevTools、Lighthouse、WebPageTest及APM工具可全面优化用户体验。
-
函数声明会被提升,可在声明前调用;函数表达式仅变量名提升,let/const声明的函数不提升且存在暂时性死区,需先声明再调用以避免错误。
-
transition必须写在非hover的基础样式中才能生效,因为它需同时控制进入和离开的过渡;支持过渡的属性有限,transform和opacity最安全高效。
-
HTML5中精确控制元素尺寸需用CSS,主要方法有五种:一、width/height设内容区尺寸;二、max-width/min-height设尺寸边界;三、box-sizing:border-box含padding与border;四、vw/vh依视口动态缩放;五、CSS变量配合calc()灵活计算。
-
答案:利用CSS媒体查询结合Flexbox或Grid布局,通过视口元标签、移动优先设计及容器查询等技术,实现表单在横竖屏下的自适应布局与输入体验优化。
-
float让父容器高度为0是因为其脱离文档流,父容器计算高度时忽略浮动子元素;正确清除需在浮动后添加处于文档流中的块级元素,或使用display:flow-root创建BFC。
-
hover配合transition实现属性变化的平滑过渡,需在非hover状态定义transition;复杂动画则需@keyframes+animation;常见失效原因包括overflow裁切、display切换、伪类顺序错误及移动端无hover支持。
-
:only-of-type只判断同级中同标签是否唯一,无视class等属性;真正需要“唯一某类元素”时应改用:is(.item):not(.item~.item)或JavaScript检测。