[javascript] Angular.js Backbone.js oder die bessere Leistung hat



Answers

Sie können das Backbone schneller vereinfachen, wenn Sie es auf ein Minimum reduzieren. Ich entfernte den Abhängigkeitsunterstrich oder lodash vom Rückgrat, das es heller machte und änderte ihre Ereignisse, um Bean und ziemlich viele enderjs libs minus morpheus zu verwenden, die ich für Tweenlicht austauschte.

Ich werde Ihnen sagen, das ist viel schneller als eckig. Seiten werden in Millisekunden gegen Sekunden geladen.

Die Sache mit eckigem ist, dass das MVVM-Entwurfsmuster langsam ist, weil Sie eine Tonne direkte DOM-Interaktion haben. JavaScript ist schnell ohne das DOM. Verwenden Sie also das DOM so wenig wie möglich, und das ist mit MVVM nicht möglich.

Es ist am besten, wenn Ihre Logik mit sehr kleinen schnellen und leichten DOM-Referenzen getrennt wird. Die Verwendung von Zeigern, wenn Sie können, ist immer eine bessere Option. Ich habe jede Framework Line Bye Line verwendet und überprüft. Stock Sie werden etwa die gleiche Leistung erhalten, modifiziert ist eine andere Geschichte.

Backbone-Vorrat ist aufgebläht und die meisten Template-Engines sind langsam. Verwenden Sie also dotjs für Vorlagen, verwenden Sie ender und nicht jQuery, verwenden Sie bean für benutzerdefinierte Ereignisse.

Angular hat eine extrem langsame Template-Engine, die eingebacken ist und die starke DOM-Nutzung macht es noch langsamer ... Ganz zu schweigen von all den deklarativen Bindungen, die in das Mark-up gemischt sind, ist schwer zu pflegen und zu lesen.

Ich habe jsperfs auf fast jedem Framework und jeder Bibliothek, die JS bekannt ist, erstellt. Ich baue Frameworks für meinen Lebensunterhalt. Ja, es gibt viele Variablen beteiligt, aber wenn richtig gemacht würde ich Backbone jeden Tag der Woche wählen. MVVM wird aussterben ... MVP ist da, wo es um Frontend-Frameworks geht.

Question

Ich bin ein Webentwickler und fange an, eine Webanwendung in großem Umfang zu entwickeln, aber ich bin mir nicht sicher, welches Framework zu verwenden ist. Ich dachte an Angular.js, aber ich dachte auch an Backbone.js. Was wäre für dich der beste Rahmen? oder zumindest einen Vergleich zwischen den beiden, um die Leistung zu sehen.




Schauen Sie sich auch Knockoutjs an. Sehen Sie sich das Video an, um zu verstehen, wie MVVM in der JavaScript-Welt funktioniert.

http://knockoutjs.com/

Ich habe es für wenige Projekte genutzt und bin bisher sehr glücklich darüber. Ich sehe es als Teil des neuen ASP.NET MVC 4 (SPA) und von Microsoft unterstützt.




Tangential, aber relevante Informationen über das, was @ igor-minar bereits in https://.com/a/11498872/850996 sagte

Es gab mehrere Beispiele, bei denen ich auf Leistungsprobleme gestoßen bin, die sich auf das beziehen, was hier diskutiert wird. Und diese Beispiele enthielten keine Frameworks (jQuery-Kern für den Zugriff auf das DOM).

Wir hatten mehrere UI-Komponenten, die wir bauten, gestalteten und zu einem DOM-Baum renderten, der aus einer großen Anzahl von Elementen bestand. Javascript und das DOM haben die inhärente Leistungscharakteristik, dass das Lesen von DOM-Attributen bei ausstehenden Aktualisierungen des DOM blockiert [1]. Wenn Sie beispielsweise 5 CSS-Attribute eines Elements ändern, die der Browser möglicherweise in eine Warteschlange stellt und später ausführt, und dann ein CSS-Attribut lesen, muss er die ausstehenden DOM-Schreibvorgänge abschließen, bevor er Ihnen das eine Attribut zurückgeben kann. gerade gelesen. Zum Beispiel können einfache Szenarien wie das Lesen eines element.offsetHeight teuer sein, weil es das DOM erfordert, ausstehende Updates zu vervollständigen und dann die Elemente zu messen und zu layouten, bevor es die Höhe des bestimmten Elements bestimmen kann.

Wir hatten viel Code, der ohne Rücksicht auf dieses grundlegende Merkmal geschrieben wurde. Es musste optimiert werden, um die blockierenden DOM-Lesevorgänge zu minimieren. Auch das Erstellen von DOM-Teilbäumen offline, bevor diese an das Dokument angehängt wurden, half in einigen Fällen.

Mit all diesen Optimierungen konnten wir immer noch nicht die Leistung erzielen, die wir für Szenarien wie große Listen benötigten (zB eine scrollende Listenansicht mit mehreren tausend Listenelementen, die jeweils aus mehreren DOM-Elementen bestehen, um den gewünschten visuellen Stil zu erhalten). .. Hier mussten wir den Code ändern, um die Liste zu virtualisieren und nur die Teilmenge der DOM-Elemente zu rendern, die tatsächlich in der Liste sichtbar waren [2].

Der Hauptkommentar, den ich zu diesem Thema hinzufügen möchte, besteht darin zu sagen, dass das von Ihnen gewählte Framework nicht alle Leistungsprobleme löst, mit denen Sie in Ihrer Anwendung wahrscheinlich konfrontiert werden. Wie Sie aus anderen Antworten ersehen haben, wird es sich am Ende auszahlen zu wissen, wie Ihr gewähltes Framework seine Magie umsetzt und ein Framework wählt, das Ihnen erlaubt, zu sehen, was es tut (via Performance Instrumentation). Und das Framework ist kein Ersatz für das Verständnis der Kernmerkmale moderner Browserimplementierungen. Das Hochleistungs-Javascript-Buch, das vor vielen Jahren geschrieben wurde, ist immer noch eine großartige Ressource. Und lernen Sie, die vielen verfügbaren Tools zur Profilerstellung zu verwenden, damit Sie die Engpässe in Ihrer Anwendung schnell eingrenzen können.

Beste,

-

Verweise:

[1]. http://shop.oreilly.com/product/9780596802806.do Lesen Sie Kapitel 3 über DOM-Scripting

[2]. https://github.com/shyam-habarakada/js-virtual-list-view




Nicht Benchmarked Backbone und Angular. Ich habe immer noch meine wirkliche Erfahrung mit beiden auf derselben App geteilt - eine mittelgroße Anwendung, mit SPA. Zuerst haben wir Backbone verwendet und eine ganze Reihe von Features fertiggestellt. Produktiver und klarer Code als direktes Schreiben in JS / jQuery . Nach einem Jahr wechselten wir zu angularjs . Schrieb alles in eckiger, jetzt haben wir rund 140 Direktiven, Controller und Dienste gemischt. Codequalität und Produktivität viel besser. Aber es ist nicht so schnell wie die gleiche App im Backbone. Jetzt nur noch auf das Objekt achten. Achten Sie darauf, in Chrom für Perf Boost veröffentlicht zu werden. Angularjs Team muss Performance-Ecke beobachten.

Bevor Sie sich für ein Framework entscheiden, sollten Sie wirklich gut darüber lesen, wo es passt. Wenn Ihre Json-Antwort zu viele Attrs enthält und zu viele solcher Objekte zu jeder Zeit lebendig sind, wird der Winkel langsam sein. Es gewinnt Backbone, aber wieder müssen Sie viele Dinge, Code-Qualität und Muster selbst mit Backbone verwalten.




Links