Audits 和 Chrome 性能插件

Audits

Audits 其实就是分析当前网页的性能的,比如说雅虎军规,这个东西能够大致给我们分析出来一些我们做的不好的地方而且能给我们一些解决意见

雅虎军规参考网址:https://github.com/creeperyang/blog/issues/1

  • Audits 面板
  • performanceTracer – Chrome 插件
  • Page Speed – Chrome 插件
  • performance.timming

    • 这是代码形式的一个 API ,是谷歌提供给我们的在浏览器里面我们可以通过网页去检测的。
    • 上面这个插件光学是没什么用的,得需要先了解浏览器的整个的执行机制,下图就是 整个的一个网页从我们用户输入到输出的时候这之间经过的很多的过程,上面的 performance.timing 很好的捕捉到了这样的一个节点,这个节点里面我们主要观察的是 DNS 这一阶段,就是查找 DNS 之间,然后是 握手的时间,请求的时间,输出的时间,还有就是 onload 的时间,那么中间隔着的 DNS TCP Request Response 这几个时间是需要我们非常非常关注的,如果我们是专注于性能开发的,这几个点做的非常漂亮,那么这样整个一个网页的性能是非常高的,所以做网页性能的时候这几个点一定要卡住。

接着上一篇中的案例进行讲解,在右侧的开发者工具中找到 Audits 面板,之后就可以让他来帮我们分析一下,接下来点击下面的 【RUN】 按钮

如果说想要漂亮一点的就可以下载一个 performanceTracer 这样的一个东西,它可以将 我们上面说到的 timing 的 API 也就是上面的 【浏览器的整个的执行机制图】 里面的东西。

但是如果作为一个专业的性能开发人员来讲的话 performanceTracer 是远远不够我们进行网页加载时的性能监测用的,所以一般会装一个东西叫做 Page Speed,它可以是浏览器加载的更快(Make the web faster)

下载完后点击面板下面显示的 【START ANALYZING】(开始分析) 按钮,它就会自动的去分析你当前的网页,下图是分析之后自动的将结果给呈现了出来

它连怎么优化都帮你做到或者是提示了。

如果是上面的插件还不够用的话,这个时候就需要借助一个东西 performance.timing 这个是浏览器自带的 API 可以在控制台中直接输出,可以看到所有的值都在下面列出来了