对于页面加载时间的测试,简单的需求(仅仅是看看请求时间消耗分布)可以通过开发者工具或者Http Watch了解,但如果是想对页面加载进行优化,进行深入了解的(例如:渲染过程中的CPU开销、网络传输时间与客户端渲染时间的分别耗时、世界同类型站点响应排名),那么可以使用dynaTrace AJAX Edition使用并不复杂,启动浏览器,访问一遍希望了解的页面,针对每一个页面,dynaTrace AJAX Edition都会提供如下信息:1)Summary可以选择和各类型的站点进行性能排名PK,例如alexa排名前1000、500、100的站点、新闻站点、购物网站,了解我们站点在这类型网站中的各项性能指标排名,例如默认的和最佳范例比较,可以看到,综合排名来说,案例业务系统算是A级,超越了96%,缓存等级、网络等级、javascript等级都处于A级,服务响应等级处于B级,顺便说下,排名数据是可以在线更新的。也还可以看到各种加载时间指标的排名情况、服务端时间与客户端时间消耗的排名情况、网络消耗时间排名,以及前面所说指标的等级信息:也还可以看到各种加载时间指标的排名情况、服务端时间与客户端时间消耗的排名情况、网络消耗时间排名,以及前面所说指标的等级信息:2)caching可以看到浏览器缓存利用情况,下面的例子里面等级只能算E,并提示102个静态请求其中97个影响了等级排名列表里面可以看到,所有资源都没有使用expires标记这里也需要注意,post类型的请求,浏览器一般不启用本地缓存,对于静态内容,web服务器默认情况下不会开启expires标记的支持3)network从这里可以看到一些有助于减少网络资源开销的信息,例如4XX、5XX的资源请求又例如图片资源过大、css文件和js文件过大过多的问题,如下图在建议进行图片、css、js文件合并,并估算合并后能够因此带来多少的响应性能提升:又例如图片资源过大、css文件和js文件过大过多的问题,如下图在建议进行图片、css、js文件合并,并估算合并后能够因此带来多少的响应性能提升:4)server-side:列出了所有资源的总响应时间、其中服务器部分的时间,并显示了这些资源的体积,超过200ms的用了红色底色标注5)timeline: 时间轴,按照时间轴显示会话过去页面的每个时间点对应的事件,包括CPU占用(可惜不显示指标值)、javascript时间、类型的呈现、网络上的时间消耗、客户端事件信息。例如下面的监控信息里面可以看到,网络的时间消耗主要是HTML资源,如果需要对细节部分浏览的话,用左键可以划出一个放大的区间,把时间线定位到相应的红色部分,就显示了那个时间点网络资源出现消耗的原因,是两个gif例如下面的监控信息里面可以看到,网络的时间消耗主要是HTML资源,如果需要对细节部分浏览的话,用左键可以划出一个放大的区间,把时间线定位到相应的红色部分,就显示了那个时间点网络资源出现消耗的原因,是两个gif同理,对于javascript,占较长时间的部分是浅黄色表示的“load”,双击时间块可以查看其时间消耗详情以及具体的函数代码:同理,对于javascript,占较长时间的部分是浅黄色表示的“load”,双击时间块可以查看其时间消耗详情以及具体的函数代码:对于rendering,看其中的这一段,双击它:对于rendering,看其中的这一段,双击它:可以看到渲染事件的发生情况,了解css表达式带来的性能问题是否严重可以看到渲染事件的发生情况,了解css表达式带来的性能问题是否严重 可以看到渲染事件的发生情况,了解css表达式带来的性能问题是否严重 可以看到渲染事件的发生情况,了解css表达式带来的性能问题是否严重6)KPI's选项卡:各项指标消耗统计 first impression 视觉上的响应时间 , onload 加载消耗的时间 , total load time 完成加载的时间 requests 请求数,XHR XMLHTTPRequest数
js手机端时间区间_js 时间区间
最新推荐文章于 2023-07-25 10:31:58 发布