Javascript的书写方法及执行流程
- <script>标签
<script></script>是书写Javascript最为简单的方法（实际的开发中基本不使用），在这种情况下<script>标签被分析之后就会立即执行Javascript。需要 注意的是，这样将无法操作<script>标签之后的DOM元素。原因就是：分析<script>标签之后就立即执行。这时候<script>标签之后的DOM元素还未构造，因此就 无法取得位于其后的DOM元素。
解决方法：在body的结束标签前才书写<script>标签（注意：尽量避免对body操作）如果希望对body进行操作，可以通过onload和DOMContentLoaded 方式来执行，他们的执行流程允许对body操作。
2.外部读取Javascript文件
例如：<script src=”http://example.com/js/sample.js”></script>
该文件会在<script>标签分析之后马上读取，一旦读取完成，就将执行文件内的Javascript，<script>标签有两个属性：defer和async。指定defer属性，可以使该 <script>标签的处理推迟至其他所有的<script>标签之后。指定async属性，以异步方式读取外部文件，并在读取完成后依次执行。
好处:①浏览器可以缓存Javascript文件，如果Javvascript文件的内容变化不频繁，只需下载一次之后将其缓存至本地，避免下次的读取，直接提高运行速度；②团队 分工更加明确
3. Onload
①直接写在HTML中 <body onload=”alert(“haha”)”>
②写在外部文件中 window.onload = function() { alert(“haha”); }
在onload事件处理程序中书写Javascript代码，能够在页面读取完成后再对其执行。因为在执行时已经完成对整个页面的读取，所以可以对所有的DOM元素进 行操作。由于在读取了整个页面之后才读取Javascript，所以当页面存在大量图片是，会导致Javascript的加载速度非常慢，影响用户体验，所以在页面存在大量图 片，不建议使用这种方法
4. DOMContentLoaded
对于onload方法，执行Javascript时可能需要一定的等待时间，这可以使用DOMContentLoaded解决(IE8之前的浏览器不支持)。DOMContentLoaded是 在完成HTML解析后发生的事件。将事件侦听器设置为对该事件进行监听，就可以减少不必要的等待时间
例如: document.addEventListener(‘DOMContentLoaded’,function(){alert(“haha”);},false);
5. 动态载入
在生成script元素过程中动态加载Javascript文件
例如：
Var script = document.createElement(‘script’);
Script.src = ‘other-javascript.js’;
Document.getElementByTagName(‘head’)[0].appendChild(script);
这种方法执行Javascript时，Javascript文件在加载过程中不会阻断其他的操作，这是一个较大的优点。若直接在页面中写script，则在加载文件时会阻断CSS 文件的加载。
参考文件：JavaScript编程全解 图灵程序设计丛书
阿里云服务器优惠券：点击领取
2015-06-26 19:31:20