Javascriptのネイティブコーディングを、趣味として深堀りする、ユゲタです。
IEが無くなった今、ES6に対する後ろめたい気持ちなどは、全く無く、
ある程度の下位互換性を考えておけば、できるだけ効率的なコーディングをする、または、トラブルの少ないコーディングをする事を追求したいと、常日頃から考えています。
そんな中、GoogleのSEOでCSRよりもSSRが有利という事もあり、出来る限り、サーバーサイドでnodejsを使って、非同期コンテンツを同期処理のように扱いたいと考え、
昨今のエンジニアはみんな、Nextjsのようなフレームワークに走りがちになります。
フレームワークがどうこういう話ではないんですが、そんな中、function内部で非同期処理を行っている時に、promise処理で、受け取り後をreturn(resolve)処理できるようにしたいために、
awaitを使わないといけません。
そして、awaitを使うために、asyncを定義してあげなければいけません。
この仕組が理解できなくて、困っているエンジニアも多いと思うんですが、適宜使用する場合にのみasyncから順を追って記載していく方法では、どうしてもトラブルになりがちなので、
もはやfunctionには、asyncをセットで記述しておくという方がいいのではないかと考えてみました。
処理速度デメリットはあるのか？
非常に簡易なプログラムを書いて、処理速度判定をしてみました。
<div>
<button id="test_1" type="button">async無し</button>
<input type="text" name="test_1" />
</div>
<div>
<button id="test_2" type="button">async有り</button>
<input type="text" name="test_2" />
</div>
<script>
(function(){
let btn_1 = document.getElementById("test_1");
let btn_2 = document.getElementById("test_2");
let txt_1 = document.querySelector("[name='test_1']");
let txt_2 = document.querySelector("[name='test_2']");
btn_1.addEventListener("click" , disable_async);
btn_2.addEventListener("click" , enable_async);
async function enable_async(){
let start = (+new Date());
let res = await calc_1();
txt_2.value = res +" : "+ ((+new Date()) - start);
}
function disable_async(){
let start = (+new Date());
let res =
calc_1();
txt_1.value = res +" : "+ ((+new Date()) - start);
}
function calc_1(){
let a = 2;
for(let i=0; i<100000000; i++){
a += 2;
}
return a;
}
})();
</script>
これをindex.htmlなどというファイル名で保存して、そのローカルファイルのままブラウザで開いてみて、「async有り」と「async無し」のボタンを押すと、それぞれの処理結果と処理時間がミリ秒で表示される仕組みにしています。
すると、毎回ほんの少しぐらいの処理速度の違いはありますが、async有りと無しでは、ほぼ違いがないという事がわかりました。
結論
この結果から、functionには、asyncをセットで付けておいたほうがいいという結論に、個人的にしてみました。
もちろん、asyncを使う場合は、非同期処理なので、ネットワークや外部サーバーなどの速度要因に引っ張られることが多くなると思うので、asyncを書いて便利にawaitできるようにしておくことの方が、
プログラミング効率の向上につながるということが分かりました。
asyncをより高速に行うという事を追求しているライブラリなどをgithubで公開している人もいるようなので、こうした技術向上を追求したい人は、このようなサイトを読んでみてもいいかもしれませんね。
より高速な非同期処理ライブラリ
より便利にasyncできるようにすることを追求したいユゲタでした。
