在HTML中使用JS方法总结

php中世界最好的语言

发布时间：2018-05-25 11:38:28

2422人浏览过

来源于php中文网

原创

这次给大家带来在HTML中使用JS方法总结，在HTML中使用JS的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

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

JavaScript代码嵌入网页的方法

1、元素直接嵌入代码

2、元素加载外部脚本

标签相关属性

type属性

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

defer属性

defer属性的运行流程：

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

需要注意：

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

async属性

async属性的运行流程：

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

需要注意：

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

async和defer属性归纳

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

动态生成脚本

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