headLoader.js

<script type="text/javascript" data-dir="/" data-js="a,b,c,d" data-css="a,b,c" src="/headLoader.min.js"></script>

以上代码为采用了headLoader.js技术，它可实现如下常规页面加载代码的功能

          <script type="text/javascript" src="/a.js"></script>

          <script type="text/javascript" src="/b.js"></script>

          <script type="text/javascript" src="/c.js"></script>

          <script type="text/javascript" src="/d.js"></script>
<link rel="stylesheet" href="/a.css" type="text/css">
<link rel="stylesheet" href="/b.css" type="text/css">

<link rel="stylesheet" href="/c.css" type="text/css">

        

headerLoader.js不仅能实现上述功能，还会自动将资源缓存到indexedDB，当刷新页面或者其它页面再次请求该资源时，直接从缓存读取而不会有额外的网络请求。

headLoader的使用方法有标签属性定义法和命令行语句法，可以任选其一，而对于更复杂的逻辑要求，也可以混合使用，比如用标签属性定义法加载调度和配置文件，在调度和配置文件中用命令行语句法来实现更灵活的加载.下面介绍一下两种方法的具体使用:

1.标签属性定义法

<script type="text/javascript" data-dir="/media/" data-css="public/css1,css2,_css" data-js="libs/jquery-3.1.0,libs/jquery.elfAlert,_js" data-font="font/a.woff,font/b.woff" data-file="html/a.html,svg/a.svg"  src="/media/js.min/libs/headLoader.min.js"></script><!--引入js-->

2.使用代码程序的方法

也可以先让headLoader.js先加载一个调度文件，然后在调度文件中使用代码程序加载更多的文件，当然还是要首先引入headLoader.js

<script type="text/javascript" src="/media/js.min/libs/headLoader.min.js"></script><!--引入js-->

然后使用javascript定义

 // 首先创建一个headLoader实例
let loader=new headLoader();
// String | js、css资源路径，默认"./" | 可选项
loader.dataDir="/media/";
// Array | CSS资源，默认为空数组"[]" | 可选项
 loader.dataCss=['public/css1','public/css2','_css'];
// Array | JS资源，默认为空数组"[]" | 可选项
 loader.dataJs=['libs/jquery-3.1.0','libs/jquery.elfAlert','_js'];
// Array | 字体资源，默认为空数组"[]" | 可选项
 loader.dataFont=['font/a.woff','font/b.woff'];
// Array | 支持更多类型的资源，例如html、svg等，默认为空数组"[]" | 可选项
loader.dataFile=['html/a.html','svg/a.svg'];
// Number | 缓存生命周期参数lifeCycle，如果为整数时，，单位小时，默认24，是从2000/1/1 00:00:00开始每24个小时检查更新一次 | 可选项
// Array | 缓存生命周期参数lifeCycle，如果为数组时，例如[168,48]，表示生命周期为168小时，延迟时间参数cycleDelay为48小时 | 可选项
 loader.lifeCycle=24; //[注意]当数据类型为Array时,第一个值为lifeCycle,第二个值为cycleDelay
// Number | 每次缓存生命周期延迟时间，单位小时，默认0，建议最大值24 | 可选项
 loader.cycleDelay=0;
// Boolean | 线下与线上路径是否自动切换，例如"/js/"转为"/js.min/"，"/a.js"转为"a.min.js"，默认False | 可选项
 loader.dataActive=false;
// Boolean | 是否显示加载统计，默认false | 可选项
 loader.showLog=false;
// Number, 0或1 | 预加载开关 1:预加载打开(不应用于当前页面)，0:预加载关闭（加载后立即应用于当前页面）。 默认0 | 可选项
 loader.preload=0;
// Function | 外部命令法可以定义回调函数，参数为请求的数据结果 | 仅用于命令行模式 | 可选项
loader.callback=function(_data){console.log(_data)};
await loader.run()
// run()结果只有一个值时返回：{"/media/css/public/css.css":value, ...}
// run()结果有多个值时返回：[{"/media/css/public/css.css":value, ...},...]
// run()结果没有值时返回：false
// let result=await loader.run();
          

-或者在js中这样写:

 let loader=new headLoader({
   dataDir:"/media/",
   dataCss:['public/css1','public/css2','_css'],
   dataJs:['libs/jquery-3.1.0','libs/jquery.elfAlert','_js'],
   dataFont:['font/a.woff','font/b.woff'],
   dataFile:['html/a.html','svg/a.svg'],
   callback:function(_data){console.log(_data)}
  });
 await loader.run()
          

