加载 Javascript 最佳实践(2)

作者:sofish 来源:幸福收藏夹 时间:2011-01-16 18:29:00 

二、方案

对于究竟应该使用哪种方案。这完全取决于你需要自身的需要。这张图描述了什么时候使用什么方法:

从总体上看来,Script DOM Element 是比较好的方案。NCZ 的博客上提过,目前最好的技术是:

创建两个 JavaScript  文件。第一个文件只提供动态下载 Javascript 的代码,第二个文件则包含所有其他页面所需脚本的文件。

像 <script> 在页部(</body> 之前)引入第一个文件。

创建第二个 <script> 来执行下载第二个 Javascript 文件的函数和其他的初始化代码。

三、实现代码

根据上面的提到的技术。NCZ 推荐第一个文件只包含相应的实现第二个文件动态加载的代码:


function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}


然后,我们可以在页面中这样做:


<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
    //初始化你的代码
});
</script>


在 HTML5 上,我们可以使用 async 属性。这个 HTML 属性的作用正是我们需要的 NON-Blocking 下载技术。虽然目前支持的浏览器并不多(似乎只有 Firefox 3.6+ ?),但给需要平行下载的 Javascript(按照方案看来,一般是第一个 JS 文件) 加上这个属性,也不会影响其他不支持的浏览器,所以,是推荐使用的。


<script type="text/javascript" async src="foo.js"></script>


四、实践

YUI3 的 Loader 使用了 NCZ 的这样的方法。而在支付宝。我们也使用了类似的方法。这里简单说一下。


<script type="text/javascript" charset="utf-8">
// 配置 combo 服务的 PATH
araleConfig = {
 combo_host: "http://domain.com",
 combo_path: '/path/to/the/compressed/file'
}
</script>

<script type="text/javascript" src="core.js"></script>


在使用的时候,再利用 Loader.use() 来实现代码的动态加载。当然,这里不仅仅是动态加载,还有一定的缓存机制在里面。建议你查看相关的 combo 服务的技术。目前支付宝前端架构组的工友们,已经在这一块取得了一些不错的进展(根据测试报告,速度是非常不错的,可能会在适当的时候开源出来)。

五、总结

前端性能优化方面。还有很多东西可以做。并且,随着 HTML5 技术的出现和 Javascript 技术的不断创新,相信还有更多东西是值得期待。前端们,加油吧,未来有很多东西应该是由你来主导的。

标签:加载,javascript
0
投稿

猜你喜欢

  • Tensorflow的梯度异步更新示例

    2022-10-04 15:08:23
  • python 绘制国旗的示例

    2023-01-05 19:29:32
  • 关于python的编码与解码decode()方法及zip()函数

    2022-04-04 15:15:54
  • python实现从尾到头打印单链表操作示例

    2021-12-20 00:09:32
  • 浅谈mysql中concat函数,mysql在字段前/后增加字符串

    2024-01-22 10:06:53
  • 原生js实现密码强度验证功能

    2024-04-17 10:35:14
  • Python实现爬取并分析电商评论

    2022-11-21 17:18:47
  • python实现输入数字的连续加减方法

    2023-04-10 09:29:22
  • 艺术和设计之间的差别

    2010-11-17 19:28:00
  • 在python里从协程返回一个值的示例

    2021-12-30 11:23:17
  • python可视化爬虫界面之天气查询

    2022-09-24 07:34:54
  • asp 存储过程分页代码第1/2页

    2011-04-03 10:39:00
  • JavaScript中的"类" 序言

    2008-02-18 13:26:00
  • SQL Server性能的改进得益于逻辑数据库设计

    2009-10-23 13:55:00
  • matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())

    2021-10-16 11:01:10
  • JSON 和 JavaScript eval使用说明

    2024-04-19 10:00:07
  • Python操作Excel把数据分给sheet

    2023-08-07 17:03:53
  • python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例

    2021-08-06 03:48:32
  • Python matplotlib 动画绘制详情

    2022-04-12 14:36:52
  • 图文详解Python中最神秘的一个魔法函数

    2022-03-25 05:44:24
  • asp之家 网络编程 m.aspxhome.com