-
:first-child是CSS伪类,匹配父元素下第一个子元素且标签名与选择器一致;它按位置匹配,而非类型,若首个子元素非目标标签则不生效。
-
可通过监听fullscreenchange事件并检查document.fullscreenElement来准确判断全屏状态,据此动态调整UI;全屏API须在用户手势中调用,退出时用document.exitFullscreen()并处理Promise;CSS可配合:fullscreen伪类和class切换实现响应式适配。
-
动画不播放主因是触发条件未满足,如@keyframes未定义、display:none阻断或选择器不匹配;卡顿源于layout/paint开销,应优先用transform/opacity;requestAnimationFrame需基于时间戳计算deltaTime;animationend仅在自然完成时触发。
-
:checked伪类是CSS中唯一可被用户主动触发且能维持的布尔状态,仅适用于checkbox/radio输入框,配合兄弟选择器实现无JS切换样式;需确保input位于目标前、正确绑定label、用非display:none方式隐藏,并注意~与+的选择范围差异。
-
移动端click事件300ms延迟源于浏览器为识别双击缩放而设的等待机制;禁用缩放(如viewport中设user-scalable=no)可消除延迟,但牺牲双指缩放功能;现代浏览器在width=device-width+initial-scale=1.0下部分优化延迟;FastClick需挂载document.body实现事件委托;自定义tap必须判断touchmove以区分点击与拖拽。
-
Reflect.apply()是Function.prototype.apply()的函数式、不可篡改封装,强制要求目标函数、this值和数组形式参数,不支持隐式绑定或展开参数,严格模式下null/undefined保持原值,非严格模式下转为全局对象。
-
柯里化将多参函数转化为单参函数链,组合通过pipe或compose连接函数,实现逻辑清晰、可复用的函数式编程。
-
正则表达式在JavaScript中性能瓶颈主因是灾难性回溯,而非语法复杂度;需警惕嵌套量词、重叠分支和贪婪后必配等高危模式,优先使用原子组(?>...)、占有量词++/*+/?+(ES2018+)、锚点、否定字符类,并结合预校验、分块匹配与性能监控优化。
-
HTML文档大纲由语义化标题标签<h1>–<h6>的层级与顺序决定,必须连续嵌套、避免跳级,配合<section>/<article>等分组元素形成子大纲,并通过axe等工具验证真实解析结构。
-
中文实现两端对齐需同时设置text-align:justify和text-justify:inter-character,且容器为块级、文本至少两行;末行对齐需伪元素干预,兼容性受限于浏览器版本。
-
z-index失效主因是父容器创建了层叠上下文或子元素未设非static定位;需检查opacity、transform等触发属性及position值,并用DevTools验证stackingcontext。
-
line-clamp在Firefox中不生效,因其原生仅被WebKit/Blink内核支持;需同时满足display:-webkit-box、-webkit-box-orient:vertical和line-clamp:N三条件才在Chrome/Safari/Edge生效。
-
最合规做法是用<a>标签包裹来源名称并指向原始页面。需添加target="_blank"和rel="noopenernoreferrer"确保安全与体验,避免纯文本、注释或title属性等无效方式,链接文案应明确包含网站名与原文标题,且必须真实可达。
-
应在页面明确会用到但不立即加载的第三方域名时添加<linkrel="dns-prefetch">,如懒加载脚本、GoogleFonts、统计SDK等;避免为同源域名或未确认调用的域名添加,且href必须用协议相对URL(如//cdn.example.com),置于<head>中<metacharset>和<title>之后、首个外部资源之前。
-
最可靠方法是用oninput事件配合正则实时过滤非数字字符并每4位加空格:先replace(/\D/g,'')清除非数字,再match(/.{4}/g)切分,最后join('');需用setSelectionRange修复光标跳变问题。