zoukankan      html  css  js  c++  java
  • JS异步加载的三种方案

    • js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。
    • 有些工具方法需要按需加载,用到再加载,不用不加载。

     一、defer与async

     1.defer是IE独有的一种js异步加载模式,通过src加载的JS会等到文档解析完才会执行(document.readyState="interactive")。在script标签内部也可以写入内部JS代码,但是直接写入的内部JS代码会同步执行。

    <script src="https://cdn.staticfile.org//vue/2.2.2//vue.min.js" type="text/javascript" charset="utf-8" defer=""defer">
        //写这里的代码是同步执行
    </script>

    2.asyn是W3C的标准异步加载模式,通过src加载的JS要等所有资源加载完以后执行(例如:img)(docuement.readyState="complete"),通过asyn异步加载的外部JS才会执行,但是asyn模式的script标签内不能写JS代码。

    <script src="https://cdn.staticfile.org//vue/2.2.2//vue.min.js" type="text/javascript" charset="utf-8" async="async">
        //这里不能写代码
    </script>

    因为asyn是W3C标准,IE9之前都不兼容,所以还是很鸡肋。

     二、通过插入script标签的方式实现兼容模式的JS异步加载

     通过插入script标签的方式实现JS异步加载的原理其实很简单,直接来代码:

    <script>
        function loadScript(url){
            var script = document.createElement("script");//新建一个script标签
            script.type="text/javascript";//添加type属性
            //绑定src,实现异步加载
            script.src = url;
            //document.head.appendChild(script);切勿这么做,IE7和IE5上document没有head的DOM对象属性。
            var head = document.getElementsByTagName("head")[0];
            //插入script标签
            head.appendChild(script);//把script添加到domTree节点中,并且会触发执行
        }
        loadScript("xxx.js");
    </script>

    异步加载的JS会什么时候执行呢?执行会不会阻塞HTML解析呢?基于异步加载方法来一波测试:

    <head>
    ....
    //这里是异步加载的代码
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script>
        console.log("告诉我什么时候执行的");
    </script>
    </head>
    -----------------------------------------------------------------------------
    //这里是异步加载的外部JS文档内容
    var n =Number(new Date());
    var n2 = Number(new Date());
    while((n2 - n) < (10*1000)){
            n2 = Number(new Date());
            console.log(1);
     }

    测试执行的结果:

    ---- 打印39733次1

    ---- 告诉我什么时候执行的

    上面的测试结果告诉了我们,通过插入script异步加载的JS,加载完以后就会立即执行。并且执行的时候会阻塞HTML解析。

    先来说说我为什么要在中间加入一行外部CSS代码,我们知道CSS是异步加载,但是CSS的加载会阻塞内部JS的执行,所以足够我测试的外部JS加载了。也就是说在内部JS执行前,外部JS肯定加载完成了,如果外部JS不会阻塞HTML解析也就不会在内部JS之前执行,但是测试的结果是通过添加script标签异步加载的外部JS在内部JS之前执行了,所以就说明了这种异步加载JS的方式加载完以后就会立即执行,并且如果HTML没有解析完就会阻塞HTML解析。

    那为什么还需要这样的外部加载方式呢?

    我们知道同步加载JS会阻塞HTML解析,而网络因素又是非常不可控的因素,如果某个同步加载的外部JS出现网络不畅通,就会一直阻塞页面。如果是一些工具脚本,不需要修改DOM的话,或者是一些不是一定需要的脚本(比如某个特定事件的JS脚本就可以用这种方式来加载),甚至可以在页面渲染完以后通过某个事件触发来加载它。

    既然是异步加载的JS脚本,我们就有必要知道它什么时候加载完了,好方便我们使用,所以下面再来丰富以下这个异步加载JS的方法:

    function loadScript(url,callback){
        var script = document.createElement("script");//新建一个script标签
        script.type="text/javascript";//添加type属性
        if(script.readyState){
            script.onreadystatechange = function(){
                //script.readyState发生改变时触发script.onreadystatechange
                if(script.readyState == "complete" || script.readyState == "loaded"){
                    //script.readyState -->状态码初始值是“loading”,根据文件加载进度,值发生改变
                    //IE通过script.readyState的状态码监听异步文件加载进度
                    tools[callback]();//采用对象属性调用需要执行的方法 -- 这里按需要使用
              //看到有前辈说IE7和IE5有时候可能会即有"complete",又有"loaded"状态,为了防止万一可以在这里清除监听事件
             script.onreadystatechange = null; } } }else{ script.onload = function(){//script.onload-->表示加载完成以后执行 //除IE以外 Safari chrome firefox opera都兼容 tools[callback](); } } //异步加载文件,必须放在事件添加后面,要不然出现先加载完了,事件函数没有绑定的的情况就不会触发了 script.src = url; //document.head.appendChild(script);切勿这么做,IE7和IE5上document没有head的DOM对象属性。 var head = document.getElementsByTagName("head")[0]; head.appendChild(script);//把script添加到domTree节点中,并且会触发执行 }

    W3C标准中有onload事件可以监听外部脚本是否加载完成,所以IE就需要兼容。

    IE的script元素的DOM对象上有readyState属性记录外部资源的加载状况,与document对象上的readyState属性一样,有四个值:

    uninitialized -- 还未开始载入;

    loading - 载入中;

    interactive - 已加载,文档与用户可以开始交互;

    complete - 载入完成;(有些版本是loanded,听说有些版本这两个状态都会出现本人没遇到过

    tools[callback](),是我测试回调外部脚本的方法,这个不重要,主要看需求,反正这里就是说明外部JS已经加载完毕了,可以处理自己要处理的程序了

     凌晨了,晚安。

  • 相关阅读:
    穷举字符串的一种算法
    使用VirtualBox SDK之初步编译
    Install Shield 中判断安装还是卸载
    [转] win32内核程序中进程的pid,handle,eprocess之间相互转换的方法
    如何做PHD (1)
    在TFS 2010中使用邮件提醒功能(Email Notification)
    Chrome的Awesome Screenshot的插件离线下载
    Visual Studio 2010下生成Crypto++ lib
    VirtualBox开发环境的搭建详解
    VC版PwdHash
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10527706.html
Copyright © 2011-2022 走看看