前端技术文章
-
宏任务执行完后必须清空全部微任务队列，之后才取下一个宏任务；微任务在宏任务出口处强制、不可打断地执行完毕；Promise.then与queueMicrotask同属一轮微任务，按序执行。313 收藏 -
Flex容器用gap动画会抖动是因为浏览器对gap的transition会触发整行重排重绘。正确做法是用margin、transform或伪元素模拟间隙，或确保显式声明gap、使用will-change:spacing并避免布局截断。232 收藏 -
@media(orientation:landscape)单独使用效果差，因它仅检测方向而不感知视口高度骤减、vh抖动、fixed偏移及系统UI干扰等真实问题。292 收藏 -
使用HTML的<ul>和<ol>标签分别创建无序和有序列表，结合<li>定义列表项，通过CSS的list-style-type调整符号样式，设为none可移除默认标记，再用margin和padding控制间距与缩进，提升内容可读性。345 收藏 -
preload失效主因是未严格匹配as属性、缺失crossorigin、或未将资源接入渲染流程，如字体需as="font"+crossorigin，CSS需onload切换rel，否则仅下载不生效。420 收藏 -
React是一个由Facebook开发的JavaScript库，用于构建动态、可复用的UI组件；其核心是组件化、虚拟DOM和数据驱动视图，专注高效、可维护地渲染用户界面。263 收藏 -
grid-template-areas本身不控制外层居中，需外层容器设display:grid+height:100vh+place-items:center；内部区域内容居中须单独对grid-item设置place-items或flex对齐。397 收藏 -
解构reactive对象会导致响应式丢失，因为取值是原始副本而非Proxy代理；toRefs将每个属性转为ref，使解构后仍可响应更新。406 收藏 -
:placeholder-shown仅在placeholder文本实际可见时生效，非仅存在placeholder属性；失效原因包括value非空、placeholder为空字符串、聚焦、type="number"初值为0等。158 收藏 -
用requestAnimationFrame实现真暂停需维护isPaused状态，仅在非暂停时执行更新与渲染；避免cancelAnimationFrame，禁用按钮防连点，暂停UI用visibility:hidden+pointer-events:none保持布局，Canvas暂停时应clearRect再绘制菜单。267 收藏 -
HTML5无内置淡入动画，需CSS（opacity/visibility/transition）与JS配合实现；图片加载完或滚动进入视口时触发动画更合理，避免重排卡顿。329 收藏 -
spellcheck="true"：启">
spellcheck属性仅提示浏览器允许拼写检查，不修正错字、不阻止提交、不校验语义；其生效需满足可编辑元素（如text/textarea/contenteditable）、用户正在输入、系统拼写开关开启、无autocorrect等属性压制等条件。292 收藏 -
animation-delay不控制停留而是决定动画开始时间；停留靠animation-duration与关键帧中静止段占比实现，如30%–70%设相同位置可获40%时长的停留效果。239 收藏 -
原型委托实现Mixin的核心是通过__proto__或Object.create建立查找链，使对象在属性缺失时委托给mixin对象，不复制代码、不污染原型、轻量灵活；需注意引用类型共享问题。274 收藏 -
CSS未生效需检查引入方式与路径：一、外链用link标签，确保路径正确且文件存在；二、内嵌用style标签，语法须规范；三、内联用style属性，注意优先级；四、统一验证文档编码、协议限制、网络加载及选择器匹配。195 收藏