阅微堂 » 网页技术

加速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图片的最好解决方案。

用CSS Sprites让网站再加速我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的...
加速blog：优化WordPress程序效率这里本质上要谈的还是优化数据库的效率，不过是改写WordPress的代码使得降低数据库查询次数。 get_permalink函数 get_permalink函数非常好用，get_permalink($i...
加速blog：关于javascript(css) 这里先谈一下关于javascript和CSS的问题。压缩你的javascript和css 这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的...
加速blog：序这是一个介绍如何提速blog的系列文章，特别是基于WordPress的blog。通过这些方法，你我完全能做到一个飞速的blog，至少要比与你同服务器上的其它blog要...
加速blog：服务器端的中转和缓存前面已经提到了浏览器端的缓存，通过适当的Header可以建议和命令浏览器缓存页面内容比如javascript, css, 图片等。这里的服务器端的缓存又是什么意思...
加速blog：HTTP Header 本文隶属加速blog系列 HTTP请求和相应Header 一个经典的HTTP连接是，读者通过浏览器（下称为浏览器端），向服务器（下称为服务器端）申请浏览某网页...
加速blog：减少和优化插件尽量少用含javascript和css的插件很多插件作者需要为blog的慢速度负责。插件作者随意地往'wp_head'里安插js和css，导致很多blog的head部分越来越臃肿。 ...
加速blog：速度检测本文隶属加速blog系列既然我们要谈加速blog，第一重要的是给blog的速度一个量化的评价。 Firefox的fasterfox插件会在Firefox的右下角给出每个网页的载...
加速blog：监测和优化WordPress数据库在WordPress生成页面时，最消耗时间的便是数据库查询了。监测WordPress的数据库查询 WordPress内置了数据库缓存系统，安装插件WordPress Cache Inspect，它会...
加速blog：选择合适的服务器要想打造一个响应快速的blog，一个快速的服务器（虚拟主机空间）是必不可少的。其实这才是决定因素，因为这可能会导致速度在数量级上的差距（我...

加速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让网站再加速我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的...
innerHTML只读问题 & 两个动态修改Table的js函数最近做社会实践项目遇到的一个问题，需要动态修改一个表格。本来以为要想修改一行，直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行，但在IE...
加速blog：处理页面图片作为文章的或者功能性的或者美学意义上的需求，现在blog越来越丰富多彩，图片也越来越多。选择合适的图片尺寸现在数码相机越来越好，动辄800...
UCWEB7增加了对CSS的支持 UCWEB7正式版声称增加了对某些CSS的支持，昨晚上调试blog的手机版，发现它的确增加了对某些css的功能：现在h1,h2,h3,p等标签都有默认式样了，比如h1,...
剪贴板实现跨域iframe高度自适应这两天玩xiaonei用到的一个技术，虽说是跨域iframe，但要求对外部网页和内部网页都有编辑权限，所以只能用在一些特殊场合。如果是域内的iframe，高...
Dreamhost上的GZIP & Cache 用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加...

用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服务器是有的...

加速blog：关于javascript(css) 这里先谈一下关于javascript和CSS的问题。压缩你的javascript和css 这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的...
加速blog：处理页面图片作为文章的或者功能性的或者美学意义上的需求，现在blog越来越丰富多彩，图片也越来越多。选择合适的图片尺寸现在数码相机越来越好，动辄800...
innerHTML只读问题 & 两个动态修改Table的js函数最近做社会实践项目遇到的一个问题，需要动态修改一个表格。本来以为要想修改一行，直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行，但在IE...
加速blog：设置浏览器缓存在用户浏览blog的不同页面时，很多内容是重复的，比如相同的javascript，css，背景图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将...
加速blog：服务器端的中转和缓存前面已经提到了浏览器端的缓存，通过适当的Header可以建议和命令浏览器缓存页面内容比如javascript, css, 图片等。这里的服务器端的缓存又是什么意思...
设置blog的缓存和压缩在网站根目录下的.htaccess文件中添加以下代码 ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/pn...
剪贴板实现跨域iframe高度自适应这两天玩xiaonei用到的一个技术，虽说是跨域iframe，但要求对外部网页和内部网页都有编辑权限，所以只能用在一些特殊场合。如果是域内的iframe，高...
UCWEB7增加了对CSS的支持 UCWEB7正式版声称增加了对某些CSS的支持，昨晚上调试blog的手机版，发现它的确增加了对某些css的功能：现在h1,h2,h3,p等标签都有默认式样了，比如h1,...
Dreamhost上的GZIP & Cache 用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加...

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);
	}
}

