一：
1.同样的事情发在使用src属性加载javascript的过程中，浏览器必须首先下载外部文件的代码，这要占用时间，然后解析运行此代码。此过程中，页面解析和用户交互被完全阻塞；
2.浏览器在遇到body标签之前，不会渲染任何部分；
3.YAHOO! 优越性能小组，关于javascript的第一条规律：讲脚本放在底部；
4.每个HTTP请求会产生额外的性能负担，下载一个100K的文件，比下载4个25K的文件要快；可以将这些文件整合成一个文件，只需要一个<script>标签，可以减少性能损失，可以通过一个打包工具实现，或者实时工具，如"Yahoo! combo handler";
5.保持javascript短小，并限制HTTP请求的数量；是创建反应迅速网页的第一步；
二：deferred scripts 延期脚本
非阻塞脚本的秘密在于，等页面完成加载之后，再加载javascript源码；从技术角度讲，这意味着在window的load事件之后开始下载代码；有几种方法可以实现这种效果；
(1):html4定义扩展属性：defer.---》很少用
(2):动态脚本
var s = document.createElement("script"); s.type="text/javascript"; s.src ="file1.js";
document.getElementsByTagName("head")[0].appendChild(s);
此文件当元素添加到页面之后立刻开始下载，此技术的重点在于：无论何时启动下载，文件的下载和运行都不会阻塞其他的页面处理过程；当文件使用动态脚本节点下载时，返回代码立即执行；当脚本是“自执行”类型时，这一机制运行正常；但是页面如果包含共页面其他的脚本调用的接口，则会带来问题；这种情况下，你需要下载完成并准备妥善的情况；可以使用动态的script节点发出事件得到相关信息；
Firefox, opera, chrome和safari3+ 会在script节点接受完成后发出一个load事件，你可以监听这事件，以得到脚本准备好的通知；
var s = document.createElement("script");
s.type="text/javascript";
s.onload = function(){
alert("script loaded");
}
s.src ="file1.js";
document.getElementsByTagName("head")[0].appendChild(s);
-----------------------------------------------------------------------------
var s = document.createElement("script");
s.type="text/javascript";
s.onreadystatechange = function(){
if(s.readyscript ==‘loaded‘||s.readyState==‘complete‘){
s.onreadystatechange = null;
alert("script loaded");//可以添加回调
}
else
{
s.onload = function(){
alert("fdfff"); //可以添加回调
}
}
}
s.src ="file1.js";
document.getElementsByTagName("head")[0].appendChild(s);
三:XHR脚本注入：xmlHttpRequest script Injection
有点是同样的代码在所有的浏览器中都不会引发异常；
但是由于同源策略；不能从CDNS（content Delivery Network）下载；
大型网站一般不采用此种格式；
var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status >= 200 && xhr.status <300 || xhr.status ==304)
{
var s = document.createElement("script");
s.type="text/javascript";
s.text = xhr.responseText;
document.body.appendChild(s);
}
}
}
xhr.send(null);
四：推荐的非阻塞模式：即：
公共JS 用标签，其他JS用异步或者load。