ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML コードを最適化するための N テクニック_html/css_WEB-ITnose
HTML コードを最適化するための N テクニック_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:59:56975ブラウズ
Web ページのパフォーマンスを向上させる方法について、多くの開発者は、JavaScript、画像の最適化、サーバー構成、ファイル圧縮、CSS の調整など、さまざまな側面から始めます。
HTML は、Web インターフェイスの開発に不可欠なコア言語であるにもかかわらず、ボトルネックに達していることは明らかです。 HTML ページの負荷もますます重くなっています。ほとんどのページには平均 40K のスペースが必要です。たとえば、大規模な Web サイトには数千の HTML 要素が含まれており、ページ サイズはさらに大きくなります。
HTML コードの複雑さとページ要素の数を効果的に軽減する方法 この記事では、主にこの問題を解決し、ページの読み込みを高速化できる簡潔で明確な HTML コードを記述する方法を紹介します。 . 、さまざまなデバイスで適切に実行できます。
設計および開発プロセスでは、次の原則に従う必要があります。
- 構造の分離: スタイル コンテンツではなく、HTML を使用して構造を追加します。クリーン: 仕事用 コード検証ツールをフローに追加します。ツールまたはスタイル ウィザードを使用してコードの構造と形式を維持します。
- 新しい言語を学びます: 要素の構造とセマンティック マークアップを取得します。
- アクセシビリティの確保: ARIA 属性、フォールバック属性などを使用します。
- テスト: Web サイトが複数のデバイスで適切に動作するようにし、エミュレーターやパフォーマンス ツールを使用します。
HTML、CSS、JavaScript の関係
HTML は、ページの構造とコンテンツを調整するために使用されるマークアップ言語です。 HTML を使用してスタイル コンテンツを変更したり、ヘッダー タグにテキスト コンテンツを入力したりすることはできないため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。 HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイル シートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 ピクセル倍の太字フォントで表示されます。
3 つの一般的なデザイン ルール:
HTML を使用してページ構造を構築し、CSS を使用してページのプレゼンテーションを変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作の分離を非常にうまく示しています。
- CSS または JavaScript で実装できる場合は、HTML コードの使用を減らします。
- CSS および JavaScript ファイルを HTML とは別に保存します。これはキャッシュとデバッグに役立ちます。
- ドキュメント構造は次のように最適化することもできます:
HTML5 ドキュメント タイプを使用すると、次は空のファイルになります:
<!DOCTYPE html><html><head> <title>Recipes: pesto</title></head><body> <h1>Pesto</h1> <p>Pesto is good!</p></body></html>次のようにドキュメントの先頭で CSS ファイルを引用します:
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"></head>
ページの下部にある終了 body タグの前に JavaScript コードを入力します。これにより、ブラウザは JavaScript コードを解析する前にページを読み込むため、ページの読み込み速度が向上します。ページ要素。
非同期属性を持つスクリプト要素は、順番に実行されることが保証されていません。
<body> ... <script src="/js/global.js"> <script src="js/local.js"></body>
ハンドラーは JavaScript コードに追加できます。 HTML インライン コードには絶対に追加しないでください。たとえば、次のコードはエラーが発生しやすく、保守が困難です。
index.html:
次のような記述方法です。より良い:
<head> ... <script src="js/local.js"></head><body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ...</body>
index.html:
js/local.js:
<head> ...</head><body> ... <button id="foo">Foo</button> ... <script src="js/local.js"></body>
検証
init();var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo(); Web ページを最適化する 1 つの方法それは、ブラウザが不正な HTML コードを処理できるということです。合法的な HTML コードはデバッグが簡単で、メモリ使用量やリソース消費量が少なく、解析しやすく、レンダリングや実行が高速です。違法な HTML コードがあると、レスポンシブ デザインの実装が非常に困難になります。
テンプレートを使用する場合、適切な HTML コードは非常に重要です。テンプレートは単独では正常に動作しますが、他のモジュールと統合するとさまざまなエラーが報告されるため、HTML コードの品質を確保する必要があります。次の措置を講じることができます。
ワークフローに検証機能を追加します。HTMLHint や SublineLinter などの検証プラグインを使用して、コード エラーの検出に役立ちます。
- HTML5 ドキュメント タイプを使用します
- HTML の階層構造が保守しやすいようにし、要素が開いたままの状態でネストされるのを避けます。
- 各要素の終了タグを必ず追加してください。
- 不要なコードを削除します。自己終了要素の終了タグを追加する必要はありません。ブール属性は値を割り当てる必要がなく、存在する場合は True になります。 コード形式
- 形式の一貫性により、HTML コードの読み取り、理解、最適化、デバッグが容易になります。
<video src="foo.webm" autoplay controls>セマンティック タグ
セマンティックとは、HTML ではページのコンテンツからセマンティックを参照できます。要素と属性の命名は、コンテンツの役割と機能を特定します。範囲。 HTML5 では、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9 などの新しいセマンティック要素が導入されています。
コードを記述するために適切な要素を選択すると、コードの可読性が確保されます。
- 使用4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355…)表示标题，ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6实现列表
- 注意使用23c3de37f2f9ebcb477c4a90aac6fffd 标签之前应添加4a249f0d628e2318394fd9b75b4636b1标签；
- 选择合适的HTML5语义元素如1aa9e5d373740b65a0cc8f0a02150c53，c37f8231a37e88427e62669260f0074d,c787b9a589a3ece771e842a6176cf8e9,15221ee8cba27fc1d7a26c47a001eb9b;
- 使用e388a4556c0f65e1904146cc1a846bee描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
- 使用907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143标签替代5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419标签。
- 使用2e1cf0710519d5598b1f0f14c36ba674元素，输入类型，占位符及其他属性来强制验证。
- 将文本和元素混合，并作为另一元素的子元素，会导致布局错误，
例如：
<div>Name: <input type="text" id="name"></div>
换种写法会更好：
1: <div>
2: <label for="name">Name:</label><input type="text" id="name">
3: </div>
布局
要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。
- 使用e388a4556c0f65e1904146cc1a846bee元素修饰文本，而不是布局；默认e388a4556c0f65e1904146cc1a846bee是自动提供边缘，而且其他样式也是浏览器默认提供的。
- 避免使用0c6dc11e160d3b678d68754cc175188a分行，可以使用block元素或CSS显示属性来代替。
- 避免使用f32b48428a809b51f04d3228cdf461fa来添加水平线，可使用CSS的border-bottom 来代替。
- 不到关键时刻不要使用div标签。
- 尽量少用Tables来布局。
- 可以多使用Flex Box
- 使用CSS 来调整边距等。
CSS
虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：
- 避免内联css
- 最多使用ID类 一次
- 当涉及多个元素时，可使用Class来实现。
以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。