`

javascript执行效率诊断

阅读更多
导读:作为开发人员,Web页面加载或刷新的速度对其网站至关重要。在浏览器中调整性能问题比在Java应用程序中更难。开发人员在各种浏览器中调试JavaScript的方法要少得多。比如,在Mozilla Firefox中,可以使用Firebug调试JavaScript,但仍然不能调整很多性能问题,如浏览器呈现消耗时间。为了解决这些问题,有必要开发浏览器插件来监控时间响应,以及确定其他对应解决方案如部分呈现或延时加载。

本文节选自IBM developerWorks 提升Web应用程序的性能的系列文章,该文通过Web应用程序性能的最佳实践案例,帮助开发者更好地理解影响Web应用程序性能的因素,学习如何诊断Web应用程序中的性能问题,找到客户端内容中的瓶颈,并确定解决方案。

一、提升Web应用程序性能的6种基本方式

1.减少HTTP请求数

每个HTTP请求都有开销,包括查找DNS、创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销。要减少请求数:

合并文件。将总是同时使用的脚本合并到同一个文件中,不会减小总大小,但将会减少请求数。还可以同样方法合并CSS文件和图片。可以实现文件自动合并:
在构建阶段。用<concat>标记,通过运行Ant合并文件。
在运行时阶段。启用mod_concat模块。如果httpServer是Apache,用pack:Tag作为JSP标签库来合并JavaScript和样式表文件。(pack:Tag是一个JSP-Taglib,可缩减、压缩及合并资源,如JavaScript和CSS,并将它们在内容或普通文件中缓存。)
使用CSS Sprites。将背景图片合并成一个图片,并使用CSS background-image和background-position属性来显示所需图片部分。还可使用内联图片减少请求数。
2.后置加载组件

只呈现需要的组件;其余可等待。最好不要一次呈现太多组件。

某些情况下,可使用后置加载。由于浏览器可视区域外的组件可以后置加载,当这些组建进入可视区域不久后,初始呈现就会失效。

有些JavaScript可以在onload事件后后置加载,如JavaScript中初始呈现后拖动某个元素。

3.前置加载组件

通过前置加载组件,可以利用浏览器的空闲时间请求将来会用到的组件(如图像、样式和脚本)。当用户访问下个页面时,如果大多数组件都已在缓存中加载,那页面加载会快得多。

有两种前置加载:

无条件:一旦触发onload,就取得一些额外组件。

有条件:根据用户的动作,推测用户下一步的方向并进行相应的前置加载。

4.将脚本放在底部

脚本可能会产生问题,因为它们可能会阻碍并行下载。当下载脚本时,浏览器不会再启动其他下载,即使那些位于不同主机。将脚本,如样式表,放在底部,以保证它们在其他下载完成后再下载。

也可以使用延时脚本,这只有Internet Explorer支持。DEFER属性表示脚本不含document.write()。这就告诉浏览器他们可以持续呈现。

5.使用无cookie域组件

当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。

6.将JavaScript和CSS放在外部

现实世界中使用外部文件通常会使页面运行更快,因为JavaScript和CSS文件被浏览器缓存。HTML文档内的JavaScript和CSS会在每次请求HTML文档时被下载。这减少了需要请求的HTTP的数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS在被浏览器缓存的外部文件中,就会减小HTML文档大小,而不会增加请求数。

二、改进RIA小部件性能方法

主流RIA Ajax框架,如ExtJS、YUI、Dojo及其他,都提供一些精巧的小部件库,以增强用户体验。与其他框架相比,Dojo在企业开发领域更强大,这是由于:

Object-oriented programming(OOP)编码
跨平台
本地数据存储的Dojo离线API支持
DataGrid、2D和3D图形(图表组件提供了在浏览器展示报表更简单的方法)
Dojo在很多网站广泛使用。这里将使用Dojo举例,分析RIA小部件的性能。可根据具体情况使用Dojo小部件调整工具,有Page Speed、Rock Star Optimizer及Jiffy。强烈建议使用YSlow和Firebug。

YSlow

YSlow根据一组高性能Web页面准则,通过检查页面上所有组件,包括由JavaScript创建的,来分析Web页面性能。YSlow是一个集成了Firebug Web开发工具的Firefox插件;它可提供提升页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。

图中显示的是YSlow Grade选项卡上的信息。



YSlow的Web页面建立在22条可测试的规则基础上,这些规则在下方按重要性和效果排列。研究显示,按照以下规则,Web页面响应时间可提升25%到50%:

尽量减少HTTP请求数。
使用内容发布网络(CDN)。
添加Expires或Cache-Control头部。
用Gzip压缩内容。
将样式表放在顶部。
将脚本放在底部。
避免使用CSS表达式。
将JavaScript和CSS放在外部。
减少DNS搜索。
精简JavaScript和CSS。
避免使用重定向。
删除重复的脚本。
配置ETags。
使Ajax可缓存。
使用GET进行Ajax请求。
减少DOM元素数。
消除404错误。
减小cookie大小。
对组件使用无cookie的域。
避免使用过滤器。
不在HTML中测量图片大小。
使favicon.ico尽可能小,可缓存。
如图:图中的YSlow Statistics,对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。



Components选项卡显示了每个组件及相关的性能信息。例如,如果组件被gzip压缩,或ETag有内容(如果的话),都能看到。组件大小和超期时间也显示在Components选项卡中,如图所示。



Firebug

Firebug与Mozilla Firefox集成,在浏览网站时有大量开发工具随手可用。可以即时编辑、调试、监控Web页面中的CSS、HTML和JavaScript。

可以使用Firebug Net面板,如图所示,监控Web页面产生的HTTP流量。它向用户展示了所有收集到的和计算出的信息。每个条目表示页面的一个请求/响应来回。




Firebug Console面板,如图所示,提供了两种监控代码性能的方法。



Profile

对于某个特定的函数,使用Profiler。JavaScript Profiler是能用来测量每个JavaScript代码执行时间的Firebug特性。使用JavaScript Profiler来提升代码的性能,或是查看为什么某个函数运行时间过长。它与console.time();类似,但JavaScript Profiler能提供更多代码内部过程细节。

console.time()

对于特定代码段,使用console.time()。控制台会显示您输入到命令行的命令的结果。可以使用console.time(timeName)函数测量某个特定代码或函数执行多长时间。该特性对于提升JavaScript代码的性能非常有用,样例显示:

var timeName = 'measuringTime';   
console.time(timeName); //start of the timer    
for(var i=0;i<1000;i++){   
//do something   
console.timeEnd(timeName);  //end of the timer
measuringTime:xxms将显示在控制台。

结束语

文中,开发者学习了如何识别Web应用程序中的一些问题或瓶颈。开发者们应了解一些工具、窍门和技巧,以用于调整和改善对用户的性能。

转自:http://sd.csdn.net/a/20110919/304627.html

http://blogs.thescallop.com/zhouxiuhu/?p=130
  • 大小: 21.4 KB
  • 大小: 37.4 KB
  • 大小: 35.4 KB
  • 大小: 39 KB
  • 大小: 36.8 KB
分享到:
评论

相关推荐

    javascript-极速快感

    之后,代码在虚拟机或者解释器中被执行,过程中会通过JIT编译技术将代码编译成机器码,以进一步提高执行效率。 文档还提供了一些辅助工具的链接,例如***,这是一个用于展示JavaScript语法树的网站。通过可视化的...

    Iroh是JavaScript的动态代码分析工具

    JavaScript是一种广泛应用于Web开发的脚本语言,它在浏览器端执行,为网页添加交互性和动态功能。然而,随着JavaScript应用的复杂性增加,理解和调试代码变得越来越困难。这就是动态代码分析工具如Iroh发挥作用的...

    日常医疗诊断系统

    这个系统旨在为用户提供便捷的在线医疗咨询和诊断服务,简化传统医疗流程,提高医疗服务效率。 【描述】:该系统是通过Web代码实现的,这意味着用户可以通过互联网浏览器访问并使用其功能,无需安装任何客户端软件...

    阿里Java诊断工具Arthas

    8. **脚本支持**:支持JavaScript和Groovy脚本,可以编写复杂的诊断逻辑,实现自动化诊断任务。 9. **Web Console**:除了命令行,Arthas还提供了一个Web控制台,使得在浏览器中也可以进行诊断操作,提升用户体验。...

    24、JavaScript错误处理与调试工具

    总结来说,JavaScript错误处理和调试工具是提升开发效率、保证代码质量的关键。熟练掌握try...catch、Promise.catch、浏览器开发者工具、console对象以及各种框架的专用工具,能够帮助我们快速定位并修复问题,从而...

    临床医疗诊断系统

    临床医疗诊断系统是现代医疗信息化的重要组成部分,它利用计算机技术辅助医生进行疾病诊断,提高了医疗效率和准确性。本系统采用JSP(JavaServer Pages)作为开发语言,这使得系统具备了良好的跨平台性和可扩展性。...

    javascript案例百宝箱2

    JavaScript允许我们监听用户的行为,如点击按钮、鼠标移动或键盘输入,然后执行相应的函数。`addEventListener`和`removeEventListener`是两个关键函数,用于绑定和解除事件监听器。 案例三可能涉及动画效果,比如...

    W3c School 最新版JavaScript 中文手册 chm

    9. **性能优化**:提供有关提高JavaScript代码执行效率的策略,如减少DOM操作、缓存结果、避免阻塞主线程等。 10. **浏览器兼容性**:讨论不同浏览器对JavaScript特性的支持情况,以及如何使用polyfill和Babel等...

    JS超级名著《Essentials of Javascript》

    这些引擎通过优化技术(如即时编译)提高了JavaScript的执行效率。 ### AJAX (Asynchronous JavaScript and XML) **AJAX**(异步JavaScript和XML)是一种用于创建快速响应的Web应用程序的技术。它允许在不重新加载...

    网络测评最终版 软件 JavaScript

    4. **网络诊断**:JavaScript可以检查浏览器的网络设置,如代理服务器、DNS解析等,帮助用户排查问题。 5. **安全评估**:JavaScript可以用于检测网络连接的安全性,例如HTTPS证书的有效性。 6. **兼容性测试**:...

    一种客户端工具,用于对AKS群集执行自动检查以查看它是否遵循最佳实践 -JavaScript-Go-下载

    用户可以通过下载并运行这个工具,对自身的AKS集群进行诊断,以提升集群的安全性、稳定性和效率。这个工具的实现展示了两种不同语言在实际项目中的协同工作,以及如何利用它们的优势来处理复杂的云原生任务。

    javascript 调试工具/教程,支持浏览器IE firefox

    6. **性能分析**:使用“性能”面板分析JavaScript执行性能。 7. **网络监控**:在“网络”面板监控HTTP请求,查看加载时间,帮助优化资源加载。 **三、IE中的JavaScript调试** Internet Explorer(IE)也提供了...

    javascript帮助手册

    JavaScript主要运行在浏览器环境中,它允许开发者动态地更新网页内容、控制用户界面、执行客户端数据验证,以及创建丰富的交互式用户体验。 本“JavaScript帮助手册”提供了全面且详尽的JavaScript语言指南,覆盖了...

    delphi调用v8引擎.zip

    V8引擎则是Google开发的一个开源JavaScript运行时环境,广泛应用于Chrome浏览器和Node.js服务器端JavaScript执行。"delphi调用v8引擎.zip"这个压缩包文件很可能是提供了一个示例或教程,展示了如何在Delphi项目中...

    查找并修复JavaScript代码中的问题.zip

    这个名为"查找并修复JavaScript代码中的问题.zip"的压缩包显然提供了关于如何诊断和解决这些常见问题的资源。它包含两个文件:一个说明文本(说明.txt)和一个可能包含了用于代码检查工具的eslint_main.zip。 ...

    javaScript程序员参考手册--源代码

    首先,我们要了解JavaScript的基础知识,它是一种广泛用于Web开发的脚本语言,主要运行在浏览器环境中,但也可通过Node.js在服务器端执行。JavaScript语法与Java相似,但它们是完全不同的语言。JavaScript的核心概念...

    JavaScript_Windbg扩展,实现有助于在Intel处理器上研究HyperV的命令.zip

    JavaScript作为一门轻量级且广泛使用的编程语言,被引入到Windbg中,允许用户通过编写脚本来定制调试过程,提升效率。 Windbg是一款强大的调试工具,由Microsoft开发,主要用于诊断和调试Windows操作系统以及应用...

    getWhatIsWrongWithThisFunction:自诊断Javascript函数

    在JavaScript中,编写自诊断函数的主要目标是实现代码的自我验证。这样的函数可以执行一系列检查,例如类型检查、值检查、边界条件检查等,以确保代码按照预期运行。当检测到潜在问题时,它们通常会抛出错误信息或...

    ie浏览器调试javascript软件和使用方法

    总之,调试JavaScript在开发过程中至关重要,熟练掌握各种调试工具能够极大地提高效率和代码质量。在IE浏览器环境下,利用Companion.JS.exe和Microsoft Script Debugger,开发者可以深入理解代码执行流程,有效地...

Global site tag (gtag.js) - Google Analytics