最近做社会实践项目遇到的一个问题，需要动态修改一个表格。本来以为要想修改一行，直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行，但在IE下通不过，查看了一下帮助，才发现innerHTML还没有一个通用标准，而在IE下innerHTML对于标签为COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR的元素是只读的。要想在IE下动态修改表格，只能使用insertRow和insertCell;

下面这个函数往表格i里添加一行，此行的HTML代码为t。

// insert a row with HTML code t to table i; 
// t: the full HTML code of the row
// i : the table element
// Return the row added
function addRow(t, i) {
	if (typeof(i) == "string")	i = document.getElementById(i);

	var f = t.indexOf('>'), l = t.lastIndexOf('</'),
		tag = t.substr(l+2, t.length-l-3), e;

	if (tag == 'tr') e = i.insertRow(-1);
	else {
		e = document.createElement(tag);
		i.appendChild(e, i);
		e.innerHTML = t.substr(f+1, l-f-1);
	}

	s = t.substr(1, f-1).split(' ');
	for (i=0; i<s.length; i++) {
		ss = s[i].split('=');
		if (ss.length==1) continue;
		e.setAttribute(ss[0], strip(ss[1]));
	}

	ti = t.substr(f+1, l-f-1);
	if (t.substr(l+2, t.length-l-3) == 'tr') {
		var tf;
		while( (tf = ti.indexOf("<td>")) != -1) {
			ti = ti.substr(tf+4, ti.length-tf-4);
			var te = e.insertCell(-1);
			tl = ti.indexOf("</td>");
			te.innerHTML = ti.substr(0, tl);
			ti = ti.substr(tl, ti.length-tl);
		}
	} 

	return e;

	function strip(ss) {
		if (ss[0]=='\''|| ss[0] == "\"")
			return ss.substr(1, ss.length-2);
	}
}

下面这个函数将表格的i行改写为代码t：

// modify row i with row of HTML code t
// t: HTML code 
// i: the row element, get by table.rows[row_index]
// return the row modified
function modifyRow(t, i) {
	var f = t.indexOf('>'), l = t.lastIndexOf('</'),
		tag = t.substr(l+2, t.length-l-3), e;

	if (tag == 'tr') e = i;
	else {
		e = document.createElement(tag);
		i.appendChild(e, i);
		e.innerHTML = t.substr(f+1, l-f-1);
	}

	s = t.substr(1, f-1).split(' ');
	for (i=0; i<s.length; i++) {
		ss = s[i].split('=');
		if (ss.length==1) continue;
		e.setAttribute(ss[0], strip(ss[1]));
	}

	var ti = t.substr(f+1, l-f-1), ri = 0;
	if (t.substr(l+2, t.length-l-3) == 'tr') {
		var tf;
		while ( (tf = ti.indexOf("<td>")) != -1 ) {
			ti = ti.substr(tf+4, ti.length-tf-4);
			var te;
			if (e.cells.length <= ri)	te = e.insertCell(-1);
			else te = e.cells[ri];
			ri++;
			tl = ti.indexOf("</td>");
			te.innerHTML = ti.substr(0, tl);
			ti = ti.substr(tl, ti.length-tl);
		}
	} 

	return e;

	function strip(ss) {
		if (ss[0]=='\''|| ss[0] == "\"")
			return ss.substr(1, ss.length-2);
	}
}

[tags]javascript, innerHTML, table[/tags]

© zhiqiang for 阅微堂, 2007. | 链接 | 3 条评论

用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加起来才14K。

QTY	SIZE#	TYPE	URL
1	6999	HTML	http://zhiqiang.org/blog/
1	2593	SCRIPT	http://zhiqiang.org/blog/.../comment.js.php
1	2302	SCRIPT	http://zhiqiang.org/.../all.js.php
1	2048	CSS	http://zhiqiang.org/.../style.css.php
1	431	IMG	http://feeds.feedburner.com/~fc/zhiqiang
5 ^	14373*		Total (^unique objects)

Dreamhost还用的是Apache 1.3(Am I wrong？)，所以没有mod_deflate模块，而用的是mod_gzip模块，这个模块直接在磁盘上读写，效率比前者要低。不过有总比没有好，毕竟压缩比率很高。

但诡异的是，服务器默认对CSS和JS不作压缩。写信去问了dreamhost客服，也没有什么好方法。最后我采用的方法是用php给包一层：用style.css.php来代替style.css：

<?php # this is the file style.css.php, who contains style.css
# set the request file name
$file="style.css";

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
$ext = array_pop(explode('.', $file));
switch ($ext){
case 'css':
 header("Content-type: text/css");
 break;
case 'js' :
 header("Content-type: text/javascript");
 break;
case 'gif':
 header("Content-type: image/gif");
 break;
case 'jpg':
 header("Content-type: image/jpeg");
 break;
case 'png':
 header("Content-type: image/png");
 break;
default:
 header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
ob_end_flush();
# set header the content's length;
# header("Content-Length: ".ob_get_length()); # (It doesn't work? )
ob_end_flush();
}
?>

上面代码不仅压缩代码，而且要求浏览器端Cache这个文件。甚至，可以把所有css文件都放到一个php文件里，只要在echo处加入多个文件即可。

下面是一些常用的测试网站：

• GZIP Test: 测试一个URL地址是否支持GZIP传输，以及压缩比率。
• Web Page Analyzer：网站页面速度报告
• Cacheability Test: 测试一个页面是否可Cache

参考资料：

• Caching Tutorial
• flickr对javascript干的好事
• Working with cached pages

© zhiqiang for 阅微堂, 2007. | 链接 | 27 条评论