前端数据收集工具分析详解

熊孩子依旧调皮
276 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

前言

  • chrome dev Tools 我们经常使用谷歌的Dev Tools来进行开发和调试，还可以利用它来分析页面的性能。
  • lighthouse 一个开源的自动化工具，可以为谷歌浏览器的扩展插件，也可以命令行直接运行，它将针对目标页面运行一连串的测试，然后输出一个有关页面性能的评分报告 优点：
  1. 评分报告全名且具有一定的权威性
  2. 提供解决方案
  3. 发现大的性能问题 缺点：
  4. 测试环境比较单一，用户群体的环境各有不同，不可以一概而知
  5. 存在波动，不同时刻的访客群体存在差异，数据只能反映当前时刻的效果 下面将围绕性能监控进行详解

LightHouse

一个自动化开源的工具，只有为它提供一个网址，便可针对它进行一连串的测试，最后生成一个报告并提供解决方案

  • 使用方式
  1. chrome开发者工具（devTools）
  2. 谷歌浏览器的扩展插件
  3. Node Cli
  4. Node Module 安装
npm install -g lighthouse

生成报告并在浏览器打开

lighthouse http://kaikeba.com --view

保存JSON格式在当前目录

lighthouse http://kaikeba.com --output=json --output-path=./report.json

设置浏览器的尺寸

lighthouse http://xxx.com --chrome-flags="--window-size=1190,660"

将模拟器设置为桌面

lighthouse http://kaikeba.com --emulated-form-factor=desktop
  1. 性能报告模块介绍

Perfermance性能分析
Accessibility可访问性
Best Practices最佳实践
SEO搜索引擎优化
Progressive Web App是否集成pwa X-Real-Ip用于记录代理信息的，每次经过一级代理（匿名代理除外）代理服务器都会把这次请求的来源IP追加

server {
  listen 80;
  server_name taro.josephxia.com;
  location / {
    root /root/source/taro-node/dist;
    index index.html index.htm;
  }
  location ~ \.(gif|jpg|png)$ {
    root /root/source/taro-node/server/static;
  }
  location /api {
    proxy_pass http://127.0.0.1:3000;
    proxy_redirect off;
    }
}

最后

最后还给大家提供了两个解决方案！

  • 第三方收费 如果咱们使用第三方收费方案也不是不可以的但是成本比较高，一般情况下是能省则省的。
  • 自研检测系统 它的成本高不说，关键自研监测系统它的依赖比较多，什么都是自己开发需要有人一直维护和买各种和开发相配套的工具所以说成本也不低。
avatar
文章
阅读
粉丝