first commit

icodeajk · icodeajk · commit 3cc6774eab8d · 2018-06-09T09:48:59.000+08:00
diff --git a/_posts/2018-06-09-js代码应该放在HTML的哪里.md b/_posts/2018-06-09-js代码应该放在HTML的哪里.md
@@ -0,0 +1,92 @@
+---
+published: true
+title: js代码应该放在HTML的哪里
+layout: post
+---
+
+
+## 在哪里放置JavaScript代码？
+
+我最近碰到个问题，load和onload的区别。当中在实验代码时发现js代码的放置顺序会影响js代码的执行。于是我就想知道js代码放在那最合适。
+
+
+### 放置于<head>之间
+
+这个是通常做法。由于HTML文档是由浏览器从上到下依次载入的。这样放置就保证了使用js脚本之前，它已经被载入了。
+
+
+```html
+<html>
+<head>
+<script type="text/javascript">
+……
+JavaScript 代码
+……
+</script>
+</head>
+....
+```
+
+
+### 放置于<body>之间
+
+我们假设Javascript代码需要操作HTML元素，而HTML是由浏览器从上到下依次载入的。如果放在<body>的前一部分，就会导致要操作的HTML元素还没载入，以至于报错。因此，我们需要把Javascript代码写在<body>的后一部分。
+
+
+```html
+<html>
+<head>
+</head>
+<body>
+</body>
+<div id="div1"></div>
+<script type="text/javascript">
+document.getElementById("div1").innerHTML="测试文字";
+</script>
+</html>
+```
+
+> 提示：如果 HTML 文档声明为 XHTML ，<script></script> 标签必须在 CDATA 部分内声明，否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：
+
+
+```html
+<html>
+<head>
+<script type="text/javascript">
+<![CDATA[
+JavaScript 代码
+]]>
+</script>
+</head>
+....
+```
+
+
+### 外部引用JavaScript代码
+
+将JavaScript代码单独形成一个 文档，并以js后缀命名。
+
+```html
+<html>
+<head>
+<script type="text/javascript" src="myscript.js"></script>
+</head>
+....
+```
+
+使用优点：
+
+- 1.避免在 JavaScript 代码里使用 <!-- ... //-->
+
+- 2.避免使用难看的 CDATA
+
+- 3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护
+
+- 4.HTML 文档更小，利于搜索引擎收录
+
+- 5.可以压缩、加密单个 JavaScript 文件
+
+- 6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次
+
+
+参考文章：[https://www.jb51.net/article/56337.htm](https://www.jb51.net/article/56337.htm)
