javascript - Angular $templateCache 与 HTML5 浏览器缓存

Question

我正在努力思考缓存的概念。我没有广泛使用它，并且有一个关于使用 Angular 的 $templateCache 与浏览器缓存的问题:

1) 浏览器的缓存和 Angular 的 $templateCache 是否相互竞争？一般来说，IE 存储的是同一种类型的东西吗？

考虑到 Angular 是多么“固执己见”，在开发 Angular 应用程序时，我认为如果浏览器确实存储了相同类型的内容，我会鼓励您在浏览器上使用 $templateCache。如果它们确实存储了相同类型的东西，那么使用它们各自的优缺点是什么？

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

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

Answer 1

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

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

$templateCache:是 angularjs 存储和跟踪首次加载后用于不同 Angular 组件/模块的 html 片段的方式(尽管您可以选择直接加载 $templateCache)。 $templateCache 会在您每次重新加载应用程序时重建，它不会跨浏览器持久存在。

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

几个问题的答案

---

How do these two caches interact with HTTP requests?

您不能缓存$.ajax 或$http 请求，但这只会影响获取静态内容，例如javascript 文件、css 文件和图像。浏览器缓存的优点是可以改善用户体验/性能。如果他们昨天刚刚访问过您的网站，则他们不必等待拉下所有相关的静态内容。

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

为了更好地举例说明这个片段:

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

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

What are the drawbacks of using caches in general (either for caching files or response from HTTP requests)

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

示例:你更新你的 myapp.js，原来是 1.1 现在是 1.2 用户浏览器现在不会那样，他们会加载旧版本的网站。

要解决这个问题，您可以更改名称。这将强制用户浏览器获取最新的文件。

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

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