前端周记-01

目标：掌握script标签

作者：嘟嘟嘟

虽是自己理解与总结，但更是打工人抛🧱砸人(抛砖引玉)...话不多说，开始搞起

首先，前端开发是由HTML、CSS、JS三部分组成的，HTML和CSS是页面的表现形式，JS是页面最主要的交互形式，虽然HTML和CSS博大精深，但目前先将HTML,CSS方面放在未来某个时间段再详细赘述

script元素是由网景公司创造出来，并最早在Netscape Navigator 2中实现的。后来，这个元素被正式加入到HTML规范

script标签属性
1.async(可选):异步加载，不会按序执行，它不依赖于任何其他js脚本，加载完成后立即执行，在执行期间，会阻塞HTML的解析。(无依赖的js可以按async方式加载)

2.defer(可选):异步加载，按序执行，它不同于async的地方是它不会在下载完成后立即执行，它会在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。（脚本代码依赖于页面中的DOM元素或者依赖于其他js文件） // 注：DOMContentLoaded事件与load事件的区别：DOMContentLoaded会在HTML dom树解析完成后触发，load事件会在所有资源加载完成后再触发

3.src(可选)：不加async或defer的情况下同步加载、阻塞html解析，按序执行，在标签属性里加了src再在标签里加入代码时，标签里的代码不会被执行，src的主要作用是加载外部资源，亦可通过src进行跨域请求后端数据(Jsonp)
// 注：Jsonp的原理是通过script标签的src绕过跨域(跨域出现的原因是因为协议、端口、域名三者有一项不一致则会导致跨域)，经过时间的洗礼，最终跨域的解决方案是(CORS：服务端通过设置-响应头-Access-Control-Allow-Origin：xxx 允许跨域的域名，亦可设置通配符*；但如果需要使用cookie，则不可以使用通配符，在服务端设置完响应头后，在js里就可以使用ajax去请求服务的内容。注：IE中为：XDomainRequest；其他浏览器为XMLHttpRequest；不过现阶段项目并不需要封装，完全可以使用已成熟的axios或其他封装好的模块包)

4.type(可选)：表示代码块中脚本语言的内容类型(默认值为text/javascript)，只有将type设置为module时，才可以在该代码块中使用import和export

//其余用的不是很多

5.integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性,如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络不会提供恶意内容

6.crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。

7.charset：可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。

8.language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。

题外话：html文件js文件最好不要全部内嵌在html文件中，最好使用外部引入，可维护、通过配置可以缓存js文件

js高程总结

1.要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
2.所有script元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在script元素中的代码必须严格按次序解释。
3.对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把script元素放到页面末尾，介于主内容之后及body标签之前。
4.可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
5.可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
6.通过使用noscript元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则noscript元素中的任何内容都不会被渲染。

JS-01-(script标签)

前端周记-01