编写高性能html网页应用-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

编写高性能html网页应用

Dec 02, 2016 am 09:34 AM

html

你怎么能提高网页性能？

　　大多数开发者会通过JavaScript和图片来优化，通过服务器配置，压缩文件和合并文件 - 甚至调整CSS（合并小图片）。

　　可怜的HTML老是被忽视，尽管它一直是网络的核心语言。

　　HTML正在变得越来越大。排名前100的网站每个HTML页面大多在40K左右。亚马逊和雅虎使用上千个HTML页面。在youtube.com主页面，HTML元素高达3500个。

　　减少的HTML复杂性和一个页面的元素数量并不会明显提高解析时间 - 但HTML是构建极速网页，和适应不同设备并影响成功的一个关键性的因素。

　在本文中，您将了解如何编写简洁干净的HTML，使您能够创建快速加载并支持多种设备的网站，将易于调试和维护。

　　写代码的方法并不是只有一种-尤其是HTML。这里只是讲解一般经验，但并不是唯一正确的选择。

　HTML, CSS 和 JavaScript

　　HTML是一种标记语言，用于表示结构和内容。

　　HTML不应被用来显示风格和样式。不要为了显得“更大”把文字写在标题标签（h1~h6）中，或只是为了缩进而使用blockquotes元素。相反，使用CSS来改变元素的外观和布局。

　　HTML元素的默认外观是通过浏览器的默认样式实现的：Firefox，Internet Explorer和Opera均不一样。例如，在Chrome中默认h1元素呈现为32px的大小。

　　三个基本原则：

　　使用HTML表示结构，CSS用来表现不同样式的风格和主题。JavaScript来响应用户行为。

　　使用HTML，必要时借助CSS，并且在不得己时再添加JavaScript。例如：在许多情况下，你可能使用HTML表单进行验证，使用CSS或SVG来实现动画。

　　将CSS和JavaScript从你的HTML代码中分离。让他们能够缓存，这使代码更易于调试。在生产中，CSS和JavaScript是可以压缩合并的，应该作为你Build系统的一部分。注* 参见 JavaScript构建（编绎）系统大比拼

　Document文档结构

　　使用 HTML5的document type:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Recipes: pesto&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Pesto&lt;/h1&gt;
  &lt;p&gt;Pesto is good!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

　　在页面最头部引用CSS文件，如在head元素中：

&lt;head&gt;
  &lt;title&gt;My pesto recipe&lt;/title&gt;
  &lt;link rel=&quot;/css/global.css&quot;&gt;
  &lt;link rel=&quot;css/local.css&quot;&gt;
&lt;/head&gt;

Salin selepas log masuk

　　这样，浏览器就可以在解析HTML前预先加载样式而不会呈现一个混乱的页面布局。

　　把JavaScript放在页面的最底部, 在body封闭之前。这将提高页面渲染时间，因为浏览器可以在JavaScript装载前将页面渲染出来:

&lt;body&gt;
  ...
  &lt;script src=&quot;/js/global.js&quot;&gt;
  &lt;script src=&quot;js/local.js&quot;&gt;
&lt;/body&gt;

Salin selepas log masuk

　　在JavaScript添加事件处理。不要在HTML中添加。这样非常难以维护，比如:

index.html:
&lt;head&gt;
  ...
  &lt;script src=&quot;js/local.js&quot;&gt;
&lt;/head&gt;
&lt;body onload=&quot;init()&quot;&gt;
  ...
  &lt;button onclick=&quot;handleFoo()&quot;&gt;Foo&lt;/button&gt;
  ...
&lt;/body&gt;

Salin selepas log masuk

　　这样就好多了:

&lt;head&gt;
  ...
&lt;/head&gt;
&lt;body&gt;
  ...
  &lt;button id=&quot;foo&quot;&gt;Foo&lt;/button&gt;
  ...
  &lt;script src=&quot;js/local.js&quot;&gt;
&lt;/body&gt;

Salin selepas log masuk

　　js/local.js:

init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();

Salin selepas log masuk

合法的HTML

　　Web网页成功的一个主要因素就是浏览器可以处理无效的HTML。浏览器还有一些如何呈现无效代码的标准化规则。

　　但是，这不你放任的理由。有效的HTML更容易调试，往往文件更小，速度更快，占用资源更少，因为它们渲染更快。无效的HTML让响应式设计难以实施。

　　使用模板的时候写有效的HTML是特别重要的。

　　在你的BUILD系统中验证HTML：使用验证插件，如HTMLHint和SublimeLinter来检查你HTML的语法。

　　使用HTML5文档类型。

　　请务必保持HTML的层次：正确嵌套元素，确保没有任何未关闭的元素。它可以帮助调试者添加注释。

&lt;div id=&quot;foobar&quot;&gt;
...
&lt;/div&gt; &lt;!-- foobar ends --&gt;

Salin selepas log masuk

　　请务必在非自封闭的元素后加上结束标签，比如，下面的也可以工作：

&lt;p&gt;Pesto is good to eat...
&lt;p&gt;...and pesto is easy to make.

