script元素

六个属性:

  • async:规定异步执行脚本(仅适用于外部脚本)。
  • charset:规定在外部脚本文件中使用的字符编码。
  • defer:规定是否对脚本执行进行延迟,直到页面加载为止。
  • language:不赞成使用。规定脚本语言。请使用 type 属性代替它。
  • src:规定外部脚本文件的 URL。
  • type:表示编写代码使用脚本语言的内容类型,默认: text/javascript

两种使用方式:

  • 直接在页面中嵌入javascript代码
  • 引用外部javascript文件

标签的位置

html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到script脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。所以,大部分网上讨论是将script脚本放在body之后,那样dom的生成就不会因为长时间执行script脚本而延迟阻塞,加快了页面的加载速度。但又不能将所有的script放在body之后,因为有一些页面的效果的实现,是需要预先动态的加载一些js脚本。所以这些脚本应该放在body之前。

延迟脚本(defer属性)

用法:

<script src="../CGI-bin/delscript.js" defer></script>

定义:defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题,加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!

请注意两点:

  1. 不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
  2. 而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

一个常用的优化性能的方法是:当脚本不需要立即运行时,在script标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后,IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在 document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要 在页面加载过程中或加载完成后执行,使用defer属性得到的好处就不太大。

异步脚本(async)

用法:

<script type="text/javascript" src="demo_async.js" async="async"></script>

浏览器对标记有async属性或defer属性的scripts会立即加载并解析,同时也会支持依赖于这个脚本进行初始化的onload事件。async属性和defer属性的不同之处在于何时执行这个脚本。标注有async属性的Script会在下载完成后即可执行,不需要等待window的load事件。这意味着标记有async属性的脚本并不一定会按在页面中嵌入的顺序执行。而标记有defer属性的脚本却一定会按它们在页面上的顺序依次执行。执行会在解析完全完成后开始,但会在document的DOMContentLoaded事件之前。

延迟脚本和异步脚本区别

  1. defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics
Copyright © Eternally all right reserved,powered by Gitbookmodified at 2019-07-23 05:04:02

results matching ""

    No results matching ""