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