{load()}{widgets}{twttr}{埋め込みツイート}{JavaScript}{函数}=}(6)
{JavaScript}{KDE}=}(2)
{JavaScript}{JavaScript}=}(2)

{JavaScriptはCの皮を被ったLISPである K#9-D657/A-22A2}

JavaScript's functions are first class objects with (mostly) lexical scoping. JavaScript is the first lambda language to go mainstream. Deep down, JavaScript has more in common with Lisp and Scheme than with Java. It is Lisp in C's clothing. This makes JavaScript a remarkably powerful language.

──Douglas Crockford『JavaScript: the Good Parts』Chapter 1: Good Parts, §Analyzing JavaScript
参考: https://pm.ernix.jp/@ernix/105373127827021315

JavaScriptの函数は第一級客体であり,ほとんどの場合有効範囲は字句的である。

=}
{希哲13年}{デライト高速化}{希哲15年4月8日の日記}{HTML の肥大化}{動的読み込み}{認識が甘い}{前縁の重要性}{前縁最適化}{思わぬ収穫}{装体適用}...=}(104)

{希哲15年4月8日の開発 K#F85E/A-E74C-86B0}

3日の開発から6日間に渡って続いたデライト小理腑をいったん終えた。

結果的には主に装体書整理テンプレート整理だったが,これにより,保守性体感表示速度大幅向上が見られた。


装体書テンプレートは, によるデルン初期実装から長いこと継ぎ足しで使ってきたため,古い記述譜類に埋もれて目的のものが探しにくいといった問題慢性的にあった。分割すべき記述が一つの譜類に詰め込まれている,逆に,一つにまとめておくべき記述が複数の離れた譜類に分散している,といったことがよくあった。今回の小理腑ではこの点が大きく改善した。

テンプレートの方は折に触れて整理してきたからまだマシだったが,装体書の方は適当に分割した譜類に大量の記述が詰め込まれている状態だった。そもそも SySS備立すら適当で,.syss 譜類があっても .scss が無いと換配されないなど,多数の譜類を管理出来る状態では無かった。これを機に備立方法から整備した。

装体書整理は当初,HTML の肥大化を恐れて埋め込み装体書見極めに時間をかけ過ぎてしまっていたが,この日,JavaScript や HTML に gzip 圧縮がかかっていなかったことに気付いた。ちょっとした deln.conf間違いだったが,これをきっかけ吹っ切れ作業捗るようになった。結局,転送量を大幅に削減出来た分,多少の冗長性には目を瞑ることにした。

これら作業の結果として,目的の装体テンプレートにすぐ握接出来るようになり,埋め込み装体書調整等も的確に行えるようになった。


表示速度は,ページにもよるが,DOMContentLoaded までの計測値0.5秒近く短縮した。これに装体適用合理化も加わり,体感表示速度ははっきり向上したのが分かる。溶明動き付けをいったん削除したのも大きいかもしれない。デライト初期実装読み込み中途半端遅さ誤魔化すため0.3秒の溶明を入れていた。

現時点でここまで高速化に繋がったことは思わぬ収穫だった。これまで,「デライト高速化」は後縁最適化中心に考えてきた。後縁最適化余地の大きさと負荷軽減重視していたこともあり,前縁最適化期待重視もしていなかった。

希哲13年前縁改革前縁の重要性は分かっていたつもりだったが,まだ認識が甘かったようだ。これに気付いたことも大きな収穫と言えるだろう。


そもそもスクリプト動的読み込みに使っている @icl() とその周辺整理によって生じた描画乱れ解消のために始めた作業で,あまり多くは期待していなかったが,結果的に大収穫となった。

ただし,10日までに盛り込むつもりだった付徴後回しになり,デライト収益目標達成にどう影響するかは不透明だ。

問題が解消するまで出振るい出来ず,他の作業が出来なくなっていたこともあり,作業項目としてのデライト小理腑はここでいったん完了とすることにした。整理が必要な部分はまだまだ残っているが,ほとんどは漸進的作業出来る部分だ。いま出来る範囲でまとまった時間を使ってやる理腑はこれが限度だろう。

{JavaScript}{独自ライブラリ}{変種}{Element.insertAdjacentElement()}{Element.insertAdjacentText()}{要素位置記法}{Element.insertAdjacentHTML()}{HTML タグ}{1年半}{対応関係}...=}(38)

{JavaScript の beforebegin,afterbegin,beforeend,afterend に代わる要素位置記法 K#F85E/A-E74C-3DDA}

脱 jQuery」が叫ばれて久しいが,デライト開発でも脱 jQuery を進めるべく Vanilla JS復習をしていたことがある。その中で,特定要素を基準に別の要素等を挿入する道手メソッド群があることを知った。


<!-- (1) beforebegin -->
<div>
<!-- (2) afterbegin -->
各要素位置
<!-- (3) beforeend -->
</div>
<!-- (4) afterend -->

例えば,上記の要素 div を基準として HTML 文字列 html を挿入したい時,標準的な JavaScript では以下のように書く。

div.insertAdjacentHTML( 'beforebegin', html );  // (1) に挿入
div.insertAdjacentHTML( 'afterbegin', html );   // (2) に挿入
div.insertAdjacentHTML( 'beforeend', html );    // (3) に挿入
div.insertAdjacentHTML( 'afterend', html );     // (4) に挿入

この insertAdjacentHTML() には,要素 を挿入する insertAdjacentElement()テキストノードを挿入する insertAdjacentText() という変種もあるが,どれも beforebeginafterbeginbeforeendafterend という文字列で位置を指定する。

これを見た時,もう少し簡便記法は無いものかと考えてしまった。分からないでもないが,とても多用する気にはなれない。

そこで,希哲社独自開発している Aejs では,暫定的に以下のように書くことにした(要素位置記法以外は最新仕様に合わせている)

div.ins( '<', html );   // (1) に挿入
div.ins( '>', html );   // (2) に挿入
div.ins( '</', html );  // (3) に挿入
div.ins( '/>', html );  // (4) に挿入

HTML タグの開始・終了記号が方向を表す記号にも見えることを利用し,要素の直前を<,要素内の先頭を>,要素内の末尾を</,要素の直後を/> で表す。これを「要素位置記法」と名付けた。

jQuery のように道手を個別に用意するという方法もあるが,新しいインターフェイス定着するまでに時間がかかり,揺らぐものだ。当時の私自身が勉強中だったこともあり,Vanilla JS との対応関係が分かりやすい方が将来的混乱は少ないと判断した。

それからもう1年半以上経つ。理想的かどうかはともかく,十分に簡潔で分かりやすいので結局これをずっと使っている。今では ECMAScript に採用してもらってもいいのではないか,とちょっと思っている。何かと応用も効くだろう。

ただ,簡潔過ぎて文脈が無いと意味が分からないので,あくまでも beforebegin 等の別名としておいた方がいいだろう。


Aejs は未公開ライブラリだが,要素位置記法を使いたいだけなら難しいことは何もない。例えば,insertAdjacentHTML() と同等の機能を持ち,要素位置記法が使える道手メソッド ins_html()Element に追加したければ以下のように書くだけでいい。

Element.prototype.ins_html = function ( pos, html )
{
    return this.insertAdjacentHTML( { '<'  : 'beforebegin',
                                      '>'  : 'afterbegin',
                                      '</' : 'beforeend',
                                      '/>' : 'afterend' }[ pos ] || pos,
                                    html );
};

独自ライブラリ等の構築の際にはぜひ参考にして欲しい。

{JavaScript}
{}