前端技术文章
-
CSS加载顺序决定样式覆盖结果，需将基础样式置于head最前，避免@import和动态插入导致的竞态；构建时须显式控制chunk优先级并验证HTML中link顺序。378 收藏 -
rgba()和hsla()可实现背景半透明而文字不透明，alpha值范围为0–1，仅作用于背景层；opacity会使整个元素及子元素变透明，不可取。181 收藏 -
准备HTML代码并保存为.html文件，如index.html；2.使用文本编辑器编写代码，推荐VSCode，保存时选择UTF-8编码；3.双击文件或右键用浏览器打开，可实时修改并按F5刷新查看效果。394 收藏 -
IDBCursor是IndexedDB中逐条遍历对象存储数据的核心机制，需通过openCursor()启动，手动调用continue()推进，支持正向、反向及键范围筛选，避免内存溢出。256 收藏 -
WebLocksAPI不能替代IndexedDB事务，但它是唯一能跨标签页串行化写操作的原生机制；必须将openDB、事务创建、put()和awaittx.done全部包裹在navigator.locks.request()回调中，否则锁提前释放会导致静默覆盖。494 收藏 -
TreeShaking依赖ES模块的静态export/import，要求模块使用命名导出、避免动态导入和副作用，且打包配置需启用相关优化，否则无法安全消除未使用代码。302 收藏 -
V8内联函数的关键是安全性而非调用频次：add因纯函数、无副作用、AST简单而被内联；computeWithSideEffect含try/catch、eval或动态绑定等破坏控制流可预测性的结构，导致V8放弃内联。253 收藏 -
flex-grow对absolute元素无效，因其已脱离flexformattingcontext，不再为flexitem，故flex-grow、align-self等属性被忽略；需用relativewrapper承担伸缩职责。172 收藏 -
原生HTML不支持双日历日期范围选择，因<inputtype="daterange">不存在且type="date"仅支持单日期；必须用JavaScript自建或引入flatpickr等库实现联动、高亮与校验。265 收藏 -
canvas.width/height设绘图缓冲区分辨率，style.width/height仅控制CSS显示尺寸；二者不一致会导致缩放失真；正确做法是按devicePixelRatio动态设置缓冲区并用CSS匹配显示尺寸。326 收藏 -
required仅校验非空，不触发pattern等自定义规则；pattern默认不校验空值，需手动干预验证流程，推荐用submit事件拦截+checkValidity()+reportValidity()统一控制。462 收藏 -
Intl对象是浏览器和Node.js原生国际化API，无需第三方库即可精准适配全球日期、数字、货币等本地化格式，基于ICU实现高性能格式化。358 收藏 -
可视化性能时间线是性能问题的“X光片”，将耗时、阻塞、异常调用转化为可定位、可对比、可归因的视觉线索，支撑精准归因、跨层关联、小步重构与流程固化。101 收藏 -
核心是继承HTMLElement类并用customElements.define()注册；必须调用super()，通过observedAttributes和attributeChangedCallback响应属性变化，利用connectedCallback等生命周期钩子，结合attachShadow实现封装。419 收藏 -
内联样式仅限邮件模板、SSR首屏关键样式等不可替代场景，其余必须用外部样式表；因其特异性最高但破坏可维护性，混用时会覆盖伪类、媒体查询等所有CSS规则。434 收藏