js手机端时间区间_js 时间区间

对于页面加载时间的测试，简单的需求(仅仅是看看请求时间消耗分布)可以通过开发者工具或者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数