为什么简单的网站崩溃在移动（iOS Safari和至less）？

我有一个非常简单，但很长的网站 – 很多可以滚动的文本。 这是一个文档站点，考虑到内容的性质（很多类似的简短条目），我决定一次显示所有内容，这样用户可以从条目滚动到条目，或者通过侧栏索引进行导航。 这是我喜欢的通用文档模型（例如Underscore ， Backbone和LoDash ）。

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

这里的问题是： 对于许多用户来说，这个站点一直崩溃，他们的iOS浏览器 。 不是所有的用户（不是我）; 但对于那些经历过这次事故的人来说，似乎还是一再发生。 （该网站也可能会导致一些人的Android手机死机，我不知道：有没有听说过任何Android用户。） 我希望有人能帮助我诊断，并可能解决这个问题。

我遇到的困难之一是我无法自己重现崩溃 – 不是在我自己的iOS设备上，而不是在Xcode模拟器上。 由于这个站点资源不是很重（大约70KB的负载），并且涉及的JavaScript很less，而且由于之前几次尝试解决这个问题的影响， 我猜测这个问题涉及到内存使用 – 那就是iOS浏览器正在崩溃，因为该网站要求太多的内存。 但我不确定这是个问题，如果是这样，我不知道我该如何解决这个问题。

我不知道接下来要尝试什么，我希望一些精明的StackOverflow专家有build议。 关于这个网站，这个网站看起来如此简单和基本，是什么使得网站的内存要求太高，导致浏览器崩溃呢？

它太长了吗？ 是否有CSS难以呈现？ 有没有JavaScript内存泄漏？

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

随时查看或贡献[Github问题]（ 在这个Github问题 ，以及。

附录

以下是有关可能相关的网站的一些知识：

• HTML文档相对于其他网站的HTML文档来说是很大的 。 Unminified它看起来是〜225KB。 （我注意到LoDash文档更大 – 这个网站是否会让人们的手机崩溃？）
• 提供的HTML文档被缩小。
• 所服务的CSS和JS也被缩小了。
• 该网站使用Prism.js语法突出显示。
• 该网站使用颠倒来使平板电脑上的2滚动列布局工作。
• 固定和翻译屏幕上的<aside id="help-content"> ; 当你点击某个实用程序的“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) 

Answer 1

我想我修好了！

怀疑这个问题是由CSS布局造成的渲染/绘画。 在电话的大小，我一直隐藏每个条目的内容，直到它被选中; 和我一直用来隐藏他们的方法，并从布局中删除他们的任何痕迹，包括position: absolute 。 我最初并没有使用display: none因为有些想要看不到内容的典型问题，但是为了各种读者和理由，不要把它放在那里 。 我把这些顾虑放在一边，改变了布局，以便使用display: none来隐藏条目，并用display: block来display: block ，这似乎已经解决了崩溃问题。

我认为绝对的定位是将大量的内容堆叠在屏幕的angular落，虽然它不可见，但却是要求高的内存。

什么引导我尝试这是另一个相关问题的答案，通过@tea_totaler链接到上面： https ://stackoverflow.com/a/14866503/2284669。 它说：

什么可以帮助我很多东西是保持现在看不见的东西：没有。 这听起来可能是原始的，但实际上是这样做的 这是一个简单的方法告诉浏览器的渲染器，你现在不需要这个元素，因此释放内存。 这样，只要隐藏当前未使用的元素，就可以创build具有各种3D效果的英里长的垂直滚动条。

我认为我的另一个隐藏方法是不释放记忆，尽pipe它有其他的好处（无论如何这可能与这个特定的网站无关）。 我相信这只是因为这个网站太长而成为一个问题。

这是需要考虑的事情，但是，当你想隐藏一个元素： 渲染/内存需求 。

Answer 2

在我的网站上，这是由元素与CSS属性-webkit-backface-visibility: hidden

删除此属性修复所有崩溃！

请参阅iOS：使用-webkit-backface-visibility的多个div：缩放时隐藏崩溃浏览器

Answer 3

我在网站上使用Chrome进行了审计。 它build议这样做：

