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>
その他参考ページ