javascript - Angular.js 和 chrome 应用程序的最佳缓存策略是什么？

Question

所以我有一个梦想。我的梦想是我的 Angular 应用程序在为用户呈现数据之前等待尽可能少的时间。我还想象用户可以在没有网络连接的情况下使用我的应用程序。

基于此，我尝试拥有两级缓存。它们是(这些是粗略的名称，不要按字面意思理解)内存和磁盘。内存存储为全局变量，可通过服务在我的应用程序中访问。第二个是“磁盘”，存储在 chrome.storage.sync 中。

所以我的应用程序当前尝试从内存加载，尝试从磁盘加载，然后发送一个慢速网络请求以获取最新的，如果找到，更新内存和磁盘。

这是正确的方法吗？我在考虑如何对其进行标准化或抽象化时遇到麻烦，因此我不必为每种数据类型手动执行此操作。效果很好，但是代码很多。

// Load from Memory NOW
  if(Cache.get("receiptList")) {
    $scope.receipts = Cache.get("receiptList");
    console.log("Mem Cache hit");
  } else {
    console.log("Mem Cache miss");
  }

  // Asynchronously load from disk soon
  chrome.storage.sync.get('receiptList', function(value) {
    // The $apply is only necessary to execute the function inside Angular scope
    if(value) {
      $scope.$apply(function() {

        console.log("Disk cache hit");
        console.log(value.receiptList);
        $scope.receipts = value.receiptList;
      });
    } else {
      console.log("Disk cache miss.");
    }
  });

  // Asynchronously load from network later and save
  Receipt.query({}, function(result) {
    Cache.put("receiptList",result);
    chrome.storage.sync.set({'receiptList':result});
    $scope.receipts = result;
    console.log("Caches set from network.");
  });

Answer 1

我所知道的改善 Angular 应用加载时间和/或渲染时间的最佳技术是:

• 预加载 HTML 模板
• 预加载非 HTML 资源

https://medium.com/p/f8ae57e2cec3

• 致力于关键渲染路径的优化 https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present#slide=id.p19