JS基础
script 元素
- async:可选,表示应该立即开始下载脚本,但是不能阻止其他页面动作,比如下载资源挥着等待其他脚本加载,只对外部脚本有效,
- charset:可选,使用 src 指定的代码字符集,这个属性很少使用,大多数浏览器不在乎它的值。
- corssorigin:可选,配置相关请求的 cors(跨源资源共享)设置,默认不使用 CORS, crossorigin="use-credentials"设置凭据标志,意味着出站请求会包含凭据,
- defer:可选。表示在问达能解析和显示完成后,再执行脚本是没有有问题的。只对外部脚本有效,
- integrity:可选允许比对接收到的资源和指定的加密协议以验证子资源的完整性,如果接受到的资源的签名,与这个属性指定的签名不匹配则页面报错,脚本不会执行,这个属性可以用与确保内容分发网络不会提供恶意内容
- src:可选。表示要执行的代码的外部文件
- type:可选,用于指定代码块中的语言类型,按照管理,这个始终都是“text/JavaScript”。如果这个值时“module”则代码会被当成 ES6 模块,
包含在 script 标签里的内容,会从上至下解释,在<\script>元素中的代码被执行完毕之前,页面的其余内容不会被加载,也不会被显示,就形成了阻塞
在使用行内<\script>代码时,注意代码中崩出现字符串<\script>。比如以下代码,
会导致浏览器报错,浏览器解析行内脚本会将其当乘结束的<\script>的<\script>标签,想避免这个问题,只需要转义字符\即可
<script>
function msg(){
console.log("</script>")
}
</script>
这样修改之后就可以被浏览器完全解释,不会导致任何错误, 8. 在解释外还不 JavaScript 文件时页面也会阻塞,(阻塞时间包括文件的下载时间,)在 XHTML 可以忽略结束标签, 9. 另外使用了 src 属性的<\script>的元素不应该在其内部写入代码,如果两种方式都使用的话,则浏览器只会下载执行脚本,而忽略内部代码, 10. <\script>最为强大,同时也备受争议的特性时,它可以包含来自外部域的 JavaScript 代码,与 img 的 src 很像
"<\script src='www.baidu.com'><\script>"
浏览器在计息这个资源时,会向 SRC 指定的地址发送一个 get 请求,以取得相应资源,这个初始的请求不受浏览器同源策略限制,但返回被执行的 JS 代码则受限制,当然请求仍然收父页面 HTTP/HTTPS 协议的限制
这就可能收到恶意的攻击,如果引用了别人服务器上的 JS 文件,就要格外小心,因为恶意的程序员,随时可能替换这个文件,在百翰外部与的 JS 文件时,要确保该域是自己所有的,或者该域是一个可靠的来源,<\script>时防范这种问题的一个武器,但是不是所有的浏览器都支持,这个属性,
不管包含的是什么代码,浏览器都会按照<\script>在页面中出现的顺序依次去解析他们,前提是他们没有使用 defer 和 async 属性,第二个<\script>代码会在第一个<\script>执行完毕之后进行,第三个会在第二个执行完毕之后进行,依次类推。
标签位置
- 过去所有的<\script>元素都放在 head 标签内部,如下面的例子,
<!DOCTYPE html>
<html>
<head>
<title>案例1</title>
<script src="example.js"></script>
<script src="example2.js"></script>
</head>
<body>
<h2>这是页面内容</h2>
</body>
</html>
这种做法的主要目的,就是把外部的 CSS 和 JavaScript 文件都集中到一起,不过把所有 JavaScript 文件都放在头部,也就意味着必须把所有的 JavaScript 文件都加载完毕才会开始渲染页面,对于需要很多 JavaScript 文件的页面这回导致,渲染时间明显变长,在此期间页面窗口完全空白,为解决这个问题,现代 web 应用程序将所有的 Javascript 引用放到了<\body>元素中的页面内容之后,如下
<!DOCTYPE html>
<html>
<head>
<title>案例1</title>
</head>
<body>
<h2>这是页面内容</h2>
<script src="example.js"></script>
<script src="example2.js"></script>
</body>
</html>
2.推迟执行脚本
defer 属性,这个属性表示这个脚本在执行的时候不会改变页面结构,完全可以等到整个页面解析完成以后,再运行,这个属性会告诉浏览器,应该立即下载,但执行会延迟,会等待 html 标签执行完毕之后,再执行 3.异步执行脚本
async async 与 defer 相似,都只是用与外部脚本,都会告诉浏览器立即开始下载,不过与 defer 不同的是,async 并不能保证能按照出现的顺序执行,
给脚本添加 async 的目的是告诉浏览器 ,不必等待脚本下载和执行完毕再加载页面,同样也不必等待脚本下载执行完毕。再去执行其他脚本,正因为如此异步脚本不应该在加载期间修改 DOM
4.动态加载脚本
这个方式不推荐,很影响性能,而且会造成混乱。
5.行内代码,与外部文件
这两种方式,比较推荐外部文件,有以下优点
一.可维护性
二.缓存,如果两个 html 文件用到相同的 JS 文件,浏览器会根据缓存机制,只加载一次。意味着网页的加载速度更快
三.适应未来,