跳到主要内容

2 篇博文 含有标签「新浪微博」

查看所有标签

· 阅读需 7 分钟

由来

那时候还很无知,虽然发现了有这么一个用户体验不错的细节,可惜开动了小脑经也并不知道怎么玩的。

场景

地点:新浪微博 事件:发现每条微博的时间都会不断的自己变咧!这样就算你放了N久,也会知道这条微博是到底什么时候发的,不用再去刷新页面了。

问题

是怎么能实现批量更新时间的呢? 通常都是在服务端查询后根据时间算出对应的人性化时间,“几秒前”“*分钟前”等等。 而这样的字符串是很难再哪来二次计算的。

分析

时间的代码片段

上面是时间的代码片段,简单看一下,跟时间有关系的属性,只有titledatenode-tpye,这三个属性:

  • title 从值看来是年月日时分的格式化后的字符串
  • date 时间戳
  • node-type 从值来看应该算是表示了某一类的类名

通常来讲,用时间戳来计算是最方便的,因为他是以毫秒为单位,而天、时、分、秒都可以用毫秒来表示,而超过了某个单位的最大值,比如一分钟前的微博,用现在的时间戳减去之前的时间戳,大于60000毫秒的话,那么肯定就是一分钟前了。

而找到这些元素只需要通过找到node-type属性为feed_list_item_date的元素再获取date属性计算后改变即可。

这里我是尝试了一下把feed_list_item_date改为feed_list_item_date1他的时间就不变了,而其他的已然在周期性的变化,改回去之后又在周期的变化。


补充

然而有个事被我差点忘记了,就是这个title属性,为毛没有讲是干啥用的,我开始也没想明白,而后来我看到了这个 时间格式化

我好像有点明白了,我又观察了一下,在一个小时内,时间是会显示xx分钟前的,但是超过了一个小时之后,时间就会变成今天 13:00, 昨天 13:008月20日 13:00这个样子了,那么这个title感觉很好解释了,超过1小时候拿这title来替换掉其中的yyyy-MM-dd部分,就成了稍微久远点的人性化时间。

总结

其实一些不错的产品很值得琢磨的,不管是用户体验也好,优化也好

· 阅读需 4 分钟

dns-prefetch

什么是 DNS Prefetch ?

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。

font 12px/1.3

代表什么意思呢,那就是字体大小是 12px,后面的是行高 1.3 倍

针对 IE7 以下的背景图片缓存

try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){

}

页面样式分块分层渲染

我们通常都会想,尽量的把 css,js 等静态文件压缩合并,是的,这种思路是没有错的,但是,这只能说针对于在 css、js 文件的内容不多,压缩之后不是很大的情况下才算是较优的策略,然而当合并起来也较大时,其实应该分层次的将 css 拆开成不多的几个文件,让用户的首屏不会出现很长时间的空白。 其实这也是看了扑灵大大的博客《谈新浪微博的前端重构中的 CSS 请求数问题及优化策略 》之后才明白的一个问题。 css

我产生了一个问题

这个 link 标签中的 includes 属性哪来的?从后面的内容来看像是把各个区域分块加载出来的。

参考地址: http://skyhome.cn/div_css/301.html http://www.jb51.net/article/26422.htm