Code Monkey home page Code Monkey 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

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tiny-loader.js's Issues

怎么找到加载的js中的错误

在chrome的开发者工具中,所有加载的js的错误都显示到了tiny-loader.js里面,无法定位到真正的错误位置。有什么解决方案吗?

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.