- 浏览: 466334 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
alvin198761:
renzhengzhi 写道我参与过12306余票查询系统的开 ...
别给12306 辩解了 -
renzhengzhi:
我参与过12306余票查询系统的开发,用户请求被前面3层缓存拦 ...
别给12306 辩解了 -
renzhengzhi:
写的很好。
JAVA线程dump的分析 -
liyonghui160com:
说好的附件呢
分布式服务框架 Zookeeper -- 管理分布式环境中的数据 -
ghpaas:
orbeon作为xforms标准的实现,不论其设计器还是运行时 ...
XForms 1.1 中文翻译—第1章 关于XForms标准
衡量一个 Web 2.0 应用是否成功的一条关键准则是客户对于应用页面装载时间的感受和满意度。用户对于一个应用的第一感受来自于他访问您的第一个页面,通常是应用的主页。从技术上讲,我们认为“浏览器响应时间”是指用户感受到的,在浏览器上做出动作(通常是鼠标点击或者键盘敲击)开始到新页面(或者部分页面)显示完整的这段时间。 “浏览器响应时间” 包含三个主要的部分: 对于“页面装载时间”的性能分析与优化,我们在 前面的文章中 已经进行了讨论。在这篇文章中,我们着重讨论页面渲染时间,以及如何剖析和分析浏览器页面渲染时间,并通过找到其存在的性能问题与瓶颈来提高应用的性能。 页面渲染时间主要包含两个部分: 其中: Web 2.0 应用中,越来越多的逻辑层和表现层的实现被转移到浏览器端。对应用本身,这样不仅可以减轻服务器的负担,并且能提供非常丰富的用户体验,使应用有非常好的可用性。浏览器端的页面聚合特性,也使得服务器的架构设计更加灵活,使应用有更大的可扩展性。而从应用的性能角度来看,这势必加重了页面的渲染时间,过于差的页面显示延时,会严重影响用户的体验。所以我们应该认识到应用里面的脚本已经变的很重要,而且可能成为应用的性能瓶颈。为了提升脚本的执行性能,首先需要开发者在设计和实现的时候把性能考虑进去,同时也有一些成熟的 JavaScript 脚本编程的性能建议可供开发者作为参考(参见 参考资源),这可以帮助开发者在程序实现或者从服务器端迁移代码的时候避免调用一些在脚本执行中性能比较差的方法或算法。有些时候,开发者并不能预测到代码中可能存在的性能问题,这时候性能分析技术能提供一些性能剖析的方法和工具,帮助我们对一些方法或者代码片段做性能剖析,从而分析内部潜在的性能问题。 在脚本语言中,主要的性能剖析方法有时间片剖析和调用流程剖析: 这两个性能剖析方法包含两个相同的步骤:数据搜集与数据后处理与分析,通过合适的工具,我们可以同时得到这两个剖析结果。 这个结果能帮我们回答我们最想知道的问题:”谁在调用运行时间最长的方法?“,这将毫无疑问的帮我们定位到应用中存在的性能问题。 目前许多浏览器都提供了适用于自身的性能剖析工具或者插件,不同的工具提供了不同的功能,能帮助我们在不同浏览器上进行脚本执行性能的分析。这里我们以 Mozilla Firefox FireBug 插件、MicroSoft Internet Exporlor 8 与 Webkit(Safari)Web Inspector 三个工具为例子比较他们在功能上的区别,见 表 1。 功能描述 : 相对于基于 Java 语言上的各类性能剖析工具,基于 JavaScript 的性能剖析工具目前还不是很丰富,而且不同浏览器提供的功能也各不相同。从上面的功能对比表中,我们可以看到目前的 JavaScript 性能工具对于后期的离线分析、无关过滤以及快速检索的支持还不完善。但这已经可以帮助我们查找与解决 JavaScript 执行上的性能问题。对于特定的浏览器上的 JavaScript 性能问题,我们可以选择其中最合适的工具进行性能剖析。 剖析 IBM Mashups Center 的 JavaScript 执行性能 接下来,我们将逐步展示一个典型的脚本剖析过程。示例将使用 Developer Tools for Internet Explorer 8(IE8)来对 IBM Mashups Center 的应用做一个 JavaScript 执行的剖析。对于其它浏览器上的性能剖析工具,其基本步骤基本类似,就不再重复叙述。这里,我们准备剖析 IBM Mashups Center 在用户登录的动作,在用户输入用户名和密码做登录后,IBM Mashups Center 会显示该用户的默认主页。下面是主要的步骤: 当剖析动作结束以后,“开发者工具”界面会显示此次剖析的结果。它可以有两种显示方式剖析结果:调用流程树视图 或者 函数列表视图。 前面我们通过 Developer Tools for Internet Explorer 8(IE8)对 IBM Mashups Center 的登录动作进行了 JavaScript 性能剖析,下面我们来分析一下这个结果。通过“函数列表视图”,我们很容易找到那个方法调用占用了最多的时间,或者被调用的次数最多。通过“调用流程树视图”,我们可以查找是哪些方法调用了那些最重的函数。 在我们对 IBM Mashups Center 的登录动作的性能剖析结果中,我们可以发现: 通过以上的性能剖析,已经能够帮助我们找到页面 JavaScript 脚本执行在各个函数中的分布以及它们的上下文关系。对于比较复杂的 JavaScript 脚本性能问题,通常需要结合源码源码阅读,添加日志输出等方法来定位问题,所有这些可以帮助我们快速定位、分析、验证脚本中的性能问题。 本文我们主要讨论了如何对于页面渲染时间的性能分析,首先介绍了几个主要浏览器的性能剖析工具,然后结合对 IBM Mashups Center 的性能剖析示例,介绍了如何利用工具来进行性能剖析与问题定位。 学习浏览器响应时间 = 服务器响应时间 + 页面装载时间 + 页面渲染时间
页面渲染时间 = 脚本执行时间 + 浏览器引擎渲染时间
表 1. JavaScript 性能分析工具功能对比
功能
Mozilla Firefox Firebug
Internet Explorer Developer Tools
Webkit (Safari) Web Inspector
时间片剖析
支持
支持
支持
调用流程剖析
不支持
支持
支持
无关过滤
不支持
不支持
不支持
父子节点统计分析
不支持
不支持
不支持
离线分析
不支持
不支持
不支持
快速检索
不支持
不支持
不支持
匹配匿名函数名
部分支持
支持
不支持
包含程序源代码
支持
不支持
不支持
图 1. 调用流程树视图
图 2. 函数列表视图
图 3. 示例:changePageContent 函数在调用流程树视图中的位置
发表评论
-
高性能、高流量Java Web站点打造的最佳实践
2013-12-24 11:23 2765从2005年-2013年,Ashwanth Fernando ... -
高性能、高流量Java Web站点打造的最佳实践
2013-12-24 11:01 4从2005年-2013年,Ashwanth ... -
20行实现javascript模板引擎
2013-12-23 10:35 147620行实现javascript模板引擎 我仍然在用Abs ... -
标题怎么办
2012-03-25 23:50 21.首先在这里 下载Selenium RC,解压到C盘。 ... -
Google Page Speed应用上线,移动设备也在支持之列
2011-04-05 21:23 823Google已经将Page Speed应用到线上,并且加强 ... -
浏览器的加载与页面性能优化
2011-02-16 11:23 1247本文将探讨浏览器渲染的loading过程,主要有2 ... -
门户网站负载均衡技术的六大新挑战
2010-12-23 11:25 931文 / 李晓栋 记得上 ... -
使用 JAWS 测试 Web 应用的技巧
2010-10-31 23:34 1589屏幕阅读器简介 屏幕阅读器(S ... -
How We Evaluate the Experiences We Engineer
2010-10-26 14:38 6889 and how we measured (and co ... -
研究显示:众多网上零售商未遵循Web优化基本准则
2010-10-26 10:25 660Web优化专家Joshua Bixby最近在博客中披露,在 ... -
Testing sites with Browser Mode vs. Doc Mode
2010-10-22 10:07 1027With site developers verifying ... -
Common Security Mistakes in Web Applications
2010-10-22 10:02 1637Web application developers toda ... -
A (somewhat) brief history of the performance landscape
2010-10-21 10:44 1679I’d like to enlist your help. ... -
Best Practices for Speeding Up Your Web Site
2010-10-20 10:40 1168Minimize HTTP Requests tag: ... -
Web Performance Optimization Use Cases – Part 1 Benchmarking
2010-10-19 14:40 897Web Performance Optimizatio ... -
Google WebP——让图片更小,让页面访问速度更快
2010-10-12 13:14 1535Google日前对外宣布了一种新的图片压缩格式WebP,可 ... -
剖析IE浏览器子系统的性能权重
2010-09-02 13:23 835最近,InfoQ中文站报道了Web 2.0应用客户端性能问 ... -
Performance: Profiling how different web sites use browser subsystems
2010-09-02 00:41 1175When we first showed IE9 at t ... -
Measuring Browser Performance: Understanding issues in benchmarking and performa
2010-09-02 00:40 904Measuring Browse ... -
Ajax应用开发:实践者指南
2010-08-10 21:13 886目前的Web应用开发基本上都是围绕富互联网应用(Rich ...
相关推荐
性能是任何一个网站成功的关键,然而,如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限。Steve Souders是Google Web性能布道者和前Yahoo!首席性能工程师,他在本书中提供了宝贵的...
camunda BPM工作台 Workbench是一个Web应用程序,可让您直接在浏览器中实现BPMN流程。资源组件该应用程序提供了BPMN建模器,脚本编辑组件和调试器。 这些使您可以设计BPMN 2.0流程并以交互方式探索其执行。BPMN建模...
dynaTraceAjaxEdition是一个强大的底层追踪、前端性能分析工具,该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM方法执行时间以及JavaScript代码的解析和执行时间,还可以跟踪...
bpmn.js 是 BPMN 2.0 元模型在 JavaScript 中的实现,包括执行支持。 如果您需要基于 JavaScript 的 BPMN 渲染器,请查看 。 入门 检查example.html以获取基于 requirejs 的 bpmn.js 设置 发展 跑步 grunt watch:...
Lobo Evolution是一个可扩展的全Java Web浏览器和RIA平台。 它支持HTML 4,HTML5 Javascript(AJAX),CSS 3和Java(Swing / AWT)呈现。 Cobra是网络浏览器的渲染器API; 也是一个可识别JavascriptHTML解析器。 ...
sIFR表示scalable Inman ... 使用sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,可以平滑消除文本锯齿,你可以像使用用CSS控制文本一样轻松得到各种文本效果。
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
由WebGL 2.0驱动的Web上的Easy GPGPU。 blink.js (请勿与Chromium渲染引擎混淆)是一个小型,易于使用的GPGPU库,可利用WebGL 2.0的强大功能在网络上使用。 请注意: blink.js使用其自己的WebGL 2.0上下文。 这...
符合标准的网页中的3D渲染和导航的技术演示器(需要浏览器SVG支持),无需插件。 旨在用于创建基本的信息图,非常适合通过Web 2.0 mashup进行实时3D动画处理。 使用JavaScript使用兼容VRMLScript的环境对象(JS中...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地...
JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 jActionScript jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。...
JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 jActionScript jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。...
Java 3DMenu 界面源码,有人说用到游戏中不错,其实平时我信编写Java应用程序时候也能用到吧,不一定非要局限于游戏吧,RES、SRC资源都有,都在压缩包内。 Java zip压缩包查看程序源码 1个目标文件 摘要:Java源码...
这样就可以在桌面上开发3D应用程序并将其轻松部署在Web上! 支持的浏览器 Chrome,Firefox,Edge和Safari(Safari需要启用“ WebGL 2.0”实验性功能)。 例子 可以在找到涵盖大多数功能的几个示例,这些示例位于。 ...