js文件 与 css文件 异步加载
使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 ,
下面是 使用方法 与 lazyload.js 源码 (中文注释)
调用方法后. 会追加到 head 标签末尾
会按照 数组中的地址顺序 进行加载文件
加载成功后有 console.log().进行日志打印
不需要的话,可以删除.
有兴趣的可以看看注释, 研究一下LazyLoad.js 的 实现方式.
完整例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--先 引入lazyload 再调用方法-->
<script src="/js/JsTool/CssJsFileLazyLoad/lazyload.js"></script>
<script async="async">
var cssFile = [
'/css/backstage/1.css',
'/css/backstage/2.css',
'/css/backstage/3.css',
'/css/backstage/4.css',
'/css/backstage/5.css',
'/css/backstage/6.css'
];
//调用方法后. 会追加到 head 标签末尾
//会按照 数组中的顺序 进行加载文件
LazyLoad.css(cssFile, function () {
console.log("css加载完成...");
});
</script>
</head>
<body class="bg_0">
<div>内容</div>
<script async="async">
var jsFile = [
'/js/backstage/jquery/1.js',
'/js/backstage/jquery/2.js',
'/js/backstage/jquery/3.js',
'/js/backstage/jquery/4.js',
'/js/backstage/jquery/5.js',
'/js/backstage/jquery/6.js'
];
//调用方法后. 会追加到 head 标签末尾
LazyLoad.js(jsFile, function () {
console.log("js加载完成...");
});
</script>
</body>
</html>
新建文件 LazyLoad.js 内容如下
/**
* 异步加载css 与 js 文件
* xue
*
*/
LazyLoad = (function (doc) {
/**
* 如何使用:
*
* CSS:
*
var cssFile = [
'/css/backstage/1.css',
'/css/backstage/2.css',
'/css/backstage/3.css',
'/css/backstage/4.css',
'/css/backstage/5.css',
'/css/backstage/6.css'
];
//可以使用数组的形式,加载多个css文件. 也可以传入一个字符串,加载一个css
LazyLoad.css(cssFile, function () {
console.log("css加载完成...");
});
*
*JS:
var jsFile = [
'/js/backstage/jquery/1.js',
'/js/backstage/jquery/2.js',
'/js/backstage/jquery/3.js',
'/js/backstage/jquery/4.js',
'/js/backstage/jquery/5.js',
'/js/backstage/jquery/6.js'
];
//可以使用数组的形式,加载多个js文件. 也可以传入一个字符串,加载一个js
LazyLoad.js(jsFile, function () {
console.log("js加载完成...");
});
*/
// Private Property --------------------------------------------------------
var env,
head,
pending = {},
pollCount = 0,
queue = { css: [], js: [] },
styleSheets = doc.styleSheets,
startTime,
endTime;
// Private Methods --------------------------------------------------------
/**
创建并返回具有指定名称和属性的HTML元素。
@method createNode
@param {String} name 元素名
@param {Object} attrs 元素属性的 名称/值 映射
@return {HTMLElement}
@private
*/
function createNode(name, attrs) {
var node = doc.createElement(name), attr;
for (attr in attrs) {
if (attrs.hasOwnProperty(attr)) {
node.setAttribute(attr, attrs[attr]);
}
}
return node;
}
/**
当指定类型的当前挂起资源完成时调用装载。执行关联的回调(如果有)并加载下一个回调队列中的资源。
@method finish
@param {String} type 资源类型 ('css' or 'js')
@private
*/
function finish(type) {
var p = pending[type], callback, urls;
if (p) {
callback = p.callback;
urls = p.urls;
urls.shift();
pollCount = 0;
// 如果这是最后一个挂起的url，则执行回调和
// 启动队列中的下一个请求(如果有)。
if (!urls.length) {
callback && callback.call(p.context, p.obj);
pending[type] = null;
queue[type].length && load(type);
}
}
}
/**
填充 <code>env</code> 变量带有用户代理和特性测试信息。
@method getEnv
@private
*/
function getEnv() {
var ua = navigator.userAgent;
env = {
//如果此浏览器支持动态禁用异步模式，则为True
//创建脚本节点
async: doc.createElement('script').async === true
};
(env.webkit = /AppleWebKit\//.test(ua))
|| (env.ie = /MSIE|Trident/.test(ua))
|| (env.opera = /Opera/.test(ua))
|| (env.gecko = /Gecko\//.test(ua))
|| (env.unknown = true);
}
/**
加载指定的资源或指定类型的下一个资源
如果没有指定资源，则在队列中。如果指定的资源
类型已加载，新请求将排队，直到
第一个请求已经完成。
当指定资源url数组时，将加载这些url
如果可能的话，在保持执行顺序的同时并行执行。所有
浏览器支持CSS的并行加载，但只支持Firefox和Opera
支持脚本的并行加载。在其他浏览器中，脚本将是
排队并一次加载一个，以确保正确的执行顺序。
@method load
@param {String} type 资源类型 ('css' or 'js')
@param {String|Array} urls (optional) 要加载的URL或URL数组
@param {Function} callback (optional) 回调函数
@param {Object} obj (optional) 对象传递给回调函数
@param {Object} context (optional) 如果提供，则回调函数将在这个对象的上下文中执行
@private
*/
function load(type, urls, callback, obj, context) {
//开始计时
startTime = new Date().getTime();
var _finish = function () { finish(type); },
isCSS = type === 'css',
nodes = [],
i, len, node, p, pendingUrls, url;
env || getEnv();
if (urls) {
//如果url是字符串，则将其包装在数组中。否则假设它是
//数组并创建它的副本，这样就不会对其进行修改
urls = typeof urls === 'string' ? [urls] : urls.concat();
// 为每个URL创建一个请求对象。如果指定了多个url，
// 回调只会在加载所有url之后执行。
//
//遗憾的是，Firefox和Opera是唯一能够加载的浏览器
//脚本并行，同时保持执行顺序。在所有其他
//浏览器，脚本必须顺序加载。
//
//所有浏览器都根据链接的顺序尊重CSS的特性
// DOM中的元素，而不考虑样式表的顺序
//实际上是下载的。
if (isCSS || env.async || env.gecko || env.opera) {
// 并行加载
queue[type].push({
urls: urls,
callback: callback,
obj: obj,
context: context
});
} else {
// 加载顺序。
for (i = 0, len = urls.length; i < len; ++i) {
queue[type].push({
urls: [urls[i]],
callback: i === len - 1 ? callback : null, // 回调只添加到最后一个URL
obj: obj,
context: context
});
}
}
}
//如果之前的这种类型的加载请求正在进行中，那么我们将
//轮到我们了。否则，获取队列中的下一项。
if (pending[type] || !(p = pending[type] = queue[type].shift())) {
return;
}
//获取head标签
head || (head = doc.head || doc.getElementsByTagName('head')[0]);
pendingUrls = p.urls.concat();
for (i = 0, len = pendingUrls.length; i < len; ++i) {
url = pendingUrls[i];
//开始拼接 标签
if (isCSS) {
node = env.gecko ? createNode('style') : createNode('link', {
href: url,
rel: 'stylesheet'
});
} else {
node = createNode('script', { src: url });
node.async = false;
}
node.className = 'lazyload';
node.setAttribute('charset', 'utf-8');
if (env.ie && !isCSS && 'onreadystatechange' in node && !('draggable' in node)) {
node.onreadystatechange = function () {
if (/loaded|complete/.test(node.readyState)) {
node.onreadystatechange = null;
_finish();
}
};
} else if (isCSS && (env.gecko || env.webkit)) {
// Gecko和WebKit不支持链接节点上的onload事件。
if (env.webkit) {
//在WebKit中，我们可以轮询对文档的更改。样式表
//确定样式表何时加载。
p.urls[i] = node.href; //解析相对url(或轮询不起作用)
pollWebKit();
} else {
//在Gecko中，我们可以将请求的URL导入到<style>节点中
//轮询node.sheet.cssRules是否存在。
node.innerHTML = '@import "' + url + '";';
pollGecko(node);
}
} else {
node.onload = node.onerror = _finish;
}
nodes.push(node);
}
for (i = 0, len = nodes.length; i < len; ++i) {
head.appendChild(nodes[i]);
//控制台日志部分(不需要可以删除)
//start
var url = pendingUrls[i];
if (/.js/.exec(url)) {
console.log((i + 1) + "--> js成功: " + url);
} else if (/.css/.exec(url)) {
console.log((i + 1) + "--> css成功: " + url);
} else {
console.log("error: " + url);
}
//end
}
//结束计时
endTime = new Date().getTime();
//控制台日志部分(不需要可以删除)
//(startTime (在此方法开头),endTime(在此行代码上方) 都可以删除 )
console.log("执行时间: " + (endTime - startTime) + " ms ------- end时间戳:" + endTime);
}
/**
开始轮询，以确定指定的样式表何时完成加载
轮询在加载所有挂起的样式表或加载10个样式表之后停止
秒(防止停顿)。
@method pollGecko
@param {HTMLElement} node 样式节点。
@private
*/
function pollGecko(node) {
var hasRules;
try {
//我们不需要存储这个值，也不需要再次引用它，但是
//如果我们不存储它，闭包编译器会认为代码是无用的
//删除它。
hasRules = !!node.sheet.cssRules;
} catch (ex) {
// 异常意味着样式表仍在加载。
pollCount += 1;
if (pollCount < 200) {
setTimeout(function () { pollGecko(node); }, 50);
} else {
//我们已经轮询了10秒钟，什么都没有发生。
//停止轮询并完成挂起的请求，以避免进一步阻塞请求。
hasRules && finish('css');
}
return;
}
// 到这里，样式表已经加载。
finish('css');
}
/**
开始轮询，以确定挂起的样式表何时完成加载
在WebKit。轮询在加载所有挂起的样式表或加载10个样式表之后停止
秒(防止停顿)。
@method pollWebKit
@private
*/
function pollWebKit() {
var css = pending.css, i;
if (css) {
i = styleSheets.length;
// 查找与挂起的URL匹配的样式表。
while (--i >= 0) {
if (styleSheets[i].href === css.urls[0]) {
finish('css');
break;
}
}
pollCount += 1;
if (css) {
if (pollCount < 200) {
setTimeout(pollWebKit, 50);
} else {
//我们已经轮询了10秒钟，什么都没有发生
//表示样式表已从文档中删除
//在它有机会装载之前。停止轮询并完成挂起
//请求以防止阻止进一步的请求。
finish('css');
}
}
}
}
// Public Methods --------------------------------------------------------
return {
/**
请求指定的CSS URL或URL并执行指定的
当它们完成加载时回调(如果有的话)。如果一个url数组是
指定后，样式表将与回调并行加载
将在所有样式表加载完成后执行。
@method css
@param {String|Array} urls CSS URL或要加载的CSS URL数组
@param {Function} callback (optional) 回调函数
@param {Object} obj (optional) 对象传递给回调函数
@param {Object} context (optional) 如果提供，回调函数将在这个对象的上下文中执行吗
@static
*/
css: function (urls, callback, obj, context) {
load('css', urls, callback, obj, context);
},
/**
请求指定的JavaScript URL并执行指定的
当它们完成加载时回调(如果有的话)。如果一个url数组是
指定并得到浏览器的支持后，脚本将被加载进来
并将在所有脚本完成后执行回调
完成加载。
目前，只有Firefox和Opera支持同时并行加载脚本
保存执行顺序。在其他浏览器中，脚本将是
排队并一次加载一个，以确保正确的执行顺序
@method js
@param {String|Array} urls JS URL或要加载的JS URL数组
@param {Function} callback (optional) 回调函数
@param {Object} obj (optional) 对象传递给回调函数
@param {Object} context (optional) 如果提供，回调函数将在这个对象的上下文中执行吗
@static
*/
js: function (urls, callback, obj, context) {
load('js', urls, callback, obj, context);
}
};
})(this.document);
js文件 与 css文件 异步加载的更多相关文章
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
- Javascript 文件的同步加载与异步加载
HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- javascript 同步加载与异步加载
HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...
- angularJS1笔记-(19)-angular异步加载包的方式
我们平时写的导入包的方式都是同步方式,有时候会显得过于卡顿,这样我们就可以使用异步加载的方式. script.js方式: 执行结果为: 异步加载还可以加载多个即为script([,,,],functi ...
- 如何调试异步加载的js文件（浏览器调试动态加载js）
描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...
- 使用getScript()方法异步加载并执行js文件
使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(u ...
- 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- angularLoad（用以异步加载js文件）
angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...
随机推荐
- Qt 窗口相关的常用操作
PS: 本文使用的是Qt 4.8.4版本,不同版本代码可能会有差异 设置窗口标题 setWindowTitle(QString::fromLocal8Bit("易语言")); 禁用 ...
- [AIR] NativeExtension在IOS下的开发实例 --- Flex库项目的创建(二)
来源:http://bbs.9ria.com/thread-102038-1-1.html 上一章,我已经介绍了如果创建IOS库文件,并定义了两个方法ShowIconBadageNumber和Init ...
- RabbitMQ-python应用
介绍 官方文档:https://www.rabbitmq.com/tutorials/tutorial-one-python.html RabbitMQ是一个基于AMQP协议的消息代理.它的工作就是接 ...
- httpclient4.5.2 Post请求支持http和https
先导入所需的jar包,pom.xml <dependency> <groupId>org.springframework.boot</groupId> <ar ...
- django后台xadmin如下配置（小结）
django-admin文档:https://xadmin.readthedocs.io/en/latest/index.html目录: 1.xadmin基本配置 2.配置后台显示的模型类 3.后台注 ...
- [openssl][nginx] 使用openssl模拟ssl/tls客户端测试nginx stream
一 server的配置 nginx # cat conf/nginx.conf daemon off; events { debug_connection ; } stream { upstream ...
- Please provide compiled classes of your project with sonar.java.binaries property
是因为一个jar包版本的原因,sonar-java-plugin-5.1.0.13090.jar 需要降级 https://repo.maven.apache.org/maven2/org/sonar ...
- pytest使用
安装: pip install pytest pip install pytest-cov utils.py代码 def add(a, b): return a+b def inc(x): retur ...
- linux的vim基本使用
转自:https://www.cnblogs.com/qq631243523/p/10191714.html 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在 ...
- Scikit-learn库
1 简介 对Python语言有所了解的科研人员可能都知道SciPy——一个开源的基于Python的科学计算工具包.基于SciPy,目前开发者们针对不同的应用领域已经发展出了为数众多的分支版本,它们被统 ...