Web サイトのフロントエンドおよびバックエンドのパフォーマンスの最適化 (ネット抜粋)-htmlチュートリアル-php.cn

Web サイトのフロントエンドおよびバックエンドのパフォーマンスの最適化 (ネット抜粋)

WBOY

リリース： 2016-09-01 00:01:03

オリジナル

1081 人が閲覧しました

1. HTTP リクエストの数を削減します
すべてのスクリプトを 1 つのスクリプトファイルに配置するか、すべてのスタイルシートを 1 つのスタイルシートファイルに配置することで、HTTP リクエストの数を削減します。
CSS スプライトは、画像リクエストを減らすための推奨ソリューションです。すべての背景画像を 1 つの画像に結合し、CSS の背景画像プロパティと背景位置プロパティを使用して適切な画像領域を制御します。
インライン画像は data: URL スキームを使用して画像データをページに埋め込みますが、これにより HTML ドキュメントのサイズが増加します。
2. コンテンツ配信ネットワークを使用する
コンテンツ配信ネットワーク (CDN) は、さまざまな地域に分散されたサーバーの集合であり、ユーザーにより効果的に情報を送信できます。ドメインの距離の測定に基づいて、ユーザーのデータの送信先サーバーを選択します。たとえば、ユーザーに到達するまでのホップが最も少ないサーバー、または応答速度が最も速いサーバーが選択されます。
3. ヘッダーに有効期限またはキャッシュ制御を追加します
静的コンポーネントの場合: ヘッダーのキャッシュ期間を「期限切れにならない」ように遠い将来に設定します。
動的コンポーネントの場合: 適切な Cache-Control ヘッダーを使用して、ブラウザーが特定のリクエストを実行できるようにします。
4. Gzip 圧縮コンポーネント
HTTP リクエストのヘッダーの Accept-Encoding で指定された圧縮形式:
ν Accept-Encoding: gzip, deflate
ν Content-Encoding: gzip
5. スタイルシートを置きます。前面
スタイルシートをドキュメントの先頭に移動すると、ページの読み込みが速くなります。スタイルシートを先頭に配置すると、ページを徐々にレンダリングできるためです。
6. スクリプトを最後に配置します
スクリプトは同時ダウンロードをブロックする場合があります。 HTTP/1.1 仕様では、ブラウザがドメイン名ごとに 2 つの同時ダウンロードのみを実行することを推奨しています。
遅延読み込みスクリプトを設定するか、ページの下部に配置します
7. CSS 式を使用しないでください
CSS 式は、CSS プロパティを動的に設定する強力な (そして危険な) 方法です。

CSS 式の問題は、ほとんどの人が予想するよりも頻繁に実行されることです。式は、ページの表示時やサイズ変更時だけでなく、ページのスクロール時や、ユーザーがページ上でマウスを移動したときにも実行されます。 CSS 式にカウンターを追加すると、CSS がいつどのように実行されるかを追跡できます。ページ上でマウスを動かすと、簡単に 10,000 回以上の実行が生成される可能性があります。
8. 外部 JavaScript と CSS の使用
実際のアプリケーションで外部ファイルを使用すると、ブラウザーが JavaScript と CSS ファイルをキャッシュするため、より高速なページが生成されることがよくあります。外部ファイルに配置したJavaScriptやCSSをブラウザがキャッシュすると、HTTPリクエストの数を増やす必要がなく、HTML文書のサイズが小さくなります。
9. DNS クエリを削減します
DNS は通常、特定のドメイン名の IP アドレスを検索するのに 20 ～ 120 ミリ秒かかります。 DNS ルックアップが完了するまで、ブラウザはターゲットドメイン名から何もダウンロードしません。

10. JavaScript と CSS を縮小する

縮小とは、コードから不要な文字を削除し、ファイルサイズを削減し、読み込み速度を向上させることを指します。

コードを減らす場合は、すべてのコメントと不要な空白 (スペース、改行、タブ) を削除する必要があります。

js または css ファイルのサイズを削減し、応答性の高いパフォーマンスを向上させます。

コード難読化は、ソースコードに使用できるもう 1 つの最適化ソリューションです。

ページに埋め込まれている

…
Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。

16.在Ajax请求中使用GET方法

Yahoo! Mail 团队发现进行XMLHttpRequest的时候，POST方法在浏览器中分两步执行：先发送头部，然后发送数据。所以最好使用只发送一个TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大长度是2000，所以如果你发送超过 2000的数据就不能使用GET方法。
一个有趣的现象是，POST方法并不像GET那样实际发送数据（而Get则名副其实）。基于 HTTP规范，GET方法意味着取回数据，所以当你只是请求数据时使用GET方法更为有意义（从语义上来说），而在发送需要储存在服务器端的数据时则相反使用POST。

17.后加载组件

你可以仔细端详下你的页面然后自问：“什么是在页面初始化时必须的？”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。