近期的前端优化主要集中在提高渲染速度,回家在公车上想的一个方案:
————————-
页面渲染慢最重要的一个原因就是reflow, 而造成reflow的主要有两大块: 图片和javascript的dom操作,这里主要说图片.未指明宽高的图片,在页面dom渲染完毕时没有加载媒体时宽高是0×0,当一张图片加载完毕,就不得不重新渲染图片宽高变化所影响的区域.

解决这个问题的最佳效果就是给每张图片定宽定高:

<img width="300" height="200" src="abc.gif" />
Copy Code 

问题: 做页面的同学可以给自己切的图定宽高,但是用户上传的图片呢? 新鲜事里充斥了大量用户上传的图片~

参考解决方案:
这个方案的缺点就是需要一个良好的图片存储初期设计…
比如这是一个普通的图片上传后的地址

fmn041/20100302/2155/p_main_y8Hj_3b9e0000134b2d10.jpg

而这个方案需要在图片上传时就将宽度信息写到图片名称里,让使用它的cgi, httpd, javascript都能看名字就能知道它的三围

fmn041/20100302/2155/p_main_y8Hj_3b9e0000134b2d10_300_500.jpg

然后使用时就很灵活了

//对于新鲜事,使用自己的处理函数
<img width="<?php echo get_img_width($url) ?> height="<?php echo get_img_height($url) ?>" src="<?php echo $url?>" />
Copy Code 

而对于日志,帖子内容里的图片则需要输出过滤,给图片加宽高,或者是在发表阶段就通过js定宽高

//smarty里的输出过滤器
$smarty->load_filter('output', 'image_url_filter');
Copy Code 

cgi层过滤的话就不能及时flush输出,所以可以放到apache做http://httpd.apache.org/docs/2.2/filter.html

已有巨大量数据转换图片命名方案也是一件棘手的事….