-
Promise和async/await是同一异步机制的底层抽象与语法糖;Promise是状态容器(pending/fulfilled/rejected),async函数返回Promise,await暂停执行但不阻塞主线程;错误处理、并发控制和未捕获rejection是关键难点。
-
通过设置初始透明度为0并在动画起始帧设为不透明,配合transform:scale()缩放变化与animation-fill-mode:forwards保持最终状态,可让红方块从不可见、放大态自然缩放入场,避免初始突兀显示。
-
async函数需搭配await才能体现价值,因await可暂停执行等待Promise解决,实现类似同步的异步控制流;单独使用仅自动包装返回值为Promise,无法处理异步等待。
-
小屏幕下网页内容被裁切时,应通过设置overflow-x:auto启用横向滚动,并结合Flexbox或CSSGrid实现自适应布局。1.使用overflow-x:auto允许容器水平滚动,配合min-width防止内容压缩;2.采用display:flex与flex-wrap:wrap使子元素弹性伸缩并自动换行;3.利用grid-template-columns:repeat(auto-fit,minmax(200px,1fr))创建响应式网格;4.避免固定宽度,优先使用fr、%等相对单位;5.在关键容器
-
固定行列尺寸最直接方式是用px/em/rem/vh/vw等单位在grid-template-rows/columns中显式声明,如60px120px80px;repeat(3,80px)更简洁;grid-auto-rows仅作用于隐式行,不影响已定义的显式行;避免minmax()等条件函数,确保真正固定。
-
可通过CSS实现HTML元素隐藏而不删除结构:一、display:none完全移除布局;二、visibility:hidden保留空间;三、opacity:0保持交互;四、position+负坐标移出视区;五、clip-path裁剪隐藏。
-
全局选择器*会污染所有元素的背景和盒模型,导致段落文字“嵌入”导航栏;宽泛标签选择器如ullia匹配过广易误伤;scoped环境下属性选择器易因大小写或注入失败失灵;BEM本质是样式责任边界协议,确保模块隔离与精准定位。
-
是,按钮类名组合能覆盖大部分定制需求,但需遵循基础类优先顺序、避免混用自定义类、优先使用CSS变量而非直接覆盖选择器,并确保:hover等交互态选择器权重足够。
-
应使用CSS重置、Normalize.css、针对性覆盖、CSS自定义属性及禁用用户代理样式等五种方法统一网页默认样式。具体包括设边距为0、引入normalize.css、用!important或高特异性选择器覆盖、定义:root变量、移除outline与默认边框等。
-
JavaScript异步资源加载优化的核心在于避免阻塞DOM构建和页面渲染,从而提升用户体验。1.使用async和defer属性实现脚本异行下载与执行;2.通过动态脚本加载控制资源加载时机;3.利用preload、prefetch、preconnect和dns-prefetch预加载关键资源并建立连接;4.实现图片懒加载减少首屏负载;5.内联关键CSS和JS加速首屏渲染;6.使用WebWorkers将耗时任务移出主线程。这些策略能有效改善FCP和LCP等性能指标,但需注意执行顺序依赖、DOM未就绪、错误处
-
应使用无头浏览器、拦截Ajax接口、注入JS脚本或启用CDP四种方法抓取HTML5动态网页数据:一、Puppeteer模拟真实访问并提取渲染后DOM;二、通过Network面板定位接口直接请求JSON;三、用Selenium/Playwright注入脚本读取Vue/React运行时数据;四、通过CDPWebSocket监听网络响应并执行运行时评估。
-
z-index失效的根本原因是父容器创建了层叠上下文,导致子元素的z-index仅在该上下文中生效;常见触发属性包括opacity<1、transform≠none、filter、will-change、position:fixed/absolute等。
-
小元素在行内布局中易挤在一起,因默认inline元素受字体基线和vertical-align:baseline影响,导致垂直对齐不一致;推荐用inline-block+vertical-align或flex+gap统一控制间距。
-
浮动元素会自动变为块级元素,无论原display值如何;浏览器将其内部计算为display:block,导致inline、inline-block、flex等特性失效,现代布局应优先使用flex或grid。
-
图标与文字在CSS中无法对齐的根本原因是未理解line-height(控制行高与基线)和vertical-align(控制行内元素相对基线偏移)的协同机制;推荐用inline-block+line-height+vertical-align组合或flex布局解决。