nic*_*ckc 12 memory iphone crash safari ios
我正在开发一个网站，最近在我的 iPhone X 上进行测试时遇到了一个问题 - 该网站无法加载。
Safari 尝试加载它，然后报告错误“由于出现问题，此网页已重新加载”，尝试几次后它放弃并报告“重复出现问题”。我的 iPhone 上的 Chrome 也无法加载该网站。
这个时候我不能公开分享网站，但是chrome桌面控制台没有报错。事实上，该网站在我的台式机、笔记本电脑、我的旧 iPhone 6 和 5s、我的朋友三星 android 以及我测试过的其他 15 台随机计算机和手机上运行得非常好。它还可以在 xCode 模拟器中正常加载。但它不适用于我的 iPhone X。
我对 SO 和互联网的研究总体上让我相信这个错误通常是由于内存使用过多造成的，但桌面 Chrome 报告的内存使用峰值仅为 20mb。该网站在我劣质的 iPhone 5s 上也能正常加载。
我已经清除了 iPhone X 上的 safari 和 chrome 缓存，打开/关闭了阻止 cookie，重置了网络设置，并重新启动了手机。
我担心的是，如果我的 iPhone X 不加载该站点，毫无疑问其他用户会遇到问题，即使我测试过的 20 种其他设备也能正常工作。
有谁知道这里发生了什么？
我今天遇到了这个问题，想看看导致这种情况发生的 MRE。确实有这样的情况：当在autofocus至少两个<input>控件上设置该属性，然后使用 JavaScript 在任一控件上请求焦点时，iOS 14 上的 Safari 和 Chrome 都会崩溃。我能够确认 iOS <= 13 上不会发生崩溃。macOS 上的 Chrome 87 和 Safari 13.1 也不受影响。
是否发生崩溃取决于请求焦点的时间。在“窗口加载”事件中，事情继续运行。当在“文档就绪”处理程序中或在文档末尾发出请求时，事情就会变糟。
autofocus在多个元素上设置没有多大意义，但浏览器不应该崩溃。JavaScript 后备可用于为缺乏该autofocus属性支持的浏览器提供一致的用户体验。对此的明显解决方法是删除所有冲突的autofocus属性。
/*
// Load event on window object: NO CRASH
window.addEventListener('load', (e) => document.querySelector('input[name="field_1"]').focus());
// DOMContentLoaded event on document object: CRASH
document.addEventListener('DOMContentLoaded', (e) => document.querySelector('input[name="field_1"]').focus());
*/
// End of document script: CRASH
document.querySelector('input[name="field_1"]').focus();<!DOCTYPE html>
<html>
<body>
<form>
<p><label>First field<br><input type="text" name="field_1" autofocus></label></p>
<p><label>Second field<br><input type="text" name="field_2" autofocus></label></p>
</form>
</body>
</html>当我尝试以“高性能”模式访问 webgl 上下文（在 Three.js 场景中使用渲染器上的powerPreference属性）时，我在 Safari 中看到了同样的错误消息。
删除高性能模式可以加载我的网页。
我通过假设这确实是一个内存问题并将 display:none 设置为在视口中不可见的元素（通过使用窗口滚动事件）来解决 \xe2\x80\x9csolved\xe2\x80\x9d 问题。
\n\nhttps://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
\n\n这修复了我的 iPhone X 上 safari 中的崩溃问题。但是，它并不能解释为什么当 Web 应用程序消耗低于 20mb 内存并且在我能找到的任何其他功能较弱的设备上运行良好时，为什么会首先在功能强大的设备上发生这种情况。
\n