单个.js文件与延迟加载

场景：您正在构建一个大型JavaScript驱动的Web应用程序，您希望尽可能少地刷新页面。想象一下80-100MB的未定义的JavaScript，只是为了让一个数字定义“大”。单个.js文件与延迟加载

我的假设是，如果您延迟加载您的JavaScript文件，您可以在加载时间上获得更好的平衡（也就是说，每次刷新页面时不必等待几秒钟），希望能够导致用户在加载过程中并没有真正注意到滞后。我猜测在这种情况下，延迟加载会比典型的单个缩小的.js文件更加令人满意。

现在，从理论上讲，无论文件大小如何，对给定服务器上的任何文件的请求都有固定成本。所以，太多的请求不会是可取的。例如，如果一个小的JavaScript文件与其他10个小型或中型文件同时加载，最好将它们组合在一起以节省多个请求的成本。

我的问题是，假设合理的默认值（假设客户端有3-5Mbps的连接和一个体面的硬件），什么是要请求的文件的理想大小？太大了，你又回到一次加载太多了;太小，并且请求的成本比您收回的数据量更加昂贵，从而降低您每秒数据的经济性。

编辑：所有的答案都太棒了。我只选择了本，因为他给了一个具体的数字。

来源

2011-08-03 benekastah

伟大的问题！我对自己的实际数字感到好奇。 –

Nitpick：“mb”代表millibit，“Mb”代表兆字节，“MB”代表兆字节。我可以假设你实际上分别是80-100MB和3-5Mbps？ – BalusC

@BalusC感谢您的澄清！它应该现在正确地阅读:) – benekastah

我会尽量保留需要加载显示页面（即使量只是加载指标）在300K以下。在此之后，我会一次下载最多5MB的额外数据，并显示加载指示器（可能是进度条）。咖啡厅宽带wifi的15MB下载失败，否则看起来没问题。如果它足够糟糕，< 5MB下载失败我可能不会责怪一个网站不工作。

我也会考虑使用像LabJS或HeadJS这样的加载程序以编程方式添加脚本标记，一次下载两个文件，超出最初的< 300K文件。

来源

2011-08-03 22:21:53

+1提到一些好的图书馆。我一直在调查[RequireJS]（http://requirejs.org/）。因此，如果每次下载的尺寸相同，那么≈5MB将是您的理想尺寸，还是最大？ – benekastah

加载第一个5MB后，这将是我理想的尺寸。不过，我可能会将前5MB分成几个块。例如，如果我有一些可以在200K之后查看的内容，在2MB之后进行编辑，在100MB之后进行离线搜索，我会首先加载200K，加载1.8KB，之后再以5MB块的形式将剩余的98MB下拉。 –

在看到Jethro Larson与凯尔辛普森的reddit评论的链接之后，我会与之前提到的两个文件一起使用。我会把每个阶段分成两个请求。我的数字被猜出，但我希望你明白。同时，在认识到HTTP每请求负载较低的情况下，我会一次执行2个2.5 MB的请求，而不是1个5MB的请求。 –

谷歌的网页速度举措涵盖这样一些细节：

http://code.google.com/speed/page-speed/docs/rules_intro.html

具体http://code.google.com/speed/page-speed/docs/payload.html

来源

2011-08-03 22:11:21 AlienWebguy

这些是可怕的资源，谢谢！ – benekastah

很高兴帮助！ :) – AlienWebguy

我认为很明显，让客户端下载超过MB的js才可以做任何事情是不好的。而且让客户端下载更多的东西也是不好的。但是将所有内容缓存起来都有明显的好处。

将影响数字

因素：

往返时间
服务器响应时间
头的大小（包括饼干）
缓存技术
浏览器（见http://browserscope.com）

平衡平行板下载和不同的缓存需求也是需要担心的因素。这是凯尔辛普森最近在这里部分覆盖：http://www.reddit.com/r/javascript/comments/j7ng4/do_you_use_script_loaders/c29wza8

来源

2011-08-03 22:35:12

您提到了缓存技术。你的意思是浏览器的缓存方法？ – benekastah

它是http://www.browserscope.org/。这里是网络部分http://www.browserscope.org/?category=network我也不确切知道BrowserScope的功能，但我现在有了一个更好的主意。有用的网站。我还建议http://saucelabs.com/在其他浏览器中测试您自己的网站。 –

@benekastah更多的东西，你可以做的事来影响它。 etags，过期，通过localStorage进行手动缓存，应用程序缓存，如何对变化很大的文件进行分组以及很少更改的文件。 –

单个.js文件与延迟加载

回答

相关问题