フロントエンドレンダリングフロントエンドレンダリング:サーバレンダリングorクライアントレンダリングサーバレンダリングorクライアントレンダリング

レンダリング作業は誰が行うべきですか?

現在、フロントエンドUIのデザインはますます複雑になり、「XXとXXが一緒に飛んで、XXは共にXXと同じ色」と言える.ますます複雑なUIは、レンダリング作業がますます重くなることを意味します.
通常、サーバレンダリングとクライアントレンダリングの2つの選択肢があります.
筆者はクライアントレンダリングをサポートしています(間違いなく欽点です)
Jade,YAMLに代表されるテンプレートレンダリングエンジンは、バックエンドのビュー部分としてサーバに一般的に作用します.JavaScriptを使用してHTML DOMを直接処理するのはフロントエンドであり、クライアントがレンダリングを実行する性質である.
両方のエンドユーザーが見た効果は一致しています.Web Appは、最終的にはHTML、CSS、JavaScriptに実装されてこそ、ユーザーインタフェースに反映されます.結局、バックエンドレンダリングは、いくつかのテンプレート仕様言語を上記の3つの言語に翻訳してフロントエンドに返信することである.フロントエンドレンダリングは、生成論理コード全体をフロントエンドに返信し、クライアントによってユーザインタフェースを生成します.

サーバレンダリングとクライアントレンダリングがあるのはなぜですか?

最初は、Web Appは直接いくつかのHTML、CSS、JSから構成されていて、各ページには特殊な論理が必要です.そのため、Appの規模が拡大するにつれて、バックエンドサイトのディレクトリの下のコードファイルがますます多くなり、サイトのレイアウトを変更するなど、お互いの間に同期がありません.では、何百ものHTMLファイルを変更する必要がある可能性があります.これは誰が我慢できますか?
賢いエンジニアたちは、このように多くのHTMLが一定の論理的なつながりを持っている以上、コードを使用してコードを生成しないのではないかと考えています.そこでバックエンドテンプレート言語が誕生しました.これはフロントエンドの犬の大きな痛みですね.手書きHTMLの代わりにテンプレート言語が広く使われ始めました.テンプレート言語の成功は、フロントエンドエンジニアの作業量を減らすことに成功したことに由来すると思います.
バックエンドテンプレートレンダリングの考え方は、「バックエンドに格納されている数千のフロントエンドページのバージョンが一致するように管理する方法」に由来するはずです.この問題の.コードによってコードを生成し、本質的にはコンパイルであり、HTMLなどの基礎言語に基づいてより高いレベルの抽象パッケージを行い、使いやすさを強化した.様々なテンプレート言語は大同小異であるが,テンプレート中のテンプレートのような性質があり,このようなオブジェクト向け特性の継承を完了することが多い.
おそらく、当時、エンジニアたちがフロントエンドレンダリングを考慮していなかった大きな原因は、JavaScriptに代表されるフロントエンド技術がまだ台頭していなかったからかもしれません.現在H 5,CSS 3,JSが広く普及することにより、特にNode.jsが登場すると、JSエンジニアのバックエンドのメンテナンスコストが大幅に削減されます.
本論文の作成は,当時の普及度が高くなかったES 6を考慮しないが,より多くの有用な特性を有していた.
一部のjQueryユーザーの観点から見ると、JS生成フロントエンドはこのようなものにほかならない.

var e = document.createElement('div');
$('#container').append(e);

まずDOMを生成してから、他のDOMに挿入する必要があります.
純粋なJSがDOMを処理するのは確かに面倒なことであり、これもクライアントレンダリングが遅々として発展していない原因の一つかもしれない.
バックエンドテンプレート言語が便利で簡潔な理由を考えてみましょう.HTMLと似たような文法を使っているからです.
PHP、JSPページでは、大量のHTML構文を使用して、少量の変数注入と反復注入だけを使用することができます.
HTMLを使用したデザインは、純粋なJSよりも便利で直感的です.
参考として、クライアントレンダリングの問題を解決する最後の錦嚢はテンプレートを導入することであり、ここではコンポーネント(Component)と呼ぶ.
テンプレートに対しては、新興のAngular、React、Vueの意見が異なり、Web Appでの位置づけも異なる.具体的な状況は自分で理解することができて、これは本文の重点ではありません.
フロントエンドがテンプレート言語をサポートするにつれて、従来のコード管理の問題も解決し、従来のバックエンドレンダリングエンジンでもJSベースのフロントエンドバージョンが多くなった.
フロントエンドはUIに集中し、バックエンドはデータ処理に集中し、両端は設計されたAPIを通じてインタラクティブになる傾向があります.これは、あなたが信じても信じなくても、どうせ私はそう思っています.

バックエンドレンダリングからフロントエンドレンダリングまで、どのような変化が発生しましたか?

計算タスク転送は、サーバによって実行されたレンダリングタスクがクライアントに転送され、多くのユーザがアクセスするとバックエンドの圧力が大幅に軽減される.バックエンドをバックエンドのすべきことに集中させると、サーバが行うことが確実に減少するため、パフォーマンスが大幅に向上します.現在、クライアントのソフト・ハードウェアの発展に伴い、多くのレンダリング作業を処理することができます.

は、フロントエンド権限を放棄してUIロジック全体をクライアントに渡した後、経験のあるユーザーがUIをハイジャックし、見るべきでないインタフェースを見ることができるようにする可能性があります.これは安全の原則に違反しているようだ.しかし「すべてはフロントエンドで安全を語る1はごろつき」であり、バックエンドはフロントエンドから伝わったデータを軽々しく信じることができず、フィルタリングと検証をしっかりと行わなければならないことを覚えておいてください.SSLを使用し、XSSを遮断し、バックエンドに脆弱性がない限り、アイデンティティを偽造してAppをハイジャックすることは難しい.

締めくくり

バックエンドレンダリングよりも、フロントエンドレンダリングのパフォーマンスが向上し、セキュリティ上の問題も解決されません.By the way,安利一発React 2は,多くのReact特性を理解し,UIの存在をより深く認識する.
フロントエンドにはXSSという攻撃があり、一般的にページにscriptタグを挿入することでリモートでコードを実行します.scriptタグなどのエスケープをフィルタリングすることでパッシブXSSを破ることができ,またconsoleで未知のコードを使用しないことをユーザに提示することでアクティブXSS攻撃を予防することができる.XSS攻撃は非常に危険なので、警戒しなければなりません.↩
React中国語ステーション:http://reactjs.cn/↩