前端工具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!
});
  1. 怎么查看报告
    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都帮你做了,我服了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值