浅析<script>

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

<script>元素的几个属性

  1. async 是否异步下载脚本,即在下载脚本的同时,不影响其他脚本的执行。只对外部脚本有效
<html>
  <head>
  	<!--async会告诉浏览器,页面无需等待这两个js文件下载并解析完成后才进行其他操作,无法保证这两个js脚本的执行顺序,因此这两个js脚本之间最好不要有依赖关系,也建议不要在这两个脚本中操作DOM-->
  	<script src="1.js" async></script>
  	<script src="2.js" async></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>
  1. defer 是否将脚本延迟到文档解析完成和显示之后再执行。只对外部脚本有效
<html>
  <head>
  	<!--含有defer属性,因此这两个外部js文件虽然会立即下载,但是会在遇到</html>之后在进行解析-->
  	<script src="1.js" defer="defer"></script>
  	<script src="2.js" defer="defer"></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>
  1. src 外部脚本的链接地址
<html>
  <head>
  	<!--这两个脚本下载并解析完成之后才会解析接下来的内容,因此如果这两个js文件大会造成页面白屏时间较久,解决这个问题可以将脚本文件的引入放在<body>的最后面,也可以使用前两个属性-->
  	<script src="1.js"></script>
  	<script src="2.js"></script>
  </head>
  <body>
  	<!-- 内容 -->
  </body>
</html>

<script>注意点

  1. 在使用<script>内嵌js代码时,注意不要在包含代码的任何地方出现<script>字符串,这会让浏览器以为这是<script>结束的标志,会产生一些意想不到的错误
<script>
	function() {
		alert('</script>'); //在这里浏览就就会认为script在这里结束了
	}
</script>

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

<script>
	function() {
		alert('<\/script>'); //在这里浏览就就会认为script在这里结束了
	}
</script>
  1. 带有src属性的<script>中不应该包含任何的js代码,如果有,会被忽略,只会下载和执行外部的js脚本.
  2. 只要<script>中没有出现async或者defer属性,浏览器就会按照他们出现的顺序依次解析这些js脚本。并且只有当前一个解析完成之后才会进行下一个的解析

<noScript>元素

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

  1. 浏览器不支持脚本
  2. 浏览器支持脚本,但脚本被禁用
    符合上述两种情况的任何一种,浏览器都会展示<noscript>中的内容。否则,即使<noscript>作为页面的一部分,用户也不会看到它。
<html>
  <head>
  	<script src="1.js"></script>
  	<script src="2.js"></script>
  </head>
  <body>
  	<noscript>
		<p>您的浏览器不支持js脚本文件</p>
	</noscript>
  </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值