1.同步加载
默认的是同步加载,又称阻塞加载,加载的时候会阻止浏览器的后续处理,停止后续文件的解析和执行,如图像的渲染等等。采用同步加载是因为加载的Js文件中有对DOM的操作,重定向,输出DOM等行为,此时同步加载时安全的。把js文件放在body标签结束之前,是Js在页面最后加载,就是为了尽量减少页面阻塞,优先显示页面结构。
2.异步加载
异步加载是非阻塞加载,浏览器在加载Js的同时,还会进行后续页面的处理。通过查询资料,大概整理了异步加载有以下几种实现方式。
(1)script标签的async属性
<script src="" async></script>
async属性表示后续文档的加载和渲染与js脚本的加载和执行是并行的,但是async只适用于外部脚本(有src属性是使用),是html5中的新属性
(2)script标签的defer属性
<script src="" defer></script>
defer属性表示加载文档的过程和js脚本的加载时并行执行的,但是js脚本的执行是在文档所有元素解析完成之后,defer规定的是js脚本执行的异步,只有IE浏览器支持
(3)动态创建script标签插入DOM结构
<script> (function(){ var s = document.createElement('script'); s.type = ''; s.src = "http://code.jquery.com/jquery-1.7.2.min.js"; var tmp = document.getElementsByTagName('script')[0]; tmp.parentNode.insertBefore(s, tmp); })(); </script>
(4)ajax请求:通过XMLHttpRequest来获取js,然后创建一个script元素插入DOM,ajax请求成功后设置script.text为请求成功返回的responseText。
var getXmlHttp=function(){ var obj; if(window.XMLHttpRequest){ obj=new XMLHttpRequest(); }else{ obj=new ActiveXObject("Microsoft.XMLHTTP"); } return obj; } var xmlHttp=getXmlHttp(); //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 xmlHttp.open('GET','http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js'.true); xmlHttp.send(); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ var script=document.createElement("script"); script.text=xmlHttp.responseText; document.getElementsByTagName("head")[0].appendChild(script); } }
3.延迟加载
延迟加载是将js切分成许多模块,页面初始化的时候只加载需要立即执行的Js,然后其他的延迟到第一次需要使用的时候再加载,类似于图片的延迟加载
4.预加载
预加载是一种浏览器机制,使用浏览器空闲时间预先加载/下载用户接下来可能会访问的页面或者资源 放在缓存中,用户访问时直接从缓存中提存
-----------------目前了解的就这些,待补充