前端提高篇（一）JS进阶1引入及阻塞加载

程序员文章站 2024-01-04 20:45:16

...

JS引入

看这篇文章，还有这篇
第二篇在外部引入中补充了一点，并用代码示例

阻塞加载

背景

当从外部引入js文件时，

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻塞加载</title>
    <script src="1.js"></script>
</head>
<body>
    <div id="div1"></div>
</body>

这种情况下，如果js文件中有获取html文件中标签的代码，则会出现获取到id='div1’的对象为null

var div1 = document.getElementById('div1');

前端提高篇（一）JS进阶1引入及阻塞加载

原因

系统会下载、解析、执行js文件，当执行时，发现没有div1的声明定义，就会返回null，浏览器处理JS的详细的解释看这篇文章；
当时的解决办法是把script引入放在body最后面，html文件先执行了div，再引入js：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻塞加载</title>
    
</head>
<body>
    <div id="div1"></div>
    <script src="1.js"></script>
</body>

就能得到div1对象：
前端提高篇（一）JS进阶1引入及阻塞加载
这种办法可以确保js想要获取的对象都能在执行js文件前得到定义，声明；还可以尽可能加快页面加载速度，body中的页面才是展示给用户的，可以先看一部分

js默认是用阻塞加载的加载方式

如果js代码不放在body最后面，页面需要等执行完js文件，才来加载页面，给人的感觉就相对较慢（比如html文件中有1万个div要显示），页面一直转圈圈，等js执行结束，才加载显示body里的内容

如果js代码的引入放在body最后，会先显示部分页面，转圈圈，页面静态部分显示完全之后解析执行js代码，执行完毕之后，页面加载结束