John Resig的有辱人格的脚本标签模式

该的“的SortTable async.js”脚本是没有必要的初始页面渲染 - 排序列，是唯一可能的表后已经呈现。 这种情况（外部脚本不用于初始渲染）是异步脚本加载一个总理候选人。 异步脚本加载实现异步加载脚本使用脚本DOM元素的方法，

 脚本= document.createElement方法（'脚本'）;
 script.src =的“的SortTable async.js”;
 script.text =“sorttable.init（）”; / /这是在下一节中解释
 document.getElementsByTagName（'头'）[0]。appendChild（脚本）; 

这种异步脚本加载实现的HTTP瀑布图如图2所示。 注意如何使用异步加载技术，避免阻塞行为 - “的SortTable async.js”和“右箭头-20×9.gif，即10”并行加载。 这拉的onload时间为429毫秒。

图2：异步加载脚本的HTTP瀑布图

John Resig的有辱人格的脚本标签模式

异步脚本加载执行，使页面加载速度更快，但仍是一个有待改进的领域。 的默认的SortTable实施引导自身通过附加的“sorttable.init（）”onload处理。 性能的改善将调用的“sorttable.init（）”内联脚本代码尽快引导外部脚本加载完成。 在这种情况下，我使用的“空气污染指数”​​仅仅是一个功能，但我想尝试将足够灵活以支持更复杂的情况下，模块不能假设API是将要使用的模式。

我以前上市的各种方式，内嵌脚本可以加上异步加载外部脚本，脚本的onreadystatechange，窗口的onload和硬编码回调。 相反，我用来自John Resig的有辱人格的脚本标签图案的技术。 约翰介绍了如何与外部脚本夫妇内嵌脚本，就像这样：

  <script src="jquery.js">
 jQuery的addClass（“漂亮”）（“P”）。
 </ SCRIPT> 

他实施的工作方式是外部脚本加载完成后，只执行内嵌代码。 耦合内嵌和外部脚本这样有几个好处：

• 简单 - 一个脚本标记，而不是两个
• 更清晰 - 内嵌代码的依赖于外部脚本更明显
• 安全 - 如果外部脚本加载失败，内嵌代码不执行，避免未定义符号错误

使用异步加载外部脚本时，这也是一个大格局。 使用这种技术，我不得不改变内嵌代码和外部脚本。 内嵌代码，我添加了第三行如上图所示设置script.text属性的。 为了完成耦合，我添加了这个代码年底，的“的SortTable async.js”：

  VAR脚本= document.getElementsByTagName（“脚本”）;
 CNTR = scripts.length;
 （CNTR）{
 VAR curScript =脚本[CNTR-1];
如果（-1！= curScript.src.indexOf分类（'的的SortTable async.js'））{
的eval（curScript.innerHTML）;
打破;
 }
 CNTR  - ;
 } 

此代码遍历页面中的所有脚本，直到找到加载的脚本块本身（在这种情况下，与src脚本含有“的SortTable的async.js”）。 然后，评估版已添加到脚本（在这种情况下，“sorttable.init（）”），从而引导自身的代码。 （边注：虽然该行代码被添加使用脚本的文本属性，在这里引用使用innerHTML属性。使跨浏览器工作，这是必要的。）随着这种优化，在外部脚本负载而阻塞其他资源，尽快执行内嵌代码。