02
2019
12

怎样引入JS代码

在HTML中引入JS代码:


页面引入js的方式主要有以下两种:

    1、在HTML文档中,通过 script 标签嵌入;

    2、使用 src 属性引入外部 js 文件。  


script 标签和部分属性作用:


在浏览器加载 script 元素时,无论是直接写在html中还是通过 script 元素来包含外部的js文件,只要不存在 defer 和 async 属性,浏览器都会按照元素在页面中出现的先后顺序对他们进行解析,也就是说:在第一个 script 元素包含的代码解析完成后,才开始解析第二个元素。


async(异步脚本) 只对外部脚本文件有效,表示应该立刻下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。同时也不保证按照指定元素的先后顺序执行。

defer(延迟脚本) 只对外部脚本文件有效,表示脚本可以延迟到文档完全被解析和显示之后再执行,即表明脚本在执行时不会影响页面的构造,相当于告诉浏览器立即下载,但延迟执行。

注意事项


浏览器遇到 body 标签时开始呈现内容,所以为了避免呈现页面时卡顿,通常将js文件放在 body 元素中页面内容的后面。

defer:HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行,不过现实中,延迟脚本不一定会按照顺序执行,也不一定在 DOMContentLoaded 事件触发之前,因此,最好只包含一个延迟脚本。

async:异步脚本一定会在页面的load事件前执行,但可能会在 DOMContentLoaded 事件之前或者之后执行。

支持XHTML的浏览器兼容问题:有些浏览器中,可以通过将页面的 MIME 类型指定为 application/xhtml+xml 时会触发XHTML模式。这种模式下,script 标签中的特殊规则并不适用,比如 a < b 中的小于号就会被当做开始一个新标签来解析,所以,要使用相应的HTML实体(&lt;)代替;或者使用外部文件,因为 HTML 和 XHTML 包含外部文件的语法是相同的;或者使用 CData 标签来包含js代码,为了使得不兼容XHTML的浏览器也能正确运行,使用js注释将 CData 标记符号注释掉就可以了,效果如下:


<script type="text/javascript">

//<![CData[

  function compare(a, b) {

    if (a < b) {

      alert("A is less than B");

    } else if (a > b) {

      alert("A is greater than B");

    } else {

      alert("A is equal to B");

    }

  }

//]]>

</script>


早期浏览器不兼容js,为了让页面平稳退化,可以使用 noscript 元素提醒用户。标签里的内容只有在浏览器不支持脚本或者浏览器支持脚本,但脚本被禁用的情况下显示,使用方法如下: 


<body> 

<noscript> 

<p>本页面需要浏览器支持(启用)JavaScript。 

</noscript> 

</body> 

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。