20200224 - 躺着吃肉都会胖

[vianvio]

实现页面性能检测工具。达到以下效果：

1. 本地无网络情况下检测前端工程某个/全部页面的性能，性能点参考chrome lighthouse
2. 工具能力封装为命令行工具，并发布npm包。
3. 上传demo工程，基于工具给百度，淘宝等常见页面性能打分。

[lovelmh13]

最近一直加班，先记录一下之前的进度，后面完善

代码没写完，暂时不放了先

关键词:

• Chrome DevTools协议: chrome devtools protocol
• chrome-remote-interface: CDP

• 神器: puppeteer (使用page.exposeFunction来执行浏览器中要执行的Web API)

  打分参考：

  first-cpu-idle 、performance-scoring 这个文档后面有打分标准

  性能标准

  first-cpu-idle

  Starts within the first 5s after FMP. If this timestamp is earlier than DOMContentLoaded, use DOMContentLoaded as firstCPUIdle.

  源码:

  first-cpu-idle

参考链接：

一文学会利用 Chrome Dev Tools 进行页面性能分析

Performance API

Performance

PerformanceTiming

PerformancePaintTiming

对浏览器首次渲染时间点的探究

使用 Paint Timing API | CSS-Tricks

Nodejs 发布自己的npm包并制作成命令行工具

Lighthouse 测试内幕

github: GoogleChrome/lighthouse

lighthouse

前端测试 chrome devtools protocol——Web 性能自动化实践介绍

github: chrome-remote-interface

Chrome DevTools协议查看器

puppeteer

浏览器第一次绘制页面时间点是根据什么？

评估关键渲染路径: 使用 Navigation Timing API 设置您的代码

【web性能】获取web各个阶段响应时间：服务器响应时间、首页白屏时间、dom渲染完成时间等

结合项目来谈谈 Puppeteer

前端神器puppeteer入门及实践（1）

Puppeteer 中文文档

Using programmatically (Node)

前端监控实践——FMP的智能获取算法

PerformanceObserver 性能检测对象

PerformanceEntry.entryType

DOMString

使用 Paint Timing API 提高性能

Chrome 中的 First Meaningful Paint

性能监测对象

PerformanceEntry.entryType

基于puppeteer的前端性能测试解决方案

First CPU Idle

First Meaningful Paint

Time to First Meaningful Paint: a layout-based approach

以用户为中心的性能指标

用户计时和自定义指标

前端监控数据收集（perf）

Chrome DevTools Protocol

初探Performance API

前端异常和性能监控(转)

如何相对准确的计算 FMP

Lighthouse performance scoring

从 1 到完美，用 node 写一个命令行工具

node.js如何制作命令行工具（一）