在 Chrome 扩展中 gzip 一个 JavaScript 文件值得吗?
Is it worthwhile to gzip a JavaScript file in a Chrome Extension?
是否有任何理由对 chrome 扩展程序在本地加载的大量 js 文件进行 gzip 压缩?它会提高还是降低加载速度?为什么?
Google推荐使用Gzip压缩文件。但这仅在通过网络传输文件时才重要吗?还是在本地处理 gzip 文件也更快?
加载脚本时,至少有两个阶段会影响脚本加载的速度:数据 t运行sfer 时间和 parsing/evaluation 时间。
当通过网络请求脚本时,数据 t运行sfer 当然受制于原始服务器和浏览器之间的网络速度 links。在这种情况下,数据 t运行sfer 时间几乎总是超过 parsing/evaluation 时间,这使得 gzip 通常在减少总体加载时间方面获胜:gzip 略微增加了 parsing/evaluation 时间,但是可以显着减少数据t运行sfer时间。
我认为你问题的症结在于,当数据 t运行sfer 来自本地磁盘时,这是否仍然成立。本地磁盘通常会比网络快,所以问题是本地磁盘是否比网络快到 gzip 解压缩的额外处理时间开始高于从未压缩文件中读取额外字节的成本磁盘。
这个问题的答案肯定要看磁盘和CPU,所以不可能有一个确定的答案。但是,您可以通过尝试这两个选项并使用 Chrome 开发人员工具来做出明智的选择,这些工具可用于扩展程序使用的后台页面以及常规网页。您可以通过访问 chrome://extensions
页面并单击 "Inspect views" 旁边的背景页面 link 来找到后台页面的开发者工具,在此屏幕截图中显示为 "background.html":
尝试使用开发人员工具回答的问题是:
- 任一选项是否需要足够长的时间以值得进一步细读?如果这两种方法都能生成一个加载速度足以满足您需求的后台页面,那么您不妨只做对您的开发工作流程来说最简单的事情。
- 这两个选项之间有明显的时间差异吗?当然什么是 "significant" 将取决于您的用例,但如果差异很小,那么您可以再次选择最方便的方法。
- 假设时差显着,哪个更快?
一个好的起点是 select 后台页面开发者工具中的 "Timeline" 选项卡,然后按 F5 刷新后台页面并在初始阶段捕获有关其资源使用情况的信息负载:
中间条中的每个水平条代表 Chrome 在加载此背景页面期间执行特定操作所花费的时间。与您的问题最相关的事件是:
- "Send Request" 对于您正在考虑的 JavaScript 文件。这在可视化中将是一个非常小的 "bar",因为 Chrome 认为这是一个瞬时事件,开始了未显示的后台任务。
- "Finish Loading" 用于同一文件。 "Send Request" 和 "Finish Loading" 之间的时间差是从磁盘读取文件所花费的时间。
- "Evaluate Script" 用于此文件。 (请注意,gzip 解码通常与从 network/disk 加载数据同时完成,因此 gzip 时间很可能包含在 "Send Request"/"Finish Loading" 之间的 space 而不是比这个 "Evaluate Script" 块。)
对于您的问题而言,重要的时间是 "Send Request" 开始和 "Evaluate Script" 结束之间的时间差。在我这里的示例中,使用 Google Cast 扩展名:
- "Send Request" 开始于 95.2 毫秒
- "Evaluate Script" 开始于 103.1 毫秒,运行 持续 174 毫秒,因此结束于 277.1 毫秒
- 因此总花费时间为 277.1 - 95.2 = 181.9ms
通过尝试使用未压缩 JS 的扩展和相同 JS 压缩的扩展,您可以获得两个时间值并回答上述问题,从而找到您最初问题的答案是否压缩JS是值得的。
在进行这种分析时要牢记的一件重要事情是,必须牢记应用程序的性能需求。对于 Chrome 扩展程序的后台页面,用户实际上并不能直接看到加载所花费的时间,因此可以推测启动时间可以自由发挥。除非大量时间花在加载和解析 JavaScript 文件上,并且这种延迟具有用户可见的影响,否则花在尝试优化此过程上的时间很可能是浪费时间。
对于 Google Cast 扩展,其脚本加载时间为 181 毫秒,整个页面的初始化时间为 500 毫秒。作为这个扩展的用户,我没有抱怨它需要 500 毫秒来初始化,如果我是这个扩展的开发者,我希望我不会尝试进一步优化它的启动时间。
是否有任何理由对 chrome 扩展程序在本地加载的大量 js 文件进行 gzip 压缩?它会提高还是降低加载速度?为什么?
Google推荐使用Gzip压缩文件。但这仅在通过网络传输文件时才重要吗?还是在本地处理 gzip 文件也更快?
加载脚本时,至少有两个阶段会影响脚本加载的速度:数据 t运行sfer 时间和 parsing/evaluation 时间。
当通过网络请求脚本时,数据 t运行sfer 当然受制于原始服务器和浏览器之间的网络速度 links。在这种情况下,数据 t运行sfer 时间几乎总是超过 parsing/evaluation 时间,这使得 gzip 通常在减少总体加载时间方面获胜:gzip 略微增加了 parsing/evaluation 时间,但是可以显着减少数据t运行sfer时间。
我认为你问题的症结在于,当数据 t运行sfer 来自本地磁盘时,这是否仍然成立。本地磁盘通常会比网络快,所以问题是本地磁盘是否比网络快到 gzip 解压缩的额外处理时间开始高于从未压缩文件中读取额外字节的成本磁盘。
这个问题的答案肯定要看磁盘和CPU,所以不可能有一个确定的答案。但是,您可以通过尝试这两个选项并使用 Chrome 开发人员工具来做出明智的选择,这些工具可用于扩展程序使用的后台页面以及常规网页。您可以通过访问 chrome://extensions
页面并单击 "Inspect views" 旁边的背景页面 link 来找到后台页面的开发者工具,在此屏幕截图中显示为 "background.html":
尝试使用开发人员工具回答的问题是:
- 任一选项是否需要足够长的时间以值得进一步细读?如果这两种方法都能生成一个加载速度足以满足您需求的后台页面,那么您不妨只做对您的开发工作流程来说最简单的事情。
- 这两个选项之间有明显的时间差异吗?当然什么是 "significant" 将取决于您的用例,但如果差异很小,那么您可以再次选择最方便的方法。
- 假设时差显着,哪个更快?
一个好的起点是 select 后台页面开发者工具中的 "Timeline" 选项卡,然后按 F5 刷新后台页面并在初始阶段捕获有关其资源使用情况的信息负载:
中间条中的每个水平条代表 Chrome 在加载此背景页面期间执行特定操作所花费的时间。与您的问题最相关的事件是:
- "Send Request" 对于您正在考虑的 JavaScript 文件。这在可视化中将是一个非常小的 "bar",因为 Chrome 认为这是一个瞬时事件,开始了未显示的后台任务。
- "Finish Loading" 用于同一文件。 "Send Request" 和 "Finish Loading" 之间的时间差是从磁盘读取文件所花费的时间。
- "Evaluate Script" 用于此文件。 (请注意,gzip 解码通常与从 network/disk 加载数据同时完成,因此 gzip 时间很可能包含在 "Send Request"/"Finish Loading" 之间的 space 而不是比这个 "Evaluate Script" 块。)
对于您的问题而言,重要的时间是 "Send Request" 开始和 "Evaluate Script" 结束之间的时间差。在我这里的示例中,使用 Google Cast 扩展名:
- "Send Request" 开始于 95.2 毫秒
- "Evaluate Script" 开始于 103.1 毫秒,运行 持续 174 毫秒,因此结束于 277.1 毫秒
- 因此总花费时间为 277.1 - 95.2 = 181.9ms
通过尝试使用未压缩 JS 的扩展和相同 JS 压缩的扩展,您可以获得两个时间值并回答上述问题,从而找到您最初问题的答案是否压缩JS是值得的。
在进行这种分析时要牢记的一件重要事情是,必须牢记应用程序的性能需求。对于 Chrome 扩展程序的后台页面,用户实际上并不能直接看到加载所花费的时间,因此可以推测启动时间可以自由发挥。除非大量时间花在加载和解析 JavaScript 文件上,并且这种延迟具有用户可见的影响,否则花在尝试优化此过程上的时间很可能是浪费时间。
对于 Google Cast 扩展,其脚本加载时间为 181 毫秒,整个页面的初始化时间为 500 毫秒。作为这个扩展的用户,我没有抱怨它需要 500 毫秒来初始化,如果我是这个扩展的开发者,我希望我不会尝试进一步优化它的启动时间。