複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ

WEBページの表示スピードを高速化させるために、複数のJSやCSSを非同期のAsyncで読み込んだり、Deferで読み込んだりするためのソースをメモ。

JSとCSSを遅延読み込みするスクリプト

jQueryに依存するスクリプトなので、実行するには事前にjQueryを読み込んでおく必要があります。JSとCSSを混在させてURLを指定すればOK。これを<head>~</head>の間に書いて使うものっぽいですが、私は</body>の後ろに書いて使っています。どちらがいいかは好みです。

<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script>
jQuery(function(){
   //var r=Math.ceil((new Date()*1)*Math.random()); //Zenback用デフォルト
   var r = new Date(); //Zenback用
   var r = ''+r.getFullYear()+('0'+r.getMonth()).slice(-2) ;  //randの値を年月(例 201901)にする
   require_onload( [
       '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css',
       '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css',
       '//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css',
       '//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css',
       '//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css',
       '//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css',
       '//w.zenback.jp/v1/?base_uri=https%3A//qwerty.work&nsid=1234561665775123456%3A%3A123456466455123456&rand='+r,
       '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
       '//jsoon.digitiminimi.com/js/widgetoon.js'
   ] );
});

function require_onload( arg ) {
   if (is_array(arg)){
       var element = [];
   for(var i=0; i<arg.length; i++){
       if ( arg[i].match(/\.css/) ){ //末尾だけ確認したいときは/\.css$/
           add_child_css(arg[i]);
       }
       else if ( arg[i].match(/\.js|w\.zenback.\jp/) ){ //末尾だけ確認したいときは/\.js$/
           add_child_js(arg[i]);
       }
       else{ alert('check url : ' + arg[i]) }
       }
   }
   else{
       if ( arg.match(/\.css/) ){ //末尾だけ確認したいときは/\.css$/
       add_child_css(arg);
   }
       else if ( arg.match(/\.js|w\.zenback.\jp/) ){//末尾だけ確認したいときは/\.js$/
       add_child_js(arg);
   }
       else{ alert('check url : ' + arg[i]) }
   }
}

function add_child_js(src){
   var element = document.createElement("script");
   element.src = src;
   document.body.appendChild(element);
}

function add_child_css(src){
   var css_element = document.createElement('link');
   css_element.type = 'text/css';
   css_element.rel  = 'stylesheet';
   css_element.href = src;
   document.body.appendChild(css_element);
}

function is_array(obj) {
   return Object.prototype.toString.call(obj) === '[object Array]';
} 

参考ページ

CSSを非同期で読み込むスクリプト例

jQueryに依存していないので、単体で使用できます。下の方のエレメントをいじくればJSやDNS-Prefetchなどに転用可能です。これも<head>~</head>の間に書くか、</body>の後ろに書くかは好みです。

<script>
   window.addEventListener("load",function(){
    const css = [
         "//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css",	
         "//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css",
         "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css",
         "//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css",
         "//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css",
         "//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css"
 ];

for(i in css){ let html = document.createElement("link"); html.rel = "stylesheet"; html.href = css[i]; html.async = true; document.head.appendChild(html); } }); </script>

参考ページ

DeferとAsyncを指定して非同期で読み込むスクリプト

参考ページ

DNS-Prefetchを非同期で行うスクリプト例

JSやCSSから横道逸れますが、半角スペースで接続先を指定する例。DNS-Prefetchを非同期で実行するスクリプトですが、エレメントの部分を入れ替えれば、CSSやJSにも使えそうです。jQueryなしで使えます。

<script>
(function(c){var d="//jsoon.digitiminimi.com/js/widgetoon.js //w.zenback.jp/_p/js/jquery.min.js //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js /include/GoogleAnalytics.js".split(" "),a,b,e=c.createDocumentFragment();for(a=d.length-1;0<=a;a--)b=c.createElement("link"),b.setAttribute("rel","prefetch"),b.setAttribute("href",d[a]),b.setAttribute("as","script"),e.appendChild(b);c.getElementsByTagName("head")[0].appendChild(e)
})(document);
</script>

その他参考ページ

全ブラウザ対応!preload で css を非同期で読み込み高速化

https://firstlayout.net/load-css-asynchronously-with-loadcss/

前へ

Chromium(クロニウム)ブラウザのダウンロードリンク

次へ

2019年2月のWindows Update 月例ロールアップ (Windows10/8.1/7)