« 上一篇 瀑布流网站虽酷,但需考虑搜索引擎收录问题什么是瀑布流布局 下一篇 »

瀑布流页面性能优化(绝对定位实现方式)

最近几年瀑布流成了一种潮流。自Pinterest.com开创这种页面布局方式后,类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如蘑菇街 ,点点网 ,以及淘宝最新上线的"哇哦 " 等等,估计越来越多的社交网站、图片网站都将采用瀑布流布局方式。

瀑布流目前已知有三种实现方式,本文针对绝对定位的方式进行瀑布流布局分享一下瀑布流布局对性能的优化。  

性能优化点1:在瀑布墙指定图片高度:

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

性能优化点2:Ajax动态插入瀑布元素。

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

性能优化点3:Dom元素相关的数据重复计算?

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

性能优化点4:删除中瀑布流中的元素,如何重新排列?

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

性能优化点5:关于改变窗口大小,动态排列。

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