• Stars
    star
    204
  • Rank 186,086 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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中向我们提出来,我们会第一时间解决。

More Repositories

1

vant

A lightweight, customizable Vue UI library for mobile web apps.
TypeScript
22,810
star
2

vant-weapp

轻量、可靠的小程序 UI 组件库
JavaScript
17,505
star
3

zent

A collection of essential UI components written with React.
TypeScript
2,240
star
4

zan-proxy

An extensible proxy for PC/Mobile/APP developer
TypeScript
1,815
star
5

vant-demo

Collection of vant demos.
Vue
1,560
star
6

zanphp

PHP开发面向C10K+的高并发SOA服务 和RPC服务首选框架
PHP
1,441
star
7

nsq

A realtime distributed messaging platform (forked from https://github.com/nsqio/nsq)
Go
628
star
8

zanui-weapp

本仓库已不再维护,请移步 https://github.com/youzan/vant-weapp
JavaScript
537
star
9

bugCatcher

方便产品、开发、测试三方协同管理、测试、监控项目进度和质量,以持续交付。
Java
483
star
10

zan

高效稳定、安全易用、线上实时验证的全异步高性能网络库,通过PHP扩展方式使用。
C
462
star
11

php-co-koa

PHP异步编程: 手把手教你实现co与Koa
458
star
12

Bifrost

A delightful library for app business modular architecture.
Objective-C
393
star
13

YZSpamFilter

有赞垃圾内容过滤工具
Python
281
star
14

TitanRecyclerView

A handy RecyclerView can deal with all headers, footers, and loading shit.
Java
249
star
15

raven-weapp

Sentry SDK for WeApp
JavaScript
159
star
16

show-me-the-code

TypeScript
151
star
17

gatling-dubbo

A gatling plugin for running load tests on Apache Dubbo(https://github.com/apache/incubator-dubbo) and other java ecosystem.
Scala
149
star
18

felint

A smart way to eslint and stylelint for front end
JavaScript
127
star
19

weapp-plugin-demo

有赞微商城所有小程序插件的演示demo
JavaScript
112
star
20

YouzanMobileSDK-Android

有赞云AppSDK是为移动端应用打造的电商交易系统,通过一个SDK便可以在APP内集成有赞提供的整个交易服务。
Kotlin
112
star
21

SigmaTableViewModel

A simple view model for building organized and scalable TableViews.
Objective-C
106
star
22

zanphp-doc

Zan PHP Framework doc
Python
99
star
23

zan_high_performance_mysql

mysql performance optimize book
98
star
24

httpfetch

对http请求进行封装的,通过对接口函数进行代理,实现优雅的http调用
Java
97
star
25

beeyz

beeyz
Java
85
star
26

sprite-loader

A image sprite loader for webpack.
JavaScript
83
star
27

fast-uglifyjs-plugin

hight performance uglify plugin for webpack
JavaScript
70
star
28

systemtap-toolkit

YouZan systemtap toolkit to online analyze on production
Perl
69
star
29

ngx_http_ipip_module

nginx http module for ipip.net
C
64
star
30

YouzanMobileSDK-iOS

有赞云AppSDK是为移动端应用打造的电商交易系统,通过一个SDK便可以在APP内集成有赞提供的整个交易服务。
Objective-C
61
star
31

zanhttpdemo

HTTP demo for Zan PHP Framework
PHP
57
star
32

go-nsq

Go
56
star
33

open-sdk-php

有赞云网关 SDK for PHP
PHP
54
star
34

php-nsq-client

php nsq client
PHP
38
star
35

nsqJavaSDK

nsq client for java
Java
37
star
36

vue-cli-template-vant

注意:本仓库适用于 vue-cli 2.0, vue-cli 3.0 请参考:https://youzan.github.io/vant/#/zh-CN/quickstart
JavaScript
35
star
37

youzan-sdk

Yet Another Node.js SDK for http://open.youzan.com
JavaScript
33
star
38

zent-kit

[DEPRACATED] React 组件库开发脚手架
JavaScript
28
star
39

vant-doc

本仓库已废弃,请使用 https://github.com/youzan/vant/tree/dev/packages/vant-cli
Vue
27
star
40

zan-installer

Youzan Zan Php Installer
PHP
26
star
41

zan-tool

Zan Node Web 框架配套开发工具
JavaScript
23
star
42

yz-cloud-boot

有赞云有容器应用PHP框架
PHP
21
star
43

open-sdk-node

有赞云网关 SDK for Node
JavaScript
20
star
44

vant-icons

本仓库已迁移至 https://github.com/youzan/vant/tree/dev/packages/vant-icons
CSS
18
star
45

zan-thrift

zan thrift代码生成工具
C++
17
star
46

create-utils

Build your own js library by running one command
JavaScript
15
star
47

ngx_http_html_sanitize_module

It's a nginx http module to sanitize HTML5 with whitelisted elements, whitelisted attributes and whitelisted CSS property
HTML
15
star
48

zanphp.io-server

Proudly build with Zan PHP Framework
CSS
13
star
49

open-sdk-Csharp

有赞云网关Api调用C# SDK
C#
12
star
50

spark-nsq-consumer

spark-nsq-consumer
Scala
10
star
51

zent-seed

[DEPRECATED] React 组件库项目模版,请配合 https://github.com/youzan/zent-kit 使用
JavaScript
8
star
52

yz_aerospike

youzan aerospike client branch
C
6
star
53

felint-config

Shell
6
star
54

zan-doc

PHP
5
star
55

zanphp.io

Zan PHP Framework official site
CSS
5
star
56

zan-utils

TypeScript
4
star
57

zantcpdemo

PHP
4
star
58

zanwebsocketdemo

PHP
4
star
59

extension-point-api

有赞云扩展点PHP桩代码
PHP
4
star
60

zanhttp-boilerplate

Youzan ZanPhp HTTP project Boilerplate
PHP
4
star
61

zent-beta

Zent beta 版文档网站
HTML
3
star
62

cloud-connector-doc

云连接器文档
Shell
2
star
63

eslint-plugin-youzan

Eslint plugin for youzan
JavaScript
2
star
64

yz-cloud-boot-demo-app

有赞云有容器App定制PHP测试Demo工程
JavaScript
2
star
65

vue-cli-template-yzae

A vue-cli template for youzan app-engine developer, forked from vue-cli-template-vant.
JavaScript
1
star
66

youzan.github.io

HTML
1
star
67

zantcp-boilerplate

Youzan ZanPHP TCP project Boilerplate
PHP
1
star
68

zan-snippets

Code snippets for various editors at Youzan
Shell
1
star
69

zan-user-guide

Python
1
star
70

zanwebsocket-boilerplate

PHP
1
star