Ich habe an einem Experiment gearbeitet, um HTML in ein Canvas-Bild zu rendern, indem Javascript alle notwendigen Informationen aus dem geladenen DOM liest. Da Canvas viele der Standardteile von CSS nicht enthält, müssen insbesondere bei der Textformatierung viele Workarounds und leistungsintensive Prozesse durchgeführt werden ( letter-spacing für einen). Die Absicht ist und wird es niemals sein, einen narrensicheren HTML-Renderer zu erstellen, da es einfach nicht möglich ist, sondern stattdessen so genau wie möglich zu machen.
Für die Beispielseiten lädt Google Chrome sie normalerweise wesentlich schneller als FF. Für einige Seiten (in der Regel die größeren) friert Chrome jedoch völlig ein, während Firefox sie gut lädt. Jetzt habe ich versucht herauszufinden, wo genau die Dinge drunter und drüber gehen, aber ich hatte nicht viel Glück, da es in Chrome nichts ausgibt.
Gibt es in Chrome eine Grenze für die Anzahl der Arbeitsauszüge, die innerhalb einer bestimmten Zeitspanne ausgeführt werden können, oder wie viele Systemressourcen eine Seite verwenden kann? Wie kann ich den Flaschenhals entwirren, wenn ich überhaupt keine Rückmeldung von der Seite bekomme (weil sie gerade auflegt)?
Beispiele (was es tun sollte, ist ein Canvas-Bild oben auf der Seite zu rendern, das mehr oder weniger genauso aussehen sollte wie die eigentliche HTML-Seite. Sie können das Canvas-Bild (einblenden / ausblenden) durch Anklicken ändern. Bitte öffne sie auch nicht, wenn du in deinem Browser ungespeicherte Arbeit hast, da es sie möglicherweise auch aufhängt.):
einfacher Test, funktioniert in FF / Chrome
ein weiterer einfacher Test funktioniert in FF / Chrome
Komplette Seite, funktioniert in FF / Chrome
Vollständige Seite, funktioniert nur in FF & lt; 4, friert Chrome ein
Sie alle verwenden die gleichen js, die hier gefunden werden können.
Ich bin nicht auf der Suche nach einem blitzschnellen Skript, denn mit der Art der Emulation, die diese Bilder erzeugt, glaube ich nicht, dass es überhaupt möglich wäre. Einfach versuchen, Wege zu finden, um es vielleicht etwas effizienter zu machen, ohne seine aktuelle Funktionalität zu verlieren.
Das Problem scheint mit dem css-Attribut background-repeat und speziell repeat-x zu sein. Kommentieren
Das Problem wurde zumindest für Chrome behoben, und es sah so aus, als wäre es eine Endlosschleife, wie Kinlan vorgeschlagen hat, aber warum genau es nur bei neueren Versionen von FF und Chrome hängen bleibt, muss ich genauer hinsehen Detail (höchstwahrscheinlich hat die image.width noch nicht, oder etwas ähnliches).
Wo soll ich anfangen?
Brechen Sie es auf.
Verwenden Sie das gleiche Beispiel und schneiden Sie, wie viel Sie es tun (Ihre Rendering-Code) in zwei Hälften. Funktioniert es immer noch nicht? In der Mitte wieder, usw. Hat es funktioniert? Leg die Hälfte von dem zurück, was du herausgenommen hast.
Entfernen Sie, wie in, alle versuchten Text-Renderings oder alle Border / Padding-Codes. Kommentiere es einfach aus. Funktioniert es dann?
Oder versuchen Sie einfach, ctx.drawImage(img,x,y); in Zeile 199 auskommentieren und sonst nichts. Funktioniert es dann?
Wenn Sie Glück haben, können Sie einen kritischen Punkt ermitteln, an dem Chrome viel Zeit für die Ausführung von Aktionen benötigt.
Tags und Links javascript jquery html5 google-chrome canvas