注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

关于WaterFall瀑布流式布局的性能优化  

2012-05-24 18:17:02|  分类: 视觉设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:IM9527

最近一次项目改版需求,完成了一个瀑布流的扩展组件,基于QWrap库。新版已发布上线,入口:我喜欢

市面上已存在的瀑布流式布局的网站:
拼范网:http://www.pinfun.com/
迷尚网:http://www.mishang.com/
凡客达人:http://star.vancl.com/
美丽说:http://www.meilishuo.com/
蘑菇街:http://www.mogujie.com/welcome/
淘宝哇哦:http://wow.taobao.com/
IDsoo:http://idsoo.com/
Topit:http://topit.me/
Mark之:http://markzhi.com/
布兜:http://www.budou.me/
堆糖:http://www.duitang.com/
花瓣:http://huaban.com/
码图网:http://www.markpic.com/popular/
新鲜网:http://www.xinxian.com/
易惊喜:http://www.ejingxi.com/

这两年瀑布流式布局已小有规模,对于浏览器性能问题是个挑战。
瀑布流目前已知有三种实现方式,[我喜欢]采用的是绝对定位的方式进行瀑布流计算。总结一下性能中注意的几点:

要点一:
对于瀑布流式图片布局性能起决定性作用的是img标签必须指定height(width在瀑布流式布局中一般是固定的):
网页的加载顺序是dom会优先加载完成,然后加载远程文件包括图片。绝对定位方式在dom加载完成后会进行计算,然而此时如果没有为img标签指定width与height,会等到图片加载完成浏览器才会渲染出整个元素的高度。所以在dom加载完成之后计算的元素高度是不正确的,确切的说是没有图片的高度的。

要点二:
Ajax动态插入瀑布元素

点击查看ILIKE截图

点击查看ILIKE超大截图

当通过ajax获取到新数据之后如何追加到当前瀑布流中呢?
起初为了性能优化打算轮循把元素插入到页面各列中,但是页面中的图片高度是不定的,很容易出现高度很高的图片,会留有很不和谐的多余空白,可兼容性差。
最后采用的第二步方案,实时获取元素底部最高的元素轮循插入。即上图中的第2列优先获得插入元素的权利,完成插入后再计算底部最高的元素。
这时就需要性能优化,我们不能每次都动态去取每个元素底部的高度,可以把六个列的值放在一个数组中,依次记录着每列的最后元素的底部高度。再进行对比计算,算出最小高度进行插入。
PS:为性能优化,插入动态数据时轮循的是动态要加入的元素,而非整个页面的所有元素。

要点三:
Dom元素相关的数据重复计算?
当页面Dom加载完成后,获取瀑布流父元素的宽度,根据元素的宽度和间距,计算出有几列,各列绝对定位的left值等…这些数据都要缓存在内存变量中。不是每次执行瀑布流操作都去动态获取计算的。

要点四:
删除中瀑布流中的元素,如何重新排列?
此次版本中删除某个瀑布流元素后,是重新排列页面中所有的元素,虽然封装的方法很简便,但是这样是不够优化的。
后期计划,删除某列中的某个元素, 此列被删除元素下面的元素重新计算排列,减少性能消耗,达到优化。

要点五:
关于改变窗口大小,动态排列
在改变窗口大小的过程,由于onresize在IE多个版本下会有多次触发,每触发一次,瀑布就会重新排列一次,重复执行浪费了性能。
因此在onresize事件中添加延迟优化处理

此版本还有许多细节及优化没有来得及时间处理,后期我们会跟进。希望大家喜欢这个项目,有什么意见请联系我们。
随后我们会将优化QWrap的这个WaterFall扩展组件,提供给QWrap用户使用,丰富组件。

在此感谢QWrap库开发者们的辛勤付出,让开发者有了更多的选择,节省了开发时间,达到敏捷开发。

 

—–20120224更新-添加删除瀑布流元素整列重新排序(↑要点四)———————————————————————————————-
使用方法见Demo可组件js文件,由于没有指定图片高度,所以瀑布流事件是在页面完全加载之后触发的。

查看Demo     下载

  评论这张
 
阅读(297)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018