wulin.comの記事紹介（www.vevb.com）：多くの人がHTML5とは何かを尋ねますか？ HTML5を最初に使用できる方法は、最初にDoctypeを変更することであると言います。これは、多くのページがまだ従来の方法であるためです。 HTML5メソッドはIEブラウザと互換性があり、IE6からIE10からIE10に使用でき、高度なブラウザでサポートできます。
[編集者のメモ]次の記事は、InfoQのWebページで公開されているZhang Limingという名前のIT技術者によって書かれました。今回、彼は全文の9つの異なる側面からHTML5のパフォーマンスを分析しましたが、これは対応する開発者がまだ読む価値があります。
パフォーマンスの観点から見ると、HTML5は最初にHTMLドキュメントを削減し、これをより簡単にします。第一に、ユーザーの読みやすさの観点から見ると、これらのことを見るために初めて初心者が理解していなかった多くのことがあり、HTML5宣言方法は明らかにユーザーにより優しいものです。第二に、宣言をコードするドキュメントは、HTML5にある場合、非常に簡単です。多くの人がHTML5とは何かを尋ねますか？ HTML5を最初に使用できる方法は、最初にDoctypeを変更することであると言います。これは、多くのページがまだ従来の方法であるためです。 HTML5メソッドはIEブラウザと互換性があり、IE6からIE10からIE10に使用でき、高度なブラウザでサポートできます。したがって、HTML5を採用する最も簡単な方法は、Doctypeを変更することです。
1。よりシンプルなラベル
次のことはあまり一般的なものではないかもしれませんが、よりシンプルなラベル法を使用して、私が好むものです。この名前からわかるように、HTML5はHTML4から継承されます。 HTML4には、厳密なモードと遷移モードがあります。 HTML5はこの遷移モードをサポートしているため、いくつかのタグを閉じることはできません。ただし、すべてのタグをお勧めしません。たとえば、ボディータグが閉じられていないため、推奨されません。しかし、最も一般的に使用されるP-LabelもList Tag Liです。なぜそう言うのですか？まず第一に、視覚的な観点から見ると、この方法は少し簡単です。次に、ドキュメント転送プロセス中にコンテンツが少なくなることです。
HTML5タグ属性の宣言は、シングルブラケット、ダブルブラケット、枝分かれしていないブラケットの3つの方法をサポートしています。ドキュメントのサイズを減らすために、二重引用符または単一の引用なしにメソッドを選択しました。ただし、属性には複数のクラスが含まれる場合があり、複数のクラスが括弧内に囲まれている必要があるため、クラスの属性の宣言であると仮定すると、それは注意する必要があります。この点で、Googleの練習をお見せしましょう。 Google自体には、上記を完全に練習するページがあり、ドキュメントのサイズを20％削減し、HTMLドキュメントの転送を20％削減します。全体が実践されている場合、5％から20％の減少を達成できます。これが最初のステップであり、HTMLドキュメントのサイズを縮小します。
2。画像の最適化
次は写真の最適化についてです。これは常に愛と憎む要素です。写真が多すぎると、ページ全体の読み込み速度を真剣にドラッグするからです。写真の最適化方法に関して、本「High Performance Webサイト」には多くの紹介があります。要約すると、3つの主なポイントがあります。エルフの使用、写真のサイズの最適化、データURIの使用です。ここでは詳しく説明しません。
画像の最適化のもう1つのアイデアは、イメージなしです。写真を放棄し、CSS3を受け入れます。もともと、私は丸い角効果を持つ写真を設定する必要がありましたが、今ではCSS3で国境とラジウスを使用しました。以前はシャドウエフェクトを設定していましたが、今ではCSS3でBox-Shadowを使用しています。以前はグラデーションの背景画像を設定していましたが、今ではCSS3でグラデーションを使用しています。
3。プレフェッチ
次に、プリフェッチについて説明しましょう。これは最適化のもう1つの方法です。私たちの現在の最適化のアイデアは少数に過ぎません。それらの多くは、より少ないものの観点からのものです。たとえば、ドキュメントのサイズが以前に縮小され、画像サイズが縮小されました。送信リクエストの数を減らすために、多くの写真がエルフになります。プリフェッチのために、それは別の考え方です。リソースを早期にロードします。ユーザーがポイントに進むと、実際にロードされたため、間違いなく速くなります。
プリフェッチには2つの部分があります。1つはリソースのプリフェッチで、もう1つはDNSの事前分解です。
リソースのプリロード時に注意すべき点がいくつかあります。
プリロードは、ブラウザがアイドル状態の場合にのみ引っ張られますが、それをプルすることは保証されていません。これは非常に重要なポイントです。ブラウザ自体には、内部インターフェイスであるグローバルリスナーがいるためです。ブラウジングエアがアイドル状態にある場合、アイドル状態の場合はブラウザが実行されますが、このアイドルコールバックはトリガーされない可能性があるため、プリロードが実行されることを保証しません。
Chromeは、HTTPSリソースのプリロードをサポートしていません。たとえば、AlipayはHTTPSページであり、Chromeはプリプルしません。
事前にプルされたページは存在した後は見えませんが、実際には正常に解析されています。ログインページを事前にプルすると、ログインページには、写真、CSSファイル、JSファイルなどの多くのリソースがあります。通常は上から下まで解析されます。解析プロセス中、このページは表示されませんが、実際には存在します。 HTML5では、document.visibilityStateを使用して現在のページステータスを取得できます。通常、ページには目に見える2つの状態がありますが、現在はプレレンダリング状態と呼ばれる新しい状態があります。 document.visibilitystateがプレレンダーに等しいかどうかにより、ページがプレレンダー状態にあるかどうかを直接判断できます。