纽约行(五)

会议

上午

10.15 是 velocity 大会的第二天,也是正式开始的第一天,早上所有人都聚集到了一个很大的会议室,velocity 大会的主席 steve 照旧做了一个开幕式的演讲

opening

之后就是各种赞助商,主题演讲连番上场了:

  1. keynote system 介绍他们公司提供的两个测试工具 KITE MITE,可以录制测试行为并且重放,还可以配置 webpagetest 等。
  2. w3c 性能工作组(user timing, page visibility, requestAnimationFrame, navigation and resource timing)的一个近期汇报,介绍了一些进展和想法

    w3c

    比如

    1. prerender

                          <link rel="prerender" href="">
                          // 预取并在后台预渲染
                          

    2. 延迟属性 lazyload(网络相关) 和 postpone(显示相关)。只在必要时加载,比如出现在视窗里,postpone 类似目前的 javascript 懒加载组件,lazyload 还可以用在 script 标签上,除了 async 以及 defer 外进一步指定脚本的执行顺序

    3. Beancon 保证页面关闭前发送打点请求

                          window.onunload=function(){
                          return beancon('post','/log',data);
                          }
                          

    4. 4.javascript preflight injection,通过 http 请求头动态注入脚本

    5. 帧数统计和屏幕滚动性能监控

  3. google 工程师介绍了使用 chrome dev tools 来发现应用程序的内存问题,通过 timeline 的memory 来录制应用程序的内存消耗情况以及 profile 的 record heap allocations 来具体定位请求堆内存的程序位置。

午间休息时,在会场外赞助商还是不少的,讲师也有地方可以提供答疑(office hour)。

break

下午

下午则和前日一样是具体的演讲,节选几个比较有趣的分享:

  1. 昨天介绍浏览器加载的 jake 介绍了渲染 render 方面的效率问题,期间又提到了 render tree 的概念:

    render tree

    有些属性例如 offsetWidth 等会影响 layout,要避免频繁操作,读取。

    layout

    而 fixed 背景图会影响全局滚动,每次滚动条变化都会导致全屏重绘。

    移动方面首先介绍了点击延迟问题,目前可以用模拟 tap 事件解决。

    动画方面则鼓励使用 requestAnimationFrame. 渲染则要尽可能利用 gpu,通过一些 css 属性将渲染分成多个层(composite layer)来渲染,这些 css 属性包括

    layer

    但是也要注意度的问题,每个层都会消耗内存。

  2. google,微软的工程师讨论了 onload 并不能实际表明页面的实际性能,而应该测量页面初始渲染以及渲染完成的时间.

  3. google 的 chrome 性能工程师介绍了 javascript 的内存管理方面的问题。

    js memory

    特别是当内存频繁获取,释放时所导致的 gc 停顿时间,进而导致帧数降低而造成卡顿. 对于游戏来说这点尤为重要,所以可以通过预先分配一大块内存(int8array),然后自己管理内存,避免系统 gc 导致的停顿时间。另外要特别注意闭包导致的内存泄漏,避免闭包内的大量内存占用,比如

                (function(){
                var str=new Array(100000).join('*');
                // do something to str
                setInterval(function(){
                console.log('run')
                },1000);
                })();
                

    take away

  4. 最后 steve 介绍了 prebrowsing 的概念,这个概念实际上多个概念的集合,包括
    • link dns-pretch dns 预解析
    • link prefetch 页面预加载
    • link prerender 页面后台预渲染
    • preloader 现代浏览器会在页面 html 下载完后,预先加载页面的脚本(即使放在底部)和样式

帝国大厦

会议结束后,到附近闻名已久的帝国大厦看了下:

empire state

tower

由于已是晚上只能从顶层观光平台上欣赏下万家灯火了

light

白天的景色只能从 ”北京遇上西雅图“ 脑补啦

day

day

晚上吃的汉堡王还是很不错的,感觉比麦当劳好不少,价格也贵了一点

king

king2

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s