Script on qwerty.work

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

Sat, 09 Feb 2019 20:38:57 +0900

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

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

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

非同期で使用するなら、jQueryと読み込み順がバラバラになるasyncを使うとうまくいかなくなります。jQueryの後に順番通りに読み込むdeferを使う方がよいです。

<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/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/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]';
}

参考ページ

https://pgmemo.tokyo/data/archives/517.html https://pgmemo.tokyo/data/archives/517.html

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

jQueryに依存していないので、単体で使用できます。下の方のエレメントをいじくればJSやDNS-Prefetchなどに転用可能です。これも～の間に書くか、``の直近や後ろに書くかは好みです。これは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/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"
 ];
<br>
 for(i in css){
   let html = document.createElement("link");
   html.rel = "stylesheet";
   html.href = css[i];
   html.async = true;
   document.head.appendChild(html);
   }
});
</script>

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>

その他参考ページ

https://webkaru.net/jquery-plugin/lazy-script/ https://webkaru.net/jquery-plugin/lazy-script/

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

CSS限定！もっとシンプルな方法

スタイルシート（CSS）限定ですが、Javascript無しのもっとシンプルな方法で非同期読み込みできる方法を見つけましたので参考にメモ。（2020/05/18追記）

https://curio-shiki.com/blog/webpage/what-we-do-for-speed https://curio-shiki.com/blog/webpage/what-we-do-for-speed

https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657 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追記）

CSSを非同期で読み込むいろいろな方法 - QWERTY.WORK

LANの空きIPアドレスを一斉に調べるコマンドとPowerShellスクリプト例

Sun, 27 Nov 2016 09:29:02 +0900

固定IPを使用するLANの中で、今どのIPアドレスが空いているか適当にpingを打ってみることがありますが、連続して応答が返ってくるとちょっと疲れます。1～254まで全部手動で行うのは面倒なので、コマンドの例を探したらありましたのでメモ。

コマンドプロンプトの例

例えば、192.168.0.2～192.168.0.10を調べる場合

指定した範囲でpingとarpを連続で打つコマンドです。

for /l %i in (2,1,10) do ping -w 1 -n 1 192.168.0.%i && arp -a 192.168.0.%i

最初の**（2,1,10）は変数「%i」**を2から10まで1ずつ加算していくことを表しています。

結果のログをテキストファイルで残す場合

コマンドの後ろに**» result.txt**など任意のファイル名を記載します。

for /l %i in (2,1,254) do ping -w 1 -n 1 192.168.0.%i && arp -a 192.168.0.%i >> result.txt

上記のようにファイル名のみ指定すると、ファイルの保存先はコマンドを実行したディレクトリに保存されます。(ほとんどの場合、ユーザーフォルダ）

分かりやすい場所に保存する場合はd:\result.txtなど、任意のディレクトリに変更します。

バッチファイルを作る場合

このコマンドをバッチファイルにする場合は、3カ所ある**「%i」を「%%i」にして「.bat」**の拡張子を付けた名前で保存します。

for /l %%i in (2,1,254) do ping -w 1 -n 1 192.168.0.%%i && arp -a 192.168.0.%%i >> result.txt

結果について

応答があったもののみがテキストファイルに出力されていますので、ここにないIPアドレスが空いているということになりますが、たまたま電源が入っていない機器も含まれるので注意が必要です。

PowerShellのスクリプトの例

こちらはPowerShellで192.168.0.1～192.168.0.255まで連続でpingを送信するスクリプトです。以下のスクリプトをPowerShellに貼り付けるか、メモ帳で**「.ps1」**という拡張子を付けて保存します。

$date = Get-Date -Format _yyyy_MMdd_HHmmss
for ($i = 1; $i -lt 255; $i++) {
        ping 192.168.0.$i >> pinglog$date.txt
}

実行すると、実行結果の入ったテキストファイルが**「pinglog_2016_1127_092028.txt」**のようなファイル名で実行ディレクトリに保存されます。

PowerShellでテキストでURL一覧を読込み一斉にpingテストする

Sat, 26 Nov 2016 23:09:39 +0900

WordPressやMovableTypeで使っているブログ更新時のPING送信先が活きているか、PowerShellで簡単に調べるスクリプトを見つけたのでメモ。

ping送信先のテキストファイルを用意

例えば、以下のテキストをpinglist.txtという名前を付けて保存

google.co.jp
facebook.com
yahoo.co.jp

スクリプト作成

以下のスクリプトをメモ帳に貼り付け、先ほどのpinglist.txtと同じ階層にping.ps1といった感じで適当に**.ps1**の拡張子を付けて保存します。

echo pingを実行しています。しばらくお待ちください。

$date = Get-Date -Format _yyyy_MMdd_HHmmss
$target = Get-Content pinglist.txt

foreach ($item in $target) {
  ping $item >> pinglog$date.txt
  }

echo 結果を「pinglog$date.txt」に保存しました。

pause

スクリプト実行

スクリプトファイル（ping.ps1）を右クリックして「PowerShellで実行」をクリックするとスクリプトが実行されます。

　↓

実行結果

実行結果は以下のような内容でスクリプトファイル（ping.ps1）と同じ階層に**「pinglog_2016_1126_225217.txt」**といったテキストファイルが作成されているので開いて確認できます。

これで、今後の確認作業が楽になりそうです。

SQLみたいにFacebookの情報を取得できるFQLについてのメモ。

Tue, 29 Jan 2013 15:32:34 +0900

役にたちそうなので、とりあえずメモ。

Facebook Query Language (FQL) リファレンスで取得できる情報の種類を確認できます。

Graph APIエクスプローラでリクエストに対して、取得できる実際のデータを見ることができます。タブを切り替えればFQL文を実行してみることもできます。

Script on qwerty.work

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

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

参考ページ

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

参考ページ

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

参考ページ

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

その他参考ページ

CSS限定！もっとシンプルな方法

上記の参考ページにあったソース例

LANの空きIPアドレスを一斉に調べるコマンドとPowerShellスクリプト例

コマンドプロンプトの例

例えば、192.168.0.2～192.168.0.10を調べる場合

結果のログをテキストファイルで残す場合

バッチファイルを作る場合

結果について

PowerShellのスクリプトの例

PowerShellでテキストでURL一覧を読込み一斉にpingテストする

ping送信先のテキストファイルを用意

スクリプト作成

スクリプト実行

実行結果

SQLみたいにFacebookの情報を取得できるFQLについてのメモ。