複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ
目次
WEBページの表示スピードを高速化させるために、複数のJSやCSSを非同期のAsyncで読み込んだり、Deferで読み込んだりするためのソースをメモ。
JSとCSSを遅延読み込みするスクリプト
jQueryに依存するスクリプトなので、実行するには事前にjQueryを読み込んでおく必要があります。JSとCSSを混在させてURLを指定すればOK。これを<head>～</head>の間に書いて使うものっぽいですが、私は</body>の直前に書いて使っています。どちらがいいかは好みです。
非同期で使用するなら、jQueryと読み込み順がバラバラになるasyncを使うとうまくいかなくなります。jQueryの後に順番通りに読み込むdeferを使う方がよいです。
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" defer></script> <script defer> 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/[email protected]/css/all.min.css', '//cdn.jsdelivr.net/npm/[email protected]/build/tables-min.css', '//cdn.jsdelivr.net/npm/@tehnoskarb/[email protected]/css/slimbox2.css', '//cdn.jsdelivr.net/npm/@gerhobbelt/[email protected]/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>の直近や後ろに書くかは好みです。これはjQueryに依存しないので、非同期読込はasync、deferのどちらでも大丈夫です。
<script async>
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/[email protected]/css/all.min.css",
"//cdn.jsdelivr.net/npm/[email protected]/build/tables-min.css",
"//cdn.jsdelivr.net/npm/@tehnoskarb/[email protected]/css/slimbox2.css",
"//cdn.jsdelivr.net/npm/@gerhobbelt/[email protected]/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>
その他参考ページ
CSS限定！もっとシンプルな方法
スタイルシート（CSS）限定ですが、Javascript無しのもっとシンプルな方法で非同期読み込みできる方法を見つけましたので参考にメモ。（2020/05/18追記）
Link
Cssを非同期ロードする最も簡単な方法 #javascript - Qiita
https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657
上記の参考ページにあったソース例
<link rel="preload" href="/path/to/my.css" as="style"> <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
なぜコレが非同期なのかわかりませんし、効果があるのかも謎ですが、今度ためしてみようと思います。
以下にもCSS非同期読み込みについてまとめています。( 2021/12/13追記）