前端工具lighthouse

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行， 还可以通过代码从node API运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

https://googlechrome.github.io/lighthouse/viewer/

接下来就是我了解这个工具的整个过程，感觉就是被谷歌引导着走。

1. 谷歌搜索 网页性能测试,排名第一的就是PageSpeed Insights
   
2. 使用pageSpeed看看百度怎么样
   
3. 谷歌告诉你pageSpeed使用的技术是Lighthouse

https://developers.google.com/web/tools/lighthouse/

https://github.com/GoogleChrome/lighthouse

4. Lighthouse要怎么使用

• 命令行
  lighthouse http://www.baidu.com
• 浏览器插件
  
• You can also use Lighthouse programmatically with the Node module.
  以代码的方式使用lighthouse才是最有趣的。

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      // use results.lhr for the JS-consumeable output
      // https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
      // use results.report for the HTML/JSON/CSV output as a string
      // use results.artifacts for the trace/screenshots/other specific case you need (rarer)
      return chrome.kill().then(() => results.lhr)
    });
  });
}

const opts = {
  chromeFlags: ['--show-paint-rects']
};

// Usage:
launchChromeAndRunLighthouse('https://example.com', opts).then(results => {
  // Use results!
});

5. 怎么查看报告
   html格式
   json格式
   csv格式
   谷歌还非常贴心的给出了报告查看器。 Sweet!!!
   https://googlechrome.github.io/lighthouse/viewer/
   

我最后的成果就是：
搭建一个前端页面获取url，提交给服务器，服务器通过koa监听端口，通过nodejs lighthouse跑任务，最后将结果json字符串交给前端，前端通过viewer展示出报告。由此再回头看，这不就是个人版的PageSpeed Insights吗？

---

实战：使用lighthouse扫描CSDN某个页面，让我们看看有哪些问题吧

• CSS文件没有压缩https://csdnimg.cn//public/common/libs/bootstrap/css/bootstrap.css
• 使用的三方库jquery1.9.1 含有漏洞
  
• Document must contain a doctype

---

感悟：我的天啊，google果然是google,小弟我佩服佩服。
我今天终于见识到了什么是牛B，google就是牛B。什么BAT, 苹果，微软，在G面前都不值一提。
工程化，流程化，你所想到的google都帮你做了，我服了。