Giter VIP home page Giter VIP logo

tiny-loader.js's Introduction

Tiny-Loader.js

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"事件的负担,减少页面的加载时间。

使用 Tiny-Loader

具体使用说明和高阶使用技巧请看我们的博客文章

Demo

疑问或问题

有任何疑问或者问题,可以在issue中向我们提出来,我们会第一时间解决。

tiny-loader.js's People

Contributors

delai avatar pangxie1991 avatar

Watchers

James Cloos avatar nnuujj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.