demo源码github地址
懒加载:是指在资源需要的时候才去用js加载资源;一般不是首屏要看到的;非核心功能的懒加载,按需加载
预加载:是指在加载完成之后才对用户进行显示
懒加载demo
注意:用chrome浏览器打开控制台;选择network;将速度改为Slow 3G;然后再刷新看效果,注意清除浏览器缓存后再刷新看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>懒加载(smileyqp.com)</title>
</head>
<body>
<h1>一个懒加载的demo</h1>
<p>可以用chrome浏览器打开控制台;选择network;将速度改为Slow 3G;然后再刷新看效果,注意清除浏览器缓存后再刷新看效果</p>
<button id='test'>按需加载</button>
<script>
/**
* 懒加载:是指在资源需要的时候才去用js加载资源;一般不是首屏要看到的;非核心功能的懒加载,按需加载
* 预加载:是指在加载完成之后才对用户进行显示
* 图片不会阻塞dom渲染之哟普script标签会阻塞dom渲染
*/
var imgarr = [
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201905/W020190508355754728261.jpg',
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191015381074459750.jpg'
]
var jsarr = [
'https://code.jquery.com/jquery-3.1.1.min.js',
'http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js'
];
function lazyloader(url,type,target){
if(!url) throw new Error('the first arguments ,url, is not given');
if(!type) throw new Error('the second arguments ,type, is not given');
var target = target || document.body; //这里的target不是必须的但是之后会要用到。设置默认参数
var cator = { //算法(命令)模式对象;分别创建img和js资源
img:function(){
var img = new Image();
return img; //返回的是dom对象
},
js:function(){
var script = document .createElement('script');
return script; //返回的是dom对象
}
}
if(typeof url == 'String'){ //单个资源的懒加载;判断参数类型;判断是否单一资源;
var dom = cator[type](); //这里省去了复杂的分支判断;即上面的命令模式对象判断是js还是img的懒加载
dom.src = url;
target.appendChild(dom);
}else{
url.forEach(function(item,index){ //多个资源的懒加载
var dom = cator[type]();
dom.src = item;
target.appendChild(dom);
});
}
}
//实现其他资源加载完成后在加载图片以及js资源;懒加载
window.onload = function(){
lazyloader(imgarr,'img');
lazyloader(jsarr,'js');
}
//实现点击按钮才去加载资源的按需加载;
//例如当点击按钮之后需要去实现一部分功能;非核心功能的懒加载;例如,页面上图片很多的时候,可以用懒加载进行优化
document.getElementById('test').onclick = function(){
lazyloader(imgarr,'img');
lazyloader(jsarr,'js');
}
</script>
</body>
</html>
预加载demo
注意:用chrome浏览器打开控制台;选择network;将速度改为Slow 3G;然后再刷新看效果,注意清除浏览器缓存后再刷新看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预加载(smileyqp.com)</title>
<style>
.cover{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:pink;
text-align: center;
}
.imgcard{
100px;
height:100px;
border:1px solid red;
}
.imgcard img{
100px;
height:100px;
}
</style>
</head>
<body>
<div id = 'img'>
</div>
<h1>一个预加载的demo</h1>
<p>可以用chrome浏览器打开控制台;选择network;将速度改为Slow 3G;然后再刷新看效果,注意清除浏览器缓存后再刷新看效果</p>
<div id = 'cover' class = 'cover'>
0%
</div>
<script>
var imgarr = [
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201905/W020190508355754728261.jpg',
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191015381074459750.jpg',
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191012421431188792.jpg',
'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191014404651968932.jpg'
]
function preload(cover,resource){ //两个参数;一个是cover的dom节点,另外一个是资源列表
var length = resource.length; //记录资源的长度;
var nowadd = 0; //记录当前加载到哪一个节点
resource.forEach(function(item,index){
var img = new Image();
img.src = item;
img.onload = function(){ //onload指加载完成
nowadd ++; //每加载完一个就标注一下;告诉加载到第几个
document.body.append(img);
cover.innerHTML = (nowadd/length)*100+'%';
if(nowadd == length){
cover.style.display = 'none';
}
}
});
}
preload(document.getElementById('cover'),imgarr);
</script>
</body>
</html>
react、vue等的模块化的工程中怎样用懒加载以及预加载来实现优化呢?
- 可以在模块引入的时候进行优化;即不直接import模块而是通过方法的方式将其打包时候分成几个小文件,按需加载
- 不是异步加载的时候接收到的是一个对象;异步加载的时候接收的是一个函数;下面图一是非异步加载直接接收的是一个组件对象,直接
import
的话是打开就引入了;图二用require
和import
的异步加载;用异步加载的方式优化了打包;避免直接打包成一个大的文件;异步加载是打包成一个个小文件进行按需加载的,避免了首页加载时间过于长的问题。(图二相对于图一的优化是:用import
做了一个异步组件)
例如:在以下代码中,没有在头部使用import导入模块来写,而是写成
() => import('./layouts/BasicLayout')
const routerConfig = [{
path: '/',
component: () => import('./layouts/BasicLayout'),
children: [{
path: 'overview',
component: () => import('./routes/Overview')
},{
path: 'user',
component: () => import('./routes/User')
}{
path: 'task/:AreaName/:CarId/:TaskId',
component: () => import('./routes/Task/TaskDetails')
}]
}, {
path: 'exception',
component: () => import('./layouts/BlankLayout'),
children: [{
path: '403',
component: () => import('./routes/Exception/403')
}, {
path: '404',
component: () => import('./routes/Exception/404')
}, {
path: '500',
component: () => import('./routes/Exception/500')
}]
}];
export default routerConfig;