如何找出哪个部分的js代码拖慢了页面速度

Question

你好，我的网页在本地服务器上加载需要大约9秒钟，在远程服务器上则需要20秒钟左右。我确定问题出在JS代码上，但是我找不到具体哪段代码导致了网页加载缓慢。请问你能否帮助我找到解决方案或者提供一些工具来帮助我排查问题？

- Shaheer

---

你的其他六个问题中只有一个得到了可接受的答案？ - T.J. Crowder

是的，主要是因为我不得不使用自己的解决方案。 - Shaheer

Answer 1

所有现代主流浏览器都已经内置了JS性能分析工具。 Firebug和Chrome都有很好的客户端脚本性能分析工具，同时它们还有HTTP流量监控工具，这些工具也可以帮助您诊断问题。IE也有类似的工具。

下面是一个Firebug性能分析器的示例： [编辑] 在Chrome中，按Ctrl + Shift + J打开JavaScript性能分析页面。

- redsquare

---

我已经在使用了，伙计 :) 它告诉我哪个文件正在加载，但我需要找到使文件加载缓慢的部分/函数/行等是什么 :) 无论如何，感谢您的帮助。 - Shaheer

@user503148 嗯，伙计，你没有看正确的屏幕。上面提供的工具会为每个执行的 JavaScript 方法进行概要，并给出详细的时间信息。 - redsquare

Answer 2

替代内置或附加的分析工具（我会说是首选）：使用计时器。我已经准备好了这个：

 function Timer(){
  var start = new Date
      ,ended = 'running ...';
  return {
      start: function(){
              start = new Date; 
              return this
      },
      stop:  function(mssg) {
              var stoppedAt = (new Date - start);
           ended = [(mssg ? mssg+': ' : '')
                           ,(stoppedAt/1000)+' sec (+/- 15ms)'].join('')
              return ended;
      }
      ,toString: function(){
                return ended;
      }
  };
}
//usage:
var timenow = new Timer().start();
// run a function
console.log(timenow.stop('this took '));

你还可以使用一个包装函数来计算一个函数的执行时间。类似这样的方式：

function timedFn(fn){
  var timer = new Timer().start();
  fn();
  console.log(timer.stop('function took '));
}

- KooiInc

Answer 3

我将添加Web developer 1.1.8 Firefox的附加组件，配合Firebug和Chrome

欲了解更多详情，请查看此链接

此致

Wazzy

- Wazy

Answer 4

你可以在 Firebug 中使用 YSlow。以下是 YSlow 网页的内容：

YSlow 分析网页并建议根据高性能网页规则集来提高其性能。 YSlow 是与 Firebug 网页开发工具集成的 Firefox 插件。 YSlow 根据三种预定义规则集或用户定义的规则集对网页进行评分。它提供了改进页面性能的建议，总结了页面的组成部分，显示页面的统计信息，并提供了性能分析工具，包括 Smush.it™ 和 JSLint。

- Tommy