阅微堂 » 网页技术

加速blog：处理页面图片

zhiqiang — Wed, 05 Dec 2007 15:18:36 +0000

作为文章的或者功能性的或者美学意义上的需求，现在blog越来越丰富多彩，图片也越来越多。

选择合适的图片尺寸

现在数码相机越来越好，动辄800万像素，出来的照片也常在1M以上。但其实电脑上特别是浏览器上根本就没那么大的空间来显示图片（除非放大显示），作为网页上的图片，800*600的图片足够用了。WordPress上传照片的时候会自动使用微缩图，我觉得这种设置比较好。

不要GZIP图片，但设置Cache

图片已经是压缩保存了的，GZIP压缩徒耗服务器的CPU而已。因为图片的变动比较小，所以最好为它们设置强有力的Cache指令。

指定图片大小

如果是通过的方式插入图片，最好明确指定图片大小，如，可减少页面跳动。推荐使用windows live writer写blog，自动指定图片大小，调节也很方便。

图片背景化

如果图片在每个页面上的位置比较固定，最好用CSS作为背景载入，这样做的好处是背景图片的载入是后台进行的，不会造成页面晃动。

Image Map

使用CSS Sprites

介绍和实现方法见用CSS Sprites让网站再加速。

使用URL scheme

这种方法只对firefox有效，在IE下无效。data: URL scheme可以让你把图片信息直接嵌入在CSS语句中，理论上而言这是小CSS图片的最好解决方案。

加速blog：关于javascript(css)

zhiqiang — Tue, 04 Dec 2007 12:07:22 +0000

这里先谈一下关于javascript和CSS的问题。

压缩你的javascript和css

这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的服务器不支持GZIP压缩，你就更应该使用下面的压缩工具处理你的css和javascript了。

压缩CSS：压缩比率能达到20%到50%。

压缩javascript：即使是最安全的压缩模式，压缩比率也能达到20%到50%。

警告：以上压缩会破坏文档格式，请保留好压缩前文档的备份。

合并javascript和css文件

这种方面比较繁琐，完全是体力活。可以手动把文件内容都复制粘贴到一起，也可以新写一个php文件include所有需要的文件。在加快WordPress的页面生成和载入速度有比较详细的操作方法。

javasctip和css文件位置

一般来说，CSS最好放在HEAD区域内（即之前），这样可以减少页面重绘。javascipt文件越靠后引用越好，比如Google Analytics的统计代码最好放在之前。也可以考虑script的defer属性。

用CSS Sprites让网站再加速

zhiqiang — Tue, 09 Oct 2007 08:30:22 +0000

我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的小技巧，对于网页上固定位置的图片，应该尽量使用CSS背景图片，而不要用img标签嵌入。

为减少页面上的背景图片数量，嵌入式图片是一个好主意，data: URL scheme可以让你把图片信息直接嵌入在CSS语句中，理论上而言这是最好的解决方案。可惜目前IE不支持！又是万恶的IE。下面是效果图(Firefox有效)：

另外一个就是CSS Sprites了，很久以前就见到过，不过操作比较复杂，所以一直没有用。今天，看到一个更详细的介绍，而且Yahoo和Facebook都在用这种方式，见这里和这里。我也决定紧跟一下潮流。

CSS Sprites就是将网页上所有的背景图片都放在一张大图片上，更详细的介绍

在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现......我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

比如本站的所有背景图片已经整合成单独一张，然后通过CSS定义背景：

.bloglines, .zhuaxia, .google, {
    background-image: url(images/b.gif);
}

.bloglines { background-position: 0 -216px; }
.zhuaxia { background-position: 0 -332px; }
.google { background-position: 0 -448px; }

上面这一段代码用同一张背景图片生成了Google，Zhuaxia，Bloglines的订阅图片。效果可见右侧栏的订阅区，与各自指定图片背景效果完全一样。

上面最麻烦的一个地方在于如何生成大图片，利用PhotoShop的Merge功能可以把图片整合在一起，但每个小图片在大图片的位置参数需要一个一个去弄，比较麻烦，但是比较自由。利用CSS Sprites Generator，一切都自动搞定。这个网站支持上传图片的ZIP压缩包，然后生成一张大图片，已经以图片文件名为类名的CSS语句，自动给出每个图片对应的位置。另外还可以设置各个小图片之间的间隔，以适应内容的适度拉伸。

btw，提一下一个APACHE的mod_expires模块，这个模块可以要求服务器缓存制定类型的文件。比如下面的语句(写入.htaccess文件)要求缓存图片, css, js等一个月：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/html A600
IfModule>

不过似乎deamhost和bluehost都没有这个模块，但阅微堂所在的CPH服务器是有的...

innerHTML只读问题 & 两个动态修改Table的js函数

zhiqiang — Wed, 25 Jul 2007 04:06:58 +0000

最近做社会实践项目遇到的一个问题，需要动态修改一个表格。本来以为要想修改一行，直接设置新的 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('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; ilength; 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("")) != -1) {
			ti = ti.substr(tf+4, ti.length-tf-4);
			var te = e.insertCell(-1);
			tl = ti.indexOf("");
			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('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; ilength; 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("")) != -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("");
			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]

阅微堂 » 网页技术

加速blog：处理页面图片

选择合适的图片尺寸

不要GZIP图片，但设置Cache

指定图片大小

图片背景化

Image Map

使用CSS Sprites

使用URL scheme

相关文章

加速blog：关于javascript(css)

压缩你的javascript和css

合并javascript和css文件

javasctip和css文件位置

相关文章

用CSS Sprites让网站再加速

相关文章

innerHTML只读问题 & 两个动态修改Table的js函数

相关文章