Quartz 4

🔍 搜索

Simpleperf 工具生成火焰图无法打开或加载

3 min read

Simpleperf 工具生成火焰图无法打开或加载

https://zhuanlan.zhihu.com/p/684969147

使用 Android NDK 中的 Simpleperf 生成的网页无法打开或加载的问题，一直困扰了很多使用 Simpleperf 的 Android 性能开发工作者。这是因为本地生成的页面依赖一些 JavaScript 文件，国内的网络访问不到 CDN 源，此时需要将这些源替换成国内可以访问的源。

以下是两种解决办法：

  1. 修改 Simpleperf 生成的 HTML 文件，将 JavaScript 源替换成国内网络可以访问到的源；
  2. 修改 Python 脚本，使其在生成 HTML 前完成 JavaScript 源的替换工作。

这两种方法前者仅一次生效，后者永久生效。

修改 HTML 文件

因为这个方法是使用了 Simpleperf 的 Python 生成 HTML 后再去做替换，所以最大的弊端就是每次都需要手动替换。具体的替换步骤如下：

  1. 使用记事本软件打开 HTML 文件（我本地这个文件名字叫：report.html）；
  2. 按照如下的方式进行替换：

替换前：

<html><head><link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages': ['corechart', 'table']});</script>
<style type="text/css">
            .colForLine { width: 50px; }
            .colForCount { width: 100px; }
            .tableCell { font-size: 17px; }
            .boldTableCell { font-weight: bold; font-size: 17px; }
            </style>
</head>
<body><script>

替换后：

<html><head><link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages': ['corechart', 'table']});</script>
<style type="text/css">
            .colForLine { width: 50px; }
            .colForCount { width: 100px; }
            .tableCell { font-size: 17px; }
            .boldTableCell { font-weight: bold; font-size: 17px; }
            </style>
</head>
<body><script>

然后刷新页面，即可正确渲染数据：

修改 Python 脚本

因为这个方法是在 HTML 生成之前就做了替换，所以最大的优点就是不需要每次手动替换。在获取到 perf.data 文件后，我们会使用 Simpleperf 中的 report_html.py 脚本进行渲染出 report.html 文件：

python ./report_html.py -i D:\temp\perf.data -o D:\temp\report.html

因此，需要修改的是 report_html.py 文件。具体步骤如下：

  1. 使用记事本打开 report_html.py；
  2. 搜索关键字“URLS”，找到 JavaScript 数据源；
  3. 按照如下的方式进行替换：

替换前：

URLS = {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
    'bootstrap4-css': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css',
    'bootstrap4-popper':
        'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
    'bootstrap4': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js',
    'dataTable': 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',
    'dataTable-bootstrap4': 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',
    'dataTable-css': 'https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css',
    'gstatic-charts': 'https://www.gstatic.com/charts/loader.js',
}

替换后：

URLS = {
    'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js',
    'bootstrap4-css': 'https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css',
    'bootstrap4-popper':
        'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
    'bootstrap4': 'https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js',
    'dataTable': 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',
    'dataTable-bootstrap4': 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',
    'dataTable-css': 'https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css',
    'gstatic-charts': 'https://www.gstatic.com/charts/loader.js',
}

最后，再次执行命令，即可正确渲染数据：

Graph View