javascript 高级程序设计 学习笔记02章 script元素的认知

Posted 2020-10-06

hello world:

　　这一章的主要内容是 学习对 script 元素的 主要功能 和 使用 

　　script 元素 是我们用来 载入javascript 脚本代码的 主要方式，是浏览器厂商为了 统一脚本代码的嵌入 而 创造的元素。我来看看 script元素 有哪些功能和属性吧。

　　html 规范 为script元素 定义了6大属性：

　　1. scr 属性（可选）  这个属性主要目的是 通过src 指定外部脚本文件的文件地址，从而把外部文件里的脚本代码嵌入到html页面当中来。如果用了src指定外部脚本文件地址 那么这个 script元素的内嵌脚本代码将被忽略。建议使用外部文件的方式加载脚本。

　　2. type属性（可选） 这个属性的作用是 指定script文件代码的类型 就是(MIME)类型。一般内嵌代码的script元素 会要求写上 type 属性 ，如果不写 默认type属性的值 就是text/javascript 也是为了统一。

　　3. async属性 （可选） 异步脚本，只有当为 外部文件加载的时候 才有用 ，目的是告诉浏览器 立即下载此脚本，并解析执行，而不会妨碍 页面其他资源的加载 和 页面的渲染。用了 这个属性的 script 元素 一定会在 页面的load事件 之前触发，而且不会保证 浏览器 会 按照页面的script元素 出现的顺序 而执行代码。加上这个属性后的script元素的脚本代码，最好不要有修改dom的操作，不然可能会出大问题。

　　4.defer属性 （可选） 延时脚本，只有当为 外部文件加载的时候 才有用，目的是告诉浏览器 立即下载次脚本，但是延时执行，加了此属性的script元素 会等到页面全部加载和显示完成以后 才会执行此script嵌入的脚本代码，如果多个script元素都运用了 此属性的  那么浏览器一般会按照 运用了defer属性的script元素在页面出现的顺序 而解析和执行 脚本文件的代码，但是 世事无绝对，所以一个页面 最好只有一个defer属性的script元素 不管是内嵌 还是外链 。

　　5.charset 属性（可选） 是指定当前脚本文件代码的 字符集编码。目前已无用了。

　　6.language属性 （可选） 是指当前脚本的语言，目前也已经 无用了。

　　当页面中有多个script 元素的时候并且script元素 没有defer,async属性时 浏览器会 按照script元素 出现的位置 一个解析执行完毕以后 ，开始解析执行第二个 以此类推。。。

　　script 元素是一个 具有阻塞功能的元素 不管是内嵌还是外链 当浏览器在 下载和解析并执行一个script元素内的脚本代码时 会停止页面 其他资源的下载和页面的渲染，所以我们的做法是 通常把script元素的脚本代码放在 </body>标签之前 内容之后。即使加上了defer,async属性 也最好放在这个位置。

　　外部js文件 的后缀并不是 必须的 所以我们可以用 jsp php来嵌套 让服务器端 动态生成js文件 但是一定要服务器端 返回正确的MIME类型。

　　script 元素的 src属性 是一个神奇的属性，可以用来加载不同域的 文件内容 叫做跨域 其实跨域并不是 script的专长 而是src属性的 技能，就像img元素 一样 img元素的src属性 和 script元素的src是一样的 都具有跨域访问和下载资源的技能。

　　但是这也为 网页带来了一定的安全隐患 如果要用 src属性来跨域 那么要么其他域是我们自己掌控的 要么是我们信任的，否则会出大问题。

　　还有种情况就是 在script代码内嵌脚本代码的时候 在xhtml中和html中 使用脚本代码的解析规则是不一样的 。如果是内嵌脚本代码 那么在xhtml中 一定要把 所有特殊字符 转换成为 实体的字符。不然会报错误 。但是如果是 外部链接 那么xhtml和html的解析规则就是一样的 不用做转换。

　　详细看看 script内嵌和外链的好处：

　　使用外链脚本文件的好处 就是：

　　1. 可维护性：开发人员 做到了 行为和结构分离，集中编写脚本 ，更容易维护。

　　2. 缓存：用外部链接的方式 可以通过 指定缓存链接来缓存 我们指定的 文件。（适用于离线开发），减少请求量，加快网页的加载速度。

　　3.用了外部链接以后 html 和 xhtml对 外部脚本代码的解析规则就是一样的了 不用再做 hack和 字符转换。

 

　　最后是 如果浏览器不支持 脚本 那么 就用<noscript>请开启脚本的使用！！！</noscript>

　　如果浏览器支持脚本 那么这段html元素就不会出现在用户的眼前。

　　好了 今天就学习到这里吧。明天继续，加油。