持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

如果一个H5很慢，如何排查性能问题？

这里的很慢是：加载速度慢。
那为什么很慢呢？网页文件、数据请求的很慢。
但是我们在考虑性能为什么慢之前，我们要先了解前端的性能指标，从客观的标准上来进行快慢的判断。

前端性能指标

我们搜索一下性能指标，发现能搜索到的性能指标非常多，也有很多非标准的指标。最常用的指标有如下几个：

First Paint (FP)【1】

First Paint是Paint Timing API的一部分，它是导航和浏览器在屏幕上呈现第一个像素之间的时间，呈现任何视觉上不同于导航前屏幕上的内容。

First Contentful Paint（FCP）【2】

First Contentful Paint（FCP）:浏览器首次绘制来自 DOM 的内容的时间，是当浏览器第一次渲染任何文字、图片（包含背景图片），以及非空白的 canvas 或 SVG 。排除任何 iframe 裡的內容，但包含等待中的web字体的文本 (webfonts)。

DomContentLoaded（DCL）【3】

DomContentLoaded：就很好理解了，就是原生的html事件：

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

例子：

script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });

  for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟 DOM 的解析。
      // 所以 DOMContentLoaded 事件稍后将启动。
  } 
</script>

Largest Contentful Paint（LCP）

可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间。

例子

try {
  let lcp;

  const po = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log(lastEntry.element);
  });

  po.observe({type: 'largest-contentful-paint', buffered: true});

} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

Load（L）

即 window.onload 触发时间，页面内容（包括图片）全部加载完成。

指标检测工具

有了这么多指标，但是用眼睛看肯定不太靠谱了是不是，所以就需要一些根据来辅助我们进行检测。

性能分析工具 - Chrome devtools

这已经是我们的老伙计了！

Performance：可以检测到上述的性能指标，并且有网页快照截图。
NetWork：可以看到各个资源的加载时间
Lighthouse

识别问题

如下图是 github 的性能分析，很明显这是加载慢，渲染很快。

文档

【1】First paint
【2】First Contentful Paint
【3】DOMContentLoaded
【4】# LargestContentfulPaint.element