同步加载
默认的就是同步加载
同步加载: 同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。
简单来说：js的网页中加载会阻塞到未加载的css，html的加载跟渲染
异步加载
异步加载又称非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有一下几种实现方式。。。
1. async， await
这个是 ES7 中的特性，async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。
2. H5 async
当浏览器解析到script脚本，有async时，浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行，这个过程是异步的
3. 动态创建DOM
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。
2 (function() {
3 var s = document.createElement('script');
4 s.type = 'text/javascript';
5 s.async = true; //这句可以删除，但是效果不变。
6 s.src = 'js/a.js';
7 var x = document.getElementsByTagName('script')[0];
8 x.parentNode.insertBefore(s, x);
9 })();
10
注意：这种方法会阻止onload事件，比如下面的代码，会等到a.js中的弹出框弹出后再执行
2 window.οnlοad=function(){
3 document.getElementById('div').innerHTML="onload完成"
4 }
5
6 //写在html中
4. onload
这个和script dom element法差不多但是他不是同时执行js和html，他是等html的文件，图片之类的、页面所有的资源全部加载完成后再下载执行js，这样的方法可以避免阻塞onload事件的触发。(兼容所有浏览器)
把插入script的方法放在一个函数里面，然后放在window.onload方法里面执行，这样就解决了阻塞onload事件触发的问题.
(function() {
2 function async_load(){
3 var s = document.createElement('script');
4 s.type = 'text/javascript';
5 s.async = true;
6 s.src = 'js/yibujiaz.js';
7 var x = document.getElementsByTagName('script')[0];
8 x.parentNode.insertBefore(s, x);
9 }
10 if (window.attachEvent)
11 window.attachEvent('onload', async_load);
12 else
13 window.addEventListener('load', async_load, false);
14 })();
DOMContentLoaded与onload事件不同，DOMContentLoaded是页面解析完成，页面的dom元素可以使用，但是页面的图片、视频等资源可能还没加载完成
延迟加载(懒加载)lazy-load
有些代码在某种特定情况下才需要，并不是一股脑子都加载出来了，这个时候就需要延迟加载；
1. H5 defer
当浏览器解析到script脚本，有defer时，浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行，这个过程是异步的
2. 比较 async， defer
相同点：异步加载文件；
不同点：
async：虽然是异步加载，但当有多个脚本异步加载的时候，不一定先加载哪一个，加载顺序不一定；脚本的获取是异步的，执行是异步的，这就会造成脚本的执行顺序和页面上脚本的排放顺序不一致，可能造成脚本依赖的问题
defer：加载顺序由第一个延迟脚本到最后一个延迟脚本；脚本的获取是异步的，执行是同步的，脚本加载不阻塞页面的解析，脚本在获取完后并不立即执行，而是等到DOMready之后才开始执行。
js的加载分为两部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何请求
使用场景：很多网站页面上图片很多，页面很长，这中情况下就可以使用懒加载；用户点开页面的瞬间，呈现给他的只有屏幕的一部分(我们称之为首屏)。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。这样一来，性能的压力小了，用户的体验却没有变差——这个延迟加载的过程，就是 Lazy-Load。
实现原理
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”(这个名字起个自己认识好记的就行)属性里，要用的时候就取出来，再设置；
实现步骤
1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
懒加载的优点是什么？
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
预加载
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
实现预加载的方式:
1：用CSS和JavaScript实现预加载
2：仅使用JavaScript实现预加载
3：使用Ajax实现预加载
懒加载和预加载的区别：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力，不利于首屏渲染。预加载应用如广告弹窗等。
