标签：
一. 加载和执行——优化JavaScript规则：
1. 将脚本放在底部；
2. 减少页面中外链脚本文件的数量：
比如，下载单个100kb的文件将比下载4个25kb的文件更快。这个可以通过离线打包工具或者类似Yahoo！combo handler的实时在线服务来实现；
3. HTML４为<script>标签定义了一个扩展属性：defer：
指明本元素所含的脚本不会修改DOM，因此代码能安全的延迟执行，例如：
<script type="text/javascript" src="file1.js" defer></script>
带有defer属性的<script>标签可以放置在文档任何位置，对应的js文件将在页面解析到<script>标签时开始下载，但并不会执行，直到DOM加载完成（onload事件被触发之前）。当一个带有defer属性的JavaScript文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其他资源并行下载。
世界每天在变化，前端也不例外。关于defer，还有async，最新情况请看：https://html.spec.whatwg.org/mul ... l#attr-script-defer。简单总结如下：
①defer、async只能用于外链文件；
②既没有设置defer，也没有设置async时，脚本文件按在页面中出现的位置加载执行，并且阻塞页面解析；
③若设置了defer，脚本文件按在页面中出现的位置加载，并且不会阻塞页面解析，等页面解析完onload事件被触发前执行；
④若设置了async，脚本文件按在页面中出现的位置加载执行，加载过程不会阻塞页面解析，执行过程会阻塞页面解析；
⑤既设置async，也设置了defer，因为各浏览器的效果不同，请自行检测。
4. 动态脚本元素：
var script = document.getElement("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script);
进一步封装：
function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){//使用特征检测（Feature detection）IE script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; }else{//其他浏览器 script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
5. XMLHttpRequest 脚本注入：
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 script = document.createElement(‘script‘); script.type = ‘text/javascript‘; script.text = xhr.responseText; document.body.appendChild(script); } } };
标签：
原文地址：http://www.cnblogs.com/craftsman-gao/p/5087111.html
