Chrome浏览器调试05

性能评估

点击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);
        }
    })