Q&A
vueやNuxtのようなフロントエンドのフレームワークを利用する場合、
描画の処理はフロントにやらせて、バックの役割はデータのやり取りのみになるのでしょうか？
また、そうなる場合、描画の処理はクライアント側に行わせることになりますが、
処理速度としては、HTMLの構築をサーバー側で行うのとクライアントで行うのはどっちのほうが
早いのでしょうか？
回答2件
0
HTMLの描画速度ですが、サーバーサイドで描画する場合<head>タグも含めすべてのDOMをゼロから作り直します。
一方vueやNuxtなどのフロントエンドフレームワークを使用した場合は変更箇所だけ描画します。
内部的には仮想DOM構造体の差分にパッチがあてて再描画しているため、jQueryなどでDOMを部分的に再描画するよりもさらに速いはずです。
ページネーションひとつ例にとってもページ遷移するごとに毎回画面まるごとリロードが必要なサーバーサイドでの描画よりも、JSONデータを受け取って一覧のデータ箇所だけ更新する方が体感も速く感じますね
投稿2019/12/25 07:32
編集2019/12/25 07:33
総合スコア344
0
そういう風に作ればそうなります。
何にどこまで何の役割を持たせるかはプロジェクトのルールや実装の考え方次第です。
そもそもバックエンドの元々の役割はHTMLを出力することではなく、機能として文字列の出力がありそれがたまたまHTMLの文法になっていてブラウザから表示確認するからそうなってるだけです。
どちらが速いかは速度計測してみれば見えてくるところもあるかとは思いますが、「出力したものを解析」するのと「画面に出力してから構築」するのでは、やはりスタートが違うのではと思います。
一般的にはJavaScriptで最も時間がかかるのはDOM構築と言われています。
なので、Ajaxなどであまりに大きいHTMLとなる場合はバックエンドから表示させたいHTMLをそのまま返すというのも負荷軽減の工夫としてはあります。
いずれにしても構築したいHTML次第ですね。ミリ秒にこだわるのでしたら計測してから…となると思いますが、ユーザー側からすると体感ではほとんど変化なさそうです。
投稿2019/12/24 21:30
総合スコア80888
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。