在实例化headLoader时有一个生命周期参数lifeCycle，用来定义从2000/1/1零点以来每lifeCycle小时更新一次数据。
获取更新时间点有如下作用：
对于网站管理者，要选择合适的时间点关闭网站，直到网站更新完毕。
对于用户，在更新时间点后打开网页将会使所需数据与服务器保持同步。
由于存储在客户端的数据都有一个有效期限，为了避免用户端加载的数据模块不能兼容，网站版本更新一定要算好生命周期时间点再进行操作。
例如：网站有a、b两个模块，本来应该零点更新网站，然而8点才更新，而且8点之前也没有关闭网站服务，那么用户在8点前加载了a模块，根据规则为旧版本的a模块做了延期，而8点后操作的过程中，需要b模块，那么程序会根据规则下载新版本的b模块，此时旧版本的a与新版本的b混用，如果不兼容，就会造成意外的风险。

网站新版本上线一定严格按照数据的生命周期来完成。

1.为了方便获取下次更新时间，掌握网站更新时机，可以用下面的方法计算：

let loader=new headLoader();
            //如果每36小时更新一次，获取下次更新时间
            loader.nextLife(36);
            //返回一个日期格式的字符串，例如 '2022/5/21 12:00:00'
            //如果每24小时更新一次，每次更新延迟3小时，获取下次更新时间
            loader.nextLife(24,3);
            //返回一个日期格式的字符串，例如 '2022/5/21 3:00:00'
          

2.您也可以试试这个工具：

• 生命周期：

  -+

  小时 //对应参数 lifeCycle
• 每次延迟：

  -+

  小时 //对应参数 cycleDelay
• 计算未来：
  更新时间点
• 开始计算恢复默认

1.脚本时间参数定义法

通过给headLoader.js路径修改不同的时间参数，可以强制清除生成的缓存数据。

例如：原来页面插入headLoader.js脚本如下：

<script type="text/javascript" src="/media/js.min/libs/headLoader.min.js?v=2022-05-25"></script><!--引入js-->

现在，将路径时间参数“v=2022-05-25”修改为“v=2025-07-07”，即可强制清除缓存数据，并重新加载最新的数据，示例如下：

<script type="text/javascript" src="/media/js.min/libs/headLoader.min.js?v=2025-07-07"></script><!--引入js-->

友情提示

• 参数必须采用时间格式或时间戳，例如"2025-07-07"，使用其它形式的参数不会触发强制清除缓存的功能。
• 强制清除缓存后会记录时间戳参数，后续其它的页面有不同的参数时，如果时间小于记录的时间将不会再次执行清除缓存功能。

2.代码程序清除法

            let loader=new headLoader();
            //强制清除缓存，执行后需要刷新页面，否则可能造成模块缺失。`
            loader.db.delete();
          

友情提示

• 强制清除缓存后重新刷新页面会有一定的时间重新加载，时间长短依据网络质量和数据包大小，请知晰；
• 此方法用于异常情况下的急救措施，正常情况下程序会根据默认的生命周期自动差异化更新数据。

在用户操作的空闲期间，将必要的资源预加载并保存到indexedDB，在用户切换到其它页面时，headLoader直接从indexedDB中获取，减少网络请求给页面渲染造成的卡顿。

一个预加载实例（您可以根据需要增加其它参数）：

 let loader=new headLoader();
loader.dataDir="/media/";
loader.dataCss=['css1','css2'];
loader.dataJs=['js1','js2'];
loader.preload=1;
await loader.run();
          

以上代码实现将以下资源预加载：

            /media/css/css1.css
            /media/css/css2.css
            /media/js/js1.js
            /media/js/js2.js
            

预加载利用闲时加载资源，当前页面或者其它页面需要时，将会直接从缓存中无延迟的加载，以达到快速响应的目的。

当程序运行过程中，headLoader可实现热加载，实现对模块随需随加载。

例如程序在运行过程中，需要xxx.js模块，而页面之前又未加载该资源，那么可以用如下方法实现热加载：

let hotLoad=function(_module){
              return new Promise((_resolve,_reject)=>{
                let loader=new headLoader();
                loader.dataDir="/media/";
                loader.dataJs=[_module];
                await loader.run().then(_=>_resolve(_));
              });
            }
            //假设模块路径为“/media/libs/xxx.js”
            hotLoad("libs/xxx").then(_=>console.log(_));
          

