昨晚在solidot上看到在浏览器上启动Linux,很是震惊。虽然只是个模拟的,但模拟程度非常之高,可以运行大多数LINUX命令,可以用tab自动补全,竟然还带了VI编辑器。佩服佩服!

QEMU模拟器项目创始人Fabrice Bellard,编写了一个在JavaScript中运行的模拟器,允许用户在浏览器上启动Linux(支持Firefox 4和Google Chrome 11)。他去年曾用个人电脑创造了Pi的世界纪录

赶紧猛击这里查看:http://bellard.org/jslinux/

不过访问速度非常之慢~~ so,我把代码扒下来,做了个国内加速http://jslinux.sinaapp.com/,感谢SAE!

JS高仿LINUX

转载自:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html

要想写出跨浏览器的javascript,就必须懂得嗅探技术。这是浏览器大战遗留下的大地雷,事已如此,只好认命,乖乖写分支结构吧,函数就是这样不知不觉中变长的。

先看单一浏览器的判断,我们没有必须去找navigator.userAgent的麻烦,我在国外的博客网站收集了如下hack,短小精悍:


ie = !+"v1" ;
ie ='v'=='v' ;
ie = 0//@cc_on+1;
ie = !!top.execScript;
ie = /*@cc_on!@*/!1;
ie8 = !!window.XDomainRequest;
 
//我自创的,如果是IE,会返回6,7,8代表ie6,ie7,ie8,否则返回1
IEVersion = (" " + (/*@cc_on @_jscript_version  @*/-1)).slice(-1)
 
//基于条件编译的嗅探脚本,还有如下几个:
IE8=@cc_on @_jscript_version == 5.8 ? true : @false
IE7=@cc_on @_jscript_version == 5.7 ? true : @false
IE6=@cc_on @_jscript_version == 5.6 ? true : @false
IE55=@cc_on @_jscript_version == 5.5 ? true : @false
 
 
ff = /a/[-1]=='a';
ff3 = (function  x(){})[-5]=='x';
ff2 = (function x(){})[-6]=='x';
 
safari=/a/.__proto__=='//';
safari = window.openDatabase;
 
chrome=/source/.test((/a/.toString+''));
 
