网站广告联盟代码速度优化

现在绝大部分广告联盟的广告代码都是使用document.write方式载入到页面中,这种方式很方便,但是可能会阻塞页面剩余内容的加载。
由于广告服务商技术水平参差不齐以及客户端网络的差异,特别在广告位比较多的情况下,有可能导致广告代码引起的用户体验下降。
所以引出本文的优化,其核心思想是重写document.write函数,借鉴了某未知同胞的代码。

1、在全局JS里面增加代码

<script type="text/javascript">
var loadScript = ( function() {
	var adQueue = [], adQueueTmp = [], dw = document.write, dwl = document.writeln;

	function LoadADScript(url, charset, container, init, callback) {
		this.url = url;
		this.charset = charset;
		this.containerObj = ( typeof container == 'string' ? document.getElementById(container) : container);
		this.init = init ||
		function() {
		};

		this.callback = callback ||
		function() {
		};

	}

	LoadADScript.prototype = {
		startLoad : function() {
			var script = document.createElement('script'), _this = this;

			_this.init.apply();

			if(script.readyState) {//IE
				script.onreadystatechange = function() {
					if(script.readyState == "loaded" || script.readyState == "complete") {
						script.onreadystatechange = null;
						_this.startNext();
					}
				};
			} else {//Other
				script.onload = function() {
					_this.startNext();
				};
			}
			document.write = function(ad) {
				ad = ad.replace(/&lt;script.*?src=('|")(.*?)('|").*?&gt;/, function(a0, a1, a2, a3){
						var charsetMatch = a0.match(/charset=('|")(.*?)('|")/);
						var charset = '';
						if(charsetMatch) charset = charsetMatch[2];
						var idd = '_rand_'+Math.random();
						adQueueTmp.unshift({
								url: a2,
								container: idd,
								callback: $.noop,
								charset: charset
						});
						return '<span id="'+idd+'"></span>';
				});
				$(_this.containerObj).append($(ad));
			};
			document.writeln = document.write;

			script.src = _this.url;
			script.type = 'text/javascript';
			if(_this.charset) script.charset = _this.charset;
			document.getElementsByTagName('head')[0].appendChild(script);
		},
		finished : function() {
			document.write = this.dw;			
			document.writeln = this.dwl;
		},
		startNext : function() {
			adQueue.shift();
			$.each(adQueueTmp, function(_, script){
				loadScript.add(script, true);
			});
			adQueueTmp = [];
			this.callback.apply();
			if(adQueue.length &gt; 0) {
				adQueue[0].startLoad();
			} else {
				this.finished();
			}
		}
	};

	return {
		add : function(adObj, insert) {
			if(!adObj)
				return;

			adQueue[insert ? 'unshift' : 'push'](new LoadADScript(adObj.url, adObj.charset, adObj.container, adObj.init, adObj.callback));
			return this;
		},
		execute : function() {
			if(adQueue.length &gt; 0) {
				adQueue[0].startLoad();
			}
		}
	};
}());
</script>

2、在需要显示广告的地方加html占位符,如(id要唯一)

<span id="placeholder"></span>

3、在页面尾部添加对应广告js代码

<script type="text/javascript">
loadScript.add({
	init: function(){
	},	
	url: 'http://e.7clink.com/cpc.php?c=xxxxxxxxxxxxxxxxxxxxxx',	
	container: 'da_200',	
	charset: 'utf-8',	
	callback: $.noop
});
</script>

4、多个广告重复2和3的操作,最后在页面最尾部添加js代码:

<script type="text/javascript">
loadScript.execute();
</script>

OPENVZ下的CENTOS6.x安装WINDOWS2003

准备:
WIN2003的ISO:2K3IE8_SATA_20131106.ISO 下载地址:http://pan.baidu.com/s/1mgjZi7u
TightVNC

第一步:安装qemu-img,建立磁盘镜像

rpm -ivh http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm
yum install qemu-img
qemu-img create -f qcow win2003.img 30G

第二步:安装qemu,建立虚拟机

yum install mesa-libGL SDL bluez-libs esound-libs
rpm -ivh ftp://ftp.pbone.net/mirror/apt.sw.be/redhat/el6/en/x86_64/extras/RPMS/qemu-0.15.0-1.el6.rfx.x86_64.rpm 
qemu -cdrom 2K3IE8_SATA_20131106.ISO -m 1024M -boot d win2003.img -vnc :1 -daemonize

这里的-vnc :1 下面就用5901,如果是:2就是5902,依此类推

第三步:远程操作虚拟机,安装系统
使用tightvnc连接 xx.xx.xx.xx::5901 (这里是主机的IP)

以后启动:

qemu -hda win2003.img -boot c -m 1024M -k de -usb -redir tcp:3389::3389

LINUX脚本去除PHP末尾的闭合标签,避免莫名的空字符

PHP文件比较多的情况下,有时候不知道为什么就多出空格,可能会影响COOKIE不能写等等情况。

这个LINUX脚本可以去除PHP末尾的闭合标签,避免莫名的空字符

#!/bin/bash
# vim:ft=sh:ts=3:sts=3:sw=3:et:

###
# Strips the closing php tag `?>` and any following blank lines from the
# end of any PHP file in the current working directory and sub-directories. Files
# with non-whitespace characters following the closing tag will not be affected.
#
# Author: Bryan C. Geraghty <bryan@ravensight.org>
# Date: 2009-10-28
##

FILES=$(pcregrep -rnM --include='^.*\.php$' '^\?\>(?=([\s\n]+)?$(?!\n))' .);

for MATCH in $FILES;
do
   FILE=`echo $MATCH | awk -F ':' '{print $1}'`;
   TARGET=`echo $MATCH | awk -F ':' '{print $2}'`;
   LINE_COUNT=`wc -l $FILE | awk -F " " '{print $1}'`;
   echo "Removing lines ${TARGET} through ${LINE_COUNT} from file $FILE...";
   sed -i "${TARGET},${LINE_COUNT}d" $FILE;
done;

微信公众号上传图片IOS客户端压缩

背景:为了能够节省流量,打算在客户端进行图片压缩
以下都是基于IOS客户端,因为Android大部分都不支持选择图片或者拍照或者支持不太好(比如小米,呵呵),所以前置做了判断,仅限IOS上传图片

方案1:
方法:使用HTML5 Canvas的特性,生成一定压缩比的BLOB对象,AJAX提交到后台。
DEMO:BUG DEMO1
问题:拍照生成的图片被挤压,下半部分是黑色。

基于这个问题,进行疯狂的google,后来在stackoverflow上面找到相关讨论,大概原因是iOS6 Safari对超过百万像素的图片文件渲染不当,导致在canvas上面抽样(subsample)异常。不明觉厉,老外也给了一些解决方案,直接拿来参考了一下。

方案2:
方法:使用ios-imagefile-megapixel或者drawImageIOSFix(老外写的函数,借鉴前者)
DEMO:BUG DEMO2
还是有问题:本来竖着的图片,结果躺着了

追求完美的我,懂的不多就是会google,继续google之,找到了一个不错的解决方案

方案3(解决了问题):
方法:canvasResize,它先使用ios-imagefile-megapixel处理图片,然后用exif-js解决图片翻转的问题。依然不明觉厉……
DEMO:完成 DEMO