第二天上午的主题全是老外的，可都有点水，特别是那个才做前端三年不到的“二世哥”。。。仅仅剩下的安慰是：唯一一个css主题是本次大会唯一一个美女妹子Nicole Sullivan演讲的o(∩_∩)o,另外下午的三个前端主题还算给力。

Day2日程及对应演讲稿地址

导读：
1. 日期标绿 - 表示本人选择参与过
2. 中划线斜体 - 表示坑爹
3. 标红 - 表示推荐















08:00 来宾登记（酒店二层）


09:30
主题发言 预处理器时代的CSS性能

Nicole Sullivan
(Stubbornella)



10:00
主题发言 浏览器中的JavaScript性能

Charlie Fiskeaux II
(OmniTI)



10:30 上午茶歇


10:50
主题发言 坚持用户驱动的性能优化

Buddy Brewer
(SOASTA)



11:05
走自己的路——有时候Web架构一定是不同的

Geir Magnusson Jr.
(AppNexus)



12:00 自助午餐（宜客乐咖啡厅）


会厅A
会厅B
会厅C

13:30
监控真正的问题

Theo Schlossnagle
(OmniTI)


13:30
百度前端性能优化基础服务

牛尧
(百度)


13:30
阿里集团高效数据库服务平台——iDB

叶正盛
(阿里巴巴)



14:30
淘宝高访问量优化的那些事儿

许令波
(阿里巴巴)


14:30
残酷KPI下的极致优化——淘宝和天猫网首页优化实践

杜欢
(阿里巴巴), 吴天豪
(阿里巴巴)


14:30
阿里HBase的自动化运维及容灾方案

朱金清
(阿里巴巴)



15:30 下午茶歇


15:50
如何进行多终端Web前端优化——QQ互联中的优化经验分享

任旻
(腾讯)


15:50
存储与性能

韩拓
(七牛)


15:50
数据复制中心架构与实践

刘杰
(阿里巴巴)



16:50
NoOps in XIAOMI

伏晔
(小米)


16:50
16毫秒的优化——Web前端性能优化的微观分析

陈子舜
(腾讯)


16:50
大规模Hadoop集群运维经验谈

柯旻
(阿里巴巴)




Day2 推荐的4个演讲

Nicole Sullivan- 预处理器时代的CSS性能

尽管Nicole说的内容很基础，但作为本届velocity上唯一 一个css的主题演讲，还是要推荐下！下面是一些个人觉得有价值的点。

1，oocss

这个不多说了。直接到她oocss github上看下吧。

2，unused css

分析css代码的覆盖率。以前不是很在意，但是在苛刻的极致的性能优化面前，可以一试，也有很多的工具辅助。

A. chrome dev tool - audit 利用audit的功能，简单方便

B. deadweight，目前仅支持32bit的机器

1
2
3
4
$ gem install deadweight
$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

C. Dust-Me Selectors ，一个ff的插件

D. helium-css , 一个js写的扫描页面无用css代码的东东

3，尽量避免使用!important

扰乱了本来的样式权重顺序，对于后续开发维护的人有时候是个噩梦。

更多可参考文章：!important CSS Declarations: How and When to Use Them、如何和何时使用CSS的!important

4，sass

这个也不多说了，团队里都在用less，大同小异。关于嵌套(nested)，提到了一个很重要的原则，希望用sass和less的同学注意下，不要为了代码美观便利的目的而盲目的用嵌套。

Never go more than 3 level deep...
选择器的层级不要超过3级...

sass编译出来的css代码，如果选择器超过3级就应该考虑下怎么重构了。

5，hologram

一个利用css注释生成css文档的东东。

百度-牛尧-百度前端性能优化基础服务

正在做或计划做网页性能优化的同学都非常值得去看看这个演讲主题的内容，包括但不限于

  1. 性能优化的核心指标
  2. 性能优化的数据采集
  3. 性能优化分析的工具（DynaTrace、Google Web Tracing Framework）
    Google Web Tracing Framework，看上去好强大
  4. 百度的PageCheck
  5. 百度的PageTimeline

详细请猛击这里下载PPT！

阿里巴巴-杜欢、吴天豪-残酷KPI下的极致优化——淘宝和天猫网首页优化实践

网页的性能优化单靠一个角色是很难完成得彻底的，
阿里是汇集了各个角色专门成立了一个小组做为全年KPI来搞。
易迅、网购你们什么时候上路呢？

对于页面综合加载速度的优化，如果你想知道淘宝的5s、天猫的3s是如何做到的，可以看看杜欢和吴天豪这两哥们“理论少，实操多”的总结和分享。

目前这个ppt还没放出来，先上几个摘录：

  1. 从视觉感受和数据同时分析问题，设定具体的优化目标。
  2. 准备稳定可靠的长效数据监控机制（系统）。
  3. 规划页面下载大小，尽量让首屏可视内容等于Onload内容。
  4. 根据业务优先级决定模块加载时机
  5. 重点优化默认不可见区域的内容的加载
  6. 移除所有用不到的资源
  7. 与数据敏感的业务方提前接触，从设计优化方案到优化上线全程邀请他们一起参与。准备好应急回滚方案！

腾讯-陈子舜-16毫秒的优化——Web前端性能优化的微观分析

PJ的这次演讲绝对是这届Velocity前端主题中的Top1了。以下的若干个问题，如果你有回答是NO，就下载翻看PPT去吧o(∩_∩)o！

  1. 你有网络层请求优化的经验，有脚本执行计算优化的经验，是否有渲染性能优化的经验？
  2. 你知道浏览器渲染性能好坏的标准么？
  3. 你是否知道浏览器干了啥米事情才能把你制作的网页呈现出来？
  4. 你会看chrome/safari DevTools的Timeline数据么？
  5. 你知道浏览器渲染丢帧的现象么？
  6. 什么情况下会引起Reflow(Redering)?
  7. 什么情况下会引起Repaint(Painting)?
  8. 知道为什么说setTimeout和setInterval是邪恶的东西不?
  9. 了解RAF(requestAnimationFrame)怎么用么？
  10. 知道classList属性不？
  11. 知道GPU在浏览器中是如何工作的么？
  12. 知道如何为元素启用GPU加速，即在GPU中创建Layout缓存么？
  13. 如何合理利用GPU?

案例地址：github.com/puterjam/speed_render

详细请猛击这里下载PPT！