动态加载JavaScript的小实践
动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性，同时也实现了lazy load和按需加载，相比XMLHttpRequest而言其没有跨域的限制使其广泛应用。其基本原理是：在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。
YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：
<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">
当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是
//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">
然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：
当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。
因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。
标签：JavaScript, Loader, YUI
作者：秦歌，时间:2009-11-05 0:56，归纳于：Javascript & DOM & AJAX，订阅：RSS 2.0，引用：Trackback
You can still do “通过随机参数让JavaScript文件不缓存”, but the key is that you need to append “.js” after the random key.
For example:
your-script.js?random=12345 ;// This may not work on IE.
your-script.js?random=12345.js // This works, haha.
IE的缓存是一把双刃剑。方便用户，危害开发人员。
@Hedger：是的，你说的很对，虽然知道这个规则但是在写代码的时候还是漏掉了，现在加上，多谢。
危害-貌似言重了
我想问个问题：
动态加载之后，加载的js或者css文件，是如何知道其加载完成从而进行相应的操作的呢？
我看每个加载的资源有个id，难道是不停侦听此id来判别吗？
[...] 近日，在秦歌的blog中看到动态加载的内容，主要是说YUI3.0在动态加载js的一点小bug。当时想了个问题：如何侦听动态加载的内容被成功加载了，翻阅一番后记录下来。 [...]
与文章无关：
秦歌你好，我一直订阅你的博客，但是文章过长我不敢点击到原文，因为你的博客字体颜色和背景色的对比太过强烈，希望能优化下字体的颜色，谢谢。
@fer：非常感谢你的支持，最近是考虑对博客改版一下，但一直拖着，对比度其实也调整了很多次，主要是不同的显示器对比度有很大不同，所以最后用了一个很不完美的方案，就是设置强烈一些，这样不至于对比度很弱的显示器看不到，而对比度强的显示器可以调节对比度。正在考虑下一步怎么做。
“在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。” 思路新颖，Good！受教了~
传统的方式是在页面头部的一段js里面通过document.createElement来加载，而没有考虑DOMReady的形式，这影响了页面的加载速度。
[...] 秦歌的文章里提到《用YUI3.0.0加载无缓存的JavaScript文件》，我感觉这个方案挺实用的，记下了。 原理：利用随机数避免【utf-8.js】这个文件被浏览器缓存 [...]
今天发现了JQ1.4.2 和1.3.2在动态加载JS的区别
一个在HEAD头部插入 一个是尾部插入
发现头部插入时的外链JS 在指定 charset 后也会导致无法正常解析。。。。加了随机参数 算是暂且避免了
1.4.2的头部插入也是为了避免IE的某个BUG 但却引来了另一个BUG 真是就结的艰辛路。。
[...] source [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在 早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的 样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为 P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在 修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在 早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的 样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为 P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在 修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在 早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的 样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为 P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在 修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在 早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的 样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug 设置为 P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在 修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）…，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]
[...] 这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。 [...]