3rd-party-cpu-abuser 中文文档教程

Question

Why

很多网站充斥着广告和其他第 3 方，它们都试图滥用 CPU，导致用户因为页面太慢而离开。 JS Profiling 通常是与您的第 3 方开始谈判（或删除他们......）的关键，但需要时间。 该项目将帮助您快速识别哪个域名占用了大部分 CPU。

Install

npm install 3rd-party-cpu-abuser

使用 Node 6.3.0

Usage from CLI

1. From the Chrome dev tools "Performance" tab, record a profiling session, desktop or mobile
2. End, then "Save Profile", to have the JSON export
3. run node cli.js path/to/the.json
4. Read the output

输出（来自报纸网站上的 android 平板电脑，有很多第 3 方）：

Analyzing samples/VA-article.json
┌──────────────────────────┬──────────┐
│ Total CPU busy time (ms) │ 10107.07 │
├──────────────────────────┼──────────┤
│ Total number of domains  │ 57       │
├──────────────────────────┼──────────┤
│ Number of big offenders  │ 40       │
└──────────────────────────┴──────────┘
┌───────────────┬────────────────────────────────┐
│ CPU Time (ms) │ domain name                    │
├───────────────┼────────────────────────────────┤
│ 1311.39       │ www.vogue.fr                   │
├───────────────┼────────────────────────────────┤
│ 865.91        │ z.moatads.com                  │
├───────────────┼────────────────────────────────┤
│ 835.78        │ pagead2.googlesyndication.com  │
├───────────────┼────────────────────────────────┤
│ 788.86        │ securepubads.g.doubleclick.net │
├───────────────┼────────────────────────────────┤
│ ………………        │ ……………………………………………………           │
├───────────────┼────────────────────────────────┤
│ 565.78        │ data05.adlooxtracking.com      │
├───────────────┼────────────────────────────────┤
│ 559.52        │ tpc.googlesyndication.com      │
└───────────────┴────────────────────────────────┘

如何阅读： “总 CPU 繁忙时间”是分析器记录的所有内容

“大罪犯”是总专用 CPU 时间超过 150 毫秒的域的数量（您可以使用 -t 标志更改此参数）

时间 => ; domain ：时间以毫秒为单位，domain 是托管 JS 的地方。 探查器计算在每个函数中花费的时间，并通过深入到调用堆栈，它知道它是在哪个文件中定义的，在哪个域中。 我们将所有内容加起来，它可以让您很好地了解哪个第 3 方让您的页面滞后

JSON export

或者您可以访问与 JSON 相同的数据： node cli.js path/to/the.json --json

或者你可以编写自己的 nodeJS 模块并使用它：

const statsPerDomain = require('3rd-party-cpu-abuser')
console.log(
  statsPerDomain.data({
    file: 'path/to/the.json'
  })
)

Start and End Times

默认情况下，整个跟踪中的所有脚本执行都被计算在内，但如果你想只计算命名事件之前或之后的执行时间然后 -s (--startMark) 和 -e (--endMark) 执行此操作。

例如

node cli.js path/to/the.json -s firstMeaningfulPaint

或

node cli.js path/to/the.json -e loadEventEnd

或

node cli.js path/to/the.json -s loadEventStart -e loadEventEnd

可能在跟踪中的一些示例事件包括：

• domLoading
• firstLayout
• firstPaint
• firstContentfulPaint
• firstTextPaint
• firstImagePaint
• firstMeaningfulPaintCandidate
• firstMeaningfulPaint
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

用于子集跟踪的时间戳是根帧上事件的时间戳（通常加载的页面）。 如果事件不存在，将抛出错误，如果事件多于第一个，将使用。

Grouping

默认情况下，CPU 时间按子域分组，但可以按无、类别、子域、域 分组、URL 或 EventName（在 Chrome 的性能选项卡中使用的类别）使用 g (--groupBy)

标志示例

node cli.js path/to/the.json -g URL

How

它使用 Paul Irish 的 devtools- timeline-model 从原始时间线数据 JSON 文件中提取有意义的数据。 它只是计算每个域的统计数据并很好地显示它。

Future

如果你想帮助我，欢迎你：

• add Alias for domains (eg : cdn.adnxs.com is appNexus, 2mdn.net is Doubleclick…)
• add score for each domain :
• is CPU consumed before / after DOM ready, before / after onload
• how many times the CPU runs at 100% for more than 150 ms (so, blocks the UI)
• how many forced reflows (like here)
• compare 2 different runs side by side
• add tests