前端性能测试
文章平均质量分 67
iteye_18428
这个作者很懒,什么都没留下…
展开
-
YSlow计算公式
F = 8×{100-[4×(JS文件数-3)+4×(CSS文件数-2)+3×(CSS背景图连接数-6) ] }+6×(100-10×未使用CDN的连接个数)+10×[100-11×(Expire时间小于172800秒的连接个数) ]+8×[100-11×(文件大小大于500字节且 未使用gzip的连接个数)]+4×[body中没有CSS连接 ? 100∶ (99-10×body中的CSS连...2011-11-07 10:20:03 · 100 阅读 · 0 评论 -
前端性能测试(一):CPU
chrome开发者工具,F12快捷键打开。Profiles面板 这个主要是做性能优化的,包括查看CPU执行时间与内存占用。从这个面板可以看到网页的执行时间和内存使用状况。包括了2部分:查看CPU和内存。帮我们了解哪些资源被用掉了,并帮助我们优化代码:...2011-11-19 13:36:28 · 1115 阅读 · 0 评论 -
前端性能测试(二):内存占用
首先介绍下常用术语:内存分析的常用术语,如果有java或者.Net变成经验也许你会更熟悉它们。对象大小 Object Sizes保留路径 Dominators(统治者,我觉得就是父节点的意思)一个对象A的统治者是从跟节点到A对象的每个简单路径上的对象。也就是,如果统治者对象从堆中移除,对象A到GC根节点将不可达,被抛弃。统治者对象构成了一个树型结构,因为每个节点有确定的...2011-11-19 13:36:20 · 1297 阅读 · 0 评论 -
前端性能测试方案
一、测试环境¶分3种测试环境:1、无缓存低带宽(服务器配置)。为了开源,准备最差的网络环境,页面平均加载时间的差别会更明显。比如DSL,不压缩的增幅为90%,拨号用户增幅140%。平均效果不能反映实际情况。15%带宽小的用户,增加额外的时间足以让他们放弃。 2、有缓存低带宽。尽可能启用缓存,存在页面缓存配置错误的情况。启用缓存论据:用户可能只有开始...2011-11-19 13:35:10 · 908 阅读 · 0 评论 -
YSlow——cookie free
收集一些数据,更容易说服开发进行优化。 静态文件均携带一个公共的cookie,较长,共1278字节,大于1k。也就是每个文件都会携带1k的多余信息。所有测试页面平均会请求27.3个资源,减去html1个请求和异步请求数,也就是每请求一个页面会多25K的文件大小。 ...原创 2011-11-18 11:31:23 · 152 阅读 · 0 评论 -
YSlow—— 配置ETag
ETag简介实体标签(Entity Tag),是server和browser确认缓存组件的有效性的一种机制。个人觉得,如果Expires是时间戳,ETag类似版本戳。【见下图】:ETag带来的问题ETag的问题在于,通常用组件的某些属性(大小、时间、等)来构造它,这些属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原...原创 2011-11-18 10:49:58 · 175 阅读 · 0 评论 -
jQuery提升性能的代码规范
jQuery提升性能的代码规范总是从#id继承Class前加tag名缓存jQuery对象善于使用jQuery连缀的写法使用子查询尽量减少直接 操作(Manipulation)DOM使用时间委托(别名.冒泡)消除无用的查询延迟加载到 $(window).load1. 总是从#id继承jQuery最快的选择器是ID ($('#someid...原创 2011-11-18 10:34:43 · 187 阅读 · 0 评论 -
dynaTrace之二 —— JavaScript和AJAX性能最佳实践
原文地址:Best Practices on JavaScript and AJAX Performance同类阅读: dynaTrace之一 —— 网络请求和往返的最佳实践 dynaTrace AJAX Edition有独一无二跟踪页面JS执行的能力。它还能跟踪到浏览器的DOM,获取方法的参数和返回值。下图就是一个脚本异常的JS跟踪图,在PurePath视图中: 通...原创 2011-11-18 10:27:23 · 233 阅读 · 0 评论 -
前端性能测试跟踪模板
测试页面:分析后前端性能较差,需要优化的页面。评分结果:YSlow & dynaTrace的评分结果具体评分较差的项:YSlow & dynaTrace报警项。问题类型:比如:Etag。问题原因:比如:http请求服务器响应太慢。优化建议:比如:优化xx请求的后端算法,减少服务器响应时间。优化成果:原先页面加载时间xx(ms),优化后yy(ms)...原创 2011-11-18 09:42:25 · 243 阅读 · 0 评论 -
dynaTrace之一 —— 网络请求和往返的最佳实践
原文地址:Best Practices on Network Requests and Roundtrips同类文章:dynaTrace之二 —— JavaScript和AJAX性能最佳实践 网络请求和往返的最佳实践 当输入url,浏览器最先请求的是HTML文档。其次是相关图片、css、js文件和其他媒体文件比如flash组件等等。每个资源的下载都需要建立一个连接。一个页面所...原创 2011-11-14 11:08:23 · 356 阅读 · 0 评论 -
DynaTrace评分
DynaTrace的评分分为2大部分:1. 4个KPI(Key Performance Indicator) (占60%)第一印象时间(即出现画面——浏览器的第一次渲染时间发生时间)onload事件时间完全加载时间(所有onload的处理函数执行完毕,所有动态或者延迟加载的内容获取完毕)请求数量2. 4个分类评判标准(40%,各占10%)浏览器缓存...2011-11-08 15:53:09 · 159 阅读 · 0 评论 -
页面性能优化实例——内存
参考知识先了解一些参考知识不同浏览器对终止脚本执行有不同的判断标准:IE监控脚本执行的语句和数量。当执行的语句的数量达到最大限定值,默认为500万,就会弹出终止脚本运行的对话框。Firefox监测脚本运行的总时间。当超过预先设定的时间,默认为10秒,就会终止脚本运行的对话框。Safari也是通过执行时间来检测脚本是否为长时间运行。默认超过设置为5秒,超时就会弹...原创 2011-11-21 09:07:42 · 423 阅读 · 0 评论