js性能--加载执行
[TOC]
加载脚本的方式
脚本位置
HTML4规范指出，< script >标签可放在< head >或者 < body >中并允许出现多次，按照惯例< script >一般加载出现在< head >中的外链javascript文件，接着< link >加载css文件，理论上把样式和行为有关的脚本放在一起，并先加载他们，这样有助于页面渲染和交互的正确性。
//例如
<html>
<head>
<script src="./file1.js"></script>
<script src="./file2.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body></body>
</html>
上面这段代码会有严重的性能问题，由于在< head >中加载了两个js文件，由于js脚本会阻塞页面渲染，直到它们全部按顺序下载并执行完成，页面渲染才会继续。
后续由于浏览器的发展，支持脚本的并行加载，但是js加载过程中会阻塞其他资源的下载，比如图片，尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有js代码下载并执行完成才能继续。
组织脚本
由于每个< script >标签初始下载时都会阻塞页面渲染，所以减少页面包含的< script > 数量有助于改善这一情况。当然这不仅仅针对外链，针对内嵌脚本同样需要限制。浏览器在解析html页面中遇到一个< script >标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间会改善这一情况。
在处理外链javascript文件，考虑到http请求网络后有时间消耗，因此下载单个100k的文件将比下载4个25k的文件更快。也就是说减少页面的外链文件数量。
通常一个大型网站应用需要依赖数个javascript文件。可以将多个文件合并成一个，这样只需要引入一个< script > 文件，就可以减少性能消耗，文件合并可通过离线文件打包实现。也可通过内容传输网络（CDN）来分发，任何网站都可以使用一个把指定文件合并处理后的URL来获取任意数量的文件。
//例如：
http://yui.yahooapis.com/combo?2.7.0/build.js&2.7.0/main.js
这两个文件在服务器上独立存在，通过这种方式实现了减少< script >，实现了用一个
< script >将两个脚本同时加载。
无阻塞脚本
javascript倾向于阻止浏览器的某些处理，如HTTP请求和用户界面更新，这是开发者所面临最显著的性能问题。减少javascript文件大小并限制HTTP请求数仅仅是创建响应迅速的web应用的第一步。web应用的功能越丰富，所需的javascript代码就越多，所以精简源代码并不总是可行。尽管下载单个较大的javascript文件只产生一次http请求，却会锁死浏览器一大段时间。为避免这种情况，你需要向页面逐步加载javascript文件。
无阻塞脚本的在于，在页面加载完后才加载javascript代码，也意味着在window对象的load事件触发后再下载脚本。
延迟脚本（defer,async）
html4 < script >标签定义了一个扩展属性defer，Defer属性指明本元素所含的脚本不会修改DOM，因此代码能安全地延迟执行。该属性只有部分浏览器支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此< script >标签会以默认的方式处理，如果目标浏览器支持，这也是很好的解决方案。带有defer属性的< script >标签可以放置在文档的任何位置。当一个带有defer属性的javascript文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其他资源并行下载。
在支持defer属性的浏览器中下面代码的执行顺序
<html>
<head></head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script")
</script>
<script>
window.onload = function(){
alert("load")
}
</script>
</body>
</html>
这段代码在支持defer的浏览器中，弹出顺序是：script, defer,load,
在不支持defer的属性中，弹出的顺序是：defer,script,load.
从这里可以看出，带有defer属性的< script >元素不是跟在第二个后面执行，而是在onload事件处理之前执行。
动态脚本（注意点）
根据DOM对象模型，可以用javascript来动态创建HTML中的几乎所有内容，当然包括< script >元素
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js"
docuemnt.getElementsByTagName('head')[0].appendChild(script);
这个新创建的< script >元素加载了file.js文件。文件在该元素添加到页面时开始下载。这种技术的重点在于：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。甚至可以将脚本放在< head >区域而不会影响页面其他部分（ 用于下载该文件的http链接本身的影响除外）
通常来讲，把新创建的 < script >标签加到< head >标签里比添加到< body >里更保险，尤其是在页面加载时更是如此。
几种浏览器加载动态脚本的不同方式
-
监听load事件来获取脚本加载完成时的状态
var script = document.createElement("script"); script.type = "text/javascript"; script.onload = function () { alert("script loaded"); } -
IE支持另一种实现方式，他会触发一个readystatechange事件。< script >元素提供一个readyState属性。它的值在外链文件的下载过程不同阶段会发生变化，该属性有五种值
uninitialized // 初始状态
loading //开始下载
loaded //下载完成
interactive //数据完成下载但尚不可用
complete //所有数据已准备就绪
在< script > 元素生命周期中，并非readyState的每个取值都会被用到，该文档也没有指出哪些一定会被用到。实际中，最有用的两个状态是“loaded" 和"complete".IE在标识最终状态的readyState的值时并不一致，有时< script >到达"loaded"状态而从不会到达"complete", 有时甚至不经过"loaded"就到达"complete"状态，使用readystatechange事件最靠谱的方式是同时检查这两种状态，只要其中任何一个触发，就删除事件处理器。（确保事件不会处理两次）
var script = document.createElement("script");
script.type = "text/javascript";
script.onreadystatechange = function() {
if(script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded")
}
}
XMLHttpRequest脚本注入
一种无阻塞的加载脚本的方式是使用XMLHttpRequest(XHR)对象获取脚本并注入页面中
var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange = function() {
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文件必须与所有的请求页面处于相同的域，这意味着javascript文件不能从cdn下载。
推荐的无阻塞模式
向页面中添加大量javascript的做法只需两步：先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码。因为第一步代码尽量精简，甚至只包含loadscript()函数，它下载执行都很快，所以不会对页面有太多影响，一旦初始代码就位，就用它加载剩余的javascript。
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadscript("the-rest.js",function(){
Application.init();
})
</script>
把这段加载代码放到< /body >闭合之前。这样做有几个好处：首先，如前文提到，这样做确保javascript执行过程中不会阻碍页面其他内容的显示。其次，当第二个javascript文件完成下载时，应用所需的所有DOM结构已经创建完毕。并做好了交互准备，从而避免了需要另一个事件（比如window.onload）来检查页面是否准备好。
另一种方法是把loadscript()函数直接嵌入页面，从而避免多产生一次HTTP请求。例如
<script type="text/javascript">
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;
}
}
} else { // 其他浏览器
script.onload = function(){
callback();
}
}
}
loadScript("the-rest.js",function(){
Application.init()
})
</script>
Lazyload类库
一些lazyLoad类库支持下载多个javascript文件，并能保证在所有浏览器中都以正确的顺序执行。要加载多个javascript文件，只需给LazyLoad.js()方法传入URL数组：
<script>
LazyLoad.js(["load-1.js","load-2.js"],function(){
App.init();
})
</script>
基于async-await实现脚本按序创建加载执行
<script>
function createScript(val){
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.defer=true;
oScript.src=val;
body.appendChild( oScript);
return new Promise((resolve,reject)=>{
oScript.onload=function(){
resolve()
}
oScript.onerror=function(){
console.log("this is a error")
reject()
}
})
}
async function addScript(arr){
for(var i=0;i<arr.length;i++){
let val=await createsSript(i)
}
}
addScript(["load-1.js","load-2.js"])
</script>
以上是个人了解整理的有关js加载执行的方法，如果有什么问题或者有其他方法希望大家能够提供建议。谢谢！