剪贴板实现跨域iframe高度自适应这两天玩xiaonei用到的一个技术，虽说是跨域iframe，但要求对外部网页和内部网页都有编辑权限，所以只能用在一些特殊场合。如果是域内的iframe，高...
用CSS Sprites让网站再加速我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的...
加速blog：关于javascript(css) 这里先谈一下关于javascript和CSS的问题。压缩你的javascript和css 这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的...
加速blog：处理页面图片作为文章的或者功能性的或者美学意义上的需求，现在blog越来越丰富多彩，图片也越来越多。选择合适的图片尺寸现在数码相机越来越好，动辄800...
Dreamhost上的GZIP & Cache 用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加...

剪贴板实现跨域iframe高度自适应

zhiqiang — Mon, 09 Oct 2006 01:54:39 +0000

这两天玩xiaonei用到的一个技术，虽说是跨域iframe，但要求对外部网页和内部网页都有编辑权限，所以只能用在一些特殊场合。

如果是域内的iframe，高度自适应非常简单，给iframe加入onload属性即可：

<iframe name=iframeUpload src=index.htm marginwidth=1
marginheight=1 width='100%' scrolling='no' border='0'
frameborder='0'
onLoad='this.height=iframeUpload.document.body.scrollHeight'
target='_blank' style="font-size: 9pt">iframe>

这样的方法，baidu一下有很多，一些复杂的方式考虑了浏览器差异等，某些情况下更有效更稳定。不过为安全因素，所有游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信，上面的方法也全失效了。

在http://www.ikown.com/html/show-id-106.html提到另一种实现的技巧，不过需要完全征用用户的剪贴板，后来在code的提示下，可以在基本不影响用户剪贴板使用的情况下，做同样的事情。完整代码如下：

<iframe id="cwin" SCROLLING="no"
src="http://othersite/a.html" width="100%"
height="700px" frameborder="0" onload="function
resetIframeHeight(){setTimeout(resetIframeHeight,1000);var
str=window.clipboardData.getData('text'); var
obj=document.getElementById('cwin'); if(str.match(/^frameHeight=
\d+x/)){ obj.style.height=parseInt(str.match(/\d+/))
+'px';window.clipboardData.setData('text',str.replace(/
^frameHeight=\d+x/, ''));}}setTimeout(resetIframeHeight,1000);">
iframe>

下面是http://othersite/a.html的代码

<script type="text/javascript">
function ref() {
var tts = window.clipboardData.getData('text');
window.clipboardData.setData('text',
String ('frameHeight='+document.getElementById("PageEnd").offsetTop) +"x"+tts);
}
script>
<body onload="ref();"> i love it. body>

上面方法只对IE有效，FireFox下有对应的剪贴板函数，也可以类似实现。

innerHTML只读问题 & 两个动态修改Table的js函数最近做社会实践项目遇到的一个问题，需要动态修改一个表格。本来以为要想修改一行，直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行，但在IE...
用CSS Sprites让网站再加速我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的...
加速blog：关于javascript(css) 这里先谈一下关于javascript和CSS的问题。压缩你的javascript和css 这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的...
加速blog：处理页面图片作为文章的或者功能性的或者美学意义上的需求，现在blog越来越丰富多彩，图片也越来越多。选择合适的图片尺寸现在数码相机越来越好，动辄800...
Dreamhost上的GZIP & Cache 用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加...

阅微堂 » 网页技术

加速blog：处理页面图片

选择合适的图片尺寸

不要GZIP图片，但设置Cache

指定图片大小

图片背景化

Image Map

使用CSS Sprites

使用URL scheme

相关文章

加速blog：关于javascript(css)

压缩你的javascript和css

合并javascript和css文件

javasctip和css文件位置

相关文章

用CSS Sprites让网站再加速

相关文章

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

相关文章

剪贴板实现跨域iframe高度自适应

相关文章