雨夜带刀's Blog

javascript动画剖析

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中,回过头来发现以前写的代码确实还有很多可以改进的地方,这也证明自己还是有点进步的。趁有点时间,将javascript动画运行的机制和实现的思路整理了一下,算是做个小总结,也希望对有兴趣的人有点帮助。篇幅稍长,看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画,HTML5和CSS3的发展让WEB中的动画有了更多的可能,但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上,只要CSS的属性值包含了数值,就可以进行动画,事实上,包含了数值的CSS属性值有很多很多,拿最常见的属性来说:

div{ left:100px; }

上面的位置值就包含了数值“100”,要想实现该元素从100px的位置到600px的位置,只要不断的修改该元素的位置值,达到一定的速度就实现了动画,据国外的统计,每25毫秒切换一次画面,就可以实现“动”的效果。

CSS属性值都是字符串,为了方便进行计算,需先将字符串转换成数值,并且很多属性值都包含了单位,所以最好解析成下面这种格式:

'100px' ==> { val : 100, unit : 'px' }

让document.write的广告无阻塞的加载

广告代码分析

很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>

这个javascript请求返回的是这样的一段代码:

document.write( "<a href='http://gg.5173.com/adpolestar/wayl/;" + 
"ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + 
"pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif' " +
"border='0' width="132px" height="58px" /></a>" );

这种看似有点二的加载方式,但是你却没办法改造它,因为它本身就是第三方的。并且代码都添加了统计的功能,上面的javascript的广告链接每请求一次都会统计一次,生成的代码也有点击统计的功能,也就是说必须以这种方式来进行加载。

document.write是在页面渲染的时候同步进行的,必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。

javascript广告的阻塞加载
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。