使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

Bertha 。 2022-07-27 13:37 174阅读 0赞

英文原文：

[Improving Web App Performance With the Chrome DevTools Timeline and Profiles][]

<table style="margin:0px; padding:10px 0px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(227,227,227)"> 
    <div style="margin:0px; padding:0px 10px; line-height:1.6; width:750px; font-size:10.5pt; overflow:hidden"> 
     <h2 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:14pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 记录</h2> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理<span style="margin:0px; padding:0px">DOM事件</span>,&nbsp;<span style="margin:0px; padding:0px">页面布局渲染</span>或者向屏幕<span style="margin:0px; padding:0px">绘制元素</span>。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img alt="" src="http://static.oschina.net/uploads/img/201306/16093245_uQCh.png" title="Screen Shot 2012-12-10 at 10.15.47" height="69" width="313" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 它可以让你深入得到三个层面的数据，来帮助你明白问什么你的应用很缓慢：<span style="margin:0px; padding:0px">事件</span>,&nbsp;<span style="margin:0px; padding:0px">框架</span>和实时的<span style="margin:0px; padding:0px">内存</span>用量。开始，浏览你的应用，并在DevTools中切换到Timeline工具栏。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img alt="" src="http://static.oschina.net/uploads/img/201306/16093245_wP4Z.png" title="Screen Shot 2012-12-10 at 00.19.49" height="239" width="530" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 默认情况下Timeline不会显示任何数据，但是你可以这样开始一个记录会话，打开你的应用并点击灰色圆圈☻，它在工具栏的底部——使用<span style="margin:0px; padding:0px">Cmd/Ctrl+E&nbsp;</span>快捷键也能开始一个记录。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> <img alt="" src="http://static.oschina.net/uploads/img/201306/16093246_UAXc.png" title="Screen Shot 2012-12-10 at 00.37.24" height="33" width="226" style="margin:0px; padding:0px; border:0px; max-width:640px"></p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 这个记录按钮会从灰色变成红色，而Timeline将开始从你的页面获取时间线（timeline）。在你的应用中完成一些操作，记录到一些数据之后，再一次点击按钮来停止记录。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 请注意：<img alt="" src="http://static.oschina.net/uploads/img/201306/16093246_3Yps.png" title="Screen Shot 2012-12-10 at 15.08.47" height="25" width="30" style="margin:0px; padding:0px; border:0px; max-width:640px">会清除你现有的记录会话，以便开始一个新的会话。<img alt="" src="http://static.oschina.net/uploads/img/201306/16093247_R0QE.png" title="Screen Shot 2012-12-10 at 15.08.54" height="26" width="30" style="margin:0px; padding:0px; border:0px; max-width:640px">将会强迫V8完成一轮的垃圾回收，在调试中它很有用。<img alt="" src="http://static.oschina.net/uploads/img/201306/16093247_X1NP.png" title="Screen Shot 2012-12-10 at 15.12.31" height="27" width="36" style="margin:0px; padding:0px; border:0px; max-width:640px">将会对显示的详细信息进行过滤，只显示那些完成耗时超过15ms的记录。</p> 
    </div> </td> 
   <td style="margin:0px; padding:0px 6px; width:210px"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:10px 0px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:0px; border-right-width:1px; border-right-style:solid; border-right-color:rgb(227,227,227)"> 
    <div style="margin:0px; padding:0px 10px; line-height:1.6; width:750px; font-size:10.5pt; overflow:hidden"> 
     <h2 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:14pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 总结</h2> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 衡量和提升你应用程序的性能会需要花费一点事件。不幸的是，到目前为止并没有一颗银弹能解决掉所有的问题。但是，DevTools中的Timeline和Profiles能帮助减轻你在发现这些主要问题时的痛苦。你在你的优化工作流中你可以尝试用这些工具，看它是否能帮助到你。</p> 
     <p style="margin-top:0px; margin-bottom:5pt; padding-top:0px; padding-bottom:0px"> 我们总是在寻找一些能提升他们易用性的一些方法，如果你有什么反馈的话，请在下面任意浏览，或者在&nbsp;<a href="http://crbug.com/" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">crbug.com</a>上面建立bug投票.</p> 
     <h2 style="margin:0px 0px 10pt; padding:0px 0px 5px; font-size:14pt; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(204,204,204)"> 进一步阅读</h2> 
     <ul style="margin:0.5em 0px 0.5em 1.5em; padding:0px; list-style-position:inside"> 
      <li style="margin:0px; padding:0px">我们刚刚在Breakpoint上面发现了关于这个主题的一些话题 &nbsp;-&nbsp;<a href="http://www.youtube.com/watch?v=WpqZ0LjNU5A" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">The Tour De Timeline</a>.</li> 
      <li style="margin:0px; padding:0px">Patrick Dubroy’s 在<a href="http://vimeo.com/53073654" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">OreDev</a>&nbsp;讨论有关于Timeline 、Heap profiler 和提供了一些如何使用它们的极好例子.</li> 
      <li style="margin:0px; padding:0px">Brandon Jones发布的关于如何使用Timeline的&nbsp;<a href="http://blog.tojicode.com/2012/03/javascript-memory-optimization-and.html" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">JavaScript memory optimization</a></li> 
      <li style="margin:0px; padding:0px">Colin Snover 去年在<span style="margin:0px; padding:0px">&nbsp;</span><a href="http://zetafleet.com/blog/google-chromes-heap-profiler-and-memory-timeline" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">great depth</a><span style="margin:0px; padding:0px">&nbsp;</span>发布了关于 Timeline 和 Profiler&nbsp;(注意到目前为止有许多UI上的改变).</li> 
      <li style="margin:0px; padding:0px">Loreena Lee 有一些如何使用这些工具来修复GMail的内存溢出的一些&nbsp;<a href="https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&amp;loop=false&amp;delayms=3000#slide=id.g1d65bdf6_0_0" style="margin:0px; padding:0px; color:rgb(62,98,166); outline:0px" rel="nofollow">presentation</a>&nbsp;.</li> 
     </ul> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[Improving Web App Performance With the Chrome DevTools Timeline and Profiles]: http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/