ホームページ > 記事 > ウェブフロントエンド > 効率的なHTML_html/css_WEB-ITnoseの書き方
効率的なHTML_html/css_WEB-ITnoseの書き方
- WBOYオリジナル
- 2016-06-24 11:46:091092ブラウズ
効率的なHTMLの書き方
個人翻訳、転載大歓迎！
英語の原文: https://samdutton.wordpress.com/2015/04/02/high-performance-html/
海外のブログ投稿を翻訳するのは初めてです。コメントや提案は大歓迎です。
どうすれば Web ページのパフォーマンスを向上させることができますか?
この質問を見たとき、ほとんどの開発者は画像の最適化、JavaScript の最適化、サーバー構成のアップグレード、ファイル圧縮、さらには CSS 圧縮を思い浮かべるでしょう。しかし、Web ページの中核言語である HTML は無視されてきました。
現在、HTML の負担はますます重くなっており、世界のトップ 100 の Web サイトの各ページの HTML コードの平均サイズは約 40k で、そのうち Amazon と Yahoo の HTML コードは平均数千行です。 Youtube ホーム ページには 3500 の HTML 要素もあります。ページごとの HTML の複雑さを軽減し、要素の数を減らしても、ページの読み込み時間は大幅に改善されませんが、適切な HTML コーディングの習慣は、Web ページの読み込み速度を向上させるための重要な基盤です。私がこの記事を書いた理由は、多くのデバイスで Web ページをすばやく読み込んで正常に実行できるように、クリーンで整然とした HTML コードを記述する方法を説明することです。その過程で、保守とデバッグが簡単な Web サイトとアプリを構築する方法を学ぶことができます。
コード、特に HTML を記述する方法はたくさんあります。この記事は、私たちの経験に基づいて比較的最適な提案を行っているだけであり、すべての提案がどのような状況でも効果を達成できることを意味するものではありません。
はじめに
ウェブの三人の友人全員が自分の義務を果たします。CSS でスタイルを制御するだけで十分です。希望のスタイルを強制的に取得するために HTML 要素を使用しないでください。
- 細心の注意: 開発プロセス中に必ずコード検証ツールを追加してください。コードに文法的および論理的なエラーがないことを確認します。
- 整理整頓: コードの構造と形式の一貫性を維持するために自動組版ツールを使用します。
- 言語に堪能であること: すべての要素の使用法を理解している必要があります。 HTML 要素でより多くのセマンティクスを使用します。
- 全員を平等に扱います。バックアップ計画は重要であり、Web サイトが確実に機能するように、特別なグループに対してのみ ARIA (Accessible Rich Internet Application) を使用する必要があります。スクリーン リーダーまたはプレーン テキストでアクセスして表示できます。
- 包括的なテスト: さまざまなツールを使用して、さまざまなデバイスや画面サイズで Web サイトのパフォーマンスをテストします。
HTML の意味についてはあまり説明する必要はありません。百度百科を使用してください。
最初に言いたいのは、HTML と CSS の 2 つの兄弟は互いに情熱を持っていますが、その関係を複雑にしすぎてはいけないということです。HTML 要素を使用してスタイルを強制的に取得しないでください。テキストを大きくするためだけに 4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355 のタイトル タグを使用しないでください。また、テキストをインデントするためだけに b8a712a75cab9a5aded02f74998372b4 タグを使用しないでください。
Chrome、Firefox、Internet Explorer、Opera にはそれぞれ独自のデフォルト スタイル シートがあり、HTML 要素のデフォルトの表示モードはこれらのデフォルト スタイル シートによって決まります。たとえば、Chrome の 4a249f0d628e2318394fd9b75b4636b1 のデフォルトのスタイルは 32 ピクセルの太字で、フォントは Times です。
友達の 3 つの原則:
まず HTML の設計を完了し、次にスタイルの要件に従って CSS を設計し、最後に本当に必要な場合に JavaScript を設計します CSS ファイルと JavaScript ファイルを HTML ファイルとは別にアーカイブします (これはページのキャッシュに役立つだけでなく、必要に応じて、CSS と JavaScript を HTML にリンクして、CSS と JavaScript コードを圧縮および暗号化することもできます。 構造の構築
HTML の構造を構築するときは次の点に注意する必要があります:
HTML5 標準を採用する場合は、次のように先頭に 8b05045a5be5764f313ed5b9168a17e6 を追加する必要があります:
<!DOCTYPE html><html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body></html>
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"></head>
<body> ... <script src="/js/global.js"> <script src="js/local.js"></body>
- 比如这样写就不太好：
index.html
<head> ... <script src="js/local.js"></head><body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ...</body>
- 这样写就好多了：
index.html
<head> ...</head><body> ... <button id="foo">Foo</button> ... <script src="js/local.js"></body>
***js/local.js***
javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo(); 代码校验
虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢？可以有这些方式：
确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：
<div id="foobar"> ...</div> <!-- foobar ends -->
在所有不能自动结束的元素末尾添加结束标签；
- 比如这个例子，这样写也可以可以正常运行：
<p>Pesto is good to eat...<p>...and pesto is easy to make.
- 不过还是下面这样比较不容易出错：
<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>
bed06894275b65c1ab86501b08a632eb结束标签不是必须的，所以有些人认为可以不写bed06894275b65c1ab86501b08a632eb，这可以接受，但是929d1f5ca49e04fdcb27f9465b944689和f6f112ef45f603be226bc581f9dd5e90标签一定要加：
<ul> <li>Basil <li>Pine nuts <li>Garlic</ul>
39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92元素必须要有结束标签：
<!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm"> <p>Video element not supported.</p></video>
另一方面，要去掉冗余代码：
布尔型的属性可以不赋值，只要该属性出现，值就为true；
- 下面这样是可以运行的（没有加autoplay和controls）：
<video src="foo.webm">
- 这样就不能运行，因为这两个属性值必须是true：
<video src="foo.webm" autoplay="false" controls="false">
- 这样改一下就可以运行了：
<video src="foo.webm" autoplay="true" controls="true">
- 这样写会更易读：
<video src="foo.webm" autoplay controls>
外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：
用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：
<h2><a href="/contact">Contact</a><h2>
这样写的话就更像是一个链接：
<a href="/contact"><h2>Contact</h2></a>
使用小写字母来写标签和属性，大写字母很不易读，像这样：
<A HREF="/">Home</A>
混合式的写法简直就是反人类：
<H2>Pesto</h2>
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d和c787b9a589a3ece771e842a6176cf8e9。
为了是你的代码更易理解，一定要针对内容使用相应的语义化元素：
不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：
<div> Name: <input type="text"></div>
这样写会更好些：
<div> <label>Name:</label> <input type="text"></div>
布局
首先再次强调一遍：
样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些：
CSS方面
这篇文章虽然是讲HTML的，但也有些CSS的注意事项想说一说：
有时候给父元素添加class要比给子元素添加更简洁易维护（class的命名方式可以采用BEM规则），像这样：
<!-- 这样看着好累>o< --> <ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <li class="ingredient">Garlic</li> </ul> <!-- 看起来舒服多了^v^ --> <ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>
易用性
要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验：
其他建议
有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的3f7b3decd2dcafb07b84d2d3985d9f40，当用户复制文字内容时，得到的是大小写混合的文字：
HTML
<h4>W3C Web Accessibility Initiative ARIA guidance</h4>
CSS
h4 { font-variant: small-caps;} 测试
重中之重，就是一定要做测试！
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器（如： Lynx）或者屏幕阅读器（如：ChromeVox）来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。