JavaScript性能监测库Boomerang使用指南

卓巧知

于 2025-04-21 07:05:11 发布

阅读量254

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00476/article/details/147379488

JavaScript性能监测库Boomerang使用指南

boomerang End user oriented web performance testing and beaconing 项目地址: https://gitcode.com/gh_mirrors/boomerang8/boomerang

1. 项目介绍

Boomerang 是一个开源的 JavaScript 库，用于测量真实用户在网页上的加载时间，通常被称为 RUM（Real User Monitoring）。除了页面加载时间，Boomerang 还可以测量用户网页浏览体验的多种性能特性。你只需要将这个库嵌入到你的网页中，并调用 init() 方法即可。

2. 项目快速启动

2.1 同步方式

<script src="path/to/boomerang/boomerang.js"></script>
<script src="path/to/boomerang/plugins/rt.js"></script>
<script>
  BOOMR.init({
    beacon_url: "/boomerang_handler"
  });
</script>

注意：你需要至少包含一个插件（不一定是 rt），否则信标将不会被触发。

2.2 异步方式

2.2.1 创建初始化插件

创建一个包含初始化代码的插件（例如 zzz_init.js）：

BOOMR.init({
  config: parameters,
  // 其他配置...
});

你可以在这个插件中包含任何需要的代码，例如测量 Boomerang 加载完成的时间。

2.2.2 构建 Boomerang

构建过程中会引用 plugins.json 文件中提到的所有插件。要更改包含在 Boomerang 构建中的插件，修改该文件的相应内容。

执行以下命令构建 Boomerang：

grunt clean build

这会在 build 目录下创建可部署的 Boomerang 版本，例如 build/boomerang-<version>.min.js。

将这个文件部署到你的网页服务器或原始服务器上，并设置一个远的未来 max-age 头部。这个文件永远不会更改。

2.2.3 异步加载脚本

在 HTML 文档的顶部包含以下代码：

<script>
  (function(d, s) {
    var js = d.createElement(s),
        sc = d.getElementsByTagName(s)[0];
    js.src = "http://your-cdn.host.com/path/to/boomerang-<version>.js";
    sc.parentNode.insertBefore(js, sc);
  })(document, "script");
</script>

2.2.4 通过 iframe 加载

为了避免阻塞 onload 事件，你可以将 Boomerang 在 iframe 中异步加载。以下是相应的代码：

<script>
  (function() {
    var dom, doc, where, iframe = document.createElement('iframe');
    iframe.src = "javascript:void(0)";
    (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";
    var where = document.getElementsByTagName('script')[0];
    where.parentNode.insertBefore(iframe, where);
    try {
      doc = iframe.contentWindow.document;
    } catch (e) {
      dom = document.domain;
      iframe.src = "javascript:var d=document.open();d.domain='" + dom + "';void(0);";
      doc = iframe.contentWindow.document;
    }
    doc.open().write('<body onload="document._l();">').close();
    doc._l = function() {
      var js = this.createElement("script");
      if (dom) this.domain = dom;
      js.id = "boomr-if-as";
      js.src = 'http://your-cdn.host.com/path/to/boomerang-<version>.js';
      this.body.appendChild(js);
    };
  })();
</script>

注意：生成的 script 节点的 id 必须是 boomr-if-as，因为 Boomerang 会查找这个 id 来确定它是否在 iframe 中运行。