js异步加载的方式
同步加载:同步模式又叫阻塞模式,如果js中有输出内容,修改DOM等操作,就会造成页面阻塞。建议将script引用放到body后面,尽量减少阻塞。
异步加载:非阻塞加载。下载执行js 的同时,不会影响页面其他加载。
1.Script DOM Element:仍然会阻塞onload的执行
(function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; ... })()
2.onload里面异步加载
(function(){ if(window.attachEvent){ window.attachEvent("load", asyncLoad); }else{ window.addEventListener("load", asyncLoad); } var asyncLoad = function(){ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ... } })()
3.其他方法: HTML5新属性:async和defer属性
defer是之前属性,IE4.0出现,保证js按顺序执行。
async是新属性,不保证顺序。
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。
-------分割-------
异步加载只是保证了js下载时不阻塞其他,只是解决了下载的问题,但是下载完之后就会立即执行,同样会阻塞浏览器。
所以,需要‘’延迟加载‘’;就是再浏览器滚动到某个位置时才执行相关操作。