Tiny-Loader.js 轻量级静态资源加载器 - 文章教程

Tiny-Loader.js 轻量级静态资源加载器

发布于 2021-09-19 字数 2732 浏览 883 评论 0

A small loader that load CSS/JS in best way for page performance

特点

已经有那么多加载器了,为什么还要再写一个?Tiny-Loader 有如下特性:

  • 代码短小,不算注释和空行,源码一共 118 行,所以我们推荐将压缩版 inline 到 html 里直接使用
  • 同时支持 css、js 的加载,并自动判断文件类型,用正确的方式加载文件
  • 支持异步加载同步执行

概述

在前端性能优化中,我们会压缩静态文件,懒加载图片,合并请求,来加快页面打开速度。当这些都做完以后,前端性能优化仿佛进入了一个瓶颈,所有的资源都已经最合理化加载了。其实,仔细观察静态资源文件,会发现许多文件我们并不需要在页面一开始就下载它们。这时候,如果有个组件,帮助我根据优先级的不同,在特定的时间下载特定的资源,同时会有需要保证脚本的执行顺序,就能完美的解决这个问题。这个就是 Tiny-Loader 的起源。它与一般资源加载器不同的是,他可以保证资源下载以后的执行顺序,可以动态的进行资源加载。

关于浏览器渲染机制,特别是js对首屏时间的影响,可以移步我的小伙伴@德来在 SegmentFault 上的专栏文章《JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制》

为什么使用 Tiny-Loader

在上古时代,我们讲究的是把所有css都放在页面头部,把所有js放在页面底部。这样可以让页面迅速展示出来,而js的阻塞执行不会影响到body内部元素的渲染。其实,大部分的js加载可以放到load事件后再加载,这样可以释放出许多网络资源,让页面更快的展现在用户面前。

同时,在前端性能优化过程中,发现许多 js,css 并不是页面一开始就需要的,而是在用户某个操作以后,才需要执行/渲染出来的。将那些 js、css 缓加载,可以大大减小页面加载出首屏,页面出 load 事件的负担,减少页面的加载时间。

使用示例

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button class="js-click">点我</button>
<script type="text/javascript" src="./loader.js"></script>
<script type="text/javascript">
// 页面初始化需要加载的静态资源
var initLoadFiles = [
'__tests__/vendor/assert.js',
'__tests__/vendor/jquery.js'
];
window.Loader.sync(initLoadFiles);
 
// 当出现某种交互后,需要下载静态资源
var nBtn = document.getElementsByClassName('js-click')[0];
nBtn.addEventListener('click', function(e) {
window.Loader.async([
'https://b.yzcdn.cn/v2/vendor/jquery-1.10.2.min.js',
'https://b.yzcdn.cn/v2/vendor/require.js',
'https://dn-growing.qbox.me/vds.js'
], function() {
alert('download finish');
});
});
 
// 热点静态资源,或者之后页面需要的静态资源加载
// 假设5s后页面已经全部加载完
setTimeout(function() {
window.Loader.async([
'https://b.yzcdn.cn/v2/build_css/stylesheets/intro/projects/new_intro_a01915dc00.css',
'https://b.yzcdn.cn/v2/vendor/jquery-1.10.2.min.js'
]);
}, 5000);
</script>
</body>
</html>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81917 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0