如何提高页面响应速度?
来源:电脑爱好者 时间:07-07-24 点击: 点击这里收藏本文
解决方法是当用户触发标签时再用javascript动态的加载显示的内容。当用户关闭脚本后也会显示一个基本的静态文本。
用什么方法来加载额外的内容取决于你需要引用的是什么。最简单的方法是动态的生成脚本标签。这是一个很早就有的方法,被用来引入大量的javascript数据集或在页面加载后再引入脚本。
function pull(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'largeJavaScriptBlock.js';
document.getElementsByTagName('head')[0].appendChild(s);
}
window.onload = pull;
del.icio.us页面就到这种方法来引入由json返回的数据。由于json返回的不过是一堆javascript代码,你可以在页面装载完成后,生成javascript脚本标签包含这些代码;然后执行这些代码原来替换页面中某个元素的内容。Dishy作为封装了json的对象可以让你很轻松的完成这些。另一个列子是不太显眼的Flickr头像,Flickr用json输出显示你最新相片,当用户禁用脚本,哪个位置显示的只是一个链接。
如果你要引入的是非javascript的内容,你可以使用Ajax或者AHAH或者Hijax或者其他不包含xml的ajax(你愿意把称作什么名称都可以)。例如,一个用ajax实现的导航,它甚至可以根据用户需要可选择的加载更为复杂的界面。
Imaging trickery 图像显示技巧
最后一个方法的渊源会追溯到可能你还没开始接触网站开发时。那时浏览器大战中最为ie的竞争对手苦命的Netscape(但在我看来那时还是不错的)浏览器支持一个自定义的HTML属性‘lowsrc’,这个属性可以指定一个小图片提前加载作为大图载入时的替代显示图片。这样即使用户的接入速度很慢,也可以看到即将呈现图片的一个预览。
你可以重用这一想法,当页面加载时不要嵌入过大的图片而是载入更为规范化的小图片;等页面加载完成后再用大图片进行替换。你甚至可以简化到开始只载入背景色,然后等页面载入完成再用javascript或者DOM加载原图进行覆盖。
这种方法还适用于你需要从多个服务器取得许多不能被缓存的图片。(例如gravatars)通常可以先载入一个占位的图片,等页面加载完成后再动态取得分散在其他服务器上的小图片。
总结
以上只是提高页面响应速度的一些基本方法,我希望其中的一些会对你有启发有帮助。如果你有些更好的主意,不要犹豫回复给我。
把此文章收藏到: