-
微任务主要由Promise回调、MutationObserver和queueMicrotask产生。1.Promise的.then()、.catch()、.finally()会在状态变化后将回调放入微任务队列;2.MutationObserver用于监听DOM变化,其回调作为微任务批量处理以优化性能;3.queueMicrotask是ES2021新增API,允许开发者显式安排微任务。这些微任务会在当前宏任务执行完毕后立即全部执行,确保异步操作顺序可控并优化UI更新,从而提升代码执行的一致性和性能表现。
-
本文讲解如何在页面刷新后仍能准确判断DOM元素是否可水平滚动,并动态显示左右导航箭头,解决useEffect初始检查失效的问题。
-
ReactRouter是React应用实现客户端路由的核心库,通过路径与组件映射实现无刷新跳转;v6+推荐createBrowserRouter+RouterProvider初始化,用Link和useNavigate导航,Outlet支持嵌套路由与布局复用。
-
为HTML步骤向导添加可访问性的关键技术包括:1.使用语义化HTML结构,如<ol>和<li>定义步骤顺序,并用<nav>和标题标签增强导航信息;2.应用ARIA属性,如aria-current="step"标明当前步骤,aria-live区域提供动态反馈;3.管理键盘焦点,确保步骤切换时焦点逻辑清晰并自动定位到新步骤的起始元素;4.错误处理中使用aria-invalid和aria-describedby明确提示错误信息;5.通过键盘测试、屏幕阅读器体验、自动化工具及真
-
深拷贝与浅拷贝的核心区别在于数据独立性,浅拷贝仅复制顶层属性,嵌套对象共享引用,修改会影响原对象;深拷贝递归复制所有层级,实现完全独立。常用浅拷贝方法包括扩展运算符、Object.assign()和slice(),适用于简单复制;深拷贝可使用JSON.parse(JSON.stringify())处理纯数据对象,但会丢失函数、undefined、Symbol,且无法处理循环引用;推荐使用structuredClone()或手写递归函数,结合WeakMap解决循环引用问题,确保复杂结构的安全复制。
-
浮动与动画结合可实现轻量级视觉效果,如产品卡片渐入。通过float布局元素并用animation添加入场动效,配合clearfix防止塌陷,适用于简单多列展示场景。
-
柯里化是参数分步求值的转换策略,非函数组合本身,但使多参函数适配compose链所需的单参数要求;需基于fn.length判断参数个数,注意this绑定、箭头函数无length、rest参数限制及真实场景中的this和异步语义问题。
-
Flex布局是一维模型,适合单向线性布局如导航栏、表单对齐、卡片列表和居中;不适合二维网格布局,因无法定义网格线或区域名、不支持天然跨行跨列、响应式调整需重写嵌套结构、缺乏单元格级对齐能力。
-
通过命名网格线可直观控制CSSGrid布局位置。定义时用[名称]为行列线命名,如[start]100px[main-start]1fr[main-end],支持多名称与语义化命名;项内使用grid-column:main-start/main-end定位;结合repeat(3,[col]1fr[gap])可重复命名并自动编号,提升可读性与维护性。
-
opacity属性用于控制元素整体透明度,取值0到1,可实现淡入淡出、遮罩层等效果;注意其影响所有子元素且不脱离文档流,若仅需背景透明应使用rgba或hsla。
-
content-box是什么?就是浏览器“默认怎么算宽高”当你没写box-sizing,浏览器就用content-box——这不是某种特殊模式,而是CSS的原始设定。它意味着:你写的width:200px,只管内容区那块空白,不管padding和border。哪怕加了padding:10px和border:3px,元素在页面上实际占的宽度还是:200+10×2+3×2=226px。为什么content-box容易导致布局错乱?常见错误现象:设了
-
使用Flexbox结合媒体查询可实现响应式页脚对齐。1.设置display:flex,用justify-content和align-items控制主轴与交叉轴对齐;2.在小屏下通过mediaquery改为column布局,居中对齐提升可读性;3.多区域页脚采用嵌套flex容器,配合gap和flex-wrap实现自适应;4.注意IE兼容性、避免固定宽度,并辅以text-align优化文本对齐,确保在不同设备上均良好显示。
-
Flex布局可彻底解决导航栏错位问题:需父容器设display:flex并重置float、margin等旧样式,统一字体行高,控制子项尺寸与换行,确保基线对齐。
-
边框默认占用额外空间是因为content-box模型下width/height仅含内容区,padding和border会额外增加尺寸;改用box-sizing:border-box可使设定宽高包含padding和border,内容区自动收缩,margin不受影响。
-
JSON.parse(JSON.stringify(obj))仅适用于纯数据对象,会丢失函数、undefined、Symbol、Date、RegExp等类型,且不支持循环引用;可靠替代方案包括structuredClone(现代环境)、Lodash的_.cloneDeep(兼容老环境)或自定义递归实现。