这次给大家带来在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);
});不会阻塞页面渲染
async设置为false可以保证b.js在a.js后面执行
在这段代码后面加载的脚本文件,会等在b.ja执行完成后再执行
相关知识点总结
包含在
标签内部的JavaScript代码,将被从上到下一次解析无论以哪种方式嵌入代码,只要不存在defer和async属性,浏览器都会按照
标签在页面中出现的先后顺序对它们进行解析加载外部脚本的优点:可维护性、可缓存、适应未来
放在底部的原因1、避免“阻塞效应”。2、避免,在DOM结构生成之前调用DOM节点,而产生错误
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
随缘网络PHP企业网站管理系统V2.0正式发布,该企业网站管理系统采用PHP+MYSQL编写,界面色调风格延续之前1.0版管理系统简洁浅蓝色风格,稍有所变动。变更分类树形目录方式采用jquery库,产品,文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题,希望大家在使用中有什么问题可到本站论坛提出,我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服










