纽约行(四)

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

velocity

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

map-hotel

hilton

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

排队注册:

line

github 赞助:

github

会议

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

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

jake

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

  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

tim

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

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

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

塔基特

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

哈雷区:

hali

target:

target

target

巧克力:

chocolate

晚饭

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

virgil’s bbq

bbq

垫桌的吃货地图

map

一大盘肉

meat

回程

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

nypd

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

hl

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

all

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