opera=!!window.opera ;
opera=/^function (/.test([].sort);

还有判断maxthon的:


//出处:http://www.cnblogs.com/xiarugu/archive/2009/02/02/1382293.html
function IsMaxthon()
{
    try{
        window.external.max_invoke("GetHotKey");
        return true;
    }catch(ex){
        return false;
    }
}
alert(IsMaxthon());


//出处:http://bbs.maxthon.cn/archiver/?tid-148353.html
try{
        if(external.max_version.indexOf("1.")==0){
                var isMaxthon1 = 1;
        }else{
                var isMaxthon1 = 0;
        }
}catch(e){
        var isMaxthon1 = 0;
}

如果是想搞比较复杂的UI或者类库,对于浏览器的判断就要更严格一些,不能像上面那样游兵散勇。


B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function (/.test([].sort)?'Op':'Unknown'

在Ext3的源码中能找出如下现整的嗅探脚本:


ua = navigator.userAgent.toLowerCase(),
 check = function(r){
     return r.test(ua);
 },
 isOpera = check(/opera/),
 isChrome = check(/chrome/),
 isWebKit = check(/webkit/),
 isSafari = !isChrome && check(/safari/),
 isSafari2 = isSafari && check(/applewebkit/4/), // unique to Safari 2
 isSafari3 = isSafari && check(/version/3/),
 isSafari4 = isSafari && check(/version/4/),
 isIE = !isOpera && check(/msie/),
 isIE7 = isIE && check(/msie 7/),
 isIE8 = isIE && check(/msie 8/),
 isIE6 = isIE && !isIE7 && !isIE8,
 isGecko = !isWebKit && check(/gecko/),
 isGecko2 = isGecko && check(/rv:1.8/),
 isGecko3 = isGecko && check(/rv:1.9/),

前两天刚跟朋友讨论JS预览客户端图片的问题,结论是不能预览。今天在看到这篇文章,才知道我们错了,IE可以用ACTIVEX控制预览,FF也有自己的方法。

原文:http://hi.baidu.com/thinkinginlamp/blog/item/2297a7eff802901cfdfa3c10.html

很久很久以前,那时候还是IE的天下,使用Javascript预览本地图片实现起来非常简单,就是设置一下:

document.getElementById(“image”).src = “file:///” + document.getElementById(“input”).value;

不过出于安全的考虑,现在的浏览器都不允许…src = file:///…这样的写法,作为替代,IE可以使用 “DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式,而Firefox则提供了一个 getAsDataURL方法。



<!--
#preview {
width: 270px;
height: 129px;
}
-->

<!--[if IE]>
<mce:style><! 
#preview {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
-->

<!--[endif]-->
<script type="text/javascript"><!--mce:0--></script>

<input type="file" />
<div id="preview">
<img id="image" src="http://www.baidu.com/img/baidu_logo.gif" alt="" /></div>

为了脱离Javascript菜鸟的苦海,这几天在Javascript上花了太多的时间,明天开始换换口味。

在项目中涉及到动态添加CSS的问题,从网上查下资料,果然有高手写过。

原文:http://blog.csdn.net/pnuts/archive/2009/02/11/3876328.aspx

为了节省代码和写出更兼容的代码,有时我们需要用Javascript动态的增加CSS样式。

IE下,我们可以使用 document.createStyleSheet() 方法;而在非IE浏览器上,就不支持这个方法。可以使用document.styleSheets[0],但要求网页里必须最少已经加载过一个样式表。

后来我找到以下方法,可以在Firefox、Opera下正常运行:
var str_css = “body {font-size:12px;}”;
var style = document.createElement(“style”);
style.type = “text/css”;
style.innerHTML = str_css;
document.getElementsByTagName(“HEAD”).item(0).appendChild(style);

但这种方法却在Safari、Chrome下不可行,原因是style.innerHTML不可写。我再找解决方案,发现用textContent代替innerHTML的方法可行。

最后,我发个原创JS动态增加CSS样式的方法,兼容目前流行的任意浏览器:


function add_css(str_css) { //Copyright @ rainic.com
try { //IE下可行
var style = document.createStyleSheet();
style.cssText = str_css;
}
catch (e) { //Firefox,Opera,Safari,Chrome下可行
var style = document.createElement("style");
style.type = "text/css";
style.textContent = str_css;
document.getElementsByTagName("HEAD").item(0).appendChild(style);
}
}

json 与 javascript 数据类型的转换:


  function showJSON()     
   {         
      var user =          
      {          
          "username":"andy",         
          "age":20,         
          "info": { "tel": "123456", "cellphone": "98765"},         
          "address":         
              [         
                  {"city":"beijing","postcode":"222333"},         
                  {"city":"newyork","postcode":"555666"}         
              ]         
      }         
               
      alert(user.username);         
      alert(user.age);         
      alert(user.info.cellphone);         
      alert(user.address[0].city);         
      alert(user.address[0].postcode);       
      user.username = "Tom";         
      alert(user.username);         
         
  }   

将字符串转换为json 对象/数组:


//使用eval函数将字符串转化成json对象            
   function myEval()      
   {            
   var str = '{ "name": "Violet", "occupation": "character" }';            
   var obj = eval('(' + str + ')');           
       
   alert(obj.toJSONString());            
   }    

或用json.js


//使用 json.js 中的parseJSON方法     
   function myEval2() {            
   var str = '{ "name": "Violet", "occupation": "character" }';            
   var obj = str.parseJSON();            
   alert(obj.toJSONString());     

将 json 对象转换为字符串 :


 function showCar() {         
     var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");         
     alert(carr.toJSONString());         
 }         
         
 function Car(make, model, year, color)       {         
      this.make  =  make;         
      this.model  =  model;         
      this.year  =  year;         
      this.color  =  color;         
 }      


function test()     
  {      
        var myJSONtext =      
        {        
            "bindings":      
            [        
                {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},        
                {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},        
                {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}        
            ]        
        };        
        var myObject = eval(myJSONtext);        
        alert("对象长度:"+myObject.bindings.length);        
        for(var i=0;i<myObject.bindings.length;i++){        
            alert(myObject.bindings[i].method);        
        }       
  }    

在一些交互性很强的应用中经常会需要在网页中增加快捷键的情况,比如GOOGLE READER,GMAIL,YAHOO MAIL中都有快捷键的应用。下面介绍一个比较简单又实用的javascript类:shortcut.js,链接中有很多使用示例。

下载地址:http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

下面内容主要为官方文档的翻译,但也加入了一些我的理解。

使用说明

该类主要有两个方法组成:shortcut.add()、shortcut.remove(),下面分别介绍:

shortcut.add(key,func,options)

该方法有三个参数:

key :要设置的快捷键,比如”CTRL+A”,书写形式为 :功能键[+功能键..]+其他键。详情见下面支持键列表;

func: 响应快捷键的函数,当快捷键按下时,将执行该函数;

options: 配置参数,以关联数组形式填写,参数包括下面几个:

type – String

事件类型 – 可以是’keydown’,’keyup’,’keypress’。默认为 ‘keydown’

disable_in_input – Boolean

是否在输入表单时屏蔽快捷键 – 如果该项设置为true,当光标焦点在input或textarea时,快捷键将屏蔽。这项功能是非常有用的,特别是当我们设置的快捷键只需按一个键时。该项默认为false

target – DOM Node

响应快捷键的元素范围。默认为 : document

propagate – Boolean

是否允许继承? 默认 : false

keycode – Integer

监视的键盘编码。比如, 编码’65’ 为按键 ‘a’.

options参数示例:


{
'type':'keydown',
'propagate':false,
'disable_in_input':true,
'target':document,
'keycode':65
}

示例:


shortcut.add("Ctrl+B",function() {
alert("The bookmarks of your browser will show up after this alert...");
},{
'type':'keydown',
'propagate':true,
'target':document
});

shortcut.remove()

只有一个参数,即前面设置的的快捷键组合。确保跟前面设置的快捷键组合是一样的,比如我们前面shortcut.add()的第一个参数为“CTRL+A”,此处也必须为“CTRL+A”。

示例:


shortcut.add("Ctrl+B",function() {
alert("Bold");
});
//Remove the shortcut
shortcut.remove("Ctrl+B");

继续阅读

在http://www.javaeye.com/news/2592看到的,很不错的!

  • Flot – Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。
  • Open Flash Chart – Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and .Net 来控制图表。
  • AmCharts – AmCharts 是一个动画交互Flash图表。支持: Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, 甚至股票图表。
  • Emprise JavaScript Charts – Emprise 是一个100% 纯 JavaScript 图表解决方案,并不需要任何 JavaScript 框架.
  • PlotKit – PlotKit 是一个 图表和图像的Javascript 库. PlotKit 和 MochiKit javascript 库一起工作,支持HTML Canvas 和  Adobe SVG 显示 以及本地浏览器支持。尤其文档非常全。
  • Flotr – Flotr 是Prototype 1.6.0.2框架的javascript插件库。 Flotr帮助你在浏览器中创建图表,支持鼠标事件响应,放大缩小,CSS类型支持等。
  • PHP/SWF Charts – PHP/SWF 是一个简单支持web图表的强大工具,你能使用 PHP 来收集数据,并发送给flash,支持很多图表类型: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed.
  • Visifire – Visifire 是用 Silverlight 做的,是一个开源可视化数据组件,使用Visifire你能创建动画 Silverlight 图表,支持  ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails 或者 简单 HTML调用.
  • FusionCharts – FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。
  • JFreeChart – JFreeChart 是一个开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。 JFreeChart 项目从7年前便开始了,起始于 2000 年1月, 已经有四五万开发者已经使用了JFreeChart。JFreeChart 支持很多种图形文件格式: JPEG, GIF, PDF, EPS and SVG. 这对于java开发者是一个很好的资源。

先来说eval的用法,内容比较简单,熟悉的可以跳过。
eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句。如果s语句执行结果是一个值,则返回此值,否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值,需要用括号括起来才会返回值,简单示例如下:


    var code1='"a" + 2';    //表达式
    var code2='{a:2}';      //语句
    alert(eval(code1));     //->'a2'
    alert(eval(code2));     //->undefined
    alert(eval('(' + code2 + ')'));    //->[object Object]

可以看到,对于对象声明语句来说,仅仅是执行,并不能返回值。为了返回常用的“{}”这样的对象声明语句,必须用括号括住,以将其转换为表达式,才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到,第二个alert语句输出的是undefined,而第三个加了括号后输出的是语句表示的对象。
现在来说本文的重点,如何在函数内执行全局代码。为了说明这个问题,先看一个例子:


    var s='global';    //定义一个全局变量
    function demo1(){
        eval('var s="local"');
    }
    demo1();
    alert(s);    //->global

很好理解,上面的demo1函数等价于:function demo1(){var s=’local’;},其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情,毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下,可以发现eval函数的特点,它总是在调用它的上下文变量空间(也称为:包,closure)内执行,无论是变量定义还是函数定义都是如此,所以如下的代码会产生函数未定义的错误:


    var s='function test(){return 1;}';     //一个函数定义语句
    function demo2(){
        eval(s);
    }
    demo2();
    alert(test());    //->error:test is not defined

这是因为test函数在局部空间定义,demo2函数内可以访问到,外面就访问不到了。

而在实际的Ajax开发中,有时我们需要从服务器动态获取代码来执行,以减轻一次载入代码过多的问题,或者是一些代码是通过Javascript自身生成的,希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成,比如:


    function loadCode(){
        var code=getCode();
        eval(code);
    }

可见eval不可能在全局空间内执行,这就给开发带来了不少问题,也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法,嘿嘿,可以同时兼容IE和Firefox,方法如下:


    var X2={}    //my namespace:)
    X2.Eval=function(code){
     if(!!(window.attachEvent && !window.opera)){
      //ie
      execScript(code); 
     }else{
      //not ie
      window.eval(code);
     }
    }

现在如果要想在函数内定义全局代码,就可以通过调用X2.Eval(code)方法,一个例子如下:


    var s='global';
    function demo3(){
     X2.Eval('var s="local"');
    }
    demo3();
    alert(s); //->'local'

可见,在demo3函数内重新定义了全局变量s=”local”。
需要注意的是X2.Eval并不返回值,如果要进行表达式的求值,还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里,或许有人感觉问题也太容易解决了点,呵呵,但发现这个办法倒是需要些运气和技巧的:
(1)对于IE浏览器,默认已经提供了这样的函数:execScript,用于在全局空间执行代码,只是知道的人还不多。
(2)对于Firefox浏览器,直接调用eval函数,则在调用者的空间执行;如果调用 window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true!
Firefox的eval函数的特点的确是很令人奇怪的,但从javascript规范中倒也能找到其来源:
If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.
意思大概就是说eval函数的执行是和调用者相关的,但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了,大家知道解决办法就好。

jQuery性能优化指南(1)

jQuery性能优化指南(2)

jQuery性能优化指南(3)

8,尽量使用ID代替Class。

前面性能优化已经说过,ID选择器的速度是最快的。所以在HTML代码中,能使用ID的尽量使用ID来代替class。
看下面的一个例子:


    // 创建一个list
    var $myList = $('#myList');
    var myListItems = '<ul>';
    for (i = 0; i < 1000; i++) {
         myListItems += '<li class="listItem' + i + '">This is a list item</li>'; 
         //这里使用的是class
     }
    myListItems += '</ul>';
    $myList.html(myListItems);
    // 选择每一个 li
     for (i = 0; i < 1000; i++) {
        var selectedItem = $('.listItem' + i);
    } 
</div>
在代码最后,选择每个li的过程中,总共用了5066毫秒,超过5秒了。

接着我们做一个对比,用ID代替class:
[source language="javascript"]
    // 创建一个list
    var $myList = $('#myList');
    var myListItems = '<ul>';
    for (i = 0; i < 1000; i++) {
        myListItems += '<li id="listItem' + i + '">This is a list item</li>'; //这里使用的是id
    }
    myListItems += '</ul>';
    $myList.html(myListItems);
     // 选择每一个 li
    for (i = 0; i < 1000; i++) {
         var selectedItem = $('#listItem' + i);
    } 

在上段代码中,选择每个li总共只用了61毫秒,相比class的方式,将近快了100倍。
9,给选择器一个上下文

jQuery选择器中有一个这样的选择器,它能指定上下文。
jQuery( expression, context );

通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。
普通方式:
$(‘.myDiv’)
改进方式:
$(‘.myDiv’ , $(“#listItem”) )
10,慎用 .live()方法(应该说尽量不要使用)

这是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说,这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:


    <script type="text/javascript" >
    $(function(){
     $("p").click(function(){
         alert( $(this).text() );
     });
    $("button").click(function(){
        $("<p>this is second p</p>").appendTo("body");
    });
    }) </script>
    <body>
    <p>this is first p</p> <button>add</button>
    </body>

运行后,你会发现 新增 的 p元素,并没用被绑定click事件。

你可以改成.live(“click”)方式解决此问题,代码如下:


    $(function(){
    $("p").live("click",function(){ //改成live方式
         alert( $(this).text() );
     });
    $("button").click(function(){ $("<p>this is second p</p>").appendTo("body"); });})

但我并不建议大家这么做,我想用另一种方式去解决这个问题,代码如下:


    $(function(){
    $("p").click(function(){
        alert( $(this).text() );
    });
    $("button").click(function(){
        $("<p>this is second p</p>").click(function(){  //为新增的元素重新绑定一次
                alert( $(this).text() );
        }).appendTo("body");
    });
    })

虽然我把绑定事件重新写了一次,代码多了点,但这种方式的效率明显高于live()方式,
特别是在频繁的DOM操作中,这点非常明显。

11,子选择器和后代选择器

后代选择器经常用到,比如:$(“#list  p”);
后代选择器获取的是元素内部所有元素。

而有时候实际只要获取 子元素,那么就不应该使用后代选择器。
应该使用子选择器,代码如下:
$(“#list > p”);

12,使用data()方法存储临时变量

下面是一段非常简单的代码,


    $(function(){
        var flag = false;
        $("button").click(function(){
            if(flag){
                $("p").text("true");
                flag=false;
            }else{
                $("p").text("false");
                flag=true;
            }
        });
    })

改用data()方式后,代码如下:


    $(function(){
        $("button").click(function(){
            if( $("p").data("flag") ){
                $("p").text("true");
                $("p").data("flag",false);
            }else{
                 $("p").text("false");
                 $("p").data("flag",true);
            }
        });
    })

jQuery性能优化指南(3)到此结束。
相信你也有你的idea,请共享出来吧。 Email : cssrain@gmail.com

jQuery性能优化指南(1)

jQuery性能优化指南(2)

jQuery性能优化指南(3)

4,对直接的DOM操作进行限制
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM 。
这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素,千万不要这样做,如下所示:


    var top_100_list = [...], // 假设这里是100个独一无二的字符串
    $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素
    for (var i=0, l=top_100_list.length; i<l; i++){
      $mylist.append("<li>" + top_100_list[i] + "</li>");
    }

我们应该将整套元素字符串在插入进dom中之前先全部创建好,如下所示:


    var top_100_list = [...],$mylist = $("#mylist"), top_100_li = ""; 
// 这个变量将用来存储我们的列表元素
    for (var i=0, l=top_100_list.length; i<l; i++){
       top_100_li += "<li>" + top_100_list[i] + "</li>";
    }
    $mylist.html(top_100_li);

注:记得以前还看过一朋友写过这样的代码:

    for (i = 0; i < 1000; i++) {

        var $myList = $('#myList');

        $myList.append('This is list item ' + i);

    } 

呵呵,你应该已经看出问题所在了。既然把#mylist循环获取了1000次!!!
5,冒泡

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。

比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

传统的做法是,直接选中input,然后绑定focus等,如下所示:


    $("#entryform input").bind("focus", function(){
        $(this).addClass("selected");
    }).bind("blur", function(){
        $(this).removeClass("selected");
    });

当然上面代码能帮我们完成相应的任务,但如果你要寻求更高效的方法,请使用如下代码:


    $("#entryform").bind("focus", function(e){
        var $cell = $(e.target); // e.target 捕捉到触发的目标元素
        $cell.addClass("selected");
    }).bind("blur", function(e){
        var $cell = $(e.target);
        $cell.removeClass("selected");
    });

通过在父级监听获取焦点和失去焦点的事件,对目标元素进行操作。
在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
同理,在Table操作时,我们也可以使用这种方式加以改进代码:
普通的方式:

    $('#myTable td').click(function(){
        $(this).css('background', 'red');
    }); 

改进方式:


    $('#myTable').click(function(e) {

         var $clicked = $(e.target);

         $clicked.css('background', 'red');

    }); 

假设有100个td,在使用普通的方式的时候,你绑定了100个事件。

在改进方式中,你只为一个元素绑定了1个事件,
至于是100个事件的效率高,还是1个事件的效率高,相信你也能自行分辨了。
6,推迟到 $(window).load

jQuery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下。
尽管$(document).ready 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态,很有可能就是$(document).ready函数引起的。

你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括<iframe>)被下载完成后执行。


    $(window).load(function(){
        // 页面完全载入后才初始化的jQuery函数.
    });

一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。
7,压缩JavaScript
压缩和最小化你的JavaScript文件。
在线压缩地址: http://dean.edwards.name/packer/
压缩之前,请保证你的代码的规范性,否则可能失败,导致Js错误。
jQuery性能优化指南(2)到此结束,指南(3)正在进行中….
相信你也有你的idea,请共享出来吧。 Email : cssrain@gmail.com