查看完整视频
小黑屋思过中,禁止观看!
评论并刷新后可见

您需要在视频最下面评论并刷新后,方可查看完整视频

积分观看

您支付积分,方可查看完整视频

{{user.role.value}}
付费视频

您支付费用,方可查看完整视频

¥{{user.role.value}}
专属视频

只允许以下等级用户查看该视频

升级
会员专享

视频选集

Chrome浏览器调试05

  • 视频介绍
  • 视频选集
  • 交流讨论
Chrome浏览器调试-性能评估

性能评估

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

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索