《高性能javascript》读书笔记

1.每个<script>加载时都会阻塞其他文件（图片、音乐等）的同时加载，同时浏览器会在js代码执行时停止渲染Dom.所以为了减少界面加载的卡顿和空白发生，应尽力将js代码或者文件放在</body>前，防止js代码影响Dom渲染。

 

2.js文件现在浏览器内部已经实现并行加载。提高浏览器加载js性能：a.减小js大小 b.减少内链代码个数 3.http请求会带来额外开销，所以1个100K的js加载时间短语4个25k的。

 

3.页面无阻塞：考虑在页面框架加载渲染完之后再触发对脚本的下载

  window.onload()

  可以在<script>标签内加入defer:

 <script src=”index.js” defer></script>

 

，向浏览器提前说明：本js文件无对dom操作，可以延迟加载执行。目前所有浏览器都已实现.

 

4.script标签也是Dom对象，所以可以动态添加js脚本。

        

var script=document.cresteElement(“script”);
script.type = “text/javascript”;
script.scr= ”123.js”;
document.getElementByTagName(“head”)[0].appendChild(script);

 

可以添加加载完成时的状态：

   

script.onload = function(){  //除IE外，支持
        alert(‘动态js加载完成’);
   };
        script.onreadystatechange = function(){//IE
           //其中readyState 为识别值，有5种取值结果：
           // unintialized初始状态 loading下载中  loaded下载完成  interactive 数据完、、          //成下载但不可用  complete 所有数据已经准备完成

            if(script.readyState ==”loaded” || script.readyState ==”complete”){
                //…………
            }
        }
   }

 

 

但是，如何将两种浏览器加载识别模式融合在一起？

         

function loadScript (url,callback){//url为文件位置，callback为回调函数
        var script = document.createElement(“script”);
        script.type=”text/javascript”;
        script.src=”index.js”;
        if(script.readyState){  //ie
            script.onreadystatechange = function(){
            if(script.readyState ==”loaded” || script.readyState ==”complete”){
                callback();
            }
        }
        else{ //其他浏览器
            script.onload = function(){
                callback();
            }
        }
    script.scr= url;
        document.getElementByTagName(“head”)[0].appendChild(script);
    }

 

上面这种是书上给出的只能加载js的函数，怎么用这个函数同样能css动态加载？  自己改良了一下：

　　　　

function afterload(){
        alert("已加载");    
    }

    function loadScript(url,type,callback){
        if("js"==type){
            var script = document.createElement("script");
            script.type = "text/javascript";
            if(script.readyState){  //ie
                 script.onreadystatechange = function(){
                      if(script.readyState ==”loaded” || script.readyState ==”complete”){
                            callback();
                      }
                 }
            }
            else{ //其他浏览器
                 script.onload = function(){
                      callback();
                 }
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        else if("css"==type){
            var css = document.createElement("link");
            css.setAttribute("rel","stylesheet");//增加属性函数，css.rel()不存在,所以只能setA...出来
            css.setAttribute("type","text/css");
            if(css.readyState){  //ie
                css.onreadystatechange = function(){
                     if(css.readyState ==”loaded” || css.readyState ==”complete”){
                          callback();
                     }
                }
            }
            else{ //其他浏览器
                css.onload = function(){
                     callback();
                }
            }
            
            css.setAttribute("href",url);
            document.getElementsByTagName("head")[0].appendChild(css);
        }
    }
             

 

  

5.可以尝试使用YUI或者Lazyload来做无阻塞加载

 

6.js的事件冒泡

event事件作为对象存在于widow内或者每一个element节点内部，需要通过传参数（或者直接调用IE中:window.event 全局变量）来对event进行操作

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

常用的event句柄有onclick,onblur,onfocus等等，常用的属性有ScreenX,ScreenY,button等

当页面为页面内某元素节点绑定句柄并为其句柄绑定函数时，因为元素间包含关系，会导致元素不仅触发自身定义的事件，还触发了其外部元素定义的事件

<div id="wrapper" class=“wrapper” style="background-color:red;">
    <button>按钮同志</button>
  </div>
  <script type="text/javascript">
    var _wrap = document.getElementById("wrapper");
    _wrap.onclick=function(){
      console.log("层点击");
    }
    var _btn = document.getElementsByTagName("button")[0];
    _btn.onclick=function(e){
      console.log("按钮点击");
      e =window.element || e;
      e.cancelBubble = true;
    }
  </script>

上面点击按钮的时候，先触发了按钮自身的点击事件，后又触发了包裹在button外部的div元素的层点击事件。　　　　这样会导致函数莫名被调用或者传参错误

这就是js事件的冒泡

可以通过event的cancelBubble属性（ie和Chrome） 或者调用  stopPropagation()函数  (FF浏览器)  来执行

document.all属性可以用于区分IE 与 FF ，

if(document.all){

　　//这是IE

}

else{

　　//火狐

}

 

为了方便以后调用或者团队开发，可以封装stopPropagation()函数

function stopPropagation(e){
     e = window.event || e;
     if(document.all){
         e.cancelBubble = true;
     }
     else{
         e.stopPropagation();
     }    
}

button.onclick = function(e){

　　stopPropagation(e);

　　console.log("按钮点击");

}