js延迟加载的三种方式【黑马java培训】

更新时间:2019年07月26日 11时15分39秒来源:黑马程序员论坛

【上海校区】js延迟加载的三种方式

前言：

我们在给dom对象动态绑定事件的时候，需要通过选择器获取dom节点。但是很多人习惯将<script></script>写在<head></head>中，这样就会造成获取dom节点的时候发生错误，这里需要使js的加载顺序后于dom，一下是三种处理方法：

一、采用window对象的onload事件

这种方式是我们最常用的一种方法，它的作用是当页面加载完成之后中执行<script></script>中的代码。

案例演示：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myDemo1</title>
    <script type="text/javascript">

        window.onload = function () {

            document.getElementById("myBtn").onclick = function () {

                var myApp = document.getElementById("app");

                myApp.innerHTML = "这是一个div";
            }

        }

    </script>

</head>
<body>
    <div id="app"></div><br>
    <button id="myBtn">点我</button>
</body>
</html>

二、采用<script>标签的defer属性

案例演示：
myDemo1.js：

[JavaScript] 纯文本查看 复制代码

document.getElementById("myBtn").onclick = function () {
    var myApp = document.getElementById("app");

    myApp.innerHTML = "这是一个div";
}

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myDemo1</title>
    <script src="../js/myDemo1.js" defer="defer"></script>

</head>
<body>
    <div id="app"></div>
    <button id="myBtn">点我</button>
</body>
</html>

三、采用<script>标签的async属性

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。<script>标签的async属性可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。

注意：Internet Explorer 9 及之前的版本不支持 <script> 标签的 async 属性。

案例演示：
myDemo1.js：

[JavaScript] 纯文本查看 复制代码

document.getElementById("myBtn").onclick = function () {
var myApp = document.getElementById("app");

myApp.innerHTML = "这是一个div";
}

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myDemo1</title>
    <script src="../js/myDemo1.js" async="async"></script>

</head>
<body>
    <div id="app"></div>
    <button id="myBtn">点我</button>

</body>
</html>

小结：
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。缺点：不能控制加载的顺序

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

js延迟加载的三种方式【黑马java培训】

相关阅读