第八章：性能.pptVIP

第8章 性能 Ajax应用性能分析 管理内存使用量 使用设计模式获得一致的性能 处理特定于浏览器的性能问题 前面讨论了Ajax应用的健壮性和可靠性。 除了可用性、健壮性和可靠性之外，还需要考察性能。 8.1 什么是性能？ 运行速度的快慢和需要消耗的资源的多少，资源主要包括占用的内存和CPU。 8.2 JavaScript的执行速度 程序的执行速度是指该程序最慢的子系统的执行速度。详细测量代码执行速度的行为称为性能分析（profiling）. 通过使用优秀的性能分析器，可以识别出代码的瓶颈，从而确定在哪里集中投入精力可以取得最佳效果。 8.2.1 测定应用时间的艰难方式 用来测量时间的最简单的工具是系统时钟，JavaSript通过Date对象提供对系统时钟的访问。 Function mytimeconsuming(){ var begging=new Date(); …………………… var ending=new Date(); var duration=ending-begging;\ alert(“this took”+duration “ms”) } stopwatch.js是一个性能分析代码.结合mousemat例子察看将当前坐标写到状态栏，将缩微图元素中描述的光标位置，测试哪一个占用了更多的处理时间。 8.2.2使用venkman性能分析器 在mozilla浏览器中，venkman是一个很有用的性能分析工具，能够在完全不修改原有代码的情况下生成大量数据。 8.2.3优化Ajax应用的执行速度 1、优化for循环 见loop_profiled.html 2、将DOM节点附加到文档 在Ajax应用中，将内容呈现给浏览器需要创建DOM节点，然后附加到文档树上，DOM节点一旦与文档建立了联系，该节点将立即呈现。 在浏览器窗口中，重新呈现文档需要计算不同的布局参数，如果正在组装一个复杂的界面，可以创建所有的节点，将这些节点添加在一起，然后将组装好的结构加载到文档上，通过这种方式，页面的布局只需要执行一次。 见domtree_profiled.html 3、尽量减少点号操作符的使用 JavaScript通过点号操作符来引用复杂对象层次中深处的变量。 myelement.clock.hands.hour; myelement.clock.hands.minute; myelement.clock.hands.second; 每次解析器遇到点号字符，它就会查找父变量的所有子变量，应该改为： var hands=myelement.clock.hands; var hourhand=hands.hour; var minutehand=hands.minute; var secondhand=hands.second; 见dotnotation_profiled.html 8.3 JavaScript的内存使用量 本节主要介绍Ajax编程中内存管理的问题，有些是用于任何编程语言，另一些是Ajax特有的和特定于Web浏览器的。 应用程序运行中由操作系统分配内存，理想的情况下，程序请求完成任务所需的内存，然后释放掉不需要的内存，一个拙劣的应用可能会使用大量的内存，或者工作完成后没有释放内存。 8.3.1 避免内存泄露 内存泄露：申请了内存并在工作完成后没有释放。 JavaScript是一种内存托管的语言，垃圾回收过程帮助程序员自动地处理内存的分配和释放，但是依然会产生泄露。 垃圾回收过程 垃圾回收进程尝试推断何时可以安全地回收不再使用的变量，通常是通过判定程序能否通过变量之间的引用网络达到改变量，当确信不可达到时，就在它上面标上不可回收的记号，并在下一次清理中释放相关的内存。 产生泄露的原因：使用完变量忘记解除引用。 实例 见persion_pet.js 在上例中，fido可能在删除jim后没有直接被删除，并且它拥有记住多于一个前任主人的能力，如果选择内嵌的方式声明fido，并且将那只猫声明为全局变量将不存在此问题。 关注问题： 1、当引用其它已删除的对象时，将会消耗多少内存？ 2、额外的内存消耗会保持多长时间？ 8.3.2 Ajax的特殊考虑因素 使用Ajax我们运行在一个托管的环境中，即在一个暴露了一些原生功能而锁定了其它功能使我们无法访问的容器中。 模型-视图-控制器模型中，模型可以有自己定义和实例化的JavaScript对象组成，视图主要由Dom节点组成，Dom节点是浏览器暴露给JavaScript环境的原生对象。控制器将两者粘合在一起。 1、打破循环引用 function Button(value,domEl){ this.domEl=domEl; this.value=value; this.domEl.bu