精华内容
下载资源
问答
  • 前端技术虽然在不断发展之中,却一直...这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度,以及对 **JavaScript** 的熟悉程度,这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。

    转载自:
    http://blog.csdn.net/xiangyong58/article/details/50569071

    1.AMD的由来

      前端技术虽然在不断发展之中,却一直没有质的飞跃。除了已有的各大著名框架,比如 DojoJQueryExtJs 等等,很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度,以及对 JavaScript 的熟悉程度,这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。开发一个自己会用的框架并不难,但开发一个大家都喜欢的框架却很难。从一个框架迁移到一个新的框架,开发者很有可能还会按照原有框架的思维去思考和解决问题。这其中的一个重要原因就是 JavaScript 本身的灵活性:框架没办法绝对的约束你的行为,一件事情总可以用多种途径去实现,所以我们只能在方法学上去引导正确的实施方法。庆幸的是,在这个层面上的软件方法学研究,一直有人在去不断的尝试和改进,CommonJS 就是其中的一个重要组织。他们提出了许多新的JavaScript 架构方案和标准,希望能为前端开发提供统一的指引。

      AMD 规范就是其中比较著名一个,全称是 Asynchronous Module Definition,即异步模块加载机制。从它的规范描述页面看,AMD 很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。从它被 requireJSNodeJsDojoJQuery 使用也可以看出它具有很大的价值,没错,JQuery 近期也采用了 AMD 规范。在这篇文章中,我们就将介绍AMD的性质,用法,优势以及应用场景。从 AMD 中我们也能学习到如何在更高层面去设计自己的前端应用。

    2.AMD是什么

      作为一个规范,只需定义其语法API,而不关心其实现。AMD 规范简单到只有一个 API,即 define 函数:

    define([module-name], [array-of-dependencies], [module-factory-or-object]);

      其中:

      module-name : 模块标识,可以省略。

      array-of-dependencies : 所依赖的模块,可以省略。

      module-factory-or-object : 模块的实现,或者一个JavaScript对象。

      从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。后面将介绍在不同的应用场景下,他们会使用不同的参数组合。

      从这个define函数AMD中的 AAsynchronous,我们也不难想到 define 函数具有的另外一个性质,异步性。当 define 函数执行时,它首先会异步的去调用第二个参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。如果对应到 dojo1.6 之前的实现,那么在功能上可以有如下对应关系:

      module-name : dojo.provide

      dependencies : dojo.require

      module-factory : dojo.declare

      不同的是,在加载依赖项时,AMD 用的是异步,而 dojo.require 是同步。异步和同步的区别显而易见,前者不会阻塞浏览器,有更好的性能和灵活性。而对于 NodeJs 这样的服务器端 AMD,则模块载入无需阻塞服务器进程,同样提高了性能。

    3.AMD 实例:如何定义一个模块

      下面代码定义了一个 alpha 模块,并且依赖于内置的 requireexports 模块,以及外部的 beta 模块。可以看到,第三个参数是回调函数,可以直接使用依赖的模块,他们按依赖声明顺序作为参数提供给回调函数。

      这里的 require 函数让你能够随时去依赖一个模块,即取得模块的引用,从而即使模块没有作为参数定义,也能够被使用;exports 是定义的 alpha 模块的实体,在其上定义的任何属性和方法也就是 alpha 模块的属性和方法。通过 exports.verb = … 就是为 alpha 模块定义了一个 verb 方法。例子中是简单调用了模块 betaverb 方法。

      define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
          exports.verb = function() {
              return beta.verb();
              //或者: return require("beta").verb();
          }
      });

    4.匿名模块
      define 方法允许你省略第一个参数,这样就定义了一个匿名模块,这时候模块文件的文件名就是模块标识。如果这个模块文件放在 a.js 中,那么 a 就是模块名。可以在依赖项中用 “a” 来依赖于这个匿名模块。这带来一个好处,就是模块是高度可重用的。你拿来一个匿名模块,随便放在一个位置就可以使用它,模块名就是它的文件路径。这也很好的符合了DRY(Don’t Repeat Yourself)原则。

      下面的代码就定义了一个依赖于 alpha 模块的匿名模块:

      define(["alpha"], function (alpha) {
          return {
              verb: function(){
                  return alpha.verb() + 2;
              }
          }; 
      });

    5.仅有一个参数的 define

      前面提到,define 的前两个参数都是可以省略的。第三个参数有两种情况,一种是一个 JavaScript 对象,另一种是一个函数。

      如果是一个对象,那么它可能是一个包含方法具有功能的一个对象;也有可能是仅提供数据。后者和 JSON-P 非常类似,因此 AMD也可以认为包含了一个完整的 JSON-P 实现。模块演变为一个简单的数据对象,这样的数据对象是高度可用的,而且因为是静态对象,它也是 CDN 友好的,可以提高 JSON-P 的性能。现在考虑一个提供中国省市对应关系的 JavaScript 对象,如果以传统 JSON-P 的形式提供给客户端,它必须提供一个 callback 函数名,根据这个函数名动态生成返回数据,这使得标准JSON-P数据一定不是CDN友好的。但如果用 AMD,这个数据文件就是如下的形式:

    define({
      provinces: [{
            name: '上海',
            areas: ['浦东新区', '徐汇区']
        },{
            name: '江苏',
            cities: ['南京', '南通']
        } 
        //.....
        ]
    });

    假设这个文件名为 china.js,那么如果某个模块需要这个数据,只需要:

        define(['china', function(china){
          //在这里使用中国省市数据
      });

    通过这种方式,这个模块是真正高度可复用的,无论是用远程的,还是 Copy 到本地项目,都节约了开发时间和维护时间。

    如果参数是一个函数,其用途之一是快速开发实现。适用于较小型的应用,你无需提前关注自己需要什么模块,自己给谁用。在函数中,可以随时 require 自己需要的模块。例如:

        define(function(){
          var p = require('china');
          //使用china这个模块
      });

      即你省略了模块名,以及自己需要依赖的模块。这不意味着你无需依赖于其他模块,而是可以让你在需要的时候去 require 这些模块。define 方法在执行的时候,会调用函数的 toString 方法,并扫描其中的 require 调用,提前帮助你载入这些模块,载入完成之后再执行。这使得快速开发成为可能。需要注意的一点是,Opera 不能很好的支持函数的 toString 方法,因此,在浏览器中它的适用性并不是很强。但如果你是通过 build 工具打包所有的 JavaScript 文件,这将不是问题,构建工具会帮助你扫描 require 并强制载入依赖的模块。

    6.Dojo中的AMD

      Dojo 的1.6版本,其中一个重要的变化就是引入了 AMD 机制,取代了原来的 dojo.providedojo.require 方法。但是现在仍然保持了向后兼容性,你仍然可以用dojo.providedojo.require 来定义和加载模块。需要注意的是:在 Dojo 1.6 中, 针对 AMD 的重构仍然属于一个过渡期的改动 , 用户自己开发的 AMD 模块还不能被 Dojo 的加载器和 Build 系统支持 。Dojo 1.6 中现有的编译系统对 AMD 的支持还非常局限。 如果你自己开发了 AMD 格式的模块,并且你仍然在使用默认的 Dojo 同步模块加载器,那么你必须严格遵循 Dojo 模块的格式 ( 包括换行的格式 ) 来保证你自己的模块能够成功编译。总结起来有以下三点:

    1. 用传统的方法 ( dojo.require() / dojo.provide() ) – 这些模块,只能被 Dojo 同步加载器 加载,但可以被 Dojo 编译系统(Build System )正确的编译;

    2. Dojo 同步加载器来加载 AMD 格式 ( define ()) 模块 – 这些模块可以被正常的加载,并且可以被其他兼容 AMD 格式的加载器加载 . 现在虽然 Dojo1.6 还没有正式支持这种用法, 但在目前的 Dojo1.6 编译系统中,是可以正常工作的 ( 前提是你必须严格遵循 Dojo 模块定义的代码规范 );

    3. 使用第三方加载器来加载 AMD 格式( define ())模块 – 模块可以被正常加载,并且可以被其他加载器所使用 . 这些模块可以使用 RequireJSBackdraft 提供的编译系统正常编译,但是 Dojo 还没有正式的测试过和其他加载器的兼容性 。

    Calendar 为例,用 define 方法来定义这个模块:

    define("dijit/Calendar",["dojo", "dijit", "text!dijit/templates/Calendar.html","dojo/cldr/supplemental", "dojo/date", 
        "dojo/date/locale","dijit/_Widget", "dijit/_Templated", "dijit/_CssStateMixin", "dijit/form/DropDownButton"],
      function(dojo, dijit) {
          dojo.declare("dijit.Calendar",[dijit._Widget, dijit._Templated, dijit._CssStateMixin],{...});
          return dijit.Calendar;
      }
    );
    

      可以看到,模块标识就是模块文件的路径,模块本身一般都是 dojo.declare 定义的类。Dojo1.6 中的 dojodijit 命名空间下的模块均已经用 AMD 的形式进行了重构,但 dojox 下仍然延用了传统的 dojo.providedojo.require 形式。对 AMD 的引入是 Dojo 走向自动化包管理的重要一步,在后续文章中我们也将继续关注 Dojo 在这方面的进展。

    7.结论

      AMD 规范是 JavaScript 开发的一次重要尝试,它以简单而优雅的方式统一了 JavaScript 的模块定义和加载机制,并迅速得到很多框架的认可和采纳。这对开发人员来说是一个好消息,通过 AMD 我们降低了学习和使用各种框架的门槛,能够以一种统一的方式去定义和使用模块,提高开发效率,降低了应用维护成本。

    展开全文
  • JS异步加载及解决方式

    千次阅读 2019-05-28 23:03:02
    1.js中的同步加载和异步加载有什么不同? javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。 对于浏览器来说,也就是无法在渲染页面的同时执行代码。 同步加载:也就是说一个...

    1.js中的同步加载和异步加载有什么不同?
    javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。
    对于浏览器来说,也就是无法在渲染页面的同时执行代码。
    同步加载:也就是说一个事件处理程序没加载完之前,不会加载后面的程序。
    异步加载:也就是并发加载,会同时处理几个事件处理程序。
    举个生活中的例子:
    早上起床,先刷牙,再烧水,等水烧开了洗脸,再整理发型.是同步
    先刷牙,再烧水,再整理发型,等水壶滴的一声通知我水烧开了,我再取刚烧开的水洗脸,是异步.
    2.js是同步加载的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div>
            <strong></strong>
        </div>
        <p></p>
        <span></span>
    </body>
    </html>
    
    

    js在执行上述代码时:
    首先绘制DomTree:
    在这里插入图片描述
    3.JS实现异步加载的三种方式
    1.defer 异步加载,但是要等到dom文档全部解析完毕才会被执行。(可以在行间书写js代码)(只适用于IE)

    <script type="text/javascript" src="demo.js" defer="defer"></script>
    
    //行内js
    <script type="text/javascript"  defer="defer">
    console.log(“a”);
    </script>
    

    2.async 异步加载1,加载完毕就会执行,async只能加载外部js脚本,不能把js书写在script标签内(W3C标准方法)

    <script type="text/javascript" src="demo.js" async="async"></script>
    

    3.创建script,插入到DOM中,加载完毕后callback(通吃的方法)

    <body>
        <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '123.js';
        document.head.appendChild(script);   
        
        //123.js 文件
    //     function test(){
    //     console.log('a');
    // }
        </script>
    </body>
    

    直接调用 外部链接js文件中的test()函数;

      <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '123.js';
        document.head.appendChild(script);   
        
        //123.js 文件
    //     function test(){
    //     console.log('a');
    // }
        //直接调用 test();
       // test();  
        // test is not undefined  (因为js文件会有一个加载的过程)
    
        //使用定时器,1s后调用test();
        setTimeout(function(){
            test();
        },1000)  //1s后打印了a
        </script>
    

    判断js文件是否加载完毕之后进行后续操作:
    chrome,oprea,firefox,safari

     script.onload = function(){
                  test();
                 }  //script.onload 在js加载完后触发```
    
    
    

    ie

     script.onreadystatechange = function(){
                    if(script.readyState == 'complete' || script.readyState == 'loaded')
                     {
                         test();
                     }
                 }  //根据状态变化判断js是否加载完毕执行后续操作
    
    

    封装函数:

    
        <script>
        function loadscript(url,callback){
        var  script = document.createElement('script');
        script.type = "text/javascript";
        //chrome,opera,firefox,safari
        script.onload = function(){
            callback();
        }
        //IE
        script.onreadystatechange = function(){
            if(this.readyState == 'complete' || 
            this.readyState == 'loaded')
            {
                callback();
            }
        }
        script.src = url;
        document.head.appendChild(script);
    }
    loadscript('123.js',function (){
        test();
    });
    </script>
    

    因为IE会有状态判断的过程,如果程序小所消耗的时间极少,那么ie状态下函数就不会被触发,所以将加载js文件放到最后可以避免这个错误。

    展开全文
  • js文件加载的缺点: 页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下...js异步加载的三种方案: 1.defer 只有IE9以下能用 异步加载,但要等到dom文档全部解析完

    js文件同步加载的缺点:

    页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js文件可能会操作html和css;但有些js文件不会操作html和css,只是进行初始化数据或者引入工具包,我们希望这些js文件能够并行异步加载,以免一个js文件加载失败,导致后续所有页面都加载不了,影响页面效率。

    另外有些工具方法需要按需加载(需要再加载,不用不加载)

    js异步加载的三种方案:

    1.defer 只有IE9以下能用
    异步加载,但要等到dom文档全部解析完(dom树已生成)才会被执行,执行时不会阻塞页面

    引入外部js文件

    <script type = 'text/javascript' src = 'tools.js' defer = 'defer'> </script>

    <script type = 'text/javascript' src = 'tools.js' defer > </script>

    也可以将代码写到内部

    <script type = 'text/javascript' defer>
    	var a = 123; //写在内部
    </script>
    

    2.async W3C标准方法
    异步加载,加载完就执行,执行时不会阻塞页面,async只能加载外部js,不能把js写在script标签里

    <script type = 'text/javascript' src = 'tool.js' async = 'async'></script>

    <script type = 'text/javascript' src = 'tool.js' async ></script>

    以上两种方法不能很好的处理浏览器兼容问题,因此可以使用第三种方法,更加强大,既可异步加载,也可按需加载

    3.创建script节点,插入到DOM中,加载完毕后callBack

    var script  = document.createElement('script') //创建
    script.type = 'text/javascript' //设置
    script.src = 'index.js' //这句执行完 系统就会异步下载指定的文件
    ...//其他的操作
    document.head.appendChild(script) //script标签插入文档后 系统才会解析这个脚本 否则只是下载
    

    但由于系统是异步下载js文件,很可能script标签插入文档的时候,甚至调用js文件中方法的时候,js文件还没有下载完成

    var script  = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'index.js' //这句执行完 系统就会异步下载指定的文件
    document.head.appendChild(script) //script插入文档后 才会解析这个脚本 否则只是下载
    test() //系统执行这段语句的时候 js文件可能还未加载完 故会报错
    

    在这里插入图片描述
    可以设置定时器,在规定时间后(给js文件下载时间)再执行函数

    var script  = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'index.js' //这句执行完 系统就会异步下载指定的文件
    document.head.appendChild(script) //script插入文档后 才会解析这个脚本 否则只是下载
    // test()
    setTimeout(function(){ //设置定时器 在规定时间后再执行函数
      test() //这个时候js文件已经下载完成 可以执行
    },1000)
    

    在这里插入图片描述
    但我们并不清楚要等待多久js文件才会下载完成,那么有没有一个机制能够提醒我们呢?

    可使用load事件(并不是只有window才有load事件,但凡需要下载的就有load事件,比如script

    var script  = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'index.js' //这句执行完 系统就会异步下载指定的文件
    script.onload = function(){ //script加载(即js文件下载完)完毕才执行函数
    	test()
    }
    document.head.appendChild(script) //script插入文档后 才会解析这个脚本 否则只是下载
    

    script.onload的能够兼容safari、chrome、firefox、opera,只有IE不兼容,IE没有load事件

    但IE有一套自己的方法,IE的script上有一个属性为状态码readyState,默认值是loading,会根据script的加载进度动态地改变属性值,script加载完毕时状态码的值为completeloaded

    IE也提供了一套监听机制用于监听script的状态码的变化

    script.onreadystatechange = function(){ //监听script的状态码的变化
    	if(script.readyState == 'complete' || 'loaded'){ //script加载完毕
    		// 逻辑
    	}
    }
    

    能够解决浏览器兼容问题的js文件加载完成立即执行函数逻辑的工具方法

    function loadScript(url,callback){ //callback回调函数可以是函数、字符串、数组等
    	var script = document.createElement('script')
    	script.type = 'text/javascript'
    	if(script.readyState){//IE
    		script.onreadystatechange = function(){ //监听script的状态码的变化
    		if(script.readyState == 'complete' || 'loaded'){
    			callback()
    			//eval(callback) 当callback为字符串(情况1)时,eval可将其当作函数来调用
    			//obj[callback]() 当callback为字符串(情况2)且所要调用的函数在js文件中是以对象属性的形式存在时
    		}
    	  }
    	}else{ //safari、chrome、firefox、opera
    		script.onload = function(){
    			callback()
    			//eval(callback)
    			//obj[callback]()
    		}
    	}
    	script.src = url //js文件的下载最好放在绑定监听事件之后,以免状态码在绑定监听事件之前已完成变化就不会被监听到
    	document.head.appendChild(script)
    }
    // loadScript('index.js',test) 
    //会报错 test is not defined 因为在传入test的时候,js文件还在函数中未被加载
    loadScript('index.js',function(){ //可传入匿名函数 传入时函数内部逻辑不会被解析
    	test()
    })loadScript('index.js','test()') //传入字符串形式(情况1)loadScript('index.js','test') //传入字符串形式(情况2)
    
    展开全文
  • JavaScript异步加载和网页渲染过程

    千次阅读 2020-03-11 22:50:15
    JavaScript异步加载原理分析 什么是网页渲染的过程? 什么是同步加载? 什么是异步加载? 网页的渲染过程 页面的渲染过程:DOMTree + CSSTree = renderTree 构建文档对象模型(DOM) 构建CSS对象模型(CSSOM) ...


    JavaScript运行机制

    • 什么的单线程
      没有多个线程可供主程序来调用,简单来说,就是同一时刻只能做一件事情
      在JavaScript中执行代码就是从上往下一行一行执行代码

    • 什么是多线程
      其他面向对象的语言Java、C++等等,都是多线程,即一个进程中可以并发多个线程,而每条线程并执行不同的任务,也就是说同一时刻可以同时进行多个任务

    • 为什么是单线程
      JavaScript主要就是来服务前端网页的(网页的交互功能),这就注定了JavaScript是单线程语言

      主要就是为了避免 bom 渲染冲突

    • 我们都知道影响渲染dom结构的有HTML和JavaScript,所有为了避免出现二者对同一dom同时操作而照成渲染冲突

      1. JavaScript代码执行的时候,浏览器的渲染会停止
      2. 服务端和客户端的JavaScript不能同时执行(否则有多个源头修改dom,会产生冲突)
    • 种种原因使得JavaScript为单线程,而且必须和浏览器渲染共用一个线程

    • 解决JavaScript单线程方法:异步

    • 其实JS是单线程异步加载,JS的所谓异步加载不过是把异步的代码放在最后执行,说白了JS的异步不过是单线程延时。

    回到顶部 目录

    网页的渲染过程

    页面的渲染过程:DOMTree + CSSTree = renderTree

    1. 构建文档对象模型(DOM)
    2. 构建CSS对象模型(CSSOM)
    3. 构建渲染树(Render Tree)
    4. 布局(Layout)
    5. 绘制(Painting)

    网页渲染过程
    回到顶部 目录

    什么是同步(Synchronous)加载?

    我们平时使用的最多的一种方式:<script src="http://zhangsan.com/script.js"></script>

    同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作

    优点:安全性高

    缺点:会照成网页的堵塞

    建议:把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。

    回到顶部 目录

    什么是异步(Asynchronous)加载?

    异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理

    • 代码执行时间:当整个网页解析完,执行代码(在网页而加载完之前)

    主要有三种方式:

    1. Script DOM Element(<async>属性是HTML5中新增的异步支持)浏览器部分不支持
      <script async></script>

      (function(){
          var scriptEle = document.createElement('script');
          scriptEle.type = "text/javascript"
          scriptEle.async = true;
          scriptEle.src = "xxx.js";
      
          var head = document.getElementsByTagName("head")[0];
          head.insertBefore(scriptEle, head.firstChild); 
      })();
      
      • 加载完就执行,只能加载外部脚本 W3C的标准
      • 该加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理
      • 如果有多个声明了async的脚本,其下载和执行也是异步的,不能确保彼此的先后顺序
      • async会在load事件之前执行,但并不能确保与DOMContentLoaded的执行先后顺序
    2. IE专用(IE9以下) (defer)
      <script defer></script>

      (function(){
          var scriptEle = document.createElement('script');
          scriptEle.type = "text/javascript"
          scriptEle.defer = true;
          scriptEle.src = "xxx.js";
      
          var head = document.getElementsByTagName("head")[0];
          head.insertBefore(scriptEle, head.firstChild); 
      })();
      
      • defer适用于外联脚本,如果script标签没有指定src属性,只是内联脚本,尽量不要使用defer (虽然IE4-IE7还支持对嵌入脚本的defer属性,但在IE8及之后的版本就只支持外部脚本,对不支持的会直接忽略defer属性)
      • 如果有多个声明了defer的脚本,则会按顺序下载和执行
      • defer脚本会在DOMContentLoaded和load事件之前执行
      • 使浏览器延迟脚本的执行,直到浏览器解析和渲染完页面
    3. 自己写一个把<script>标签插入到网页的最后面

      // 异步载入并执行脚本
      function loadasync(url){
          // 找到head标签
          var head = document.getElementsByTagName('head')[0];
          // 创建一个script元素
          var s = document.createElement('script');
          // 设置引入地址
          s.src = url;
          // 插入到head标签中
          head.appendChild(s);
      }
      
      • 注意这个loadasync()函数会动态的载入脚本–脚本载入到文档中,成为正在执行的JavaScript程序的一部分,既不是通过web页面内联包含,也不是来自web页面的静态引用

    解决异步加载的带来的影响方法

    1. 利用定时器的延时

      // 异步的过程
      var script = document.createElement("script");
      script.src = "test.js";
      document.head.appendChild(script);
      
      setTimeout("test()", 1000);
      
      • 弊端就是不知道准确时间
    2. 加载事件onload

      window.onload =  function(){
          test();
      }
      
      • 低版本的IE可能不支持,并且效率太慢
    3. 咱自己写一个

      // url: 地址
      // callback: 回调函数
      function loadScript(url, callback){
          var scriptEle = document.createElement('script');
          scriptEle.type = "text/javascript";
      
          if(scriptEle.readyState){
              // 状态码 readyState-->complete loaded 表示ie中script加载完成了
              scriptEle.onreadystatechange = function (){
                  if(scriptEle.readyState == 'complete' || scriptEle.readyState == 'loaded'){
                    callback();
                  }
              }
          }else{
              //加载完成的标志
              scriptEle.onload = function(){
                  // safari  chrome firefox opren
                  callback();
              }
          }
          //下载了指定地址的js文件
          scriptEle.src = url;
          //挂到DOM树上,此时才执行了js文件中的代码
          document.head.appendChild(scriptEle);
      }
      
      1. ES6里面的Promise 对象,日后会单独写一篇关于Promise异步的博客

    回到顶部 目录

    展开全文
  • JS异步加载的三种方式

    万次阅读 多人点赞 2016-02-27 12:39:07
    JS同步加载,异步加载,延迟加载,图片懒加载
  • scrapy之爬取js异步加载的数据

    千次阅读 2019-06-21 14:13:34
    众所周知,厉害一点的网页现在都采取ajax异步加载的形式在网页中加载数据了。也就是说,在get了网页的html后,可能根本找不到在浏览器中看到的内容。所以,我们需要调用chrome的调试台,去找到ajax异步加载目标数据...
  • AMD异步模块加载机制

    千次阅读 2018-04-09 15:49:49
    这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度,以及对JavaScript的熟悉程度,这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。开发一个自己会用的框架并不难,但开发一个...
  • 一:同步加载我们平时使用的最多的一种方式。?12&lt;script src="http://yourdomain.com/script.js"&gt;&lt;/script&gt;&lt;script src="http://yourdomain.com/script.js"...
  • js异步加载什么是js异步加载异步加载js的三种方式?1.defer 异步加载2.async 异步加载3.动态创建script标签 什么是js异步加载javascript 从执行机制来说是一个单线程加事件队列的语言,即代码会一行一行...
  • 文章目录什么是异步加载js异步加载js的三种方式?1.defer 异步加载2.async 异步加载3.动态创建script标签动态创建script标签的优点以及注意事项在动态引入js文件后,可直接调用里面的方法执行执行后出现的问题解决...
  • AMD异步加载机制,特点是:依赖前置, 先把模块需要用到的依赖全部加载 本质是利用promise实现异步加载 需要 用到 这篇文章实现 的 模块加载器 __load ... 新建amd.js文件 ...rj.config =
  • require js 同步加载和异步加载

    万次阅读 2018-08-31 18:25:41
    今天项目里看到了requireJs的代码,然后自己搜了下,发现网上的例子基本都是require([], function() { //代码...首先有个用来被引用的js文件,叫ccc.js,内容是 define(function(){  console.info('load ccc.js...
  • 异步脚本加载阻塞性脚本JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕浏览器是按照从上到下的顺序解析页面...
  • 实现完上文的AMC规范 异步加载机制后, https://blog.csdn.net/weixin_38407447/article/details/117407660 这里实现一下CMD 规范的 异步加载机制 同样 需要 用到 这篇文章实现 的 模块加载器 __load ...
  • 转载来源信息: 作者:子晓_ 来源:CSDN ... 正文: 不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。...JavaScript是按照语句出现的...
  • 一:同步加载 我们平时使用的最多的一种方式。 <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞...
  • 授权转载自:Michael-lzghttps://github.com/Michael-lzg/my--articlewebpack 异步加载原理本文在github做了收录github...
  • 因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览器解析器遇到时,会立即加载加载:下载,解析和执行),浏览器对其他资源和文档的加载会停止。为了提高页面的加载...
  • Ajax异步加载机制

    2017-04-05 01:02:58
    ajax 实现页面的异步更新,即是说不需要重新加载页面就可以对页面的部分数据进行及时更新。Ajax的主要方式是XMLHttpRequest对象。 二、Ajax的使用 (1)xhr创建 由于ajax是基于XMLHttpRe
  • AMD全称是:Asynchronous Moudle Definition,即异步模块加载机制。 作为一个规范,只需定义其语法API,而不关心其实现。AMD规范简单到只有一个API,即define函数: define([module-name], [array-of-dependencies]...
  • 异步加载 js 的几种方式 <script src="script.js"></script> 以上写法是平常常用的写法,浏览器遇到该script 脚本会立即加载并执行此脚本,是一个同步的过程。 有时候我们想让 script 脚本异步加载...
  • ”> 《el-button type="primary" @click="submitForm('ruleForm');test()">登录》 ...各位大佬,能用js异步执行的原理解释下面代码执行顺序吗?其中window.location.hrefsh是异步的吗?感激不尽!!!!
  • 爬取事务所列表 进入“会计师事务所信息查询”页面后,不输入信息直接点击查询”按钮,得到包含9400多条会计师事务所的列表,说明是全部会计师事务所。对“查询”按钮检查元素,发现执行doQuery()这个js。 ...
  • 异步加载

    2019-07-15 18:57:31
    异步加载 异步基础知识: 回调函数Console:https://developer.mozilla.org/zh-CN/docs/Web/API/Console 纯小白科普 1.异步加载是什么?和同步加载有什么区别吗? 2.异步加载存在的意义是什么?为什么要采用异步加载...
  • 前言: ...script>标签。主要探讨<...对应的业务场景:从js加载机制,去优化首次加载页面白屏时间过长的问题 要点:  1.script标签用外链的src引入文件时,内嵌的js代码无效。  2.只要不存在defer...
  • 异步加载js详解

    2017-06-21 08:52:19
    因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览器解析器遇到<script>时,会立即加载加载:下载,解析和执行),浏览器对其他资源和文档的加载会停止。为了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,791
精华内容 21,116
关键字:

js异步加载机制