前端开发
最新文章
CSS的text-orientation需配合writing-mode（如vertical-rl）使用。中英混排推荐mixed，汉字直立、字母旋转，避免upright导致字母难以阅读。竖排需调整line-height并选用NotoSerifCJKSC等字体。Safari渲染有偏差，上线前务必在iOS真机验证。
在React中遍历对象属性及嵌套数组时，应使用map而非forEach，因forEach不返回新数组。需显式return、添加唯一key，并用Array isArray判断是否为数组。统一用map确保每层返回可渲染的JSX节点，避免渲染缺失。
在Angular中，子组件直接作为SVG子元素会因命名空间不兼容导致渲染失败。应将子组件改造为属性指令，注入到``或``内部，使用`svg:`前缀和`[attr href]`绑定，确保SVG元素在正确命名空间动态生成，无需修改ViewEncapsulation。
深拷贝在状态管理中保障不可变性，切断嵌套引用，防止状态意外修改；支撑响应式机制准确触发重渲染；适配纯函数更新与时间旅行调试；规避传统方法导致的函数、循环引用等类型丢失问题。
WeakMap是JavaScript存储私有属性的最佳实践。其弱引用使键不可枚举，且键对象被回收时自动清除数据，避免内存泄漏；同时支持实例隔离和继承，子类可继承。配合Symbol可防止键冲突，与 私有字段分层使用各取所长。普通Map因强引用易致内存泄漏，不推荐使用。
在React中遍历对象属性及嵌套数组生成JSX时，必须使用`map()`而非`forEach()`，因`forEach`返回`undefined`无法渲染。每层`map`需显式返回JSX元素并设置唯一且稳定的`key`（推荐数据ID）。优先用`Array isArray()`检测数组类型，切忌使用索引作为`key`，以避免渲染错误，确保高效更新。
基于IntersectionObserverAPI，在知识库文章底部嵌入隐形锚点。当锚点移出视口时，固定于右下角的返回顶部按钮显示；锚点重新进入视口时按钮自动隐藏。实现随滚动智能显隐，避免遮挡内容，提升用户阅读体验。
字体加载失败不改变盒模型计算规则，但会导致content区域宽度高度突变，引发重排、父容器塌陷。常见原因包括未加font-display:swap、@font-face声明缺少实际使用的字重或样式、未等待document fonts load()完成即测量或绘制，以及文档处于怪异模式。
JavaScript字符串默认采用UTF-16编码格式存储，但文件、后端等常使用UTF-8、GBK等编码。乱码问题源于编码边界不清晰，需要明确来源编码再转换为目标编码。处理UTF-8字节流时推荐使用TextEncoder TextDecoder；Base64编解码需先转为Uint8Array；GBK等旧编码需借助encoding js或iconv-lite；
在textarea中，selectionchange事件因浏览器兼容性差异失效，无法实时更新按钮文本。解决方案是直接读取selectionStart selectionEnd属性，并绑定select、mouseup、keyup事件，确保选中字符数准确显示。
MutationObserver被设计为微任务，在所有同步DOM操作完成后批量执行回调，避免频繁触发导致的性能问题。它合并多次变动，在渲染前运行，替代了性能差的MutationEvent，支持精准过滤，保障主线程流畅，适用于高频动态场景但需避免滥用。
浏览器全局上下文中，普通函数独立调用时默认绑定到全局对象window，这是默认绑定规则的底层机制。严格模式下默认绑定失效，函数内this为undefined。箭头函数不参与默认绑定，继承外层this。
在Node js中利用`fs`模块和正则表达式，可自动将文件中仅含`(C)`的独立行合并到前一行末尾，同时删除空行，避免误伤正文中的`(C)`。该方法通过两次替换覆盖中间行与文件末尾，兼容Unix和Windows换行符，适用于日志标记、模板生成等场景。
SanityStudio因Schema更新导致“Workspace:missingcontextvalue”崩溃，根源为本地与云环境不一致。提供从本地调试到Vercel托管的完整迁移方案，涵盖CLI配置、构建优化及避坑要点，实现现代化托管迁移。
HTML结构层级冗余在低带宽环境下显著放大传输成本：DOM深度超6层导致解析延迟达180毫秒，压缩率下降8%至12%，并可能引发爬虫截断。语义化标签可减少字节数并降低链路熵值，避免关键资源加载顺序失控。