删除未使用的CSS规则（44）
当前页面未使用的CSS规则（10％）。
css-built.min.css：当前页面不使用10％。

    audio，canvas，video  
    audio：否（[对照]）  
     [隐]  
    缩写[标题]  
     DFN  
    小时  
    标记  
     q  
     sub，sup  
     SUP  
    子  
     SVG：否（：根）  
    数字  
    字段集  
    传说  
    button[禁用]，htmlinput[禁用]  
    input[type = checkbox]，input[type = radio]  
    input[types=search]  
    input[type = search] ::  -  webkit-search-cancel-button，input[type = search] ::  -  webkit-search-decoration  
     textarea的  
    表  
     .older-文档  
     .older-文档>利  
     .older-文档>李：没有（：最后一子）：后  
     *，：之前，之后  
    字段集  
     textarea的  
     ：not（pre）> code [class * = language-]，pre [class * = language-]  
     ：没有（预）>代码[类* =语言 - ]  
     .namespace  
     .token.regex，.token.important  
     .token.important  
     .older-文档  
     .changelog dt  
     .changelog> DT  
     .changelog> DT：后  
     .changelog> DD  
     .changelog-I-列表  
     ：目标> .entry体  
     .SUB  -  ^ h  
     。实例 -  css.is活跃  
     .preload .help-content-c  
     。帮助内容-c.is活性  
     。帮助-content.is活性  

Chrome上的任务pipe理器显示，该页面占用的内存总量比其他站点多达2倍，如stackoverflow和dropbox。 我会build议将function分为单独的页面而不是一个长页面。 通过分离这些function，可以提高服务器的效率和浏览器的加载时间和内存使用率。 每个页面上运行的JavaScript和CSS将会减less，并且服务器将发送更less的数据量。 拥有主页上的所有function是低效的。 例如，如果用户只需要查看如何制作字体图标标签，则他们将不得不加载页面中不需要的其他部分并占用内存。

Answer 4

对不起，只是猜测，但我看到在你的样式表中可能导致崩溃的两个潜在的原因

1.）使用data-url进行背景图像渲染，例如这里

 .github,.source { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M85.714%2050q0%2014.007-8.175%2025.195t-21.122%2015.485q-1.507.279-2.204-.391t-.698-1.674v-11.775q0-5.413-2.902-7.924%203.181-.335%205.72-1.004t5.246-2.176%204.52-3.711%202.958-5.859%201.144-8.398q0-6.752-4.408-11.496%202.065-5.078-.446-11.384-1.563-.502-4.52.614t-5.134%202.455l-2.121%201.339q-5.19-1.451-10.714-1.451t-10.714%201.451q-.893-.614-2.372-1.507t-4.66-2.148-4.799-.753q-2.455%206.306-.391%2011.384-4.408%204.743-4.408%2011.496%200%204.743%201.144%208.371t2.93%205.859%204.492%203.739%205.246%202.176%205.72%201.004q-2.232%202.009-2.734%205.748-1.172.558-2.511.837t-3.181.279-3.655-1.2-3.097-3.488q-1.06-1.786-2.706-2.902t-2.762-1.339l-1.116-.167q-1.172%200-1.618.251t-.279.642.502.781.725.67l.391.279q1.228.558%202.427%202.121t1.758%202.846l.558%201.283q.725%202.121%202.455%203.432t3.739%201.674%203.878.391%203.097-.195l1.283-.223q0%202.121.028%204.967t.028%203.013q0%201.004-.725%201.674t-2.232.391q-12.946-4.297-21.122-15.485t-8.175-25.195q0-11.663%205.748-21.512t15.597-15.597%2021.512-5.748%2021.512%205.748%2015.597%2015.597%205.748%2021.512z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; } 

2.）另外-webkit转换可能是罪魁祸首。 在这里阅读更多https://stackoverflow.com/a/11833285/900132

Answer 5

您的HTML标记在尝试分析崩溃之前应该修复一些错误（例如h1标记中的div标记）。

我build议你通过一个HTMLvalidation器运行它，例如http://validator.w3.org/check?uri=http%3A%2F%2Fdavidtheclark.github.io%2Fscut%2F&charset=%28detect+automatically%29&doctype=Inline&group = 0

h1里面的div显然引起了一连串的错误，validation者不得不压制继续。

当我遇到浏览器崩溃问题时，HTMLvalidation始终是我的第一步。 然后，我试着看看可能是错误的JavaScript如果更正HTML没有帮助。

Answer 6

我刚刚阅读这篇文章，并尝试在我的iPad上http://davidtheclark.github.io/scut/ 。 Chrome立即崩溃，虽然有时很快显示主页。 Safari会渲染主页和许多其他页面，但是单击左侧的“about>安装”链接会立即崩溃（好了，一旦显示OK，但再次单击则会崩溃）。 所有这一切都相当一致。

这些错误确实是由于LowMemory，而这是使用最多内存的浏览器进程。 崩溃发生在150000页左右（4KB /页？=> 600MB ???）。

这就是说，恐怕我没有你的问题的答案。 希望它至less有一点帮助。

亲切的问候，/ Sigiswald

Answer 7

清除position: sticky; 帮助我和我的移动Safari浏览器崩溃的问题。 不确定的原因。

 body:before{ position:-webkit-sticky; position:sticky; }