北京 Velocity 性能大会第二天

HomeJournal北京 Velocity 性能大会第二天

短暂的两天 Velocity 性能优化大会已经成为了过去,感叹时间过得好快。继续趁热打铁,把今天大会的一些感受记录下来。

首先,这次 Velocity 给我的感觉,就是「老外」分享的有点太基础了。一个感觉,就是他们分享,都是在两个极端,要么很深奥,要么很粗浅。但是幽默还是有的。

而国内的分享很不错,腾讯同学的分享很赞。


早晨的分享,感觉有一个可以说的,就是「预处理时代的CSS」。让我感觉到一个点,就是在有 BootStrap 的时候,国外的网站也有在做类似的样式库沉淀。

今天嘉宾分享了一个叫做hologram的样式库,我看了下,感觉没啥亮点。而对于 SASS,我本人不是很喜欢这样的框架,把 CSS 给 OO 化,什么继承啊,关联啊,再多的功能,我觉得少了一份写 CSS 的艺术感。

借此机会,宣传一下我们的AliceUI,这里的一些写 CSS 的思想和规范,我觉得你值得拥有。


关于用户体验驱动的性能优化,我觉得还是有些不错的观点的。简单摘要一下:

  1. 快速可以让用户觉得高兴。
  2. 作为开发者「我自己都不高兴,为什么要让我的用户高兴呢?」而回到实际来,用户不高兴了,就会流失,对你产生损失。
  3. 别超过用户的耐心。
  4. 访问一个页面,IE用户超过 3.6s 就会离开;Firefox 超过 5.6s 就会离开;而使用 Chrome 的用户是最耐心的,超过 6.5s 才会离开。

下午的几场,干货比较多,这里点点,回头深入研究再做总结。

百度前端性能优化基础服务这一场,讲得也是数据相关的。有几个值觉得可以借鉴:访问一个页面的时候,白屏小于 1s,首屏小于 1.5s, 最终页面都加载完小于 3s。

期间讲到一个「基于MAP的资源管理方案」,我觉得他们做的好深入。听的时候,顺便百度了一下,就找到了所见的内容 —— fis,有兴趣的同学可以里了解下。


接下来的淘宝首页和天猫首页性能优化,我觉得也很赞的。有几个关键点,这里记下:

  • 传说中的 SmartLoad 时间,实际上是需要依赖业务需求,用户的终端,页面的性能支持等原因来做判断。
  • 一些协议自适应和非性能点的优化,也是能直接给用户带来价值的。(性能不是为了数字而优化,而为了提升用户而优化)
  • 性能优化的过程,需要持续数据的观察,反复行动。
  • 尽可能地减少请求数和文件大小。

在听的时候,顺便打开淘宝首页看了下源代码。发现很有趣的一行:

<textarea><iframe src="..." ></iframe></textarea>
为什么要在textarea中引入一个iframe呢?经过一些文章的查阅,我觉的最可能的一种原因,是提高页面的首屏时间。因为此时 HTML 在 textarea 是一直 val 形式,不会被浏览器解析渲染,所以页面在刚加载的时候只显示第一屏。


最后有一场,我觉得是我本次 Velocity 性能大会最长知识点的——「Web前端性能优化的微观分析」。

简单分享下,有两点:

  • 使用 requestAnimationFrame 来替代 setTimeout 和 setInterval。
  • 使用 classList 的 add 和 remove 方法来替代 className 的操作。

其次,我懂得了开发者工具里面「Timeline」的操作。好吧,我果然是小白,^_^。恩,关于这样微观的细致的分析,我觉得很赞,以后得多学习别人的专研精神。


不知不觉又流水账了,只为了记下今天这稍纵即逝的感觉,后续有时间一定研究下,并使用到产品中来完成更好的用户体验。

恩,晚安@北京。

  • 作者「」于 更新本文
  • 文章声明:自由转载-非商用-非衍生-保持署名 | BY-NC-SA
← 北京 Velocity 性能大会第一天 我到过北京→
  • 获取每日の能量源
  • ATP