HTML&；JavaScript性能

我有一个网站，这是缓慢的。服务器对每个请求的响应时间约为2-300毫秒，但页面在浏览器中准备就绪需要1.5-2秒

通过禁用javascript和CSS的实验，我确定浏览器的处理占据了大部分时间

使用Firebug，我看到DOMContentLoaded事件似乎在从服务器接收数据后大约0.5到1秒后触发，“load”事件在另一个半秒后触发

使用Firebug的分析器，我发现javascript执行大约需要250毫秒

因此，我的问题是：

• 当Javascript执行需要250毫秒，但页面准备就绪需要一秒钟时，浏览器在剩下的时间里做什么
• DOMContentLoaded和load事件之间发生了什么
• 对我来说，优化这样一个页面的客户端性能的最佳方法是什么

  ---

为了提高性能，您可以尝试使用Javascript代码最小化工具（参见这里的示例：），尽管它很有用，但我认为您不会从中获得显著的速度提升。

不仅加载，而且页面呈现也需要时间

您可以做很多事情来优化性能，您可以使用诸如和之类的工具进一步分析页面并确定哪些事情值得做

另外，请看一下Steve Souders在其著作《高性能网站》中概述的内容：

减少HTTP请求

使用内容交付网络

添加Expires标头

Gzip组件

将样式表放在顶部

将脚本放在底部

避免使用CSS表达式

使JavaScript和CSS外部化

减少DNS查找

缩小JavaScript

避免重定向

删除重复的脚本

配置ETag

使AJAX可缓存

还有一本后续的书叫做。你也可以在他网站上的书中找到很多提示

---

另一个有用的资源是雅虎的。

这是一个非常广泛的问题。有很多关于客户端渲染性能的书籍。但总的来说,

• 您希望发出尽可能少的http请求。将所有javascript合并到一个文件中，将所有css合并到一个文件中，并将尽可能多的图像合并到一个文件中（请参阅）
• 您希望使这些请求尽可能小。缩小和gzip脚本。为静态内容添加一个设置为遥远未来日期的content expires标头
• 有一些公共CDN，比如来自google的CDN，允许您将常见脚本（比如jQuery库）热链接到google的服务器。这意味着很多访问者已经缓存了这些文件
• javascript的执行通常是一个很大的瓶颈。您希望尽可能推迟脚本加载。css应该始终包含在页眉中，但很多javascript可以包含在页面底部。在这些情况下，页面将快速显示，即使在DOMReady启动之前会有延迟

至于DOMReady和页面加载事件之间的延迟，这是加载图像（以及可能的视频）的地方，可能正在执行javascrpit

---

检查Firebug的加载项YSlow。

添加到前面的答案中， 不要在头文件本身中包含所有Javascript文件。。。。这只会延迟DOM加载。在包含之前拆分文件，并将其包含在正文中要对其执行操作的相应元素附近

当然，您可以在标题中包含JS库的缩小版本

javascript中变量作用域的闭包方法的使用。。。此外，使用最少数量的全局变量对inc的性能也有影响

并使用

谷歌的闭包编译器

或类似的工具来缩小js