热加载适用于代码较大但是又不确定是否会调用的脚本资源。

headLoader可以将一些操作系统没有的字体缓存下来，使整个网站所有页面再次使用时可以快速载入。

例如网站需要使用elf_round字体，而操作系统又没有安装这个字体，如果使用通常的CSS链接方式，会使页面每次载入时都需要重新从服务器请求，导致效率很低，那么可以通过headLoader.js加载字体，使字体包加载一次后便缓存下来，后续使用字体可以快速从缓存中获取：

              let loader=new headLoader();
              //字体包路径为“/font/elf_round.woff”
              //如果需要更多字体在数组中追加正确路径即可
              loader.dataFont=["/font/elf_round.woff"];
              //加载后立即应用当前页面
              loader.preload=0;
              //缓存生命周期为7*24小时
              loader.lifeCycle=7*24;
              await loader.run();
              //在页面中直接插入样式标签，也可以在CSS中定义，字体名称就是字体包文件名
              let fontStyle=document.createElement("style");
              fontStyle.setAttribute("type","text/css");
              fontStyle.innerHTML=`*{font-family:elf_round, "微软雅黑", sans-serif;}`;
              document.head.appendChild(fontStyle);
          

同站所有页面（重复）使用该方法加载该字体时仅从缓存中读取，而不会有额外的网络请求。

headLoader可以加载过的图片缓存下来，使整个网站所有页面再次使用时可以快速载入。

1、html中定义

 <img data-file="/images/1.png" title="图1" class="middle" style="width:90%;max-width:751px;">
             <img data-file="/images/2.png" title="图2" class="middle" style="width:500px;">
          

2、javascript代码

              let loadFiles=async function(_e){
                //实例化一个headLoader
                let thisLoader=new headLoader();
                //缓存生命周期为7*24小时
                thisLoader.lifeCycle=7*24;
                let thisSrc=_e.getAttribute("data-file");
                //thisLoader.loadFile(_src)方法可用于加载图片数据，当数据库中数据有效时，不会重复加载。
                await thisLoader.loadFile(thisSrc);
                //thisLoader.db.getBase64(_src)方法可返回图片的base64编码
                _e.src= await thisLoader.db.getBase64(thisSrc);
              };
              let images=document.querySelectorAll("img[data-file]");
              images.forEach(_e=>loadFiles(_e));
          

同站所有页面（重复）使用该方法加载该图片时仅从缓存中读取，而不会有额外的网络请求。

headLoader不仅可以加载缓存JS、CSS文档，还支持更多的类型的文件，例如HTML、SVG等。

支持的文本文件类型有："js","css","svg","text","xml","json","html","htm"等。

支持二进制文件类型但不限于这些类型："jpg","png","woff"等。

let thisLoader=new headLoader();
            let files;
            //读取一个文件，第一次从网络地址读取，第二次从indexedDB中读取，如果数据过期，会自动更新。
            files=await thisLoader.loadFile("/button.svg");
            console.log(files.value);
            //同理缓存JS并返回所有文件代码
            files=await thisLoader.loadJs(["/default.min.js","/button.js"]);
            //同理缓存CSS并返回所有文件代码
            files=await thisLoader.loadCss(["/index.css","/button.css"]);
            //缓存并读取其它类型文件
            files=await thisLoader.loadFile(["/index.html","/button.svg","/a.jpg"]);
            //从files结果中检索文件代码
            console.log(files.find(_v=>_v.key==="/index.html").value);
            //或者thisLoader.db.getValue(_src)方法可返回文件代码
            console.log(thisLoader.db.getValue("/button.svg"));
            //thisLoader.db.getBase64(_src)方法可返回图片的base64编码
            console.log(thisLoader.db.getBase64("/a.jpg"));
          

同站所有页面（重复）使用该方法加载该资源时仅从缓存中读取，而不会有额外的网络请求。

headLoader在实例化后生成一个缓存方法的API，可实现多页面缓存共享，同一站点下不同页面可以随意存取。

例如两个不同页面，a.html和b.html，那么通过如下方法可以使两个页面像同一个页面一样的使用缓存：