Salin selepas log masuk

　　但是下面的写法可以避免错误，段落层次更加明显:

&lt;p&gt;Pesto is good to eat...&lt;/p&gt;
&lt;p&gt;...and pesto is easy to make.&lt;/p&gt;

Salin selepas log masuk

　　items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。

&lt;ul&gt;
  &lt;li&gt;Basil
  &lt;li&gt;Pine nuts
  &lt;li&gt;Garlic
&lt;/ul&gt;

Salin selepas log masuk

　　有一点你必须注意video和audio元素。他们不是自封闭的：

&lt;!-- 错误: liable to cause layout grief --&gt;
&lt;video src=&quot;foo.webm&quot; /&gt;
&lt;!-- 正确 --&gt;
&lt;video src=&quot;foo.webm&quot;&gt;
  &lt;p&gt;Video element not supported.&lt;/p&gt;
&lt;/video&gt;

Salin selepas log masuk

　　相反，通过删除不必要的代码HTML页面会变得更干净

　　没有必要为自封闭元素添加"/"，像img等

　　设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

　　video，它是没有任何属性的

&lt;video src=&quot;foo.webm&quot;&gt;

Salin selepas log masuk

　　下面两种更好

&lt;video src=&quot;foo.webm&quot; autoplay=&quot;false&quot; controls=&quot;false&quot;&gt;
&lt;video src=&quot;foo.webm&quot; autoplay=&quot;true&quot; controls=&quot;true&quot;&gt;

Salin selepas log masuk

　　这种可读性更强

&lt;video src=&quot;foo.webm&quot; autoplay controls&gt;

Salin selepas log masuk

　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

&lt;a href=&quot;//en.wikipedia.org/wiki/Tag_soup&quot;&gt;Tag soup&lt;/a&gt;

Salin selepas log masuk

　　增强可读性，如，第一眼看上去就像是个标题

&lt;h2&gt;&lt;a href=&quot;/contact&quot;&gt;Contact&lt;/a&gt;&lt;h2&gt;

Salin selepas log masuk

　　而这种则像个链接

&lt;a href=&quot;/contact&quot;&gt;&lt;h2&gt;Contact&lt;/h1&gt;&lt;/a&gt;

Salin selepas log masuk

　　应该使用小写

&lt;A HREF=&quot;/&quot;&gt;Home&lt;/A&gt;

Salin selepas log masuk

　　大小写混合看上去更恶心

&lt;H2&gt;Pesto&lt;/h2&gt;

Salin selepas log masuk

语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像 <header>, <footer> 和 <nav>。

　　使用正确的元素表达正确的内容对于可访问性是有帮助的。

　　使用<h1><h2>,<h3>代表标题， <ul>或<ol>代表lists

　　注意<article>的标题应该以<h1>开始

　　使用<header>, <footer>, <nav> and <aside>

　　使用<p>写正文

　　使用<em> 和 <strong> 代替 <i> 和 <b> 表示强调

　　表单使用<label>元素，input 类型

　　混合文字和元素会导至布局的问题

&lt;div&gt;Name: &lt;input type=&quot;text&quot;&gt;&lt;/div&gt;

Salin selepas log masuk

　　最好用下面的表示

&lt;div&gt;&lt;label&gt;Name:&lt;/label&gt;&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;

Salin selepas log masuk

　布局

　　HTML应该使用有意义的组织结构，而不是通过样式来实现。

　　使用<p>元素代表文本，而不是用来布局。

　　避免使用<br>来换行，使用块级元素和CSS来代替。

　　避免使用水平分隔线<hr>。使用CSS的border样式来控制。

　　不要使用不必要的DIV。W3C对DIV的定义是排序的是最后一个元素。

　　要了解哪些元素是块级元素，避免在DIV中放置不必要的块级元素。将一个list放到div中是没有必要的。

　　不要使用table来布局。

　　Flex box是被广泛推荐的，能用就用吧。

　　使用CSS的padding和margin，理解盒子模型。

　CSS

　　这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。

　　避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。

　　避免ID出现重复。

　　如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：

&lt;!-- 有点笨 :( --&gt;
&lt;ul&gt;
  &lt;li class=&quot;ingredient&quot;&gt;Basil&lt;/li&gt;
  &lt;li class=&quot;ingredient&quot;&gt;Pine nuts&lt;/li&gt;
  &lt;li class=&quot;ingredient&quot;&gt;Garlic&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- 更好 :) --&gt;
&lt;ul class=&quot;ingredients&quot;&gt;
  &lt;li&gt;Basil&lt;/li&gt;
  &lt;li&gt;Pine nuts&lt;/li&gt;
  &lt;li&gt;Garlic&lt;/li&gt;
&lt;/ul&gt;

Salin selepas log masuk

可访问性

　　使用语义元素

　　提供向后兼容

　　在链接上添加title属性，而且应该避免与link文本出现相同的内容

　　在输入元素上添加type和placeholder属性

　　原文地址： samdutton.wordpress.com

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn