设置autofocus为true与调用requestFocus()的区别是什么

二者最终目标高度重合，聚焦成功后都会让目标控件拿到页面主焦点、接收用户输入，但行为逻辑、适用场景差异非常大，不能直接等价使用。

不管是给元素设置autofocus="true"还是调用requestFocus()，只要聚焦流程执行成功，目标控件都会成为当前文档的活动焦点元素，触发对应焦点事件，后续键盘输入、输入法交互都会直接作用在该控件上。

• 触发逻辑和时机完全不同
  autofocus是HTML原生的声明式属性，仅在浏览器固定的原生时机生效：一是页面初始加载、DOM解析阶段，浏览器扫描到带该属性的可聚焦元素时自动触发；二是原生<dialog>元素调用showModal()弹出时，其内部带autofocus的元素会自动拿到焦点。除此之外，页面加载完成后给已有元素追加autofocus属性、或者动态向普通文档流插入带autofocus的元素，都不会触发自动聚焦。
  requestFocus()是命令式的API调用，没有任何时机限制：不管是页面初始化阶段、加载完成后响应用户交互、还是动态插入元素后，只要代码执行到调用语句，就会立刻尝试给目标元素申请焦点，不依赖浏览器的原生加载、弹窗触发逻辑。目前Web原生DOM标准里对应的命令式焦点API是HTMLElement.focus()，多数前端框架、跨端框架里封装的requestFocus()本质都是对这个原生API的包装，行为逻辑一致。
• 焦点抢占的约束规则不同
  浏览器对autofocus的限制非常严格：如果页面加载过程中用户已经主动和页面产生了交互（比如已经点击其他输入框开始输入），浏览器会直接放弃autofocus的聚焦请求，绝不会打断用户的当前操作；如果页面里有多个元素同时写了autofocus，只有DOM顺序最靠前的第一个可聚焦元素能拿到焦点，后续的autofocus声明会被直接忽略。
  requestFocus()的限制要弱得多：只要调用时元素处于可聚焦状态（未被禁用、未处于display:none的隐藏容器内、已挂载到文档），默认会直接抢占当前焦点，即使用户正在操作其他控件也会被打断；你可以任意给不同元素重复调用该方法，每次调用都会尝试切换焦点，没有“仅第一个生效”的限制。另外调用该方法时还可以传入配置参数，比如requestFocus({ preventScroll: true })就能禁止聚焦时浏览器自动滚动到元素位置，这个能力是autofocus完全不具备的——autofocus触发聚焦时，浏览器一定会自动滚动到对应元素的位置。
• 依赖条件不同
  autofocus是浏览器原生HTML层面的能力，不需要JavaScript参与就能生效，即使用户禁用了页面JS，只要浏览器支持该属性就能正常工作。
  requestFocus()属于JavaScript API，必须在JS环境正常运行的前提下才能生效，JS被禁用时完全无法起作用。
• 特殊场景的表现不同
  在跨域iframe、开启了sandbox限制且未配置allow-focus权限的iframe中，autofocus会被浏览器默认拦截不生效；而requestFocus()只要iframe的焦点权限正常、用户和iframe产生过交互，就可以正常触发聚焦。
  另外在Shadow DOM、自定义组件场景下，autofocus的识别范围默认只在当前文档根节点，而封装过的requestFocus()方法通常可以跨Shadow DOM层级申请焦点，适配组件内部的焦点管理逻辑。

内容的提问来源于stack exchange，提问作者A.A