//a.html和b.html的JS程序需要先各自实例化一个headLoader
let loader=new headLoader();
//定义数据存储的生命周期
loader.lifeCycle=[24,6];//数据有效期为24小时，每次延迟6小时。默认为【24,0]，简写为24。
//初始化
await loader.run();
//在任意一个页面缓存写入使用命令：loader.db.setValue(key,value)
await loader.db.setValue("names",["张三","李四","王五"]);
//在任意任一个页面缓存读取：loader.db.getValue(key)
let names=await loader.db.getValue("names");
console.log(names);//["张三","李四","王五"] 或 false
          

由于缓存仓库使用indexedDB，因此容量不受限制，您可用它应用大数据的缓存共享及管理。

让headLoader.js只加载一个调度文件，仅通过修改调度文件实现整个站点所有页面的资源调配。

在所有的HTML页面插入相同的javascript标签，使其加载dispatch.js

<script type="text/javascript" data-dir="/" data-js="dispatch" src="/headLoader.min.js"></script>

dispatch.js程序，您可以根据需要修改使用：

(function(_g){
  /**
     *此部分为配置项代码，可根据项目需要修改
  */
  //基础CSS，所有页面都用
  _g.baseCss=['elficons','dracula','animate'];
  //基础JS，所有页面都用
  _g.baseJs=['libs/jquery','libs/jquery.cookie','libs/highlight'];
  //基础字体文件，所有页面都用
  _g.dataFont=["/font/elfRound/elf_round.woff"]
  //明确URL路径所用的资源
  _g.pathSource={
    /**
      *页面的URL路径包含以下字符串，加载指定的库，
      *_css代表与当前页面同名的css文件,例如/a.html时加载/media/css/a.css文件，_js同理
    */
    //此项匹配"/map/index.html"
    "/map/":{
      dataCss:[..._g.baseCss,'_css'],
      dataJs:[..._g.baseJs,'_js'],
      dataFont:[..._g.dataFont]
    },
    //此项匹配"/icon/index.html"
    "/icon/":{
      dataCss:[..._g.baseCss,'_css'],
      dataJs:[..._g.baseJs,'libs/clipboard','_js','utils/pageInit'],
      dataFont:[..._g.dataFont]
    },
    //可以使用通配符"*"代表所有字符，此项匹配类似"/news/a.html"或者"/news/all/a.html"等
    "/news/*":{
      dataCss:[..._g.baseCss,'_css'],
      dataJs:[..._g.baseJs,'libs/fuse','_js'],
      dataFont:[..._g.dataFont]
    },
    //前面未定义的页面，加载如下资源，这行一定要放到最后
    "*":{
      dataCss:[..._g.baseCss,'_css'],
      dataJs:[..._g.baseJs,'_js','utils/pageInit'],
      dataFont:[..._g.dataFont]
    }
  };
  /**
    *以下部分为固定的业务执行代码，不必修改
  */
  let getOption=function(_path){
    let path=_path.replace(/(\/.*)((\.html)|(index\.html))(.*)$/,"$1$5");
    let option={};
    let paths=Object.keys(_global.pathSource);
    let thisRegexp;
    //去除路径的第一个“/”,如果路径最后为“/”则替换为“/index”
    let selfJsCss=_index=>_index.replace(/^\//,"").replace(/\/$/,'/index');
    for(let i=0; i<paths.length; i++){
      thisRegexp=new RegExp(`^${paths[i].replace('*','.*')}$`);
      if(thisRegexp.test(path)){
        option.dataJs=_global.pathSource[paths[i]].dataJs.map(_v=>_v==="_js" ? `${selfJsCss(path)}` : _v);
        option.dataCss=_global.pathSource[paths[i]].dataCss.map(_v=>_v==="_css" ? `${selfJsCss(path)}` : _v);
        option.dataFont=_global.pathSource[paths[i]].dataFont
        break;
      }
    }
    option.dataDir="/media/";//页面所需数据(例如js,css)的基础路径;
    option.callback=false;
    return option;
  };
  let thisOption=getOption(window===window.top ? window.location.pathname : window.frameElement.getAttribute("src") || window.frameElement["pathname"] || "");
  let loader=new headLoader(thisOption);
  await loader.run();}
)((window.location.origin==="null" || window.location.origin===window.top.location.origin) ? window.top : window);
            

https://github.com/baiyukey/headLoader

*代码仅供学习参考，并不定期更新版本，对于不同版本造成的任何问题，作者不承担任何法律责任，特此声明!