异步加载（延迟加载）与同步加载
1、同步加载，等待下载并执行完成后继续
我们平时使用的最多的一种方式，就是顺着页面解析的顺序依次加载需要的资源文件，如.css、.js、img等资源。
包含在 <script>元素内部的代码将被从上至下依次执行。
在解析外部js文件（或者下载该文件）的时候，页面的处理会暂时停止。
引入外部文件的时候，如果<script></script>之间有脚本，将会被忽略。
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。
所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。
所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
2、延迟脚本：添加defer="defer"属性
使用<script>的defer属性：会在遇到</html> 标签后再执行。只适用于外部脚本。
3、异步脚本：添加async属性，不保证执行顺序
目的是保证不让页面等待脚本的下载和执行。
异步脚本一定会在页面load之前执行。
4、延迟加载js的方法，对应于预加载，在load事件之后动态创建标签并加载
动态添加文件，适用于大多数的文件：
onload事件：
在页面元素完全加载完成之后（包括图像、js文件、css文件等外部文件），就会触发window对象上的load事件。
两种定义方式：
1、利用跨浏览器事件对象来绑定
EventUtil.addHandler(window,"load",function(event){ console.log("loaded!");} 2、直接写入页面内，事件添加到<body>上
当然除了作用于body上，也可以为图像元素指定onload事件。
预加载图片便是这样，先创建一个图片对象，然后给图片延迟添加src属性，这样就可以在页面加载完成之后的空闲时间内，加载想要预加载的图片。
EventUtil.addHandler(window,"load",function(){ var image = new Image();//这里可以使用for循环来生成多张图片对象，然后依次赋上src属性，这样就可以提前下载图片了，也可以延迟执行这个动作。 EventUtil.addHandler(image,"load",function(event){ console.log("loaded!"); }) image.src = "smile.png";} 当然也可以用来生成<script>标签。
//这些代码应被放置在标签前(接近HTML文件底部)
也可以使用setTimeout来延迟调用函数来加载（适用于上边的动态添加地址和ajax请求）。
对应于load事件的是unload事件，这个事件在文档完全被卸载的时候触发，切换页面会发生unload事件，多用于清除引用避免内存泄漏。
5、当然可以借助于jquery的$(document).ready
区别于js原生的onload事件，主要体现在一下几个方面：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行，$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕；window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个（后边的覆盖前面的，可以把所有的操作都写到处理函数下面），$(document).ready()可以同时编写多个，并且都可以得到执行；window.onload没有简化写法，$(document).ready(function(){})可以简写成$(function(){})。