前端技术文章
-
loading="lazy"并非万能，需考虑浏览器兼容性、首屏关键图加载稳定性、srcset/sizes语法正确性、框架属性透传及局部滚动容器限制。460 收藏 -
Rollup默认不处理CSS，需用rollup-plugin-css-only提取或rollup-plugin-styles支持内联/提取/字符串化；后者需正确配置processors数组、监听CSS变更并注意PostCSS兼容性。460 收藏 -
float本身没有对齐属性，因其设计初衷是图文环绕而非布局控制；无法实现justify-content等对齐效果，常见误操作如margin:auto居中无效；Grid是更现代、可控且兼容良好的替代方案。460 收藏 -
<img>不加alt会导致浏览器渲染失败、屏幕阅读器无法播报、SEO权重下降；alt是语义必需项，纯装饰图应设为alt=""，链接中的图片需说明目标。460 收藏 -
不推荐直接用normalize.css的Less版本，因其多为社区非官方移植，常存在变量未解耦、嵌套错乱或混入私有mixin等问题，易致编译报错或样式覆盖；应优先使用官方normalize.css并通过@import(css)引入。459 收藏 -
OKLCH用感知均匀的OKLab空间替代HSL，其L值真实对应人眼明暗响应，而HSL的L仅是RGB极值平均、视觉亮度不一致；oklch()中L必须为0–1或0%–100%，单位不可省略，且与HSL数值不可直接换算。459 收藏 -
是的，shape="poly"坐标按coords中从左到右成对读取为x,y顶点，自动闭合；单位为像素，基于图片固有尺寸；主流浏览器解析逻辑一致，但空格处理有差异；IE有坐标数量截断风险。459 收藏 -
Linaria能消除运行时样式计算，因其在构建阶段静态分析CSS模板字面量，将可求值样式转为独立CSS文件，运行时仅应用类名，不执行任何样式生成逻辑，彻底移除insertRule、动态style标签等同步开销。459 收藏 -
position:sticky失效的根本原因是最近滚动祖先无有效滚动行为；需确保父容器有height+overflow-y:auto或body可滚动，且用margin/padding为吸顶元素预留空间，再通过@supports降级并正确设置z-index。459 收藏 -
defer仅对外部脚本（含src属性）生效，执行于DOM构建完成之后、DOMContentLoaded之前，按HTML顺序执行；内联脚本加defer无效，async与defer不可混用，且defer不推迟下载仅推迟执行。459 收藏 -
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。
2. 适用">
能，但仅Chromium98+支持，Firefox和Safari忽略；它不阻止加载，只降低请求调度优先级，需与loading="lazy"配合使用才有效。459 收藏 -
词法作用域在函数定义时就确定了，变量可访问性取决于代码书写位置而非调用位置；作用域链在函数创建时固化于[[Environment]]中，沿词法嵌套逐级向上查找，与调用栈无关。459 收藏 -
AudioContext.currentTime与video.currentTime不同步因基准不同：前者基于音频硬件时钟，后者依赖渲染帧调度与解码延迟；应以video.currentTime为主时间轴，动态校准偏移并持续监控丢帧。459 收藏 -
列表页滚动到中间，点进详情再返回却回到顶部，这是很多前端项目都会遇到的体验问题。本文从复现现象开始，逐步验证浏览器默认恢复、组件重建和列表数据时机，最后用位置记录和渲染完成后恢复来解决。458 收藏 -
querySelectorAll返回静态NodeList，是调用时DOM状态的只读快照；后续DOM变更不影响其内容、长度或顺序，新增或删除li元素均不改变已获取的NodeList。458 收藏