说到有序加载，我们先来说说js的无序加载：

<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

     window.onload = function () {

          $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")

          $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");

     }

</script>

为什么一定要有顺序要求这个概念呢？对于上面的那个动态追加的“两个js”文件，在IE系列中，你不能保证hello.js一定会在world.js前执行，

他只会按照服务器端返回的顺序执行代码。

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

 2

 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 4 <html xmlns="http://www.w3.org/1999/xhtml">

 5 <head id="head">

 6     <title></title>

 7     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

 8 </head>

 9 <body>

10     <img src="1.jpg" width="200" height="300" />

11     <script type="text/javascript">

12         function loadScript(url, callback) {

13             var script = document.createElement("script");

14             script.type = "text/javascript";

15

16             //IE17             if (script.readyState) {

18                 script.onreadystatechange = function () {

19                     if (script.readyState == "loaded" || script.readyState == "complete") {

20                         script.onreadystatechange = null;

21                         callback();

22                     }

23                 }

24             } else {

25                 //非IE26                 script.onload = function () {

27                     callback();

28                 }

29             }

30             script.src = url;

31             document.getElementById("head").appendChild(script);

32         }

33         //第一步加载jquery类库34         loadScript("jquery/jquery-1.4.1.js", function () {

35             //第二步加载hello.js36             loadScript("js/hello.js", function () {

37                 //第三步加载world.js38                 loadScript("js/world.js", function () {

39

40                 });

41             });

42         });

43     </script>

44 </body>

45 </html>

大家也能看到，页面完全Load的时间其实也就310ms左右，大大提高了网页的下载呈现和友好型。

js优化 ----js的有序加载的更多相关文章

  1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  4. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  5. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  6. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  7. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. 用JS实现判断iframe是否加载完成

    本文出至:新太潮流网络博客 var iframe = document.createElement("iframe"); iframe.src = "blog.iinu. ...

随机推荐

  1. 使用proguard混淆android代码

    当前是有些工具比方apktool,dextojar等是能够对我们android安装包进行反编译,获得源代码的.为了降低被别人破解,导致源代码泄露,程序被别人盗代替码,等等.我们须要对代码进行混淆,an ...

  2. Android SDK安装时碰到的问题之解决办法

    问题:hostname in certificate didn't match: <dl-ssl.google.com> != <www.google.com> Fetchin ...

  3. LVS 之 DR 2

    http://www.cnblogs.com/kgdxpr/archive/2013/09/09/3309776.html http://lyp0909.blog.51cto.com/508999/5 ...

  4. debian防火墙firestarter

    Firestarter是一个非常好用的防火墙图形化配置工具,作者和开发者是芬兰人. 首先肯定的说Firestarter防火墙是一款非常优秀的基于GUI图形用户界面下的,完全免费的自由软件,它为中小型L ...

  5. Java基础知识强化103：Java常量池理解与总结

    一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...

  6. agile学习

    https://www.flickr.com/photos/codingthearchitecture/sets/

  7. activity工作的使用

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

  8. MSP430常见问题之AD转换类

    Q1:MSP430F149 AD 的输入阻抗有多大?A1:RC<2000欧*30PF Q2:MSP430 ADC12 模块的速度?A2: ADC12 的转换速率是转换所需的ADC12CLK 以及 ...

  9. webkit,HTML5头部标签

    大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...

  10. 归约函数reduce&映射数组map（笔记）

    function forEach(array,action){ ;i<array.length;i++) action(array[i]); } function reduce(combine, ...