dynaTrace之二 —— JavaScript和AJAX性能最佳实践

 

原文地址：Best Practices on JavaScript and AJAX Performance

同类阅读: dynaTrace之一 —— 网络请求和往返的最佳实践

 

dynaTrace AJAX Edition有独一无二跟踪页面JS执行的能力。它还能跟踪到浏览器的DOM，获取方法的参数和返回值。下图就是一个脚本异常的JS跟踪图，在PurePath视图中：

 

通过JS这个级别的执行细节，很容易识别运行缓慢的js处理程序、自定义js代码、低效的访问DOM，代价昂贵又低效的第三方框架比如jQuery==。

 

标记阻塞的脚本和长时间运行的脚本

 

当脚本开始下载，然后浏览器执行，浏览器通常会停止所有其他下载。这个行为很容易从newwork视图看出来：

 

 

The dynaTrace AJAX Edition 时间轴视图显示了这个期间发生的详情：

 

 

延迟加载JS文件

页面应该尽量快地下载所有的资源以提高第一印象时间和加载时间。谷歌和雅虎建议JS置底。Google’s Best Practices谷歌的最佳实践描述了在onLoad事件处理程序动态添加脚本标签的JavaScript的DOM延迟加载。

优化JavaScript执行

除了又换js的加载顺序，js代码本身的效率就可以提高。dynaTrace AJAX Edition 提供了两种视图来分析js执行：

JavaScript/AJAX面板有点类似于Hotspot面板，分析页面内所有的js执行，并提供汇总清单，显示所有方法的性能。列表以脚本块分行和外部如jQuery库的调用。这个列表给出了改进性能的良好出发点。其中Back Trace显示了谁引发了所选的活动，而Forward Trace显示了这个活动出发了哪些其他的活动。点击Back Trace或 Forward Trace中树的节点，会在最下面显示相关的js源代码：

 

 

另一个有趣的视图是PurePath视图。它显示了所有浏览器的活动，包括Script标签或时间句柄出发了哪些js的执行，还有网络请求和呈现的时间。TimeLine视图下双击脚本执行块或者从HotSpot视图的方法进入PurePath视图，显示了具体路径：

 

 

有这些深入的执行跟踪，很容易识别时间花在哪儿了。PurePath视图还显示了实际的js代码。糟糕的性能往往是因为过多使用字符操作，DOM操作，用CSS选择器查找DOM对象，本身就存在问题的第三方js库和过多或长期运行的XHR调用。具体有以下几点：

 

低效的css选择器：具体细节参考《jQuery提升性能的代码规范》

太多的XHR请求：使用jQuery的很容易依赖AJAX从服务器获取额外的内容

一个典型的例子是

 

 

 

同类阅读: dynaTrace之一 —— 网络请求和往返的最佳实践