第一次加载页面时，移动 Safari 崩溃

发布于 2024-12-01 05:45:23 字数 1255 浏览 1 评论 0原文

我构建了一个大量使用 Javascript 的 Web 应用程序，最近对其进行了调整，以使其能够在 iPad 上运行（它需要进行调整，因为它允许通过移动鼠标进行绘图，并且在手指松开之前不会触发 onmousedown/onmousemove）。

现在，经过调整，该应用程序可以在 Mobile Safari 上正常运行。然而，我遇到了一个问题，当我第一次尝试在 iPad 上加载该应用程序时，Mobile Safari 经常会崩溃。但是，重新打开浏览器并刷新页面可以完美加载应用程序并且完全可用。经过一些研究后，我发现 Mobile Safari 崩溃的最常见原因是超过 6MB 的图片或通过 Javascript 加载的多张图片。我的应用程序仅使用图像作为图标，因此总图像大小实际上非常小（总计可能低于 100KB），但是我的 JS 代码未压缩为 2.5MB，使用 gz 压缩为 350KB（这就是我将其发送到客户）。

我还了解到，通过 CSS 加载图像可以避免由于图像大小限制而导致的崩溃。我认为值得一试，因为崩溃也可能是由于大量图像而不仅仅是图像总大小造成的。在更改了一些使用 CSS 背景图像属性渲染的图标后，崩溃似乎消失了。我决定更进一步，调整所有其他图标以使用 CSS 背景进行渲染。将所有图像更改为使用 CSS 渲染后，突然崩溃似乎又回来了。

这让我得出了几个可能的结论：

A.）即使我所做的部分 CSS 修复实际上也没有帮助，但不知怎的，我非常幸运，在重新加载我的应用程序并多次重新启动 iPad 时没有看到崩溃（那么崩溃可能是在某个地方）我的 JS 代码或页面的其他部分）

B.）在更改其余图标以通过 css 加载时，我引入了一些其他问题（如果是这种情况，我不希望重新加载页面来解决问题，但它确实）

C.）崩溃是由于我的 Javascript 中与图像无关的某些内容（但为什么它在重新加载后能够正常加载和工作）

D.）当尝试一次渲染/解压缩那么多 Javascript 时，iPad 会卡住（我没有听说这是一个问题），但也很少看到这么大的 Javascript 块）

有谁知道除了 6MB 图像限制之外还有哪些其他问题会导致 Mobile Safari 在第一次加载页面时崩溃，但在第二次加载时不会崩溃？

如果有帮助，这里是我的网络应用程序的链接（这是通过 JS 加载图像的旧版本）： http://www.grafpad.com/grafpad/canvas/demo（它是用 Pyjamas 编写的，这就是为什么有这么多生成的 Javascript）。

谢谢

原文

I've built a Javascript-heavy web app and recently tweaked it to work on iPad (it needed tweaks because it allows drawing by moving the mouse around, and onmousedown/onmousemove would not get triggered until finger release).

Now, with the tweaks, the app runs fine on Mobile Safari. I'm seeing a problem, however, where the first time I try to load the app on the iPad, it often crashes Mobile Safari. However, reopening the browser and refreshing the page loads the app perfectly and it's fully usable. After doing some research I found out that the most common cause for Mobile Safari crash is over 6MB of pictures or multiple pictures loaded through Javascript. My app only uses images for icons, so the total image size is actually very small (probably under 100KB total), my JS code, however, is 2.5MB uncompressed and 350KB compressed using gz (which is how I'm sending it to the client).

I've also read that loading images through CSS can avoid crashes due to the image size limit. I figured it was worth a try since it's also possible the crash is due to large number of images, not just total image size. After changing some of my icons to be rendered using CSS background-image property, the crash seemed to have gone. I decided to go a step further and tweak all other icons to render using CSS backgrounds as well. After changing all of my images to be rendered using CSS, all of a sudden the crash seems to be back.

Which leads me to several possible conclusions:

A.) Even the partial CSS fix I made did not actually help but somehow I got extremely lucky and saw no crash while reloading my app and restarting the iPad multiple times (then the crash is likely somewhere with my JS code or other parts of the page)

B.) I introduced some other issue when changing the rest of my icons to load through css (if that's the case, I wouldn't expect reloading the page to fix the issue, but it does)

C.) The crash is due to something in my Javascript unrelated to images (but then why does it load and work correctly after reload)

D.) iPad chokes when trying to render/uncompress that much Javascript at once (I haven't heard of this being an issue, but it's also rare to see a chunk of Javascript this big)

Does anyone know what other issues aside from 6MB image limit can cause Mobile Safari to crash the first time a page is loaded, but not the second?

If it helps, here is the link to my web app (this is the old version that loads images through JS): http://www.grafpad.com/grafpad/canvas/demo (it's written in Pyjamas, which is why there is so much generated Javascript).

Thanks

分享到QQ

分享到微博