Warum stürzt eine einfache Website auf Mobilgeräten ab (zumindest iOS Safari und Chrome)?



2 Answers

Auf meiner Seite wurde es durch Elemente mit der -webkit-backface-visibility: hidden Eigenschaft -webkit-backface-visibility: hidden

Durch das Entfernen dieser Eigenschaft wurden alle Abstürze behoben!

siehe iOS: Mehrere divs mit -webkit-backface-visibility: versteckter Crash-Browser beim Zoomen

Question

Ich habe eine Website, die sehr einfach ist, aber sehr lang - viel Text, der durchgescrollt werden kann. Es ist eine Dokumentationsseite, und angesichts der Art des Inhalts (viele kurze ähnliche Einträge) entschied ich mich, alles auf einmal zu zeigen, so dass der Benutzer entweder von einem Eintrag zum nächsten blättern oder über einen Seitenindex navigieren konnte. Es ist ein gemeinsames Dokumentationsmodell, das ich mag (zB Underscore , Backbone und LoDash ).

Die Website ist hier: http://davidtheclark.github.io/scut/ . Sie können sich den Pre-Production-Code hier ansehen: https://github.com/davidtheclark/scut/tree/master/docs/dev .

Und hier ist das Problem: Für eine Reihe von Nutzern stürzt diese Seite ihre iOS-Browser durchgängig ab . Nicht alle Benutzer (nicht ich); aber für diejenigen, die den Absturz erleben, scheint es konsequent wiederkehren. (Die Website kann auch einige Android-Handys abstürzen, ich weiß nicht: habe nicht von Android-Nutzern gehört.) Ich hoffe, jemand kann mir helfen, dieses Problem zu diagnostizieren und möglicherweise zu beheben.

Ein Teil der Schwierigkeit, die ich habe, ist, dass ich den Absturz nicht selbst reproduzieren kann - nicht auf meinen eigenen iOS-Geräten, nicht auf den Xcode-Simulatoren. Da die Site nicht ressourcenintensiv ist (~ 70 KB) und sehr wenig JavaScript enthält, und aufgrund der Auswirkungen einiger früherer Versuche, dies zu beheben, vermute ich, dass das Problem die Speichernutzung betrifft - also die iOS-Browser stürzen ab, weil die Site zu viel Speicher beansprucht. Aber ich bin mir nicht sicher , ob das der Fall ist, und wenn es so ist, bin ich mir nicht sicher, wie ich das beheben kann.

Ich bin mir nicht sicher, was ich als nächstes versuchen soll, und ich hoffe, dass einige clevere -Typen Ratschläge erhalten. Was ist es an dieser Seite, die für meine Augen so einfach und grundlegend erscheint, dass sie so Gedächtnis-fordernd macht, dass es Browser abstürzt?

Ist es einfach zu lang? Gibt es CSS, das zu schwierig zu rendern ist? Gibt es JavaScript-Speicherlecks?

Ich interessiere mich sowohl für diese spezielle Seite als auch dafür, dass ich lernen kann ähnliche Probleme auf anderen Seiten in der Zukunft zu antizipieren und zu verhindern und / oder zu diagnostizieren und zu beheben.

Fühlen Sie sich frei, [die Github-Ausgabe] zu betrachten oder dazu beizutragen (auch in dieser Github-Ausgabe) .

Nachtrag

Hier sind einige Dinge, die Sie über die Website wissen sollten, die relevant sein könnten:

  • Das HTML-Dokument ist relativ zu den HTML-Dokumenten anderer Websites groß . Undefiniert sieht es aus wie ~ 225KB. (Ich merke, dass LoDash-Dokumente noch größer sind - stürzt diese Website die Telefone der Leute ab?)
  • Das bereitgestellte HTML-Dokument wird minimiert.
  • Served CSS und JS werden ebenfalls minimiert.
  • Die Website verwendet Prism.js zur Syntaxhervorhebung.
  • Die Website verwendet Overthrow , um das Layout mit zwei Scroll-Spalten auf Tablets zu erstellen.
  • <aside id="help-content"> wird fixiert und offline übersetzt; Es wird eingeblendet, wenn Sie auf ein [?] klicken, so wie es von jedem Dienstprogramm "username" angezeigt wird.

Ein iOS-Absturzprotokoll

Diese sehen für mich die potenziell relevanten Zeilen eines Absturzberichts von einem iPhone mit Chrome und Absturz auf der Website aus (ich bin mir nicht sicher, ob sie tatsächlich relevant sind oder nicht, weil ich keine iOS-Apps entwickelt habe und nicht weiß die Ins-und-Outs dieser Berichte):

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 &lt;2a759438c2253e3baededaa0d13feb56&gt;       166479           166479  200  [per-process-limit] (frontmost) (resume)



Es tut mir leid, dass ich nur ein paar Vermutungen angestellt habe, aber ich sehe zwei mögliche Ursachen in Ihrem Stylesheet, die zu einem Absturz führen könnten

1.) Verwenden von Daten-URL für Hintergrundbild-Rendering wie hier

.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.) Auch -webkit-Übergang könnte der Schuldige sein. Lesen Sie hier mehr https://.com/a/11833285/900132




Ich lese gerade diesen Beitrag und versuchte http://davidtheclark.github.io/scut/ auf meinem iPad. Chrome stürzt sofort ab, obwohl die Startseite manchmal kurz angezeigt wird. Safari rendert die Startseite korrekt und viele andere Seiten, aber wenn Sie links auf den Link "about> installation" klicken, stürzt es sofort ab (nachdem es OK angezeigt hat, aber durch erneutes Klicken abgestürzt ist). All dies ist ziemlich konsistent.

Die Fehler sind in der Tat auf LowMemory zurückzuführen und es ist der Browserprozess, der den meisten Speicher verwendet. Die Abstürze passieren bei ca. 150000 Seiten (4KB / Seite? => 600MB ???).

Ich fürchte, ich habe keine Antwort auf Ihre Frage. Hoffe es hilft wenigstens ein bisschen.

Mit freundlichen Grüßen, / Sigiswald




Related