细谈在HTML中使用JavaScript

前言

JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操做浏览器，实现各类动态效果

JavaScript代码嵌入网页的方法

一、<script>元素直接嵌入代码

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

二、<script>元素加载外部脚本

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

<script>标签相关属性

type属性

• <script>标签默认就是JavaScript代码，嵌入javascript脚本时，type属性能够省略
• 若是type属性的值，浏览器不认识，就不会执行其中的代码，因此能够在<script>标签中嵌入任意的文本内容，只要加上一个浏览器不认识的type属性就行，浏览器不会执行也不会显示它的内容，可是这个<script>节点依然存在于DOM之中，可使用<script>节点的text属性读取它的内容

defer属性

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer属性的运行流程：

1. 浏览器开始解析HTML网页
2. 解析过程当中，发现带有defer属性的<script>元素
3. 浏览器继续往下解析HTML网页，同时并行下载<script>元素加载的外部脚本
4. 浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本

须要注意：

• 异步加载资源
• 按照顺序执行脚本
• 使用defer加载的外部脚本不该该使用document.write方法

async属性

<script src="a.js" async></script>
<script src="b.js" async></script>

async属性的运行流程：

1. 浏览器开始解析HTML网页
2. 解析过程当中，发现带有async属性的<script>标签
3. 浏览器继续往下解析HTML网页，同时并行下载<script>标签中的外部脚本
4. 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
5. 脚本执行完毕，浏览器恢复解析HTML网页

须要注意：

• 异步加载资源
• 并不会按照顺序执行JS，谁先下载完，谁就先执行
• 使用async加载的外部脚本不该该使用document.write方法

async和defer属性概括

• 都能解决“阻塞效应”
• 都是异步加载资源，但执行顺序不同
• 若是脚本之间没有依赖关系，就使用async属性，若是脚本之间有依赖关系，就使用defer属性

---

Load事件

• 浏览器已经加载了全部依赖的资源，包括图片样式表等
• 能够在load事件触发时得到图片的大小
• 绑定到window，window.addEventListener("load",ready);

DOMContentLoaded事件

• 浏览器已经彻底加载了HTML，DOM树已经构建完毕
• JS能够访问全部DOM节点，可是图片和样式表等外部资源可能没有下载完毕
• 绑定到document：document.addEventListener("DOMContentLoaded",ready);

涉及到async的知识点

• 异步async脚本必定会在页面load事件以前执行
• 异步async脚本可能会在DOMContentLoaded事件触发以前或者以后执行

动态生成脚本

['a.js', 'b.js'].forEach(src => {
    const script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

• 不会阻塞页面渲染
• async设置为false能够保证b.js在a.js后面执行
• 在这段代码后面加载的脚本文件，会等在b.ja执行完成后再执行

相关知识点总结

1. 包含在<script>标签内部的JavaScript代码，将被从上到下一次解析
2. 不管以哪一种方式嵌入代码，只要不存在defer和async属性，浏览器都会按照<Script>标签在页面中出现的前后顺序对它们进行解析
3. 加载外部脚本的优势：可维护性、可缓存、适应将来
4. <script>放在底部的缘由一、避免“阻塞效应”。二、避免，在DOM结构生成以前调用DOM节点，而产生错误