フロントエンドのパフォーマンスとセキュリティはより重要であり、頻繁に言及されます。
個人的な理解:
ファイルのマージ
ファイル圧縮
スプライト画像
gzip [通常、バックエンドの nginx または Apache で構成されますが、フロントエンドは問題外のような気がします]
動的読み込み
cdn (通常、運用保守側には専任の人員が対応しており、フロントエンドについては言及できません)
質問:
パフォーマンス: 原則 1: http リクエストを削減し、画像、CSS ファイルを結合する 原則 2: キャッシュ使用率: CDN を使用し、外部 JS と CSS を使用し、Exp を追加します。 ires ヘッダー、DNS クエリの削減、Etag の設定、Ajax キャッシュの使用。 原則 3: 帯域幅の要求: GZIP を有効にし、js を合理化し、重複したスクリプトを削除し、画像を最適化します。 原則 4: ページ構造: スタイルを先頭に、js を一番下に配置し、ドキュメント出力をできるだけ早く更新します 原則 5: CSS 式を避け、リダイレクトを避ける 実際、具体的なビジネス シナリオから始めると、さらに理解できるようになりますたとえば、検索結果ページ
セキュリティ: XSS
http リクエストを減らす主な考え方は、HTML ドキュメント内でリンクされているリソースの数を減らすことです。
プロジェクトがオンラインになると、ソースファイルの数とサイズを減らすためにCSS`JavaScript`とその他のファイルが圧縮、マージ、パッケージ化されます
CSS
複数の小さな画像をスプライトに作成します
リソースをbase64エンコーディング
base64
キャッシュを使用すると、Webページを開く速度が向上し、httpリクエストを効果的に削減できます
遅延読み込みを使用して、対応するリソースをオンデマンドでロードします
CDN を使用してリソースをロードする
ページのちらつきを防ぐためにCSSをページの先頭に配置します
JavaScriptが実行されたりページの読み込みがブロックされたりするのを防ぐために、JavaScriptを非同期または遅延して読み込みます
最初の画面外のファイルに対するリクエストを遅らせます。つまり、最初の画面のコンテンツを最初に読み込みます。
セレクターは右から左に解析され、ネスト順序が深すぎてはなりません
JavaScript でのスコープ チェーン ルックアップを減らし、eval和Function やその他のパフォーマンスの低いインターフェイスの使用を回避します
eval
Function
DOM 操作は非常に負荷が高いため、DocumentFragment を使用してドキュメントに一度に挿入されるノードを一時的に保存できます
DocumentFragment
フロントエンド セキュリティは主に、ブラウザを通じてユーザー データに間接的に影響を与えるセキュリティ問題を指します。
クロスサイトスクリプティングとは、悪意のある攻撃者がWebページに悪意のあるスクリプトコードを挿入し、Webページに埋め込まれたスクリプトコードが実行され、ユーザーを盗むなどの悪意のある攻撃を行うことを指します。ユーザーのクッキー。 XSS の問題は、たとえば、特定の編集コンテンツがユーザーの入力を処理せずにデータベースに直接保存されている場合、ユーザーがページにアクセスしたときに、ターゲット Web サイトに挿入される可能性のある脆弱性を見つけることです。 、悪意のあるスクリプトがページ上に表示され、対応する攻撃が実行される可能性があります。
実装方法は、まず悪意のあるWebサイト上でGETリクエストを構築し（Ajaxの同一オリジン制限により、imgなどのsrcリクエストが利用可能）、その後、対象となるWebサイトのユーザーをだまして悪意のあるWebサイトにアクセスさせます。ウェブサイトにアクセスすると、対応するリクエストが開始され（および対応する Cookie などのユーザー識別情報があれば）、この時点でも攻撃が発生します
パフォーマンスコード圧縮、画像圧縮、httpリクエストの削減、Ajax非同期などはすべてパフォーマンスに有益です
安全なXXS暗号化コード
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
パフォーマンス:
原則 1: http リクエストを削減し、画像、CSS ファイルを結合する
原則 2: キャッシュ使用率: CDN を使用し、外部 JS と CSS を使用し、Exp を追加します。 ires ヘッダー、DNS クエリの削減、Etag の設定、Ajax キャッシュの使用。
原則 3: 帯域幅の要求: GZIP を有効にし、js を合理化し、重複したスクリプトを削除し、画像を最適化します。
原則 4: ページ構造: スタイルを先頭に、js を一番下に配置し、ドキュメント出力をできるだけ早く更新します
原則 5: CSS 式を避け、リダイレクトを避ける
実際、具体的なビジネス シナリオから始めると、さらに理解できるようになりますたとえば、検索結果ページ
セキュリティ:
XSS
最近面接の準備をしているので、私なりの意見をまとめてみました
パフォーマンス
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 などのユーザー識別情報があれば）、この時点でも攻撃が発生します
インターフェース操作のハイジャック
インターフェースの偽造、ユーザー情報の窃取など...パフォーマンスコード圧縮、画像圧縮、httpリクエストの削減、Ajax非同期などはすべてパフォーマンスに有益です
安全なXXS暗号化コード