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

场景还原：给a标签绑定了一个click事件用来触发ajax请求，在IE6中，请求时常会被中断，在非IE6中都一切正常。

<a href="javascript:;" id="btn">click me</a>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  var url = 'http://api.flickr.com/services/' +
    'feeds/photos_public.gne?tags=car&' +
    'tagmode=any&format=json&jsoncallback=?';
  $( '#btn' ).click(function(){
    $.getJSON( url, function( data ){
      alert( data );
    });   });
</script>

之前我在也谈数组去重中介绍了普通的数组去除重复的元素的博文，在选择器的开发过程中，会碰到这样的需求，就是删除一组DOM数组中重复的元素，使用之前的方法肯定行不通，对于 DOM 数组去重，需要另外的处理办法。什么情况下会选取重复的 DOM 元素？下面是一个比较常见的情况，先看 HTML 结构：

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3
    <ul>
      <li>测试1</li>
      <li>测试2</li>
    </ul>
  </li>
</ul>

如果是这样的选择器：query( ‘ul li’ )，按照从左到右的查找顺序，会先得到所有 ul 的集合。

[ ul, ul ]

象 CSS 选择器那样，在 javascript 中用同样的语法来选取一个或一组 DOM 元素，这种简便的语法在目前的 javascript 选择器领域中算是事实上的标准了，jQuery 的成功也与它的选择器(sizzle)的易用是密不可分。

各大 javascript 框架和类库都有一套独自的选择器，我花了点时间自己开发了一套选择器，在性能测试方面也不输给 jQuery 的 sizzle。在 javascript 选择器的开发过程中，学到了不少东西，这些东西如果自己不去开发，估计永远也没机会学到。现在，对于 javascript 选择器的原理以及如何去实现都有了一定的了解，在这里，我觉得有必要将一些心得记录下来，并分享给有需要的人。

jQuery 在 CSS3 的选择器出来以前，就实现了很多自己私有的选择器，虽然这些私有的选择器在日常的应用中使用率都不太高，但是其作为一个类库，要适应和兼容各种场景，面对各种技术水平的web开发者，这些私有选择器还是有不小的用处，甚至可以说，CSS3 的选择器在一定程度上也吸纳了 jQuery 的私有选择器的思想，在它的基础上再做一些改良，使之成为现在的 W3C 标准。

有时会碰上这种需求，需要将数组中重复的元素删除掉，而只保留一个。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素，代码如下所示：

方法1：

Array.prototype.distinct = function(){
	var arr = [],
	     len = this.length;

	for ( var i = 0; i < len; i++ ){
		for( var j = i+1; j < len; j++ ){
			if( this[i] === this[j] ){
				j = ++i;
			}
		}
		arr.push( this[i] );
	}
	return arr;
};

使用方法1如果碰到数据比较多时性能上会差很多。那么请继续看下面的方法...