摘要:前言是浏览器的内置脚本语言。避免,在结构生成之前调用节点,而产生错误
前言
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属性
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执行完成后再执行
相关知识点总结包含在标签内部的JavaScript代码,将被从上到下一次解析
无论以哪种方式嵌入代码,只要不存在defer和async属性,浏览器都会按照标签在页面中出现的先后顺序对它们进行解析
加载外部脚本的优点:可维护性、可缓存、适应未来
放在底部的原因1、避免“阻塞效应”。2、避免,在DOM结构生成之前调用DOM节点,而产生错误
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95231.html
摘要:前言是浏览器的内置脚本语言。避免,在结构生成之前调用节点,而产生错误 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 function sayHello() { alert(hello!); ...
摘要:对其的解释为概述监视一个对象的某个属性是否发生变化在该属性变化时立即触发指定的回调函数语法参数想要监视值是否发生变化的指定对象的某个属性的属性名称当指定的属性发生变化时执行的回调函数在内查看其声明如下可以看到这两个方法是只针对内核的浏览器使 MDN 对其的解释为: 概述: 监视一个对象的某个属性是否发生变化,在该属性变化时立即触发指定的回调函数. 语法: object....
摘要:如果存在一个同名的全局变量,这个全局变量也不会被重写,除非同名的局部变量被声明时使用关键字。 博客原文地址:Claiyre的个人博客 https://claiyre.github.io/博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载,请在文章开头注明原文地址------------------------------------------...
摘要:注意事项声明函数时候处理业务逻辑区分和单例的区别,配合单例实现初始化构造函数大写字母开头推荐注意的成本。简单工厂模式使用一个类通常为单体来生成实例。 @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 一直对设计模式不太懂,花了一下午加一晚上的时间,好好的看了看各种设计模式,并总结了一下。 设计模式简介 设计模式概念解读 设计模式的发展与在JavaScript中的应用 ...
阅读 1399·2021-09-28 09:44
阅读 2480·2021-09-28 09:36
阅读 1027·2021-09-08 09:35
阅读 1966·2019-08-29 13:50
阅读 790·2019-08-29 13:29
阅读 1104·2019-08-29 13:15
阅读 1705·2019-08-29 13:00
阅读 2954·2019-08-26 16:16