12月31, 2011

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

最近一次项目改版需求,完成了一个瀑布流的扩展组件,基于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动态插入瀑布元素

[caption id="attachment_14" align="alignnone" width="722" caption="点击查看ILIKE超大截图"]点击查看ILIKE截图[/caption]

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

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

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

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

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

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

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

原文、Demo及下载点击查看

本文链接:https://75team.com/post/关于waterfall瀑布流式布局的性能优化-2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。