当<script>标记是一个HTML文档流,浏览器必须停止渲染并等待脚本文件下载并执行,然后再继续(例子)。通过JavaScript创建一个新的<script>标签可以避免这个问题,因为它是出了文档流,所以脚本文件被下载并执行,无需等待。其结果是:动态加载JavaScript文件可以让你的网页渲染速度更快,从而提高性能。动态加载JavaScript文件可以让你的网页渲染速度更快,从而提高性能。

最好的方法
史蒂夫在他的博客和他的书已探讨几种不同的方式来加载JavaScript而不阻塞。在思考它和试验之后,我得出的结论是,用一个为JavaScript的加载而不阻塞只是一个最佳实践方法:创建两个JavaScript文件。第一只包含必要的动态加载JavaScript代码,第二个包含其他一切必要的交互性对page.Include的第一个JavaScript文件与<script>标签在页面的底部,只是里面的初始水平</ BODY>。创建调用该函数来加载第二个JavaScript文件,并包含任何额外的初始化code.That的是第二<script>标签!真的没有必要做任何事情。关键外卖是仅具有两个JavaScript和使第一个尽可能小。例如,第一个文件只包含一个函数:

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(){
    //initialization code
});
</script>

关键,这整个技术是只有两个JavaScript文件,所以第二个包含的需要初始化页面的一切。如果你的页面需要两个以上的文件?那么你应该串联您的文件一起要么在构建时(使用类似链轮),或在运行时(使用类似mod_concat或组合处理程序)。不应该有,当你的页面需要超过这两个JavaScript文件到正确的初始化时间。每个额外的HTTP请求有开销,然后你就不需要担心顺序安排的下载,使代码在正确的顺序执行。通过刚才有两个文件,可以消除大量的关注点在哪个文件被下载并执行第一次以及消除不必要的HTTP请求。

本文链接:http://www.jfox.info/%e5%8a%a0%e8%bd%bd%e5%a4%96%e9%83%a8javascript%e7%9a%84%e6%9c%80%e4%bd%b3%e6%96%b9%e6%b3%95, 转载请保留.

加载外部JavaScript的最佳方法的更多相关文章

  1. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  2. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  3. 【Win 10 应用开发】加载外部的 srt 字幕

    据说系统内置的多媒体功能支持 srt. ssa 等字幕,老周测试过几种格式的字幕均能加载. SRT 字幕是最简单的字幕结构,甚至你用记事本都能做出来,就是分为几行来写. 第一行是字幕的编号,应该是从1 ...

  4. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  5. VUE页面实现加载外部HTML方法

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍VU ...

  6. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  7. Error #2044: 未处理的 IOErrorEvent:。 text=Error #2035: 找不到 URL这是flash加载外部资源时有时会遇到的问题,对于此问题解决如下

    导致这个错误的主要原因是未添加IOErrorEvent事件监听,或者添加了监听,但是加载时使用了unload() 参考资料: http://blog.csdn.net/chjh0540237/arti ...

  8. FusionCharts简单教程(六)------加载外部Logo

    一.加载外部文件Logo       在使用FusionCharts时,我们可能需要在加载图像的时候需要在图表中显示标识.图片等等.这里我们可以使用logoURL属性来实现.如: <chart ...

  9. 浏览器加载外部js 的顺序,以及处理顺序。

    问题, 有事候按F12打开 google的调试台后,查看network下面加载过来的资源是, 有些资源的状态处于 pending.. 个人理解: 浏览器是可以同时开启多个http 请求去加载外部的资源 ...

随机推荐

  1. codeforces A. Sereja and Bottles 解题报告

    题目链接:http://codeforces.com/problemset/problem/315/A 题目意思:有n个soda bottles,随后给出这n个soda bottles的信息.已知第 ...

  2. Android涉及到的设计模式

    转载地址:http://blog.csdn.net/dengshengjin2234/article/details/8502097 1.适配器模式:ListView或GridView的Adapter ...

  3. SQL with as

    姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 先看下面一个嵌套的查询语句 ) 上面的查询语句使用了一个子查询.虽然这条SQL语句并不复杂,但如果嵌套的层次过 ...

  4. Android中获取蓝牙log

    1.蓝牙的snoop log存放位置 /etc/bluetooth/bt_stack.conf   2.修改方法 #关闭蓝牙 修改bt_stack.conf文件中打印log的等级 adb root a ...

  5. Word2013对公式处理:样式、自动编号、交叉引用

    因快写毕业论文,专门研究了一下Word2013对公式的处理,有一点小心得,记在这里. 文章中公式展示的预期效果是:公式居中,尾端有编号,同时在文章中可以实现引用.实现该效果有很多方法,这里就说一种,其 ...

  6. 【Android】SlidingMenu属性详解(转)

    原文:http://my.eoe.cn/1169143/archive/21892.html SlidingMenu简介:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者 ...

  7. 编辑WCF配置不出现

    在使用VS2010创建

  8. uva 10246(最短路变形)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=28972 思路:spfa求出每个点到其余顶点的最短路(最短路上的每个 ...

  9. 异步加载图片Universal-Image-Loader

    项目地址:https://github.com/nostra13/Android-Universal-Image-Loader

  10. Android Bitmap详细介绍

    package com.testbitmapscale; import java.io.File; import java.io.FileInputStream; import java.io.Fil ...