
velocity
Very rough notes from the event that just ended a few minutes ago
几分钟前结束的活动中的非常粗糙的注释
======== 1 ========
======== 1 ========
Tony Gentilcore (google) and Anderson Quach (MSFT) talked about the W3C working group and the specs for measuring performance:
Tony Gentilcore(google)和Anderson Quach(MSFT)讨论了W3C工作组以及衡量性能的规范:
- Navigation timing spec - HTML document: DNS, handshakes, load events 导航时序规范-HTML文档:DNS,握手,加载事件
- Resource timing - how long JS, CSS, audio, video... take资源计时-JS,CSS,音频,视频...需要多长时间
- User timing - interactions, such as clicking a link用户计时-交互,例如单击链接
Challenges: user security, privacy. Small overhead for browsers. Useful actionable data out.
挑战:用户安全,隐私。 浏览器的开销很小。 有用的可行数据。
Navigation timing:
导航时间:
window.performance
- IE9 has no vendor prefixwindow.performance
-IE9没有供应商前缀otherwise
window.webkitPerformance
否则
window.webkitPerformance
- FF4 probably shipping it too FF4可能也发货了
Properties:
特性:
window.performance.timing
.domainLookup
.connect
.domContentLoaded
.loadEvent
....etc
Specs: http://test.w3.org/webperf/specs/NavigationTiming/
规格: http : //test.w3.org/webperf/specs/NavigationTiming/
Resource Timing spec - upcoming
资源时序规范-即将推出
foreach resource
redirect
fetchStart
fetchEnd
...
User Timing - upcoming
用户计时-即将推出
mark('pagelet')
mark('something-else')
...
>>> getMarks();
{
'pagelet': 123456767
}
Stretch goals:
伸展目标:
- painting times 绘画时间
- CPUs中央处理器
- visibility (is the page in a background tab)可见性(页面在背景选项卡中)
- allow real yealding setTimeout(0) 允许真正的预设置setTimeout(0)
- don't animate faster than the browser paints 动画制作的速度不超过浏览器绘制的速度
mailto: public-web-perf@w3c.org
mailto:public-web-perf@w3c.org
======== 2 ========
======== 2 ========
Above the Fold Time: Measuring Web Page Performance Visually Speaker: Jake Brutlag Help from: Zoe Abrams, Pat Meenan (webpagetest) Google
折时之上:直观地测量网页性能演讲者:Jake Brutlag帮助来自:Zoe Abrams,Pat Meenan(webpagetest)Google
What the user perception of page load timing is.
用户对页面加载时间的看法是什么。
AFT (Above the Fold Timing) algo AFT: When content above the fold stops changing and reaches its final state
AFT(高于折叠时间)算法AFT:当折叠上方的内容停止变化并达到最终状态时
Integrated in WebPageTest.org
Motivation
动机
AFT more representative than
DOMContentLoaded
oronload
AFT比
DOMContentLoaded
或onload
更具代表性onload
- different in IE and FF, e.g. async scripts block onload or notonload
-IE和FF中的不同,例如异步脚本是否阻止onload
Method:
方法:
- video capture 视频截取
- AFT cutoff time - upper bound, e.g. 45 sec for DSLAFT截止时间-上限,例如DSL为45秒
- split pixels into static and dymanic (ads)将像素分为静态和动态(广告)
- AFT = latest change of a static pixel AFT =静态像素的最新变化
Magic number - 5 determined empirically static pixels are those that change less than 5 times
幻数-5个根据经验确定的静态像素是那些变化小于5倍的像素
Application - validate other metrics, cross-browser, visual Limitation - lab only
应用程序-验证其他指标,跨浏览器,可视限制-仅实验室
{I ran webpagetest.org on facebook.com with AFT on. The results are very close to onload, as expected. It's a simple page. Results: http://www.webpagetest.org/result/110315_P9_5MDJ/ }
{我在启用AFT的情况下在facebook.com上运行了webpagetest.org。 正如预期的那样,结果非常接近onload。 这是一个简单的页面。 结果:http://www.webpagetest.org/result/110315_P9_5MDJ/}
== break ==
==休息==
Note from the sponsor StrangeLoop: a downloadable "State of the Union" A study of top 2000 Alexa retail sites. Findings:
赞助商StrangeLoop的注释:可下载的“国际联盟”状态研究Alexa排名前2000的零售网站。 发现:
- 11.2 sec onload avg 平均11.2秒加载时间
- top 100 sites slower than the lower ranked前100个网站的排名低于排名较低的网站
- those using CDNs are not faster那些使用CDN的人并不快
- failed to implement the basics - YSlow stuff未能实现基础知识-YSlow的东西
======== 3 ========
======== 3 ========
Next-gen YSlow Betty Tso and Marcel Duran, Yahoo!
下一代YSlow Betty Tso和Marcel Duran,雅虎!
YSlow for Chrome last week Not as accurate as Firefox cause headers, timing come from: 1. Crawl DOM 2. x-domain requests
上周针对Chrome的YSlow不如Firefox原因标头准确,计时来自:1.抓取DOM 2. x域请求
Announcing YSlow bookmarklet version for mobile and all other browsers to be released early april YSlow now on Git?
宣布在移动版和所有其他浏览器上使用的YSlow书签版本将在Git上于YSlow于4月初发布吗?
Lots coming up, e.g:
大量涌现,例如:
- Multi-language support 多国语言支持
- HAR-to-YSlow从低到高
- YSlow export to JDropYSlow导出到JDrop
Bookmarket works like: 1. crawl DOM 2. Use YQL to get headers
Bookmarket的工作方式如下:1.爬网DOM 2.使用YQL获取标题
SELECT * FROM data.headers WHERE
url IN ('http://...', 'http://...')
======== 4 ========
======== 4 ========
Visibility into Mobile Performance Steve Souders, Google
Google对移动性能的了解Steve Souders,Google
Demo #1: http://blaze.io/mobile/ WebPageTest.org framework connected to iPhone and Android apps Mobile waterfalls Demo #2: pcapperf 1. setup wifi hotspot on a pc/mac 2. tcpdump to capture .pcap file 3. upload .pcap to http://pcapperf.appspot.com app 4. observe waterfall via pcap2har and harviewer 5. run pagespeed on the har Demo #3: JDrop http://jdrop.org Upload JSON so you can run something on mobile and view/analyze results in desktop's large screen Works with the bookmarklet tools part of Steve's package of mobile meta-tool
演示1:连接到iPhone和Android应用程序的http://blaze.io/mobile/ WebPageTest.org框架移动瀑布演示2: pcapperf 1.在pc / mac上设置wifi热点2. tcpdump捕获.pcap文件3 。将.pcap上传到http://pcapperf.appspot.com应用程序4.通过pcap2har和harviewer观察瀑布5.在har上运行pagespeed演示#3:JDrop http://jdrop.org上传JSON,以便您可以在移动和查看/分析可在桌面大屏幕上显示结果与Steve移动元工具包中的小书签工具一起使用
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: https://www.phpied.com/velocity-online-conference-march-2011/
velocity