首页 > 代码库 > <script>的位置

<script>的位置

2024-09-16 13:24:16   207人阅读

前端断断续续的学了两个月，终于又被捡起来了，很多内容要复习，更多的内容要学习。慢慢来吧。

1.0最初版本 

<!DOCTYPE html>
<html>
<head>
    <title>About JS</title>
  <script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
    <!--这里是内容-->
</body>
</html>

 

 


这种方式会让<head>里的内家先加载出来，会导致页面出现时有明显的延迟。
2.0  改进版本

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>About JS</title>
 5  
 6 </head>
 7 <body>
 8     <!--这里是内容-->
 9  <script type="text/javascript" src="example.js"></script>
10  <script type="text/javascript" src="example.js"></script>
11 </body>
12 </html>

 


这样<body>里的内容会先出现，页面就不会一片空白。
3.0 延迟脚本

<!DOCTYPE html>
<html>
<head>
    <title>About JS</title>
 <script type="text/javascript" defer="defer" src="example.js"></script>
 <script type="text/javascript" defer="defer" src="example.js"></script>
</head>
<body>
    <!--这里是内容-->
</body>
</html>

 


defer属性让脚本在执行时不会影响页面的构造 ，相当于让浏览器立即下载但是延迟执行，IE4、FIREFOX3.5、safari5和chrome最早支持defer属性，其它浏览器会忽略这种属性，像平常一样处理脚本。
将延迟脚本放在页面底部依然是最佳选择。
4.0 异步脚本

<!DOCTYPE html>
<html>
<head>
    <title>About JS</title>
 <script type="text/javascript" async src="example.js"></script>
 <script type="text/javascript" async src="example.js"></script>
</head>
<body>
    <!--这里是内容-->
</body>
</html>

 
在html5中，async属性得到了定义,与defer不同的是，async标记的文件并不按照先后顺序执行。（建议异步脚本不要在加载期间修改DOM）
支持这种脚本的浏览器中有firefox3.6、safari5和chrome
PS.在xhtml文档中，要把async的属性设置为async="async"
5.0在xhtml中的用法
由于小于号在xhtml中会被误认为标签头而<后不能跟空格，会出现语法错误。为了解决这样的错误有两种解决方案：
（1）用相应的实体(&lt;)来替换掉小于号，这种方法解决了语法错误，却不利于代码的阅读。
（2）用一个CData片段来包含javascript 代码。
CData片段是文档中的一个特殊区域中可以包含不需要解析的任意格式的文本内容，这样就不会出现误认的语法错误。引入的例子如下：

<script type="text/javascript"><![CDATA[   代码]]></script>

 


这种方式在不兼容xhtml的浏览器中，是不受支持的，这时候可以使用javascript注释把CData标记注释掉：

<script type="text/javascript">
//<![CDATA[   代码//
]]></script>

 


这种格式在现有的浏览器中都可以使用。
6.0 不推荐的用法
由于最早引用<script>元素的时候，与传统的html的解析规则有冲突，因此有些不支持javascript的浏览器会直接将元素里的内容直接输出到页面，破坏了布局。
而解决方案是把javascript代码包含在html注释中

<script > 
<!-- 内容//-->
</script>

 

要加油不要放弃。

<script>的位置


联系
我们