|
论坛有3种动态文字特效,一闪一闪的发光效果,一跳一跳的霓虹灯效果,还有七彩文字效果。其中以发光效果最占资源,因为用的是CSS的滤镜做的,这东西本来就很占资源。论坛刚升级完成时就已对这种效果进行过优化,但效果不是很明显。
这两天,又对这几个特效重新进行研究优化方法。其中霓虹灯效果的优化方法连续改进了3次,最初的版本我这边测试占18%CPU左右,经过一次优化后降到了12%左右,已有明显降低,再次改进代码,能省的则省,然后降到10%左右,但我觉得还不够,绞尽脑汁的想办法,后来干脆把多个字符滚动去掉的了,只保留1个,即一次只能一个字跳动变色,原来是可以3个或N个文字一起变色的,看论坛根本没人用,所以干脆省了。这次降到了2%,我比较满意。
七彩文字效果本来就不怎么占CPU,所以经过优化后效果不明显,但肯定性能也有所提高,在配置较低的电脑上应该能看出效果。
最要命的是那个一闪一闪的发光效果,论坛已有大量会员用该效果,而且有的一个人就有N个发光效果,ID、心情、等级都用上了这个效果,甚至有会员连家族名也是这个效果了,同一个帖子内有时能有十几个这个效果。这个效果很占CPU,以前优化后的确是有些效果,但是对于同一个帖子内有十几个的情况,几乎感觉不到优化的效果,很多网友甚至进帖子直接卡死IE。
由于这个发光效果代码以前已优化过,这次我看着代码想了半天也没找出还能优化的代码了,因为它的原理是利用了CSS的发光滤镜做的,这个滤镜是公认的吃CPU狂,网上很多人都建议尽量不用。但是除了这方法也没有别的办法可以做出这么漂亮的动态发光文字特效了,难道要放弃这个特效不成?
想了很久,实在没辙了。后来我觉得不应该只从特效本身代码的优化着手,应该从用户的方面着手。虽然一个帖子内可能有10几个动态特效,但是,用户的一个屏幕就只能显示那么大,高600宽1000象素左右的大小。如果我只让在用户当前视线之内的发光效果闪动,而没进入视线内的就不动,这样就能大大降低CPU。而没进入用户视线的文字,用户又看不到,动与不动又有什么关系呢?这样,用户刚进帖子时,就只显示楼主和1楼的动态特效,下面其他楼的因为都没在当前屏幕内,所以不会动。当用户拉动滚动条到帖子中间或下面时,当前帖子内的动态特效动起来了,别的动态特效就自动停止了。
将这个想法用程序实现了之后,经测试,20个发光效果占的CPU已由40%降到了10%左右了。而霓虹灯效果也由2%又降到了1%了
以上所有CPU占用率都是相当于我自己的电脑而言的。对于不同的不同配置的电脑可能CPU占用情况不同,但可以肯定的是,现在动态文字特效占CPU情况已大有改善,2-3年前的配置应该都能感觉出来,不过如果是5,6年前的配置,那可能还是会占很高的CPU,这是没办法的事,对于配置很低的电脑,浏览一些勋章比较多的会员的帖子都会很卡,更别说这个动态发光效果了。
通过这个事情让我认识到,有些问题要从更多的角度来分析,如果只从这个问题本身找原因,那可能就会钻进死胡同,不但问题得不到解决,而且很浪费时间。
GMT+8, 2025-4-5 03:16 , Processed in 0.098424 second(s), 14 queries , Gzip On.
Powered by Discuz! X2
© 2001-2011 Comsenz Inc.