前端技术文章
-
Flex布局需配合主轴/交叉轴控制、flex简写隐式行为等属性才能生效：仅设display:flex子项不会等宽或居中；flex:1以0为基均分空间，flex:auto以内容宽为基易溢出；卡顿时宜用flex:0050%替代width:50%。281 收藏 -
无障碍树在ChromeDevTools中称为Accessibility标签页，位于Elements面板右侧，需手动点击展开并选中元素后查看。332 收藏 -
RGBA颜色通过红绿蓝分量和阿尔法通道控制透明度，alpha取值0到1，常用于半透明背景、遮罩层和文字阴影等场景，相比十六进制透明更直观且兼容性好。358 收藏 -
表单提交必须先调用event.preventDefault()阻止默认行为再校验，否则校验无效；邮箱用/^\S+@\S+.\S+$/、手机号用^1[3-9]\d{9}$即可；正则前需trim()；密码等业务规则前后端均需校验；实时校验要防抖；blur时必校验；错误提示须绑定具体字段并支持无障碍。363 收藏 -
DecompressionStream仅异步解压二进制数据，输出ArrayBuffer或Blob，不还原DOM；需先序列化HTML再解压，再用DOMParser或innerHTML安全重建节点，并手动恢复状态与事件。171 收藏 -
箭头函数不是语法糖，它与普通函数在this绑定、不可new调用、无arguments三方面存在本质区别，直接替换易引发隐性bug。105 收藏 -
闭包不是IndexedDB游标内存压力的直接原因，真正问题是游标遍历中意外长期持有大对象引用；需检查onSuccess回调是否缓存value、事务生命周期是否错配、continue()是否被阻断、以及批量处理时是否过度暂存数据。363 收藏 -
WebWorker仅对计算型长任务有效，不能加速DOM操作或网络请求；适合图像处理、加密等CPU密集任务，50ms以上才值得抽离；需用transferable避免内存翻倍；路径和调试需注意独立上下文；移动端内存受限需主动降级和清理。127 收藏 -
Pragma的meta标签在所有主流浏览器中均被忽略，仅HTTP响应头中的Pragma在HTTP/1.0客户端或与Cache-Control共存时才可能生效，但实际起效的是Cache-Control。207 收藏 -
blockquote用于长篇独立引用，q用于短小内联引用；2.前者视觉缩进并常配cite说明来源，后者自动添加引号；3.根据引用长度和位置选择标签；4.语义化提升可访问性与SEO。333 收藏 -
FileReader是浏览器提供的用于读取本地文件内容的API，通过结合<inputtype="file">获取用户选择的文件后，使用readAsText、readAsDataURL等方法异步读取文本、图片预览或二进制数据，并在onload回调中处理结果，同时需监听onerror处理异常，适用于文本解析、图片预览等场景。406 收藏 -
HTML中ul和ol嵌套合法但需严格遵循结构：子列表必须作为li的子元素，CSS控制编号与缩进，counter实现多级序号，屏幕阅读器不读CSS生成编号。318 收藏 -
JavaScript轻量图表库核心是数据映射+图形渲染：Canvas适合高频重绘（如实时折线图），需手动坐标转换和clearRect重绘；SVG适合交互丰富图表，基于DOM节点，支持事件、viewBox缩放和无障碍属性。464 收藏 -
加will-change:transform反而更闪，因强制图层提升导致合成层重建、纹理丢弃及误判重绘；应禁用该声明，改用图片预加载、固定容器尺寸、visibility:hidden等方案。487 收藏 -
history.pushState()不触发页面刷新，因它仅修改URL和历史栈而不发起新导航请求，适用于SPA无刷新路由；其state参数为可序列化对象，title参数多数浏览器忽略，url须同源；popstate仅在用户后退/前进或调用back()/forward()时触发，且需尽早绑定监听。458 收藏