为什么简单网站在移动设备上崩溃(至少iOS Safari和Chrome)？

Question

问

为什么简单网站在移动设备上崩溃(至少iOS Safari和Chrome)？

Mr-o蛋挞发布于 2023-02-07 10:46

我有一个非常简单但很长的网站 - 可以滚动的很多文本.这是一个文档站点,考虑到内容的性质(许多简短的类似条目)我决定一次显示所有内容,因此用户可以从一个条目滚动到另一个条目或通过侧边栏索引导航.这是我喜欢的一个常用的文档模型(如下划线,骨干,并LoDash).

该网站在这里:http://davidtheclark.github.io/scut/.你可以在这里查看预生产代码:https://github.com/davidtheclark/scut/tree/master/docs/dev.

这就是问题所在:对于许多用户来说,这个网站一直在崩溃他们的iOS浏览器.不是所有用户(不是我); 但对于那些做体验的崩溃,它似乎一直复发.(该网站也可能会崩溃一些人的Android手机,我不知道:没有从任何Android用户那里听到过.)我希望有人可以帮助我诊断并可能解决这个问题.

我遇到的部分困难是我无法自己重现崩溃 - 不是在我自己的iOS设备上,而是在Xcode模拟器上.因为该站点完全没有资源(约70KB负载)并且涉及非常少的JavaScript,并且由于先前几次尝试修复此问题的影响,我猜测问题涉及内存使用 - iOS浏览器正在崩溃,因为该网站要求太多的内存.但我不确定这是什么问题,如果是,我不知道如何解决它.

我不确定下一步该尝试什么,我希望一些精明的StackOverflow高手有建议.这个网站看起来如此简单和基本,是什么让它变得如此简单,以至于它崩溃了浏览器？

它太长了吗？是否有难以渲染的CSS？是否有JavaScript内存泄漏？

我对这个特定的网站感兴趣,以便我可以学习在未来预测和预防和/或诊断和修复其他网站上的类似问题.

随意查看或贡献[Github问题](在此Github问题中也是如此.

附录

以下是有关网站可能相关的一些信息:

相对于其他网站的HTML文档,HTML文档很大.未经证实它看起来是~225KB.(我注意到LoDash文档甚至更大 - 该网站是否会使人们的手机崩溃？)

提供的HTML文档已缩小.

服务的CSS和JS也缩小了.

该网站使用Prism.js进行语法突出显示.

该网站使用Overthrow使2滚动列布局在平板电脑上工作.

屏幕固定并翻译; 当你点击任何实用程序的"use-name"之类的[？]时它会滑入.

iOS崩溃日志

这些在我看来是运行Chrome的iPhone崩溃并在网站上崩溃的崩溃报告的潜在相关线(我不确定它们是否真的相关或不是因为我没有开发iOS应用程序而且不知道这些报告的来龙去脉):

Free pages:                              5674
Active pages:                            117674
Inactive pages:                          55121
Speculative pages:                       3429
Throttled pages:                         0
Purgeable pages:                         0
Wired pages:                             60906
File-backed pages:                       23821
Anonymous pages:                         152403
Compressions:                            356216
Decompressions:                          121241
Compressor Size:                         16403
Uncompressed Pages in Compressor:        49228
Largest process:   Chrome

[...]

Chrome <2a759438c2253e3baededaa0d13feb56>       166479           166479  200  [per-process-limit] (frontmost) (resume)

davidtheclar.. 11

我想我修好了!

可疑的问题是由CSS布局引起的渲染/绘制.在电话大小,我一直隐藏每个条目的内容,直到它被选中; 以及我用来隐藏它们的方法,并从布局中删除它们的任何痕迹,包括在内position: absolute.我最初没有用display: none的,因为大约想不看内容,但保持典型的担忧有,各种读者和原因.我抛开了这些顾虑并更改了布局,以便隐藏条目display: none并显示display: block- 并且这似乎已经修复了崩溃.

我认为绝对的定位是在屏幕的一角堆叠了大量的内容,虽然它不可见,但它要求记忆.

让我尝试这个的原因是另一个相关问题的答案,由@tea_totaler链接到上面:https://stackoverflow.com/a/14866503/2284669 .它说:

对我来说很有帮助的是保持目前在显示下不可见的任何东西:无.这可能听起来很原始但实际上可以解决问题.这是告诉浏览器渲染器此时不需要此元素并因此释放内存的简单方法.这允许您创建具有各种3d效果的英里长垂直滚动条,只要您隐藏此时未使用的元素即可.

我认为我的另一种隐藏方法不是释放内存,尽管它有其他优点(无论如何可能与这个特定的站点无关).我确定这只是一个问题,因为这个网站太长了.

但是,当您想要隐藏元素时,需要考虑这一点:渲染/内存需求.

2 个回答

我想我修好了!

可疑的问题是由CSS布局引起的渲染/绘制.在电话大小,我一直隐藏每个条目的内容,直到它被选中; 以及我用来隐藏它们的方法,并从布局中删除它们的任何痕迹,包括在内position: absolute.我最初没有用display: none的,因为大约想不看内容,但保持典型的担忧有,各种读者和原因.我抛开了这些顾虑并更改了布局,以便隐藏条目display: none并显示display: block- 并且这似乎已经修复了崩溃.

我认为绝对的定位是在屏幕的一角堆叠了大量的内容,虽然它不可见,但它要求记忆.

让我尝试这个的原因是另一个相关问题的答案,由@tea_totaler链接到上面:https://stackoverflow.com/a/14866503/2284669 .它说:

对我来说很有帮助的是保持目前在显示下不可见的任何东西:无.这可能听起来很原始但实际上可以解决问题.这是告诉浏览器渲染器此时不需要此元素并因此释放内存的简单方法.这允许您创建具有各种3d效果的英里长垂直滚动条,只要您隐藏此时未使用的元素即可.

我认为我的另一种隐藏方法不是释放内存,尽管它有其他优点(无论如何可能与这个特定的站点无关).我确定这只是一个问题,因为这个网站太长了.

但是,当您想要隐藏元素时,需要考虑这一点:渲染/内存需求.

2023-02-07 10:49 回答

我的生活我做主哦耶_266
在我的网站上,它是由具有css属性的元素引起的 -webkit-backface-visibility: hidden

删除此属性修复了所有崩溃!

看iOS:带-webkit-backface-visibility的多个div:缩放时隐藏的崩溃浏览器

2023-02-07 10:49 回答

kingwign009

撰写答案