前端优化过程中常提到js的加载方式，下面说下几种常用的加载方式：

　　1：head标签内插入<script>标签

　　<script type="text/javaScript" src="test.js"></script>

　　这是最常见的方法，但是这个方法有个最大的问题，就是当浏览器解析到<script>标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，是个阻塞的过程，这意味着，其后的test.css样式文件和<body>标签都无法被加载，由于<body>标签和样式等资源无法被加载，那么页面自然就无法渲染了，因此常常页面打开会出现页面内容空白或者样式丢失问题，这都是在头部引入了过多的js文件阻塞加载造成的，虽然高版本的浏览器已经可以对脚本并行加载，可是还有些浏览器脚本依旧是一个接一个加载的，因此优化的话可以把js放在body标签最底部，这样页面可以先快速显示出来，提高了体验友好度。

　　2：创建动态脚本

var script=document.createElement('script');

script.type='text/javaScript';

script.src='test.js';

document.getElementsByTagName('head')[0].appendChild(script);

　　上述代码动态创建了一个<script>标签，并添加在<head>标签内，无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他内容的加载执行。此方法比较常见，我们常用的一些第三方库中，很多都采用这种方式。然而这种方式有个最大的问题就是无法保证多个脚本之间的加载顺序，比如我写了一个代码，这个代码要依赖于jQuery，但是如果我这个文件优先于jQuery脚本先下载完并立即执行，这时浏览器会报错——‘jQuery未定义’之类的，因为此时jQuery库还未下载完成。

　　3：LABjs

　　可以帮我们完成脚本的并行加载和按顺序执行，这也是我们公司目前用的主要方式，想要看详细的用法去官网看看。

　　常见用法：

　　1，

$LAB.script("script1.js")

    .script("script2.js")

    .script("script3.js")

    .wait(function(){// 等待所有script加载完再执行这个代码块

        script1Func();

        script2Func();

        script3Func();

    });

　　2，

$LAB.script("script1.js")

    .wait()    // 空的wait()只是确保script1在其他代码之前被执行

    .script("script2.js")    // script2 和 script3 依赖于 script1

    .script("script3.js")

    .wait()    // 但是script2 和 script3 并不互相依赖,可以并行下载

    .script("script4.js")    //script4 依赖于 script1, script2 及 script3

    .wait(function(){script4Func();});

　　3，

$LAB.script("script1.js")    // script1, script2, and script3 之间没有依赖关系,

    .script("script2.js")    // 所以可以任意顺序执行

    .script("script3.js")

    .wait(function(){    // 如果需要,这里当然可以执行javascript函数

        alert("Scripts 1-3 are loaded!");

    })

    .script("script4.js")    // 依赖于 script1, script2 及 script3

    .wait(function(){script4Func();});

　　上面实例中，前面三个脚本并行加载，任意顺序执行，如果有依赖并且脚本很多的话，没一个script函数后面接个wait就闲的代码很臃肿麻烦，所以labjs库提供了个参数可以确保下载完后顺序执行

$LAB.setOptions({AlwaysPreserveOrder:true})// 设置每个脚本之间等待

    .script("script1.js")// script1, script2, script3, script4 互相依赖

    .script("script2.js")// 并且并行下载后循序执行

    .script("script3.js")

    .script("script4.js")

    .wait(function(){

        script4Func();

    });

　　这样写代码精炼了很多，推荐

　　4，

$LAB.script(function(){

        // `_is_IE`的值ie为true ,非ie为false

        if(_is_IE){

            return"ie.js";    // 如果是ie则这个js会被加载

        }else{

            return null;    //如果不是ie这个代码就会被略过

        }

    })

    .script("script1.js")

　　.wait();

js顺序加载与并行加载的更多相关文章

  1. js的并行加载与顺序执行

    javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...

  2. js的并行加载以及顺序执行

    重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是 ...

  3. js并行加载，顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

  4. requirejs：性能优化-及早并行加载

    为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串 ...

  5. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  6. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  7. js实现类型jq的dom加载完成

    有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...

  8. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  9. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

随机推荐

  1. bzoj1913: [Apio2010]signaling 信号覆盖

    传送门 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #includ ...

  2. PDO连续query()失败问题

    设置了非缓冲查询(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY)以后,连续query会导致下一次结果为false $conn = "mysql:host=127.0. ...

  3. Mysql千万级数据性能调优配置

    背景: 笔者的源数据一张表大概7000多万条,数据大小36G,索引6G,加起来表空间有40G+,类似的表有4张,总计2亿多条 数据库mysql,引擎为innodb,版本5.7,服务器内存256G,物理 ...

  4. 恭喜"微微软"喜当爹，Github嫁入豪门。

    今天是 Github 嫁入豪门的第 2 天,炒得沸沸扬扬的微软 Github 收购事件于昨天(06月04日)尘埃落定,微软最终以 75 亿美元正式收购 Github. 随后,Gitlab 趁势带了一波 ...

  5. ERP或PLM系统-物料编码管理的技术实现

    1 企业现状 企业日常经营过程中会产生大量的文档,如设计图纸.变更单.计算书.设计方案等,如果是制造企业还会产生大量的产品.组成产品的零部件等物料,这些数据在进入信息系统前都需要有一个唯一的标识,也就 ...

  6. 阿里云“网红"运维工程师白金：做一个平凡的圆梦人

    他是阿里云的一位 P8 运维专家,却很有野心得给自己取花名“辟拾(P10)”:他没有华丽的履历,仅凭着 26 年的热爱与坚持,一步一个脚印踏出了属于自己的技术逆袭之路:他爱好清奇,练就了能在 20 秒 ...

  7. Django项目：CRM(客户关系管理系统)--79--69PerfectCRM实现CRM业务流程(bpm)学生讲师分页

    # student_views.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.shortcuts import render #页面 ...

  8. cf519E

    传送门 多组询问,问到树上两个点x,y距离相等的点的个数. 倍增求lca. //Twenty #include<cstdio> #include<cstdlib> #inclu ...

  9. leyou_04_vue.js的ajax请求方式

    1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...

  10. 软件-MQ-MQ：IBM MQ

    ylbtech-软件-MQ-MQ:MQ(IBM MQ) MQ传递主干,在世界屡获殊荣. 它帮您搭建企业服务总线(ESB)的基础传输层.IBM WebSphere MQ为SOA提供可靠的消息传递.它为经 ...