浅析＜script＞

最新推荐文章于 2023-03-14 15:12:26 发布

静静子~

最新推荐文章于 2023-03-14 15:12:26 发布

阅读量328

点赞数 1

分类专栏： js javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_36963245/article/details/108445487

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

这几天在看《javascript高级程序设计》这本书，把一些自己的理解，和之前不太熟悉的点记下来，也顺便做个分享~

`<script>`元素的几个属性

async 是否异步下载脚本，即在下载脚本的同时，不影响其他脚本的执行。只对外部脚本有效

<html>
  <head>
  	<!--async会告诉浏览器，页面无需等待这两个js文件下载并解析完成后才进行其他操作，无法保证这两个js脚本的执行顺序，因此这两个js脚本之间最好不要有依赖关系，也建议不要在这两个脚本中操作DOM-->
  	<script src="1.js" async></script>
  	<script src="2.js" async></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>

defer 是否将脚本延迟到文档解析完成和显示之后再执行。只对外部脚本有效

<html>
  <head>
  	<!--含有defer属性，因此这两个外部js文件虽然会立即下载，但是会在遇到</html>之后在进行解析-->
  	<script src="1.js" defer="defer"></script>
  	<script src="2.js" defer="defer"></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>

src 外部脚本的链接地址

<html>
  <head>
  	<!--这两个脚本下载并解析完成之后才会解析接下来的内容，因此如果这两个js文件大会造成页面白屏时间较久，解决这个问题可以将脚本文件的引入放在<body>的最后面，也可以使用前两个属性-->
  	<script src="1.js"></script>
  	<script src="2.js"></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>

`<script>`注意点

在使用<script>内嵌js代码时，注意不要在包含代码的任何地方出现<script>字符串，这会让浏览器以为这是<script>结束的标志，会产生一些意想不到的错误

<script>
	function() {
		alert('</script>'); //在这里浏览就就会认为script在这里结束了
	}
</script>

因此应该进行相应的特殊字符转义

<script>
	function() {
		alert('<\/script>'); //在这里浏览就就会认为script在这里结束了
	}
</script>

带有src属性的<script>中不应该包含任何的js代码，如果有，会被忽略，只会下载和执行外部的js脚本.
只要<script>中没有出现async或者defer属性，浏览器就会按照他们出现的顺序依次解析这些js脚本。并且只有当前一个解析完成之后才会进行下一个的解析

`<noScript>`元素

<noscript>元素用于解决某些低版本浏览器不支持js脚本的情况。<noscript>元素只有在如下情况下才会生效

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用
符合上述两种情况的任何一种，浏览器都会展示<noscript>中的内容。否则，即使<noscript>作为页面的一部分，用户也不会看到它。

<html>
  <head>
  	<script src="1.js"></script>
  	<script src="2.js"></script>
  </head>
  <body>
  	<noscript>
		<p>您的浏览器不支持js脚本文件</p>
	</noscript>
  </body>
</html>