読者です 読者をやめる 読者になる 読者になる

peko’s Hatena Blog

ルールを守ってアクセルシンクロォォォ!!!

javascript高速化でやったこと...続き

前回↓の記事の実質続き

初心者向けjavascript高速化のまとめ - 私の奇妙な日記

前回の内容は無作為にレスポンス上げるかぁという思考でしたが、

前の記事にまとめた(他も含む)ことをやれば確かに早くなるんですが

そもそもボトルネックをみつけないことには根本的な遅さを改善出来ない。orz

ということで↑記事の続きです。

良くある対策で難読化させる方法を試みるのですが、この時の制約でお客がソースを見たいという奇怪な条件があったため、環境に難読化を盛り込むとは出来なかったのです。

難読化も一長一短だけどやらないよりはやるべきだという判断。

しかしどうしてもレスポンスが出ないので問題把握も踏まえてjsファイルを難読化させてみたりしたけど変わらず、やけくそでhtmlファイルも難読化させた時に少し変化があったのです。

これでひらめいた画面内に多めの情報を非同期処理で取得しそれをinnerHTMLで生成していた箇所があり、その表示用html文に問題があるのでは……*1

innerTextは文字列を示し、innerHTMLはHTMLを示すのでinnerHTMLを使えば文字列として渡す値をHTMLとして表示出来る。

結論を話すとこの時生成していたhtml表示用文のコメント空白改行がネックだったようで、コイツ等を変換する処理にもたついていたようでした。とはいっても改行なしの記述や難読化にするわけにはいかないし~ということでどうしたかと言うと1回画面表示用のhtml文が出来た時に正規表現でコメント空白改行を削除するコードを噛ませて軽量化する事が出来結果として4秒近くも早くなりました。

ちなみにhtml自体を難読化するとさらに1秒早くなりましたが上記の通りそれは叶わなかったので対応策です。

 

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

 

*1:一応フルパッケージの作法に従ってるのにこれか