开始性能优化吧
现在我们已经明白性能的重要性，也明白了浏览器大概的渲染过程，是时间拿起我们的工具来优化我们的应用了。
chrome devTools
chrome devTools 是google 推出的 chrome 浏览器上的开发工具，它非常流行。你可以使用快捷键 mac(Cmd+alt+j)、windows(ctrl+shift+i 或 f12) 打开它。它可能长这样
performance
重点来看看 performance 面板，performance面板非常详细的记录了浏览器渲染过程中的每一个步骤，包含大量有用的信息。简单图示一下，同时这也是一个demo。得到这样的一个性能分析十分简单，只需要在你的网页上打开chrome devtools切换到performance点击刷新按钮(自动录制)等待几秒钟即可。
uhm….信息量是真的好大阿，这么多信息究竟该注意哪里。首先看一下概览图，概览图简要的显示浏览器渲染网页在各个过程中的性能消耗比例。有必要关注一下这些颜色
- 蓝色表示html正在被解析，一般不大存在性能问题
- 黄色表示javascript编译/执行。
- 紫色表示 Recalculate Style 和layout。
- 绿色表示 paint、Composite。
看看我们的demo:loading(48.3)、scripting(890)、rendering(1492)、painting(45.7)、other(270)、idle(355.6)。看来浏览器在scripting、rendering花费了大量的时间。
让我们回到fps/cpu 区块上看，分析给我们划了很多警告，红色的方条。这些都表示性能有着严重的问题。拖动滑块选中这块红色区域，分析器会将分析范围缩到这个区间。
继续往下看，网络区间里有两个黄色的项，鼠标移上去你会发现他们花费了1s多的时间去下载，可能需要我们注意一下。
再往下看，我们来看看 main。这是浏览器渲染过程的一部分，又看到了很多红色的三角形。浏览器又给我们发出了警告。鼠标点击其中的某一项。下方的Event log详细的列出了这段时间内发生了什么。看我们的demo，这段脚本触发了浏览器的layout，看来这是一个比较复杂的layout,足足消耗了507.3ms，怪不得游览器要向我们发出警告了。
移动设备的性能分析
在线性能评分工具
除此之外，还有很多流行的在线网页性能评分工具。他们会对你的网站进行评分并给出相关的建议和意见。你需要做的可能只是输入一个网址，如pagespeed;或者安装一个chrome插件，如Lighthouse,可以在chrome 插件市场上免费获取它。