Lighthouse
Lighthouse （谷歌浏览器的插件商店中搜索并安装，浏览器中点击F12，开发者工具中可使用）是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。只要能够使用谷歌就可以使用Lighthouse。
性能：就是对上述指标进行测试
可访问性（Accessibility）
Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。考虑残障用户（视力障碍）
最佳实践（Best Practices）
最佳实践 : 实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等
SEO 搜索优化
SEO（Search Engine Optimization）：搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准等。
搜索引擎优化 (SEO) 通常是指对网站的部分内容进行细微的修改。单独来看，这些修改可能只是细微的改进，但与其他优化结合后，则可能会对您网站的用户体验以及在搜索结果中的表现产生显著影响。
Chrome(Performance)
谷歌浏览器调试工具栏中自带的工具
实验
本次实验在一个开源的项目下进行的性能测试实验演示，地址为https://github.com/pobusama/chrome-preformance-use-demo，其中运行的是demo2,界面如下：
为了能够更好的演示实验，该项目设置了随机添加蓝色方块，重复点击add按钮，模拟用户的不断且重复操作，可以看到蓝色的方块会流动的越来越卡，当点击Optimize按钮就会流畅一些，因为做了一些优化操作（具体见代码，此处只是演示效果，分析性能）。
录制
多次点击Add按钮，直至页面出现卡顿，然后点击录制按钮，录制一段时间；
接着点击Optimize按钮，形成优化后的效果，录制一段时间，然后点击“停止”，等待生成性能报告
生成性能报告
图中：1是概览面板
2和3是线程面板
左侧是优化前的性能评估数据，右侧是优化后的性能评估数据
在概览面板中，最上边的数据代表FPS数据 ，FPS数值越高，画面越丝滑。（fps是帧率）
1区域出现了大量的红色色块，这代表在这段运行时间中，画面掉帧明显，颜色越红越严重，而右侧区域没有红色色块证明没有掉帧现象。
1区域中的下半部分，是CPU的使用率和使用方式。黄色（执行js），紫色（渲染），绿色（绘制到页面）以及其他颜色。
数字3所在区域，为浏览器各个进程的具体活动，这里关注主线程（Main）即可
查看某段时间具体的评估数据
点击概览模块的某块时间。（优化前）
通过鼠标滚轮或者点击或拖拽概览面板的方式查看特定的时间段，为了查看优化前是哪里的性能出现了问题，我把查看概览面板缩小成只能看到执行了3个任务的大小。
单个任务从上往下为调用关系，Anemotion Frame Fired （动画帧已触发）调用了Function Call （函数调用）， 而Function Call 调用了app.update
继续缩小查看范围，直到我们只看到一个任务执行。
在面板中我们可以点击某一个色块查看详情，跟随调用栈的足迹，我们找到即app.update色块，查看图中蓝色区域的详情，这里显示执行自身Js花费了19ms，接下来对Js调用的rendering花费了152ms，从图中可以看到在app.update色块有无数的紫色小方块，而等待这些紫色小方块的执行延长了整个Js的执行时间。
调整查看范围，直到看到优化后的具体几个任务。（优化后）
看到优化后的面板app.update色块所有的紫色小方块都消失了，而紫色小方块是跟布局有关的活动，看到这里我们可以锁定优化前的js代码中存在改变布局的操作，需要进入代码层面。
点击进入代码查看
可以看到，每个函数的耗时也都显示在左侧，右侧有源码地址，点击就可以跳到 Sources 对应的代码。然后对代码进行优化。
