随笔-7  评论-24  文章-102  trackbacks-0

1、Script的 defer属性
2、为body添加脚本
3、CDATA小节
4、null和undefined变量
5、缩减JavaScript代码



1、Script的 defer属性

     如果将defer属性设置为"defer",那么表示该脚本不会生成任何文档内容,于是浏览器可以提前处理页面的剩余部分,在页面处理结束并做好显示准备时才处理脚本部分。defer属性可以提高页面载入的速度,特别是那些引用了大量的JavaScript代码或者庞大的JavaScript程序库的页面。

<script type="text/javascript" defer="defer"> 
 no content being generated  
</script> 



2、为body添加脚本

     前面我们曾经说过,因为对script元素进行集中管理有利于网页的可维护性,所以script元素通常将添加在网页上的head元素中。然而,在body元素中添加脚本的原因往往是出于性能的考虑。

     因为浏览器从同一个域名并发载入的资源是有限制的,所以,当把脚本添加到head元素中时,首先载入的将是脚本,其次才是文档的剩余部分。此外,浏览器可能会延迟页面剩余部分的显示,因为脚本中可能会调用document.write方法修改document对象。如果JavaScript文件很庞大,那么网页中的图片以及其他重要的信息将会被延迟显示,这所带来的问题远比可维护性更加重要。

     即使在script元素中使用defer属性也不一定能完全解决该问题,特别是并发资源访问和页面显示的限制。
 
     在High Performance Web Sites(中译版《高性能网站建设指南》一书中,作者推荐将script元素放在文档的最末尾处,这样网页的其他部分就可以优先载入。大多数复杂网站的开发人员更倾向于这种方法。这种方法带来的负面影响是脚本不容易查找,网页的可维护性也较差。
 
     那么什么才是最佳方法呢?我发现大多数网站并不引用庞大的JavaScript程序库,在保证较好性能的前提下,将脚本放在head元素中,也确保网页可维护性的优势。不过,如果的确需要使用庞大的JavaScript程序库,那么可以考虑将脚本放在页面的最末尾处。 

     不论采用何种方法,请确保脚本位置的一致性,要么全部放在head元素中,要么全部在body元素的最末尾处。

3、CDATA小节
 
<script type="text/javascript">  
//<![CDATA[   

function hello() {
   
var msg = "Hello, <em>World!</em>";
   document.open();
   document.write(msg);
   document.close();
}

//]]>
</script> 

     之所以使用CDATA小节,是因为XHTML处理器在解释标记型语言时会识别出所有的开始标签和结束标签。
 
     在页面文件中通过script元素的src属性引用的JavaScript,是XHTML标准所兼容的,并且不要求使用CDATA小节。如果是嵌入的JavaScript代码,那么就需要使用CDATA小节,特别是包含在body元素中的代码。对于大多数浏览器而言,还需要用JavaScript注释符(//)来隐藏CDATA小节,如示例1.3所示,否则将会出现JavaScript错误。
 
     当然,保持页面整洁的最佳方式是将JavaScript代码从页面中彻底移去,改成使用链接JavaScript文件的方式。

     在本书的大多数示例中,JavaScript代码是直接嵌入在页面里的,这样可以提高代码的可读性且易于检查。然而,Mozilla推荐将所有嵌入的JavaScript代码都从页面中移去,放在独立的JavaScript文件中。使用独立的JavaScript文件,可以避免校验以及文本解释错误等问题,而不用担心页面是以HTML还是XHTML的方式进行处理。

提示
     使用JavaScript文件往往也能提高网页载入的效率,因为浏览器会在第一次载入文件的时候进行缓存,引用相同文件时则会从缓存中获取。



4、null和undefined变量

null变量是已定义的、值为null的变量。以下是一个null变量的示例:
var nullString = null;

如果变量已经声明但是还没有初始化,那么就是undefined变量:
var undefString;

如果声明了变量并且赋予了初始值,那么该变量就不是null或undefined:
var sValue = ""; 

     当你使用JavaScript程序库时,或者在一些复杂的代码中,某些变量有可能还没有初始化;如果尝试在表达式中使用这样的变量,那么就有可能得到出乎意料的结果,通常会导致JavaScript错误。如果不确定变量的状态,那么可以在条件表达式中测试该变量,例如: 
if (sValue) ...     // 如果变量是null或undefined,那么结果为true,否则是false 

     在第3章中将详细介绍条件语句,现在你只需要知道该表达式会判断变量sValue是否已经声明并初始化,如果已声明并初始化则该表达式的值为true,否则,该表达式的值为false。
if (unknownVariable)     // false,变量没有声明或赋值  
if (undefinedString)     // false,变量没有赋值  
if (nullString)           // false,变量已经声明并且赋值,但是所赋的值是null  
if (sValue)                // true,变量已经声明并且赋值(包括空字符串) 使用null关键字,可以判断数值是否为null:

if (sValue == null) 
     在JavaScript中,即使变量已经声明,但只要还没有初始化就是undefined变量。如果变量已经声明并初始化,那么变量就不是null或undefined。然而,在该示例中它是一个全局变量,正如之前的章节所述,没有以var关键字声明的变量可能会引起各种各样的问题。

 

5、缩减JavaScript代码

     空格能够提高代码的可读性,但同时也会增加文件的大小。通常情况下,这没什么影响,因为大多数JavaScript文件都非常小。然而,对于某些大型Ajax应用,或者复杂的JavaScript程序库来说,太大的JavaScript文件会影响载入JavaScript的速度。
 
     如果要尽可能压缩JavaScript文件,那么可以选用一些免费的工具,例如Dean Edward的Packer(http://dean.edwards.name/packer/),它能够在线压缩JavaScript代码。或者使用Wikipedia中"minify"条目(http://en.wikipedia.org/wiki/Minify)中所列举的工具,这些工具可以在桌面或者服务器上使用。
 
     另一类工具是用来保护JavaScript代码版权的。这些工具不仅仅会压缩JavaScript代码,甚至还会对代码进行加密,从而使代码难以阅读。
posted on 2010-05-24 17:13 黄小二 阅读(343) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航: