ホームページ > 記事 > ウェブフロントエンド > 高パフォーマンスの HTML アプリケーションを作成する
高パフォーマンスの HTML アプリケーションを作成する
- 高洛峰オリジナル
- 2017-02-28 13:14:141297ブラウズ
Web ページのパフォーマンスを向上するにはどうすればよいですか?
ほとんどの開発者は、JavaScript と画像、サーバー設定、ファイルの圧縮とファイルの結合、さらには CSS の調整 (小さな画像の結合) を通じて最適化します。
貧弱な HTML は、常にインターネットの中核言語であるにもかかわらず、常に無視されます。
HTMLはどんどん大きくなっていきます。上位 100 の Web サイトの HTML ページのほとんどは約 40K です。 Amazon と Yahoo は何千もの HTML ページを使用しています。 youtube.com のメイン ページには、3,500 もの HTML 要素があります。
HTML の複雑さとページ上の要素の数を減らしても、解析時間は大幅に改善されません。しかし、HTML は、非常に高速な Web ページを構築し、さまざまなデバイスに適応し、成功に影響を与える重要な要素です。
この記事では、簡潔でクリーンな HTML の書き方を学び、迅速に読み込まれ、複数のデバイスをサポートし、デバッグと保守が容易な Web サイトを作成できるようにします。
コード、特に HTML を記述する唯一の方法はありません。これは一般的な経験にすぎませんが、これが唯一の正しい選択ではありません。
HTML、CSS、JavaScript
HTMLは、構造とコンテンツを表現するために使用されるマークアップ言語です。
スタイルやスタイルの表示にHTMLを使用すべきではありません。 「大きく」見せるためにタイトル タグ (h1 ～ h6) にテキストを入れたり、インデントのためだけにブロック引用符要素を使用したりしないでください。代わりに、CSS を使用して要素の外観とレイアウトを変更します。
HTML要素のデフォルトの外観は、ブラウザのデフォルトのスタイルによって実現されます。Firefox、Internet Explorer、Operaはすべて異なります。たとえば、Chrome では、h1 要素はデフォルトで 32 ピクセルのサイズでレンダリングされます。
3 つの基本原則:
HTML を使用して構造を表現し、CSS を使用してさまざまなスタイルとテーマを表現します。ユーザーのアクションに応答する JavaScript。
HTML を使用し、必要に応じて CSS に頼り、必要に応じて JavaScript を追加します。例: 多くの場合、検証には HTML フォームを使用し、アニメーションには CSS または SVG を使用します。
CSS と JavaScript を HTML コードから分離します。キャッシュ可能にすると、コードのデバッグが容易になります。運用環境では、CSS と JavaScript は縮小して結合できるため、ビルド システムの一部として含める必要があります。注* JavaScript 構築 (コンパイル) システム コンペティションを参照してください。
ドキュメント構造
HTML5 ドキュメント タイプを使用します:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
head 要素など、ページの上部にある CSS ファイルを参照します:
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
このようにして、ブラウザは、わかりにくいページ レイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。
本文を閉じる前に、ページの一番下に 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>
これははるかに優れています:
<head>
...
</head>
<body>
...
<button id="foo">Foo</button>
...
<script src="js/local.js">
</body>
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();正当なHTML
Webページの成功の主な要因は、ブラウザが無効なHTMLを処理できることです。ブラウザには、無効なコードを表示する方法に関する標準化されたルールもいくつかあります。
しかし、だからと言って手放す理由にはなりません。有効な HTML はデバッグが容易で、ファイル サイズが小さくなる傾向があり、高速で表示されるため、使用するリソースが少なくなります。 HTML が無効であると、レスポンシブ デザインの実装が困難になります。
テンプレートを使用する場合は、有効な HTML を記述することが特に重要です。
BUILD システムで HTML を検証する: HTMLHint や SublimeLinter などの検証プラグインを使用して、HTML の構文をチェックします。
HTML5ドキュメントタイプを使用します。
HTML の階層を必ず維持してください。要素を正しくネストし、閉じられていない要素がないことを確認してください。デバッガーがコメントを追加するのに役立ちます。
<p id="foobar"> ... </p> <!-- foobar ends -->
非自己終了要素の後には必ず終了タグを追加してください。たとえば、次のような方法でも機能します。
<p>Pesto is good to eat... <p>...and pesto is easy to make.
ただし、次の記述方法はエラーを回避し、段落の階層をより明確にすることができます。
db8773b604e021cc9b78861306c2737a
e388a4556c0f65e1904146cc1a846bee...そしてペストは簡単に作ることができます。94b3e26ee717c64999d7867364b1b4a3
items 要素 (li) は、非常に賢いプログラマーの中には、何があってもリスト要素 (ul) を閉じなければならないように、このように書く人もいます。
<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
注意しなければならないのは、ビデオとオーディオの要素です。これらは自己終了要素ではありません:
<!-- 错误: liable to cause layout grief --> <video src="foo.webm" /> <!-- 正确 --> <video src="foo.webm"> <p>Video element not supported.</p> </video>
逆に、不要なコードを削除することで HTML ページはよりクリーンになります
img などの自己終了要素に「/」を追加する必要はありません
属性の設定には値がありません はい、属性が追加されない場合 (この場合、自動的に再生されず、コントロールがありません)、
ビデオには属性がありません
<video src="foo.webm">
以下の 2 つですより良い
<video src="foo.webm" autoplay="false" controls="false"> <video src="foo.webm" autoplay="true" controls="true">
これはより読みやすいです
<video src="foo.webm" autoplay controls>
スタイルレットとスクリプトタグはtype属性を必要としません; デフォルトはcssとjavascriptです
プロトコルアドレスを最適化することをお勧めします（httpまたはhttpsの設定を削除します） 、現在のプロトコルに従って自動的に設定されます)
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
增强可读性，如，第一眼看上去就像是个标题
<h2><a href="/contact">Contact</a><h2>
而这种则像个链接
6feca578864c89f7badd9f8f3b8a12d9c1a436a314ed609750bd7c7d319db4daContact473f0a7621bec819994bb5020d29372a5db79b134e9f6b82c0b36e0489ee08ed
应该使用小写
<A HREF="/">Home</A>
大小写混合看上去更恶心
<H2>Pesto</h2>
语义标记
“语义”意思是跟含义相关
HTML应该标记有意义的内容：元素和描述的内容相符。
HTML5引入了一些新的‘语义元素’像 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d 和 c787b9a589a3ece771e842a6176cf8e9。
使用正确的元素表达正确的内容对于可访问性是有帮助的。
使用4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355代表标题， ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6代表lists
注意23c3de37f2f9ebcb477c4a90aac6fffd的标题应该以4a249f0d628e2318394fd9b75b4636b1开始
使用1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9 and 15221ee8cba27fc1d7a26c47a001eb9b
使用e388a4556c0f65e1904146cc1a846bee写正文
使用907fae80ddef53131f3292ee4f81644b 和 8e99a69fbe029cd4e2b854e244eab143 代替 5a8028ccc7a7e27417bff9f05adf5932 和 a4b561c25d9afb9ac8dc4d70affff419 表示强调
表单使用2e1cf0710519d5598b1f0f14c36ba674元素，input 类型
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用e388a4556c0f65e1904146cc1a846bee元素代表文本，而不是用来布局。
避免使用0c6dc11e160d3b678d68754cc175188a来换行，使用块级元素和CSS来代替。
避免使用水平分隔线f32b48428a809b51f04d3228cdf461fa。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( --> <ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <li class="ingredient">Garlic</li> </ul> <!-- 更好 :) --> <ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
更多编写高性能HTML应用相关文章请关注PHP中文网！