《JavaScript高级程序设计》Chapter02 <script>元素

<script>

  • 现代web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面
<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
	<body>
    	<!--页面内容-->
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

  • 推迟执行——属性defer：浏览器立即下载并解析但延迟执行脚本，延迟到整个页面都解析完毕后再执行

    • 仅对外部脚本文件有效
    • HTML5规范要求他们按顺序执行（最好只包含一个这样的脚本）

  • 异步执行——属性async：浏览器立即下载并解析脚本，之后可立即执行

    • 仅对外部脚本文件有效
    • 不一定会按在页面中嵌入的顺序执行
    • 异步脚本不应该在加载期间修改DOM

  • 动态加载脚本：向DOM动态添加script元素

    let script = document.createElement('script');
script.src = 'hello.js';
script.async = false;
document.head.appendChild(script);
    • 默认情况下以此形式创建的<script>元素为异步加载（相当于添加了async属性），但并不是所有浏览器都支持async属性；因此，可以明确其为同步加载【script.async = false;】

  • XHTML中的变化

    • XHTML编写规则更加严格

      • 使用JavaScript必须指定type属性为"text/javascript"

      • html中的<script>标签内会应用特殊规则，而xhtml不会（script标签内的js中的'<'在xhtml中会被解释为一个标签的开始）

    • 解决：将所有代码包含在一个CDATA块中

      • 在不支持CDATA的非XHTML兼容浏览器中不可行——CDATA标记使用JavaScript注释来抵消
      <script type="text/javascript">
//<![CDATA[
	function compare(a,b){
		if(a<b) console.log("a is smaller");
		else if(a>b) console.log("b is smaller");
		else console.log("a is equals to b"),
	}
//]]>
</script>

<noscript>

  • 可以包含任何可以出现在<body>中的HTML元素，<script>除外
  • 当：
    • 浏览器不支持脚本
    • 浏览器对脚本的支持被关闭

​ 满足其一时，<noscript>中的内容将被渲染

posted @ 2022-09-25 22:04  CodingSaltFish  阅读(49)  评论(0)    收藏  举报