Archive for 十月, 2009
谈Reflow
星期一, 十月 26th, 2009 by 裕波
Yahoo!性能工程师Nicole Sullivan写了一篇非常值得一读的分析Reflow和Repaint的文章。
- 改变窗囗大小
- 改变文字大小
- 添加/删除样式表
- 内容的改变，如用户在输入框中敲字(这样也会-_-||)
- 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
- 操作class属性
- 脚本操作DOM
- 计算offsetWidth和offsetHeight
- 设置style属性
- Change classes on the element you wish to style (as low in the dom tree as possible)
尽可能限制reflow的影响范围。以上面的代码为例，要改变p的样式，class不要加在div上，通过父级元素影响子元素不好。最好直接加在p上。 - Avoid setting multiple inline styles
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。 - Apply animations to elements that are position fixed or absolute
实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。 - Trade smoothness for speed
权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。 - Avoid tables for layout
不 要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table 的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。 - Avoid JavaScript expressions in the CSS (IE only)
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。
sup在IE，火狐及其他浏览器下字体大小问题
星期四, 十月 15th, 2009 by 裕波
今天写了一个页面，使用了sup标签！
当时我把sup标签包在了h标签中使用。由于我设置了h标签的字体大为14px，在IE浏览器下，是按照我的想法，居然自动变成了12px的效果。在谷歌浏览器下也是正常的，可是在火狐下虽然看起来也是12px的效果，但是有一些加粗发虚的感觉，但事实上，我事先已经对其进行了不加粗处理。最后我将sup字体设置为12px，在火狐，谷歌浏览器下一切正常，可是在IE下却不能正常了，我又将sup的字体设置为14px，IE下正常，火狐与谷歌浏览器字体变成了14px。
哎，不知道什么原因， 故而使用了hack，直接在font-size前加了*，只能IE6与IE7受用，IE8还是无动于忠，哈哈，找到一个办法解决：
就是在标签前加*。
.list_info_con h3 sup.subhomelink{
text-indent:0;
background:none;
width:auto;
height:16px;
line-height:16px;
font-weight:normal;
vertical-align:text-bottom;
font-family:”宋体”;
font-size:12px;
}
.list_info_con h3 *sup.subhomelink {font-size:14px;}
看到了吧，嘿嘿，这就是解决所有IE浏览器的HACK哟。
还有专门针对IE7与IE6的
在标签前加下划线就可以了，请看：
.list_info_con h3 _sup.subhomelink {font-size:16px;}
注意哟，看清楚哟，*和_所放的位置。
谈中国雅虎首页改版
星期一, 十月 5th, 2009 by 裕波
很久没有写博客了，太懒了，趁着中国雅虎首页改版，我也来八卦一下，嘿嘿！
很早之前就听说中国雅虎要改版，今天一打开，果然如此。没有觉得很吸引，前段时间写了关于中国雅虎的改版，是为了推广口碑网，转移用户，不知道怎么回事，阿里又一次对高层进行了调整，迎来了中国雅虎的又一次改版。这次改版没有什么特别之处，给我的感觉就是回到了最初的中国雅虎，那时候更属于雅虎的的版本。
从网站的页能够看出，中国雅虎改版的目的，主要展现的版块有：体育，娱乐，财经，论坛，邮箱，还有时尚。还有一点就是为了推广雅虎的搜索。其他的嘛，我们看一下，他们首页的图片，就知道了。我也不多说！
但是有一个问题，如果目的为了推广搜索的话，为什么输入关键字的时候，连提示都没有呢？是因为很难吗？是为了节省资源吗？还是为了什么？就因为为了性能，所以放弃用户的舒适度？
明说在推论坛，其实暗地里，也是在推口碑网，从这里来看，他们也有想通过中国雅虎的首页将流量转移到口碑的目的,也有将流量转移到淘宝，不过这一些也是很正常的！必竟现在的中国雅虎已经不是曾经的中国雅虎，如果从盈利的角度来看的话，中国雅虎是远远低于淘宝，口碑的，故而转移也是很正常的商业目的！
从改版来看，页面比较简洁，但是个人觉得不够细腻。难道这就是阿里的一贯作风吗？
嘿嘿，这个问题，还是等着有兴趣的朋友去问问中国雅虎的开发团队吧！
一个网站的改版肯定都是有目的的，更不要说中国雅虎这么大的一个网站，那他的目的是什么呢？其实我也不知道，但是我猜想，难道他想趁着各大互联网公司都在进军SNS的时候，来抢占门户这块肥肉，嘿嘿！
功能列表
关于我
周裕波，web前端开发从业者，互联网爱好者。
gtalk:itchina110@gmail.com
@lovevfp