前端开发

字体加载失败不改变盒模型计算规则，但会导致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%，并可能引发爬虫截断。语义化标签可减少字节数并降低链路熵值，避免关键资源加载顺序失控。

通过CSS的text-transform和::first-letter伪元素可仅视觉上实现首字母大写，不修改DOM内容。但此伪元素仅对块级或行内块级元素生效，无法处理嵌套标签或句首大写场景。实际应用中常需结合JavaScript或服务端处理，用于美化段落首字母，但应谨慎使用以兼容复杂布局。

监听input事件可实时控制提交按钮禁用状态，避免change事件需失焦才触发的滞后缺陷。通过this value trim() length判断输入长度，并同步调整按钮视觉反馈（如颜色、透明度），实现简洁高效、响应即时的表单交互方案。

HTML中step属性仅对number类型有效，浮点精度可用分存储或stepUp方法解决。value需满足min加整数倍step，否则控件失效。step= "any "退化为整数增减，不限制输入，需后端校验。

监听输入框keydown事件，检测Enter键（e key=== "Enter "或keyCode13），触发搜索。需用e preventDefault()阻止表单默认提交，将搜索逻辑封装为独立函数，使回车键与按钮点击共享同一逻辑，提升交互一致性与流畅性。

动态生成的复选框需使用事件委托监听change事件，并在回调函数内实时查询DOM获取选中状态，避免缓存变量导致DOM不同步。正确做法是每次调用时重新查询已选中的复选框，配合encodeURIComponent处理URL参数，可加防抖优化。

JavaScript嵌套对象中，内层方法通过`call()`、`apply()`或`bind()`显式绑定外层实例到`this`，即可访问和修改外层属性；直接调用则`this`指向内层对象导致失败，箭头函数因词法绑定也无法解决此动态问题。

基于函数式编程的方法链通过闭包和返回新对象实现无状态调用，避免`this`状态污染。每次链式调用创建独立闭包，参数彼此隔离，天然线程安全，无需共享实例，支持任意深度链式传参，适用于高并发场景。