一、 使用Google PageSpeed Insights进行评估
众所周知，Google一直关注web性能。早在2010年，Google就在一篇博文中指出，性能是影响网站自然搜索结果排名的一个重要因素。如果你运行的网站由内容驱动，且大部分流量来自搜索引擎，这就会让你停下来。好在Google有一个评估工具。
1）评估网站性能
Google PageSpeed Insights 会分析网站，并就如何改进其性能和用户体验给出提示。当PageSpeed Insights呈现分析时，它会执行两次：第一次使用移动用户代理，第二次使用桌面用户代理。它分析性能时考虑两个关键因素：内容加载所需时间，以及整个页面加载所需的时间。
该工具会对两个用户代理分别给出0～100的分数，并根据发现的问题严重性给出其推荐的颜色代码。
大多数建议，包括缩小文本资源（HTML、CSS、JS）、启动压缩等。
2）使用Google Analytics进行批量报告
如果你是专业Web开发者，那很可能使用过Google Analytics，这个报告工具提供了网站访问者的数据，例如其位置、如何到达你的网站、在哪里花费了多少时间，以及其他统计信息。
Google账户登录，并按照说明进行操作：marketingplatform.google.com/about/analy…
二、使用基于浏览器的评估工具
Chrome
三、检查网络请求
查看计时信息
TTFB 首字节时间：从用户请求网页到响应的第一个字节到达之间的时间。 这与加载时间不同，加载时间是资源完全下载所需的时间。
导致TTFB较长的原因有很多，这很可能是网络条件造成的，例如服务器与用户的物理距离、服务器性能差或者应用程序后端出现问题。开始下载内容所需的时间越长，用户等待的时间就越长。
要了解一个请求所花费的时间，可以在chrome中查看其完成情况。
从图中可以看到，TTFB值在chrome中标记得很清楚。发出请求之前还会执行一些步骤，例如排队请求、DNS查找、连接设备和SSL握手。
四、渲染性能检查工具
1）理解浏览器如何渲染网页
用户访问网站时，浏览器将解析HTML和CSS，并将其渲染到屏幕。
解析HTML以创建DOM --> 解析CSS以创建CSSIOM --> 布局元素 --> 绘制页面
2）使用Performanc面板
Performanc面板可以记录页面的加载、脚本执行、渲染和绘制活动。
该工具捕获4种特定类型的事件，每种事件都用一种颜色代表。
- 加载中（蓝色）：网络相关事件，如HTTP请求。它还包括诸如HTML解析、CSS解析、图像解码等活动。
- 执行脚本（黄色）：与JS相关的事件，包括特定于DOM的活动、垃圾收集、其他活动等。
- 渲染（紫色）：于页面渲染相关的所有事件，包括将CSS应用于网页HTML等活动，以及会导致重新渲染的活动。
- 绘制（绿色）：与将布局绘制到屏幕上的相关事件，例如层合成和光栅化。
当你在火焰图中找到一个想要深入的调用栈时，可以通过点击它的层与之交互。
有了这些信息，我们就可以看到浏览器在调用栈的这个特定部分的工作。
3）识别问题事件：jank是元凶
确定性能问题之前，必须定义页面性能的主要目标。目标很简单，最小化浏览器加载和渲染页面的时间。要做到这一点，必须击败唯一的敌人：jank。
jank：交互和动画效果卡顿，或未能顺利渲染。
典型显示的最佳帧速率为每秒60帧，但并非所有设备都能实现，这取决于设备的硬件功能和页面的复杂性。
performance面板以毫秒为单位进行测量。由于一秒钟内有60帧和1000毫秒，因此可以简单计算出每帧有16.66毫秒的预算。因为浏览器在每帧都有开销，所以Google建议每帧有10毫秒的预算。
git clone https://github.com/webopt/ch2-jank.git
cd ch2-jank
npm install
node http.js
然后导航到：http://localhost:8080/并记录新会话，打开performance面板查看：红色标记为jank警告
目前没有出现jank警告。
若Frame中出现jank警告，可以利用Csstransition属性可以在一段时间内动态更改CSS属性。要修复jank，可以使用CSS过渡将模态框滑入视图，而不是使用animate方法。
五、在Chrome中对JS进行基准测试
JS基准测试能够比较问题的不同解决方法，并梳理出那种方法性能最好。
在控制台运行以下命令：
console.time("jQuery");
jQuery("#schedule");
console.timeEnd("jQuery")
console.time("querySelector");
document.querySelector("#schedule");
console.timeEnd("querySelector")
基准测试结果显示document.querySelector()方法比jQuery自己的CSS选择器引擎更快。
这并不奇怪，因为原生的JS方法通常比用户自定义的方法更快。
