ハイブリッドアプリですか…これに関しては未経験ですが
普通のフロントエンドはそこそこ心得があるので回答していきます。
・ 比較的軽量なフレームワークは何でしょうか?
ReactNativeがネイティブアプリを出力するので最速でしょうけど、
複雑な機能を作り込むと辛いといった声もききます。
ただ、ネイティブってのは魅力的ですよね、候補に入れてみてください。
今まで通りWebViewとの連携といった所では、
Vue.jsやReactといったShadowDOMを採用したフレームワークが軽量高速なフレームワークです。
Angular2(4系?)も同様で高性能を謳っており、1系からは根本から異なり高速に動作するようです。
・ DOM操作やら色々大変ですが生のJavascriptが一番高速なのでしょうか。
JSで四則演算とDOM操作をやらせたらどちらの方が重いでしょうか?
比較するまでもなくDOM操作の方が重い処理になります。
たとえ少々処理が複雑になってもDOM操作を最小限にすることが速度面の改善につながります。
Vue.jsやReactといった最近のイケてるJSフレームワークは、
差分だけ検知して最小限のDOM更新を行う仕組みになっています。
Vue.jsやReactといったフレームワークはJSで書かれています。
理論上は同等以上のものが作れるはずですが、例えばVue.jsの描画エンジンから必要最小限のものをさらっと取捨選択して書くという技量が必要になりますので、ハッカーやウィザードと呼べる領域のエンジニアでなければ不可能と断言できます。
差分更新の必要がない小さなアプリなら生JSが最速ですが、
テンプレートやカスタムタグを利用せざるを得ない巨大なシステムを構築する場合、
最新のJSフレームワークなくして高速に動作するアプリは作れません。
・ HTMLでdivの階層を深くしすぎるとやはり遅くなりますか
よほど大量のdivをネストさせない限り影響は出ないでしょう。
じゃあ速いHTMLと遅いHTMLは何が違うのか?
速く描画したければCSSでしっかりサイズを固定してあげましょう。
サイズが明確でないものを描画するとレンダリングエンジンが迷ってしまうので描画に時間がかかります。
具体的には画像とtable要素に気をつけてください。
画像はwidthとheight付けるだけなのでtable要素の解説をします。
table要素にはtable-layoutというプロパティが存在します。
これがデフォルトではautoなので全ての列×行の文字数を検知して各列の横幅を決める事になります。
3列だったとしても100行あれば凄まじいコストに膨れ上がります。
そういったページにfixedを指定してやるだけで劇的な改善になるでしょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/06 02:04
2018/02/06 02:08
2018/02/06 10:40