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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 高级程序设计 学习笔记02章 script元素的认知相关的知识,希望对你有一定的参考价值。

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元素就不会出现在用户的眼前。

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

  

以上是关于javascript 高级程序设计 学习笔记02章 script元素的认知的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript高级程序设计(第三版)学习笔记202123章

JavaScript高级程序设计(第三版)学习笔记111217章

《JavaScript高级程序设计(第四版)》学习笔记第3章

《JavaScript高级程序设计(第四版)》学习笔记第3章

javascript 高级程序设计 学习笔记01章 javascript的认知

JavaScript高级程序设计(第三版)学习笔记8910章