JavaScript - フロントエンドはパフォーマンスとセキュリティについて質問されましたが、包括的な概要はありますか?

Question

フロントエンドのパフォーマンスとセキュリティはより重要であり、頻繁に言及されます。

個人的な理解:

＃＃＃＃＃＃パフォーマンス＃＃＃＃＃＃

ファイルのマージ

ファイル圧縮
スプライト画像
gzip [通常、バックエンドの nginx または Apache で構成されますが、フロントエンドは問題外のような気がします]
動的読み込み
cdn (通常、運用保守側には専任の人員が対応しており、フロントエンドについては言及できません)
＃＃＃＃＃＃安全性＃＃＃＃＃＃

質問:

経験がある方は、それを共有して要約してください。ありがとう！

天蓬老师 · Answer

パフォーマンス:
原則 1: http リクエストを削減し、画像、CSS ファイルを結合する
原則 2: キャッシュ使用率: CDN を使用し、外部 JS と CSS を使用し、Exp を追加します。 ires ヘッダー、DNS クエリの削減、Etag の設定、Ajax キャッシュの使用。
原則 3: 帯域幅の要求: GZIP を有効にし、js を合理化し、重複したスクリプトを削除し、画像を最適化します。
原則 4: ページ構造: スタイルを先頭に、js を一番下に配置し、ドキュメント出力をできるだけ早く更新します
原則 5: CSS 式を避け、リダイレクトを避ける
実際、具体的なビジネスシナリオから始めると、さらに理解できるようになりますたとえば、検索結果ページ
セキュリティ:
XSS

phpcn_u1582 · Answer

最近面接の準備をしているので、私なりの意見をまとめてみました

パフォーマンス

httpリクエスト

http リクエストを減らす主な考え方は、HTML ドキュメント内でリンクされているリソースの数を減らすことです。

プロジェクトがオンラインになると、ソースファイルの数とサイズを減らすためにCSS`JavaScript`とその他のファイルが圧縮、マージ、パッケージ化されます
複数の小さな画像をスプライトに作成します
リソースをbase64エンコーディング
キャッシュを使用すると、Webページを開く速度が向上し、httpリクエストを効果的に削減できます
遅延読み込みを使用して、対応するリソースをオンデマンドでロードします

ページを開く速度

CDN を使用してリソースをロードする
ページのちらつきを防ぐためにCSSをページの先頭に配置します
JavaScriptが実行されたりページの読み込みがブロックされたりするのを防ぐために、JavaScriptを非同期または遅延して読み込みます
最初の画面外のファイルに対するリクエストを遅らせます。つまり、最初の画面のコンテンツを最初に読み込みます。

実行効率

セレクターは右から左に解析され、ネスト順序が深すぎてはなりません
JavaScript でのスコープチェーンルックアップを減らし、eval和Function やその他のパフォーマンスの低いインターフェイスの使用を回避します
DOM 操作は非常に負荷が高いため、DocumentFragment を使用してドキュメントに一度に挿入されるノードを一時的に保存できます

フロントエンドセキュリティ

フロントエンドセキュリティは主に、ブラウザを通じてユーザーデータに間接的に影響を与えるセキュリティ問題を指します。

XSS

クロスサイトスクリプティングとは、悪意のある攻撃者がWebページに悪意のあるスクリプトコードを挿入し、Webページに埋め込まれたスクリプトコードが実行され、ユーザーを盗むなどの悪意のある攻撃を行うことを指します。ユーザーのクッキー。 XSS の問題は、たとえば、特定の編集コンテンツがユーザーの入力を処理せずにデータベースに直接保存されている場合、ユーザーがページにアクセスしたときに、ターゲット Web サイトに挿入される可能性のある脆弱性を見つけることです。、悪意のあるスクリプトがページ上に表示され、対応する攻撃が実行される可能性があります。

CSRF

クロスサイトリクエストフォージェリ。たとえば、ターゲット Web サイトの記事削除機能が、悪意のある Web サイトクライアントからの記事削除リクエストを受け取ります。このリクエストはクロスサイトであり、（ターゲット Web サイトのユーザーの意図ではなく）偽造されます。

実装方法は、まず悪意のあるWebサイト上でGETリクエストを構築し（Ajaxの同一オリジン制限により、imgなどのsrcリクエストが利用可能）、その後、対象となるWebサイトのユーザーをだまして悪意のあるWebサイトにアクセスさせます。ウェブサイトにアクセスすると、対応するリクエストが開始され（および対応する Cookie などのユーザー識別情報があれば）、この時点でも攻撃が発生します