Wie viel gibt es einen Leistungsunterschied zwischen Vorlage und TemplateUrl?Wie groß ist der Leistungsunterschied zwischen Vorlage und VorlageUrl Angularjs
Derzeit verwende ich Vorlage in allen meinen Anweisungen, aber weil ich von der Leistung besessen bin, möchte ich jetzt, die schneller ist.
Und wenn ich templateUrl + $ templateCache verwende, ist das dann schneller als nur Vorlage in Direktiven?
Ich fragte mich die # 1 Frage Ihres Beitrags an einem anderen Tag. Da niemand zuvor darauf geantwortet hat und ich nicht genügend Rep für einen Kommentar habe, hier sind meine Ergebnisse nach ein paar Tests.
Die beste Antwort für Ihre erste Frage ist, dass mit templateURL Sie den Aufwand für die Faulen Verlangen des Teils haben werden, wenn Sie die Richtlinie nennen (und es geschieht nur beim ersten Mal, einmal geladen, wird es Verhalten praktisch gleich wie mit Vorlage). Der Overhead ist auf die zusätzliche Verarbeitung des Browsers mit der zusätzlichen Anforderung und den zusätzlichen Daten der Header zurückzuführen.
Die templateURL könnte nur in ärmeren Benutzererfahrung führen, wenn Sie auf einmal Unmengen an verschiedenen Richtlinien laden, und alle von ihnen haben kleine Dateien als partials (so die kleine ammount von Daten des Header wird einen großen Unterschied machen) .
Da der Unterschied normalerweise sehr gering ist, bevorzuge ich persönlich den templateURL Ansatz, da es den Code sauberer und organisierter macht.
Ich verwende templateURL jetzt. In der Produktion füge ich jeden HTML-Code in js ein und lege sie in den Cache. https://github.com/karlgoldstein/grunt-html2js – puppeteer701
Faced Art ähnlichen Problem hier und Chrom Entwickler-Tools (nämlich die Timeline) gab ein schönes Bild, das dann durch einen schönen Artikel bestätigt wurde https://thinkster.io/templatecache-tutorial/
Der Unterschied ist wirklich in $templateCache. Inline-Vorlage trifft es nicht, während Vorlagen geladen mit templateUrl oder <script type="test/ng-template"> tun. Sie bemerken den Unterschied möglicherweise erst, wenn Sie einige hundert Direktiven haben, die alle eine Inline-Vorlage zur Seite hinzufügen.
Die Sache ist, dass für jede solche Anweisung die Vorlage erneut in DOM geparst wird, was zu a) verschwendeter Zeit führt; b) verschwendete Erinnerung; c) viele GC-Aufrufe
Wie im obigen Artikel beschrieben, verwendet die Produktionsoption ein Build-Tool, um die $templateCache mit all Ihren Vorlagen auszufüllen.
Ich sehe die Kommentare in dem Artikel, zu dem Sie in Bezug auf das Reparieren von Vorlagen in dem DOM verknüpften, nicht. Betrachtet man die Implementierung in der 'applyDirectivesToNode'-Funktion für Angular 1.5, sieht es so aus, als ob Inline-Vorlagen, die mit' template 'und Vorlagen im Vorlagen-Cache spezifiziert sind, letztlich auf die gleiche Weise verarbeitet werden.Der Unterschied besteht darin, dass Angular selbst dann eine asynchrone $ HTTP-Anfrage erstellt, wenn der mit templateUrl angegebene Template im Cache vorhanden ist, um dessen Inhalt zu erhalten –
Dies ist eine JSPerf Testvorlage in einem $ templateCache Vergleichen Sie die Vorlage als String vs. vorbei: https://jsperf.com/angular-directive-template-vs-templateurl
In diesem Fall mit einer sehr einfachen Schablone, ein einfacher Inline-template schneller ist, vermutlich, weil es doesn Habe keinen Overhead, um eine asynchrone $http Anfrage zu erstellen. Obwohl diese Anforderung nur den Wert von $templateCache lädt, hat der Dienst noch Overhead.
[Wie üblich] (http://ericlippert.com/2012/12/17/performance-rant/) –