js加载：
看了网上很多文章写关于js加载的问题。
总结了一下。
js放在head标签头部会存在很多问题，
- 1：script标签下载会阻塞其他资源的下载；
现在大多数浏览器都允许并行下载 JavaScript 文件。这就缓解了加载与执行的问题，但是，JavaScript 下载过程仍然会阻塞其他资源的下载，比如样式文件和图片。
由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
- 2 有些是dom操作，而此时页面还未渲染。可能会引发错误。
开发人员放在body标签外下面，这样做不好的地方有两处：1、不规范 2、可能会造成js获取不到页面元素而导致报错。而放在body标签内底部可以确保js执行前页面渲染完成
<body>
js... //正确
</body>
<!-----------------------分界线---------------------------->
<body>
</body>
js... //错误
所以，script标签最好还是放在</body>标签底部；
无阻塞的脚本
延迟加载脚本
HTML4 为<script>标签定义了一个扩展属性：defer
文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，
当页面解析&渲染完毕后执行，在window.onload之前。
会等到所有的defer脚本加载完毕并按照顺序执行，
动态脚本元素(下载完后会立即执行)
创建<script>元素
function loadScript(url, callback){//异步操作，一个一个调用会导致顺序随机；
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){//监听是否加载完成。
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("script1.js", function(){//按顺序下载script1.js、script2.js、script3.js
loadScript("script2.js", function(){
loadScript("script3.js", function(){
alert("All files are loaded!");
});
});
});
新的<script>元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。
如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。
使用 XMLHttpRequest(XHR)对象加载脚本类似于原生的ajax的get请求
var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
这种方法的主要优点是，可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。
此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内。
网友评论