减少初始 Web 应用程序加载时间答案

【问题标题】：Decrease initial web app load time减少初始 Web 应用程序加载时间
【发布时间】：2011-12-13 02:42:17
【问题描述】：

我正在使用 ExtJS 创建一个单页网络应用程序。

在发送到浏览器的初始 HTML 文件中注入 JS、CSS 和 HTML 而不是仅包括脚本和 css 标签以从服务器加载文件，这不是减少 Web 应用程序加载时间的最佳方法之一一段时间以来，这会将多个 HTTP 请求减少为一个。

【问题讨论】：

如果静态内容有单独的文件，那么它们可以被浏览器缓存。
我对此表示怀疑。您必须考虑浏览器缓存，这使得跨多个页面加载静态资源的速度要快得多。
@Pointy：但这仍然会让每个用户都不得不等待所有文件第一次从服务器加载。如果他们在没有缓存的情况下刷新它，那么他们必须再次等待更长的时间。
没错，但浏览器发起并发 HTTP 请求也是如此。
@Pointy：这对于 CDN 来说大部分都是正确的，因为行为正常的浏览器应该在每个主机上发起不超过 2 个并发请求

标签： javascript html css http web-applications

【解决方案1】：

您可能喜欢 httpcombiner.ashx 的概念。

http://archive.msdn.microsoft.com/HttpCombiner

这个工具还可以压缩和缓存你的js和css

【讨论】：

【解决方案2】：

如果您想减少初始加载时间，最好的方法之一是利用浏览器缓存。建议您考虑使用托管的 ExtJS 库，例如来自 Google Ajax APIs。潜在访问者很有可能已经将其缓存。

这只是众多提示之一。

【讨论】：

【解决方案3】：

本网页概述了一些减少感知网页加载时间的最佳做法。

http://developer.yahoo.com/performance/rules.html

除了使用 pavan 建议的冷凝器之外，您还可以使用 Google 的闭包编译器来最小化 javascript 文件。

http://closure-compiler.appspot.com/home

【讨论】：

【解决方案4】：

嗯，加载时间和观察到的加载时间有很大的不同。减少加载时间的最佳方法之一是使用服务器端压缩。但是，对于用户而言，渐进式加载的加载速度似乎更快。
因此，初始响应应该只包含最少的样式表集（让浏览器渲染稍后到达的已经设置样式的东西）和布局。然后，您可以对某些加载其他组件的 AJAX 加载器进行 onLoad 回调。
最重要的是不要忘记调整图像容器的大小。最烦人的事情之一是当您仅仅因为图像开始加载并更改布局而错过点击链接。

【讨论】：