10.14 周一是 velocity 会议的第一天，或者说是正式开会的预热，正式会议在 10.15 号才算开始，不过第一天的会议内容很足且没有广告商的各种赞助会议。

velocity

会议于早上9点开始，我们匆匆吃个汉堡后便赶往了会议地点希尔顿酒店二层：

到时，已经不少人在排队注册，形式和国内差不多，赞助商感觉也差不多，比如 google github 等

排队注册：

github 赞助：

会议

接下来我会对一些我认为有价值的分享做一些介绍：

google 的 Jake Archibald 分享了各种浏览器在不同 html 结构下的网络请求和渲染优化：your browser is talking behind your back

这个分享也不是第一次了，印象比较深的点有

1. display none 里面的背景图片在所有浏览器下都不会被下载

       <div style='display:none'>
       <div style='background:url("xx.jpg")'></div>
       </div>
   

   而

       <div style='display:none'>
       <img src='xx.jpg'/>
       </div>
   

   则会下载图片.

2. 另一个是 media query 方面的，在老的 android2/3 版本下

       html {
         background: url(desktop.png)
       }
       @media screen and (max-width:600px) {
         html {
           background: url(mobile.png);
         }
       }
   

   会造成两张图片同时下载，而如果稍微调整下顺序则可以避免这种情况

       html {
         background: url(mobile.png)
       }
       @media screen and (min-width:600px) {
         html {
           background: url(desktop.png);
         }
       }
   

3. 渲染优化的例子在于对于样式的连续赋值浏览器会进行缓存，例如

       x.style.left='0';
       x.style.transition='left 1s';
       x.style.left='100%';
   

   这段代码只有在第一次执行时有效，原因在于 left 连续赋值被缓存，若想重复执行，则 需要进行强制样式生效，通过读取一些样式可以达到该效果，例如 offsetWidth 等

       x.style.left='0';
       x.offsetWidth
       x.style.transition='left 1s';
       x.style.left='100%';
   

另一个为来自 LLC 的 Tim Kadlec （作者在响应式有诸多研究，出有一本书：响应式设计实现）分享了响应式设计的一些原则：Responsive Responsive Design，

一个常见的误解是响应式会导致页面变大，而其实错的是实现而不是响应式设计本身，因此我们需要一些指导原则，比如

1. 对图片要进行压缩，并针对设备进行最小化
2. 对于手机端只下载需要的 html，而不是简单的响应式 display none
3. 响应式图片，可以通过一些 polyfll, js 通过计算屏幕大小，设置不同的图片 src（picture srcset 没有广泛支持）

而对于新的设计，我们应该采取 mobile first 的设计思路，在设计出最小可用集后根据不同的设备再初步增加不同的东西. 作者很不推荐针对移动设备单独维护一套系统的做法.

塔基特

会议结束后，我们一行去当地的一个大超市 target 购买回国要带的吃的东西，倒是这边一个沃尔玛都没看到，超市比起国内的巨无霸沃尔玛确实差远了，只有小小的一层。
途中还路过了全美最大的黑人聚集区哈雷区

哈雷区：

target:

巧克力:

晚饭

领队终于改注意了，晚饭改为 bbq，美国人对于肉类食品很实惠，一大盘，根本吃不完啊….

virgil’s bbq

垫桌的吃货地图

一大盘肉

回程

回程还偷拍了两个美国警察大叔：

在超市里买水时感觉到了浓厚的万圣节气氛：

回到旅店后，展示下超市的成果吧