在许多WebPagetest浏览器中运行jsperf测试

最新推荐文章于 2024-05-14 09:48:19 发布

cunbei2644

最新推荐文章于 2024-05-14 09:48:19 发布

阅读量218

点赞数

文章标签： php python java javascript selenium ViewUI

原文链接：https://www.phpied.com/jsperf-bookmarklet/

版权

动机(Motivation)

1. You write a new test to confirm a JavaScript-related performance speculation 2. You click 3. Your test runs in a bunch of browsers

1.您编写了一个新测试以确认与JavaScript有关的性能推测。2.单击3.您的测试在许多浏览器中运行

词汇表(Glossary)

JSperf.com is the site where all you JavaScript performance guesswork should go to die or be confirmed. You know how the old wise people say "JSperf URL or it didn't happen! Now off my lawn!". Yup, that jsperf.com

JSperf.com是您所有JavaScript性能猜测工作都将死或被确认的网站。您知道明智的老人怎么说“ JSperf URL或它没有发生！现在离开我的草坪！”。是的，那个jsperf.com

WebPagetest.org (WPT) is the site where you get answers to the ol' question: "Why do people say my oowsome site is slow? And what should I do about it?"

WebPagetest.org (WPT)是您获得以下问题的答案的网站：“为什么人们说我糟糕的网站运行缓慢？我该怎么办？”

Bookmarklet is a little piece of JavaScript you conveniently access from your browser bookmarks and inject into other non-suspecting sites.

Bookmarklet是一小段JavaScript，您可以从浏览器的书签中方便地访问它们，并将其注入其他不受怀疑的站点。

Github is where you host code.

Github是您托管代码的地方。

Bookmaker tool makes a bookmarklet from a .js file URL (probably hosted on github)

庄家工具通过.js文件URL(可能托管在github上)创建了一个小书签

天堂里的麻烦(Trouble in paradise)

These days we're so happy and spoiled with all these amazing tools around us. And yet, when you create a JSPerf test, you have to open all these browsers and run the test everywhere. Even IE. And, when on Mac, IE is usually not readily available. Plus it comes in a bunch versions - from almost-but-not-quite-forgotten IE6, all the way to IE10 The Greatest - and they have different, sometimes contradicting, performance characterics.

这些天，我们非常高兴，周围的所有这些令人惊奇的工具都让我们宠坏了。但是，当您创建JSPerf测试时，必须打开所有这些浏览器并在各处运行测试。甚至是IE。而且，在Mac上，IE通常不可用。加上它提供了很多版本-从几乎但不是被遗忘的IE6一直到IE10 The Greatest-它们具有不同的，有时是相互矛盾的性能特征。

救援：WPT (To the rescue: WPT)

WebPagetest has: a/ ability to run in a bunch of browsers and b/ an API

WebPagetest具有：a /在众多浏览器中运行的能力，以及b / API

小书签 (The bookmarklet)

The bookmarklet. It's here, on github

小书签。在这里，在github上

It starts by inquiring about your WPT API key. I know, you have to get one. You can read the API docs on how to get one, but let me save you the trip: you just need to ask pmeenan@[the tool's domain].org for a key. Politely. Tell him I sent you. Promise not to abuse.

首先从查询您的WPT API密钥开始。我知道，你必须得一个。您可以阅读有关如何获取API的API文档，但让我为您节省了旅途：您只需要向pmeenan @ [工具的域] .org索取密钥。礼貌地告诉他我发给你了。保证不要滥用。

  var key = localStorage.wpt_key;
  if (!key) {
    var prompt = window.__proto__.prompt;
    key = prompt('Your WebPageTest API key, please?');
    if (!key) {
      return gameOver();
    }
    localStorage.wpt_key = key;
  }

The key is stored in your localStorage so you don't have to paste it all the time.

密钥存储在您的localStorage因此您不必一直粘贴。

Oh, you may wonder what's up with that:

哦，您可能想知道这是怎么回事：

var prompt = window.__proto__.prompt;
prompt('Message...');

Looks like something somewhere on jsperf is doing window.prompt = function(){}, same for window.open and probably others. Makes sense, you don't want popup-y stuff (by the thousands) while running a test a gazilion times. So the bookmarklet has to go the window.__proto__ for the original prompt

看起来jsperf上的某处正在执行window.prompt = function(){} ，与window.open和其他可能相同。很有道理，在运行gazilion次测试时，您不需要弹出式的东西(成千上万个)。因此，书签必须转到window.__proto__以获取原始prompt

Moving on.

继续。

Setting up the constant params of the API call. The variable param will be the location which will tell what browser to use. We also give the (undocumented) time a value of 60s, so that the test has time to run. We also want only one run and just the first run (no full cache run).

设置API调用的常量参数。变量param将是告诉使用什么浏览器的location 。我们还将(未记录的) time设置为60s，以便测试有时间运行。我们还只希望一次运行，而只希望第一次运行(没有完整的缓存运行)。

The URL to test will be the current page loaded in jsperf.com which is where you run the bookmarklet. And we'll append #run for autorun.

要测试的URL将是jsperf.com中加载的当前页面，这是您运行小书签的位置。然后我们将#run附加为autorun 。

  // base params
  var wpt = 'http://www.webpagetest.org/runtest.php?';
  var params = {
    k: key,
    time: 60,
    runs: 1,
    fvonly: 1,
    url: 'http://jsperf.com' + location.pathname + '#run'
  };
  Object
    .keys(params)
    .forEach(function(key) {
      wpt += key + '=' + encodeURIComponent(params[key]) + '&';
    });

Finally, setup the locations with browsers IE6,7,8,9,10 and open all these browser windows:

最后，使用浏览器IE6、7、8、9、10设置位置，然后打开所有这些浏览器窗口：

  var locations = localStorage.wpt_locations;
  if (!locations) {
    locations = ['Dulles_IE6', 'Dulles_IE7', 'Dulles_IE8', 'Dulles_IE9', 'Dulles_IE10'];
  }
  
  // pop some windows up
  var open = window.__proto__.open;
  locations.forEach(function(loco){
    open(wpt + 'location=' + encodeURIComponent(loco));
  });

Again, the full source is here on github

同样，完整的源代码在github上

Github has a "raw" version, e.g. this so we take this url, paste it in the bookmaker tool and we get a nice installable bookmarklet link.

Github有一个“原始”版本，例如，因此，我们使用此url，将其粘贴到庄家工具中，我们会获得一个不错的可安装书签链接。

安装 (Install)

Drag this link to you bookmarks:

将此链接拖动到您的书签：

jsperf -> wpt

jsperf-> wpt

跑 (Run)

1. Go to any jsperf test, e.g. http://jsperf.com/array-proto-vs/3 2. Click the bookmarklet 3. Observe 5 new tabs with 5 IE versions running your test!

1.转到任何jsperf测试，例如http://jsperf.com/array-proto-vs/3 2.单击书签。3.观察5个新选项卡，其中有5个IE版本正在运行您的测试！