读《高性能 JavaScript》笔记－”JS进阶必读“(第一章)

一，加载和执行

1.0脚本位置,由于 javaScript的阻塞特性，脚本位置可以放在<body>标签底部，以尽量减少整个页面下载的影响。

<html>
  <head>
   <title>下载的js文件 尽可能放在body标签底部</title>
   <body>
      <p>hello world~</p>
      <--放在这里-->
      <script type="text/javascript" src="file1.js"></script>
      <script type="text/javascript" src="file2.js"></script>
      <script type="text/javascript" src="file3.js"></script>
   </body>
  </head>
</html>

1.1 当然<script>标签初始下载时会阻塞页面渲染，合并脚本，减少<script>标签，无论外链文件还是内嵌文件都是如此。

<html>
  <head>
   <title>下载的js文件 尽可能放在body标签底部</title>
   <body>
      <p>hello world~</p>
      <--可用雅虎提供的合并处理器，以供通过他们的内容传输网络(CDN)来分发
    Yahoo!User Interface（YUI）Library文件  可以使用一个url来获取任意数量的YUI文件 -->
      <script type="text/javascript" 
      src="http//yui.yahooapis.com/file1.js&file2.js&file3.js"></script>
   </body>
  </head>
</html>

1.2 无阻塞的脚本的秘笈在于，在页面加载完后下载JavaScript代码。用专业术语来说，这意味着在window对象的load事件触发后再下载脚本。

1.3 延迟脚本，Html4 为<script>标签定义了一个扩展属性：defer ,目标浏览器支持的话，也是一个有用的解决脚本下载阻塞的方案，带有defer属性的JavaScript文件下载的时，它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其他资源并行下载。

<html>
  <head>
   <title>script defer example</title>
   <body>
      <p>hello world~</p>
      <script defer>alert("defer")</script>
      <script>alert("script")</script>
      <script>
        window.onload=function(){
          alert("load"); 
       }
      </script>
      <p>支持defer的浏览器 打印结果顺序为："script", "defer" ,"load"
   注意!!! 带有 defer的script标签 是在onload执行之前调用 而不是跟着第二个后面</p>   
    </body>
  </head>
</html>

1.3动态脚本元素，使用动态创建的<script>元素来下载并执行代码。

//下面的函数封装来标准及IE特有的实现方法
//loader.js
function loadScript(url,callback){
    var script = document.createElement("script")
    script.type = "text/javascript";

    if(script.readyState){//IE
      script.onreadstatechange = function(){
          if(script.readyState == "loaded"||script.readyState == "complete"){
           script.onreadychange = null;
           callback();
          }
      }
    }else{//other 浏览器
         script.onload = function(){
            callback();
         };
    }

    script.src=url;
    document.getElemenByTagName("head")[0].appendChild(script);
}


//使用 单文件
loadScript("file1.js",function(){
       alert("File is loaded!!!")
    })

//使用 多文件
loadScript("file1.js",function(){
       loadScript("file2.js",function(){
         alert("All File is loaded!!!")
       })
    })

1.4 XMLHttpRequest 脚本注入

var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange=function(){
    if(xhr.readystate == 4){
      if(xhr.states >= 200 && xhr.states <300 || xhr.states  == 304){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.text = xhr.responeText;
        document.body.appendChild(script);
      }
    }
}
xhr.send(null);

1.5向页面添加大量的JavaScript代码只需要两步1.添加动态加载所需的代码 2.加载初始化页面所需要的剩下代码

//放在<body>标签闭合之前   loader.js 上面1.3处代码
<script type="text/javascript" src="loader.js"></script> //步骤一
<script type="text/javascript" >//步骤二
    loadScript("the-rest.js",funciton(){
           application.init();
    })
</script>

读《高性能 JavaScript》笔记－”JS进阶必读“(第一章)

一，加载和执行

注意：如有版本问题请联系我～

猜你喜欢

读《高性能 JavaScript》笔记 －”JS进阶必读“(第一章)

一， 加载和执行

注意：如有版本问题 请联系我～

猜你喜欢

读《高性能 JavaScript》笔记－”JS进阶必读“(第一章)

一，加载和执行

注意：如有版本问题请联系我～