フロントエンドのパフォーマンスを向上させるための黄金律_html/css_WEB-ITnose

近年、フロントエンドは大きく変化し、さまざまなツール、ライブラリ、フレームワークが同時に実行されるようになりました。それにもかかわらず、ウェブサイトのフロントエンドパフォーマンスの最適化という考え方は基本的に変わっていません。フロントエンドのパフォーマンスがそれほど重要なのはなぜですか?データによると、

• HTML ドキュメントのダウンロードに費やされるのは、エンドユーザーの応答時間のわずか 10% ～ 20% です。残りの 80% ～ 90% の時間は、ページ内のすべてのコンポーネントのダウンロードに費やされます。

• もう 1 つのポイントは、フロントエンドのみの最適化とは対照的に、バックエンドの最適化には比較的大きなコストがかかることです。いくつかのルールに従うと、より大きな改善が得られ、比較的低コストで高収率になります。

最近、Steve Souders 氏の「高パフォーマンス Web サイト構築ガイド」を読んで、非常に良い内容だと思ったので、ここにまとめたいと思います。 Steve は Firebug と Yslow の作者であり、誰もがこれらを使用したことがあると思います。この本に書かれている手法は古いものも多いですが、考え方は基本的に変わっていないので、エッセンスだけを取り入れてください。

この本では、優先順位が高いほど、順位が上がるという一連の黄金律を提案しています。

1. 减少HTTP请求2. 使用内容发布网络（CDN）3. 添加Expires头4. 压缩组件5. 将样式表放在顶部6. 将脚本放在底部7. 避免使用CSS表达式8. 使用外部JavaScript和CSS9. 减少DNS查找10. 精简JavaScript11. 避免重定向12. 删除重复的脚本13. 配置ETag14. 使Ajax可缓存

以下は、その簡単な紹介です。各ルールの理由:

1. HTTP リクエストを減らす

一般的に、外部リンク スクリプトとスタイル シートを使用する方が有益です。外部リンク スクリプトとスタイル シートをそれぞれ結合すると、HTTP リクエストが減り、クライアントとサーバー間の通信の数が節約され、ページを開く速度が向上します。ただし、開発の便宜上、通常は開発中にモジュール方式が採用されます。現時点では、いくつかのフロントエンド構築ツールを使用して、展開およびリリース前にこれらのモジュール ファイルをマージできます。

2. コンテンツ配信ネットワーク (CDN) を使用する

CDN は、ユーザーからの物理的距離 が短いため、複数の異なる地理的場所に分散された Web サーバーのグループです。ユーザーにとっては静的リソースを取得する方が便利です。この種のサービスは通常購入する必要がありますが、無料で利用できる一般的な CDN もいくつかあり、国内のものは BootCDN を使用できます。

3. Expires ヘッダーを追加します

Expires ヘッダーは、リソースの「有効期間」として理解できる有効期限をブラウザーに通知するために使用されます。リソースは期間内に再度リクエストする必要があります。ブラウザとサーバー間のクロック同期の問題のため、HTTP1.1 では Expires ヘッダーの欠点を補うために Cache-Control と max-age も追加されました。通常、スクリプト、スタイル シート、画像、その他の静的リソースに使用されます。

この戦略で発生する可能性がある問題は、開発者がリソースの有効期限が切れる前にリソースを更新したい場合があることです。この時点ではブラウザのキャッシュが期限切れになっていないため、ファイル名を変更して静的リソース

を強制的に無効化する必要があります。静的リソースにバージョン番号を追加するには、さまざまな方法があります。デジタル バージョン番号を真剣に追加することも、コンテンツに基づいてハッシュ コードを生成することもできます。また、π を使用して自分のリソースにバージョン番号を追加する人もいます。 4. 圧縮コンポーネント

この本では、静的リソースを圧縮するための gzip メソッドを紹介します。実際、この方法では、通常、追加の CPU リソースが消費されます。

5. スタイルシートを一番上に配置します。

スタイルシートを一番下に配置すると、CSS の @import を使用することは、この本では、ブラウザのレンダリングの仕組みについてはあまり触れず、読み込み中のレンダー ツリーの構築についてのみ説明します。すべてのスタイルシートがロードされて解析されるまでは何も描画する必要がないため、これは無駄です。そうしないと、準備が整う前にコンテンツを表示すると、FOUC (スタイル化されていないコンテンツのフラッシュ) の問題が発生します。 、スタイル シートが 93f0f5c25f18dab9d176bd4f6de5d30e に配置されていない場合、スタイルが見つかったときに、ブラウザはページのレンダリングをブロックし、スタイル シートがダウンロードされるのを待ちます。つまり、

にスタイルシートを配置すると、IE で白い画面が表示されます。

ページ上のスクリプトの影響は次のとおりです:

配置の背後にあるコンテンツのレンダリングをブロックします

配置の背後にあるコンテンツをブロックしますアライメント ダウンロード

ブラウザはスクリプトを順番に実行できるようにする必要があるため、スクリプトのダウンロード時に並列ダウンロードをブロックします。これについての詳細な説明:

JS はボディの下部に配置する必要がありますか?

1. ただし、完全に準拠することが難しい場合があります。実際の開発では、このガイドラインに従ってください。
   7. CSS 式の使用を避ける
2. CSS 式を使用する場合、通常、複数の操作が必要になります。 、通常は代替手段が見つかるため、CSS 式の使用は避けてください
   8. 外部 JavaScript と CSS の使用

外部静的ファイルを使用する利点は次のとおりです:

ブラウザでキャッシュできます

组件可以重用

可模块化

能够被构建（合并压缩打版本）

…

缺点：

1. 需要额外创建HTTP 请求

2. …

9. 减少DNS查找

简单来说，DNS 查找就是输入域名对服务器IP 地址的查找过程。DNS 缓存又分为浏览器DNS 缓存、操作系统DNS 缓存。当你输入 www.google.com的时候，浏览器会先去自身的 DNS 缓存里面查找有没有 google 服务器的 IP 地址；如果找不到则继续到操作系统的 DNS 缓存查找；如果浏览器在这两个容器都没有找到 google 的IP 地址记录，则会向广域域名体系查找。

10. 精简JavaScript

减少JavaScript 文件大小的有几种手段，通常被广泛使用的是 精简。精简就是去除JavaScript 代码中的空格、注释等多余的字符，这种方式基本上没有什么缺点。

另外一种方式是 混淆。混淆是在精简的基础上，把函数、变量名都用较短小的字符来替换，从而达到减少文件大小的效果。但是混淆会产生不少麻烦，很有可能会引入错误，虽然有利于防止逆向工程，当同时也增加了自己在线上环境调试的难度。

现在普遍的做法是发布前利用 Gulp、Grunt 等自动化构建工具对资源进行压缩。

11. 避免重定向

以下是一个重定向的过程：

浏览器发送请求  --  服务器返回302  --  服务器返回200  -- 浏览器开始呈现

就是说，在发送请求到返回200这段时间，页面完全是空白的；对比普通的请求多了一段空白时间。

12. 删除重复的脚本

重复的脚本对增加HTTP 请求次数和脚本执行的时间。

13. 配置ETag

这个规则应该过时了，现在比较好的实践是直接根据内容给静态资源打上哈希版本号。

14. 使Ajax可缓存

适用于以上的优化，大部分同样适用于Ajax请求。

总结：

总的来说， 前端优化的总体思路是提高浏览器与服务器沟通的效率。

前端性能优化一味奉行“最佳实践”有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。