雨夜带刀's Blog 关注前端与用户体验

广告代码分析

很多第三方的广告系统都是使用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执行完后才接着渲染后面的内容，如果广告比较多的话，就会导致页面阻塞，尤其是在页面的首屏插好几个图片尺寸比较大的这种广告，那么阻塞情况就相当明显和严重，会让用户觉得你这个网页很慢。

前不久给同志们介绍了压缩JavaScirpt和CSS文件的minify，这个是用PHP5开发的基于服务端的压缩，并且需要Apache+PHP环境的支持。虽然压缩效果还是比较理想，但是有环境限制，今天我再给同志们介绍一款可以在本机压缩JavaScirpt和CSS文件的程序：YUI Compressor。

YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具，操作系统中需要jdk环境的支持。所有要使用这个小工具，得先安装jdk，然后配置JAVA_HOME的环境变量。

jdk的下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html

minify是一款使用PHP5开发的一款用于压缩合并Javascript和CSS文件的应用程序，是前端开发人员优化页面加载速度的一款很好的工具。

本博就使用了minify对整个网站的Javascript和CSS文件进行了压缩，压缩率非常高，大大缩短了页面的加载时间。对于wordpress还有相应的插件，如果你也使用wordpress并且不喜欢自己动手修改文件，那你可以直接下载WP-Minify这款插件。如果不是wordpress，或者喜欢自动动手DIY的接着往下看…