彼が昨年書いた Perfection Kills に関する記事を拝見しましたが、HTML の最適化について非常に詳しく書かれていました。ただし、その内容の一部は現在の環境では適用できません。 WEBアプリケーションが徐々にフロントエンド化していく流れの中で、いかにコードを削減するか、いかにユーザーにアプリケーションを素早く表示するか、ユーザーの待ち時間をいかに短縮するかなど、クライアントサイドの最適化がますます注目を集めています。最適化の 34 の黄金律 詳細な最適化計画が提案されます。
Web ページの最適化の最も基本的な部分は、HTML の最適化です。具体的には、マークアップのクリーニングです。マークアップをクリーニングすると、ドキュメントのサイズが削減されるだけでなく、ドキュメントの保守が容易になり、検索エンジンの可視性も向上します (クリーン)。マークアップは、アクセシビリティの向上、メンテナンスの容易さ、および検索エンジンの可視性の向上を意味します)。しかし、高度に最適化されていると言われている Web ページであっても、コードをよく見ると、削除または削除できるタグの使用法がまだ多数見つかります。古いです:
1.スクリプト内のコメント文字
<SCRIPT言語=javascript>
<!-- 開始
アラート("ダイマレン.cn");
// 終了 -->
</script>
95 Netscape 1.0 のようなほとんど絶滅したブラウザがそのような処理を必要としない限り、ほとんどの主流ブラウザでは、スクリプト ブロックに HTML コメントを追加する必要はまったくありません。
2.<![CDATA[ … ]>
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
これは、実際の XHTML ドキュメント (「application/xhtml+xml」コンテンツ タイプ) を扱うときに、コードが < 記号をタグの先頭として解析するのを防ぐために、js コード ブロックによく追加されるもう 1 つのエラー防止策です。 CDATA に含まれるコンテンツはテキストとして扱われます。しかし現状、ほとんどのWebページのコンテンツタイプはtext/htmlであり、厳密な意味でのxml文書ではなく単なるテキストであるため、このようなエラー防止策も全く不要です。 XML ドキュメントを確実にサポートしている場合は、状況に応じて CDATA を適切に使用する必要があります。
3.onclick=”…”、onmouseover=”“など。
イベント属性を HTML タグに記述するのは非常に賢明ではありません。これにより、コードの保守性が低下し、タグが汚染されます。イベント属性が JS を通じて動的に追加されると、イベント属性を柔軟に制御できるだけでなく、JS クライアントも制御できます。キャッシュの利点は、これらのイベント属性がすべてのドキュメント要求に従う必要がないことです。
4.onclick=”javascript:…”
これは JavaScript の興味深い混乱です。疑似プロトコルと組み込みイベント ハンドラーは最大 100,000 個の冗長な組み合わせを作成できます。実際、この関数は解析後に本体の関数になります。 . なので、ここでは javascript: が無駄な冗長タグになります。
5.href=”javascript:void(0)”
javascript: 擬似プロトコルの説明を続けると、悪名高いプロトコルの 1 つは javascript:void(0) です。これは、デフォルトのアンカー アクションを回避するために使用されます。これにより、JS が正常に解析できなくなるか、エラーが発生します (無効/利用不可/)。理想的な解決策は、href に正しい URL を入力し、JS を使用して動的に書き換え、JS が実行されていない場合でもアンカー ポイントが使用できなくなることです。 HREF=“#” は、合理化された高速な代替手段です。
6. style=”…”
本質的なエラーはありませんが、後のメンテナンスが面倒です。また、外部 CSS ファイルに移動すると、ページの実行効率が向上します。
7. <スクリプト言語=”JavaScript…
最も誤解されている属性の 1 つは、これがスクリプトの「言語」であるということです。この属性は 1999 年に廃止されたためです。
8. <script charset=……
<script type="text/javascript" charset="UTF-8">
...
</script>
もう 1 つの誤解されやすい script タグの属性である charset は、HTML4.01 で説明されています。 charset 属性は、文字の src 属性で指定されたスクリプト エンコーディングを指し、script 要素の内容には関与しないことに注意してください。 (charset 属性は、src 属性で指定されたスクリプトの文字エンコーディングを参照することに注意してください。SCRIPT 要素の内容には関係ありません。)、つまり、アウトライン時にスクリプト ファイルのエンコーディング形式を指定するだけです。スクリプト。お勧めしません。