性能评估
点击Performance标签,点击开始录制图标

当然还可以设置一下录制的环境,模拟一下手机的cpu和网络情况

在页面中完成一些想要测试的操作以后,停止录制,会自动生成效果图
同样的也可以拖动查看不同的区域

下方的饼图展示了不同阶段消耗的时间,方便你找到页面的问题
- 蓝色(Loading):网络通信和HTML解析时间
- 黄色(Scripting):JavaScript执行时间
- 紫色(Rendering):渲染时间
- 绿色(Painting):重绘
- 灰色(system):系统花费的时间
- 白色(Idle):空闲时间
页面评估工具
点击 Lighthouse可以进行页面评估,注意你的网络情况哦需要科学上网次才可以

勾选你想要评测的选项,然后点击开始,然后就能生成报告了哦!可以根据它指出的问题对我们的网站做优化

在命令行中运行lighthouse
npm install -g lighthouse
lighthouse https://www.lookroot.cn
浏览器通知
const msg = {
body: "lookroot say hello",
icon: "https://www.lookroot.cn/logo.png"
}
Notification.requestPermission(function (permission) {
if (permission === "granted") {
newNotification("通知", msg);
}
})