当博客网页遇到JavaScript…

« 返回上页分类: 网事悠游  作者:乔夫  日期:September 2, 2007 at 19:12

在博客网站中经常需要各类JavaScript应用,以实现特定的功能,事实上,打开任何一个博客网页,几乎都可以看到相应的JavaScript 代码,比如说访问跟踪与统计、广告代码、博客附加功能如各类插件以及近来日趋流行的Widgets等,为标准的Html网页提供了有益的扩展与支持。不过,有时候,这些JavaScript代码也会在某种程度上大大降低网页的加载速度,影响用户体验,特别当网页中附加了过多的JavaScript的应用时。

从技术角度讲,JavaScript最大的问题在于其执行时不能并行处理(不涉及Ajax应用),简单地说,当某段JavaScript代码被加载与执行时,页面的其他部分只能等待其运行完毕才能顺序执行,这也意味着如果网页中某段JavaScript代码因种种原因执行效率降低时,网页的加载与显示速度便会直接受到影响,用户不得不等上很长时间才能看到浏览器渲染完成整个页面。

避免JavaScript代码对网页显示速度的影响

需要说明的是,对JavaScript的这一问题,并没有放之四海而皆准的解决方案,这取决于很多方面。我们下面给出的也只是最基本的思路:

将JavaScript外置以提高代码复用

严格说来,这并不会真正提高JavaScript代码的执行效率。不过,通过将JavaScript代码外置到单独的文件,而不是将相同的 JavaScript代码“冗余”地分布在多个单独的网页中,可以避免用户浏览每个页面时都得重新下载相应的内容,有效地提高代码的复用率。也即是说,用户浏览多个网页时,相同的代码只需要下载一次,这会在极大程度上减轻对服务器带宽及Web Server的压力。

当然,这只针对位于自己服务器端的代码,而对于象访问跟踪如Google Analytics代码、广告如Google AdSense代码等则无法如此处理。不过,对于某些并不需第三方服务器支持同时又存在读取效率低下的部分应用,则可考虑将相应的JavaScript转移到自己的服务器或其他带宽更有保证的服务器上来。

另外,对于外置的JavaScript文件,究竟应合并为一个统一的文件还是分为多个小文件,则需要根据网站的具体应用情况及服务器能力,进行详细的测试后找出最佳的方式。

合理布局JavaScript代码在html文件中的位置

很多博客在网页中加入JavaScript代码时采用的是简单的方法,即将其插入到网页html文件的head部分,或者让插件自动将其插入到网页中比较靠前的位置,这当然是没有错的。不过,客观地说来,除了部分需要在网页中输出内容、调整显示的JavaScript外,也存在很多完全没必要让其先于html代码执行的JavaScript,比如说Google Analytics统计,将其置于html文件比较靠前的位置存在的最大问题便是,如果这类代码所要连接的服务器出现问题——相信很多朋友都还记得去年 Google部分域被屏蔽的事件——便必然带来网页半天显示不出的情况。

理想的解决方案是将相应代码移到html文件末尾,当然,须置于之前,这样,首先以最快的速度将网页显示出来,相应的代码则在用户查看网页时“暗暗”地执行,这样,即使其运行出错也会在最大程度上保证用户体验。

延迟执行部分JavaScript代码

不过,某些JavaScript代码,可能要求必须置于html的head部分,而不能象上文所言置于body结束符之前,否则便无法正常运作或可靠地运作。对于这类代码,如果其并不修改网页显示并的确存在拖慢网页渲染速度的迹象,可考虑强制其在网页渲染完成后再予以执行。具体方法是通过 “defer”指令:


这样,浏览器即会在执行相应代码前首先完成网页内容的渲染。

白冰提醒:请慎用!defer属性是告诉浏览器Script中包含了无需立即执行的代码,并且与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。等到文档加载完毕,再执行脚本。请注意是无需立即执行脚本,如果你的function中包含事件、行为,或是有document输出时会造成异想不到的结果的。小则版式错位,大则网页无法显示。所以,一定慎用!另,此属性FF似乎不睬它,只针对IE有效。

去除不必要的JavaScript代码

其实,这一点应该是最重要的。在网页中加入JavaScript代码前,应考虑清楚相应的功能是不是必需的,而对于某些本即是可有可无或没有太大意义的功能,是不是应该考虑将其拒之门外。

另外,如果有条件,或有能力,:P 最好也应具体查看一下相应的代码,检查一下其编程水平,对于某些编程能力低下、执行笨重的JavaScript代码,即使其功能可能有一定的可取之处,也应仔细权衡是否应将其加入到您的博客网页。

来源:博客学堂

有啥说啥 Leave a Reply