学习 Performance

tomato7777
53 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 30 天，点击查看活动详情

学习 Performance

start

  • 最近学习了谷歌浏览器 Performance 选项卡的基础使用；
  • 写个文章记录一下。

Performance

1. Performance 初始面板介绍

示例截图： image.png

注意事项：

  1. Performance 英文释义： 性能;
  2. 初始面板如上述截图所示；
  3. 为了防止插件，网页缓存，其他因素，对我们调试结果的干扰，后续调试建议使用无痕浏览器。

    浏览器打开无痕模式快捷键ctrl shift N (windows 系统)；

2. 案例实践

写个案例，来熟悉熟悉 Performance，怎么用。

2.1 基本操作

  1. 整个Performance有点类似于屏幕录制，点击左上角的开始录制按钮，浏览器就会开始记录页面的各种信息；

  2. 记录完你想记录的操作后，可以手动 stop，来停止录制；

    image.png

  3. 点击重新载入的按钮，可以理解为刷新页面后开启录制(用于记录首屏加载)；

    • record：记录；
    • reload：重新载入；

  4. 录制完毕后我们就可以得到相关的信息图标。

    image.png

2.2 案例

写一个测试的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lazy_tomato</title>
  </head>

  <body>
    <script>
      function fn(n) {
        if (n === 0 || n === 1) {
          return n
        }
        return fn(n - 1) + fn(n - 2)
      }
      function tomato() {
        fn(30)
      }
      tomato()
    </script>
  </body>
</html>

代码说明：

  • 既然是判断性能，一行普通的JS代码，执行的太快了，不方便演示。
  • 我想到前段时间学习的斐波那契数列，所以采用了它作为演示案例。
  • 为了方便寻找到我们的函数，函数名我用了tomato定义。

开始操作：

  1. 用无痕浏览器打开我们的页面。

  2. 点击重新录制，从页面开始加载就开始记录我们页面的性能。

  3. 等待程序执行完毕，可以得到下方截图的内容。

image.png

截图内容讲解：

上方的截图记录了页面从开始渲染到停止录制的过程中，页面所做操作的信息。

可以看到它有很多区域，我们先看中间的区域。中间的区域又分好几个菜单，分别存储了对应的信息，例如网络，主线程，GPU 等各种信息。

JS 是单线程的，主干逻辑就在 Main(主线程) 中，先看 Main(主线程)中包含了哪些信息。

  1. Main(主线程)中有很多代码执行的逻辑，其中按颜色来区分：
  • 灰色：task(任务)
  • 橙色：浏览器内部的 JS
  • 蓝色：html parse

上面列举出来的颜色，对应的是浏览器自身程序。其他的某些颜色，就是我们自己编写的 JS 代码。

  1. 上半部分区域操作方式:
  • 可以左键按住上下拖动；
  • 可以右键，已 JSON 的形式保存或者导入记录的信息；
  • 可以通过滚轮放大缩小指定区域；
  1. 查看我们自己编写的代码
  • 鼠标放到对应颜色区域，滑动滚轮放大，可以得到下图：
  • image.png
  • 结合截图，可以看到我们编写的函数执行顺序，先tomato后fn。而且可以看到从上向下，有很多 fn，它代表着 上方的fn中调用了下方的fn。对应我们函数的递归

案例优化一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lazy_tomato</title>
  </head>

  <body>
    <script>
      var temp = [0, 1]
      function fn(n) {
        let result = temp[n]
        if (typeof result != 'number') {
          result = fn(n - 1) + fn(n - 2)
          temp[n] = result
        }
        return result
      }

      function tomato() {
        console.log(fn(30))
      }
      tomato()
    </script>
  </body>
</html>

在原本的代码基础上，添加了缓存的处理，再次查看性能记录。

image.png

结合上图可以看到，启用缓存的方式优化之后，调用 fn 的次数大幅度降低了。

end

  • 本文主要是初步认识了 Performance。

    用我自己的理解来描述它：可以录制网页执行过程中的各种信息，利用这些信息，做性能优化。

  • 初步认识了 Performance中 Main 菜单中的内容。

    • 灰色：task(任务)
    • 橙色：浏览器内部的 JS
    • 蓝色：html parse

  • 谷歌官方的 Performance 文档 点击这里

avatar
文章
阅读
粉丝