如何(或我应该)利用缓存从 chrome 扩展提供本地内容?
How to (or should I) utilize caching in serving local content from a chrome extension?
背景:
我希望这个问题不要太宽泛,但我还没有看到太多关于这一点的讨论。
我有一个具有以下简单架构的 chrome 扩展:背景页面触发弹出窗口。在 extensionRoot/popup/index.html。该弹出窗口从 /popup/ 目录加载多个资源,其中包括一些图像、一个 css 文件和一个大型 javascript 文件。
大型 javascript 文件已使用闭包编译器进行了清理,将其大小减少了大约 30%,然后通过混淆器将其大小增加了大约 15%。
问题:
除了优化代码本身,我还应该采取哪些其他措施来加快 chrome 呈现弹出窗口所需的时间?
我最感兴趣的是 "cache" 弹出窗口是否遗漏了任何步骤。缓存对我来说一直是个谜。我明白了,在这种情况下,代码可以在本地访问,因此缓存不会达到加快文件传输时间的正常目的。但是我是否应该采取一些步骤来将文件 "hot" 或 "live" 或 "loaded" 保存在 chrome 的内存中?
我知道这有点迂腐 - 但加载时间对我的应用程序来说绝对是至关重要的。我想其他人也有类似的问题。
有证据表明 Chrome 缓存了扩展 JS 文件,因为在没有快速扩展重新加载的情况下更改它们通常不会有任何效果。所以你什么都不是 "missing",而且你几乎无法影响它,因为你无法设置缓存指令。
如果您发现自己在弹出窗口中加载大块代码时遇到问题(因为它每次都会重新创建弹出窗口),您可以创建一个 persistent background page(不是活动页面)相反,在那里加载您的代码,并让弹出窗口调用后台页面。这样,您就消除了弹出窗口的加载时间。 请注意,如果代码在初始化期间依赖于 document
/window
- 那么这种方法将不起作用。
您可以 pass messages to the background page to let it do stuff, or you can directly access JS code through chrome.extension.getBackgroundPage()
.
// background page
var myBigFatCodeObject = ...; // Loads once at extension load
// popup
var myBigFatCodeObject = chrome.extension.getBackgroundPage().myBigFatCodeObject;
// Use myBigFatCodeObject as normal
注意:这是非常老派的做法,并且 Event pages 会明显失败。但是对于这个非常具体的优化,这可能很有用。
如前所述,在此 "shared" 代码中发生的任何 document
/window
特定的初始化都将引用后台页面。 如果它是 UI 库,这可能会导致失败。
从设计角度来看,通过使用基于消息的通信来解耦代码更好,但消息传递是异步的并且会产生开销。
背景:
我希望这个问题不要太宽泛,但我还没有看到太多关于这一点的讨论。
我有一个具有以下简单架构的 chrome 扩展:背景页面触发弹出窗口。在 extensionRoot/popup/index.html。该弹出窗口从 /popup/ 目录加载多个资源,其中包括一些图像、一个 css 文件和一个大型 javascript 文件。
大型 javascript 文件已使用闭包编译器进行了清理,将其大小减少了大约 30%,然后通过混淆器将其大小增加了大约 15%。
问题:
除了优化代码本身,我还应该采取哪些其他措施来加快 chrome 呈现弹出窗口所需的时间?
我最感兴趣的是 "cache" 弹出窗口是否遗漏了任何步骤。缓存对我来说一直是个谜。我明白了,在这种情况下,代码可以在本地访问,因此缓存不会达到加快文件传输时间的正常目的。但是我是否应该采取一些步骤来将文件 "hot" 或 "live" 或 "loaded" 保存在 chrome 的内存中?
我知道这有点迂腐 - 但加载时间对我的应用程序来说绝对是至关重要的。我想其他人也有类似的问题。
有证据表明 Chrome 缓存了扩展 JS 文件,因为在没有快速扩展重新加载的情况下更改它们通常不会有任何效果。所以你什么都不是 "missing",而且你几乎无法影响它,因为你无法设置缓存指令。
如果您发现自己在弹出窗口中加载大块代码时遇到问题(因为它每次都会重新创建弹出窗口),您可以创建一个 persistent background page(不是活动页面)相反,在那里加载您的代码,并让弹出窗口调用后台页面。这样,您就消除了弹出窗口的加载时间。 请注意,如果代码在初始化期间依赖于 document
/window
- 那么这种方法将不起作用。
您可以 pass messages to the background page to let it do stuff, or you can directly access JS code through chrome.extension.getBackgroundPage()
.
// background page
var myBigFatCodeObject = ...; // Loads once at extension load
// popup
var myBigFatCodeObject = chrome.extension.getBackgroundPage().myBigFatCodeObject;
// Use myBigFatCodeObject as normal
注意:这是非常老派的做法,并且 Event pages 会明显失败。但是对于这个非常具体的优化,这可能很有用。
如前所述,在此 "shared" 代码中发生的任何 document
/window
特定的初始化都将引用后台页面。 如果它是 UI 库,这可能会导致失败。
从设计角度来看,通过使用基于消息的通信来解耦代码更好,但消息传递是异步的并且会产生开销。