角$templateCache与HTML5浏览器缓存

Question

我正试图把我的头放在缓存的概念上。我没有广泛地使用它，并且有一个关于使用Angular的$templateCache和浏览器缓存的问题：

( 1)浏览器的缓存和角的$templateCache相互竞争吗？一般来说，他们储存的东西都是一样的吗？

考虑到“固执己见”的角度，在开发角应用程序时，我会假设如果它们存储了相同类型的东西，那么应该鼓励您使用$templateCache而不是浏览器。如果它们确实存储了相同的东西，那么使用它们的利弊是什么？

2)动态生成的HTML如何适合讨论要使用的缓存(如果它们存储不同的东西)？

( 3)一般来说，使用缓存有什么缺点吗？

Answer 1

$templateCache完全独立于浏览器缓存。

浏览器缓存：缓存myapp.js和fancy.css等文件，这样如果浏览器有最近缓存的副本，浏览器就不必从服务器获取文件。

$templateCache：是angularjs存储和跟踪html片段的方式，这些片段用于第一次加载不同角度的组件/模块(尽管您可以选择直接加载$templateCache )。每次重新加载应用程序时，都会重新构建$templateCache，它不会在整个浏览器中持久存在。

之所以这样做，是因为您可能会为多个模板重用相同的html文件(或者它可能多次出现在您的站点上，例如在使用指令时)。这允许角知道它已经有了这个片段，并且可以从缓存中加载它。

几个问题的答案

这两个缓存如何与HTTP请求交互？

您不能缓存$.ajax或$http请求，但这只会影响获取静态内容，如javascript文件、css文件和图像。浏览器缓存的优点是它将改善用户体验/性能。如果他们只是在你的网站昨天，他们不需要等待下来所有相关的静态内容。

angularjs $templateCache根本不与http交互。虽然资源可能来自http提取，而您的浏览器可以缓存该文件。角是选择组织和跟踪这些片段的html。

为了更好地说明这一点，请看一下这个片段：

angular.module('directivesModule').directive('mySharedScope', function () {
    return {
        template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
    };
});

上述模块中的模板仍将其‘html’添加到角$templateCache中，即使html是在指令定义中内联的。

通常使用缓存(用于缓存文件或HTTP请求的响应)的缺点是什么？

在更新静态内容的版本时，您确实需要小心。您可以通过各种类型的缓存破坏来解决这个问题。

示例：您更新了您的myapp.js，WAS1.1现在是1.2，用户浏览器现在不会那样，他们将加载站点的旧版本。

为了解决这个问题，你可以换个名字。这将迫使用户浏览器获取最近的文件。

例如。myapp_1.1.js到myapp_1.2.js

同样，angularjs $templateCache不受此影响，因为它不是持久的。

Answer 2

以上是$templateCache的好答案。此外，我相信，如果您确实决定要缓存模板，那么您可能希望使用ng-include签出。

角并不是真正鼓励1种方法的另一种。这取决于你的需要。

还有一个get /grunt任务角模板，您可以使用它作为预构建步骤，将模板文件转换为字符串，这些字符串被丢弃在JS文件中，以补充模板缓存。