前端技术文章
-
fr是剩余空间的份数，先扣除固定尺寸再按比例分配；与固定单位并存时后者优先占位；需配合minmax()、媒体查询等实现响应式和兼容性。107 收藏 -
DOM是浏览器接口而非JavaScript内置部分，根节点为document（nodeType=9），非html；childNodes含所有节点类型，children仅含元素节点；getElementById快但ID易重复，querySelector更安全灵活；innerHTML会重建DOM并丢失事件，textContent仅改文本且防XSS。318 收藏 -
最可靠方案是将404.html放根目录并配置服务器返回真实404状态码；Apache用ErrorDocument，Nginx用error_page，Vercel/Netlify自动识别但需命名规范，GitHubPages仅支持根目录404.html且Jekyll需禁用渲染；页面中禁用跳转、确保标题含“404”、提供首页和上一页导航、避免无效链接；本地双击无效，须HTTP环境测试，且页面资源路径必须有效。169 收藏 -
X-UA-Compatible仅用于IE存量系统维护，必须置于<head>最开头（无任何前置内容），否则IE直接忽略；推荐值为IE=edge，优先使用HTTPHeader方式发送。176 收藏 -
console.log是轻量调试工具，需用标签、分组、对象包裹提升可读性；console.table适合结构化数据对比；console.trace和console.time分别用于追踪调用栈和性能计时；注意日志非原子性，需快照避免引用误读。362 收藏 -
触发BFC才是解决右侧内容被遮挡的根本方法，因其让容器感知浮动并重新布局；margin-left仅适用于固定宽度的简单场景，且无法解决父容器塌陷等问题。479 收藏 -
移动端图标颜色不随文字变化，主因是SVG引入方式错误、内联fill属性覆盖、父容器未显式设置color或伪元素限制；正确做法是用内联SVG并清除所有硬编码颜色，配合fill:currentColor级联控制。250 收藏 -
<p>HTML注释必须用<!---->包裹，不可嵌套、不可在标签内或DOCTYPE前，JS/CSS中无效，服务端模板需注意剥离风险，调试时可能影响布局。</p>142 收藏 -
Vue3响应式系统基于Proxy实现，通过track收集依赖、trigger精准触发更新，依赖在副作用执行时隐式注册，仅更新关联组件，避免冗余渲染。237 收藏 -
必须用position:fixed，因其天然锚定视口、不随滚动偏移；absolute会随父容器滚动消失，sticky无法线性映射滚动比例，且fixed兼容所有现代浏览器。217 收藏 -
用Map存储函数引用是轻量级元编程，关键在于安全存储、快速查找和稳定扩展；需依场景选容器，统一接口封装函数，并分离注册与执行流程。498 收藏 -
BroadcastChannel与MessagePort不能直接配合使用，因前者依赖结构化克隆算法，而后者不可克隆；正确做法是用BroadcastChannel广播通知，再通过MessagePort或SharedWorker建立专属数据通道。316 收藏 -
本文介绍一种比串联多个正则表达式更可靠、更可维护的方式——使用DOMParser解析HTML字符串并提取innerText，彻底避免正则处理标签带来的边界问题与安全隐患。123 收藏 -
JavaScript中处理Unicode需区分字符、码元、码点；ES6前按UTF-16码元操作易出错，ES6起支持基于码点的length计算（如扩展运算符）、遍历（for...of）和正则（/u标志、\p{Emoji}）。223 收藏 -
可替换元素是浏览器不完全依赖HTML内容、而由外部资源或内置UI控件决定其尺寸与外观的元素。如<img>渲染图片、<video>启用播放器、<inputtype="checkbox">绘制复选框，其行为绕过标准CSS盒模型。131 收藏