-
:empty选择器用于匹配不含任何子节点的元素,包括文本、空格、标签或注释。例如,仅<divclass="box"></div>会被.box:empty选中,其余含空格、子标签或文字的均不匹配。需注意换行、缩进和注释也会导致元素非空,常用于隐藏未填充容器或表单验证等场景。
-
JavaScript优化动画的核心在于理解事件循环并使用requestAnimationFrame(rAF)。①动画卡顿的根源是主线程被阻塞,导致浏览器无法及时重绘;②事件循环分为宏任务和微任务,微任务优先级更高;③rAF能与浏览器重绘同步,确保动画在下一帧前执行;④将视觉更新放入rAF回调,非视觉任务拆分或移至WebWorkers;⑤避免使用setTimeout或setInterval,因其执行时机不确定,易导致掉帧。通过合理调度任务,可实现流畅动画。
-
原生CSS响应式适配工作量大,因需手动写@media断点、测多设备参数、处理老浏览器flexfallback及iOSSafariviewportbug;Tailwind通过sm:、md:等前缀在构建时生成真实CSS规则,实现“声明即适配”;Bootstrap5以container-fluid和g-3等现代工具类提供开箱即用的栅格与间距方案;但字体、图片srcset、表单样式等细节仍需手动处理。
-
gridgap仅控制网格项间间隙,不影响容器边缘;需额外设置padding实现边缘留白,不可用margin替代。
-
addEventListener的三个选项capture、once、passive可精确控制事件行为:capture指定捕获阶段触发,once确保回调仅执行一次,passive提升滚动性能;合理使用可优化代码性能与维护性。
-
子元素margin会让父元素“被撑开”是因margin塌陷:子元素垂直外边距与父元素边界合并;触发BFC(如display:flow-root)可彻底解决,语义清晰且无副作用。
-
最稳定方案是用Puppeteer截取完整滚动页面PNG再转PDF:先page.screenshot({fullPage:true}),再用img2pdf转单页PDF;若直接page.pdf(),需设大height并禁用页眉页脚。
-
实现选项卡功能有五种方法:一、原生HTML+CSS+JavaScript;二、Bootstrap5插件;三、HTMLDetails/Summary元素;四、Tabby轻量JS库;五、Vue.js动态绑定。
-
__proto__指向实例的原型对象,prototype是函数独有的属性;实例方法调用依赖原型链委托查找,如p.sayHi()会依次查找p→Person.prototype→Object.prototype。
-
Object.assign会复制可枚举属性和Symbol键并执行getter,而扩展运算符仅复制字符串键的可枚举属性且保留getter/setter不执行,因此在处理访问器或Symbol时行为不同。
-
动态导入与代码分割通过按需加载提升性能。1.动态import()实现运行时条件加载,适用于按钮触发、路由切换等场景;2.构建工具据此拆分代码,生成独立chunk,支持路由分离、vendor提取;3.配合React.lazy和Suspense优化异步组件加载;4.preload/prefetch提示浏览器预加载资源,减少等待;5.魔法注释控制chunk行为,合理设计命名与缓存策略可进一步优化体验。
-
WebWorkers是浏览器提供的隔离式后台线程机制,非JS多线程;必须用独立同源JS文件创建,通过postMessage传递数据(结构化克隆),大数组用Transferable零拷贝;Worker内无DOM、无localStorage;需显式terminate()或self.close()防内存泄漏。
-
audio的muted是布尔属性,仅存在即为true,不写为false;JS中audio.muted可读写布尔值,但需用户手势触发才能取消静音。
-
错误边界是React类组件通过staticgetDerivedStateFromError或componentDidCatch捕获子组件JavaScript错误的机制,用于渲染降级UI和记录日志,防止应用崩溃,但无法捕获异步代码、事件处理器等错误。
-
本文介绍在Vue.js中优雅等待多个异步API请求全部完成后再渲染表单界面的方法,避免因部分数据未就绪导致UI错误或空白,重点讲解Promise.all、响应式更新与强制重渲染的适用场景及最佳实践。