在HTML中使用JS方法总结

前言

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

JavaScript代码嵌入网页的方法

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

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

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

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

<script>标签相关属性

type属性

defer属性

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

defer属性的运行流程：

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有defer属性的<script>元素

3. 浏览器继续往下解析HTML网页，同时并行下载<script>元素加载的外部脚本

4. 浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本

需要注意：

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网页

需要注意：

async和defer属性归纳

动态生成脚本

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

相关知识点总结

1. 包含在<script>标签内部的JavaScript代码，将被从上到下一次解析

2. 无论以哪种方式嵌入代码，只要不存在defer和async属性，浏览器都会按照<Script>标签在页面中出现的先后顺序对它们进行解析

3. 加载外部脚本的优点：可维护性、可缓存、适应未来

4. <script>放在底部的原因1、避免“阻塞效应”。2、避免，在DOM结构生成之前调用DOM节点，而产生错误

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

怎样处理MySQL数据库拒绝访问

怎样实现六边形按钮特效

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com