js 延迟加载的方式有哪些?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

js 延迟加载的方式有哪些?

剑曼红尘 2020-04-03 15:31:37 220

js 延迟加载的方式有哪些?

JavaScript
分享到
取消 提交回答
全部回答(2)
  • 景凌凯
    2020-04-03 22:00:38

    1.defer属性

    浏览器会并行下载 file.js和其它有 defer 属性的script,而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了,超过10多年了!Firefox从 3.5 开始支持defer属性 。

    注:所有的defer脚本保证是按顺序依次执行的。

    2.async属性

    async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

    Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有IE 都支持异步加载。

    3.动态创建DOM方式 (使用的最多) 1 2 3 4 5 6 7 8 9 10 11 12 13

    PS: 这里插一句addEventListener() 也是常考的知识点之一:

    addEventListener() 方法用于向指定元素添加事件句柄。
    
    使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
    
    语法:element.addEventListener(event, function, useCapture)
    
            event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
            function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
            useCapture (可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【true:事件句柄在捕获阶段执行; false:默认,事件句柄在冒泡阶段执行】
    

    1 2 3 4 5 6 7 8

    该实例使用 addEventListener() 方法来向按钮添加点击事件。

    效果如图:

    4.使用Jquery的getScript()方法 1 2 3

    $.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数 console.log("脚本加载完成") });

    从源码可以看出,这个方法最后还是调用了jQuery.ajax()来请求了js文件的。

    5.使用setTimeout延迟方法的加载时间

    延迟加载js代码,给网页加载留出时间 1 2 3 4 5 6 7 8 9 10

    6.让js最后加载

    例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度。

    上述方法5,6也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。 1 2 3 4 5 6 7 8 9 10 11 12

    //这些代码应被放置在标签前(接近HTML文件底部)

    这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。

    使用此段代码的步骤:

        复制上面代码
        粘贴代码到HTML的标签前 (靠近HTML文件底部)
        修改“defer.js”为你的外部JS文件名
        确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。
    

    注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

    0 0
  • 剑曼红尘
    2020-04-03 15:32:13

    js 延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

    一般有以下几种方式:

    • defer 属性
    • async 属性
    • 动态创建 DOM 方式
    • 使用 setTimeout 延迟方法

    js 的加载、解析和执行会阻塞页面的渲染过程,因此我们希望 js 脚本能够尽可能的延迟加载,提高页面的渲染速度。

    我了解到的几种方式是:

    第一种方式是我们一般采用的是将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。

    第二种方式是给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。

    第三种方式是给 js 脚本添加 async 属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成后立即执行 js 脚本,这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的,一般不会按照代码的顺序依次执行。

    让 JS 最后加载

    0 0
添加回答
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程