无堵塞的脚本加载

来源：互联网发布：编程语言执行效率编辑：程序博客网时间：2024/06/10 16:37

《高性能 javascript 》这本书买了快1年了，用了几天看完扔在一旁在就没动过...没时间看（借口）
前几天突然看到了这本书拿起来细心的看了看...唉之前太无知，准备细读下并记录下来

javascript 加载和执行

当浏览器遇到<script>标签时，当前 HTML 页面无从获知 javascript 是否会向 <p> 标签添加内容，或引入其他元素，或甚至关闭该标签。因此，这时浏览器会停止处理页面，先执行 javascript 代码，然后再继续解析和渲染页面。同样的情况也发生在实用在 src 属性加载 javascript 的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻止了。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>加载和执行</title></head><body><p> <script type="text/javascript">document.write(+new Date());</script> </p></body></html>

无堵塞的脚本--动态脚本元素

通过文档对象模型（DOM）创建 <script> 元素,无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

loadScript：

function loadScript(url,callback){var script = document.createElement("script");script.type = "text/javascript";if (script.readyState){script.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange = null;//确保事件不被处理2次callback();};};} else {script.onload = function(){callback();};};script.src = url;document.getElementsByTagName("head")[0].appendChild(script);};loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js",function(){alert("加载完成")})

“加强版”的loadScript
1：lazyLoad
下载地址
https://github.com/rgrove/lazyload
2：LABjs
下载地址
http://labjs.com/