HTML代码的优化技巧代码优化技巧有哪些？

2021-03-11 14:27:28 浏览数 (4001)

HTML 作为现如今最热门的开发技术基础之一，相信很多人都不陌生，那么在进行 HTML 编程的时候出现累赘冗长的代码对后续的阅读很不友好，接下来小编就带你学习如何对 HTML 代码进行优化 HTML代码优化

HTML 经过长久以来的发展成为了开发 Web 界面必备的核心语言，所以 HTML 页面的负载量也是日益加重。相对于大部分的页面都是需要40K的空间容量，而较大型网站的代码则会拥有成千上万的 HTML 元素，这就导致页面 Size 会非常大。

那么如何去显著的降低 HTML 代码复杂程度和HTML元素的数量呢？本文带你解决这个问题，从多个角度介绍怎样简练的编写清晰的 HTML 代码，能让你的页面加载速度提升一个档次，并且还能在多种设备良好运行。

开发和设计原则

结构的分离去使用 HTML 增加结构，而不是样式内容
保持代码的整洁，为工作流添加代码验证的工具，使用工具或样式向导维护代码结构和格式
学习新语言，获取语义标记与元素结构。
为了能够正常访问可以使用 ARIA 属性与 Fallback 属性等
代码测试，使网站在多种设备中能够良好运行，可使用 emulators 和性能工具。

html开发设计原则

HTML, CSS和JavaScript三者关系

HTML 是用于构建页面结构和内容的标记语言，HTML 无法用于修饰内容的样式效果，也不能在开头标签中输入文本内容会使得代码变得复杂及冗长，相反我们使用 CSS 来修饰页面布局和外观比较合适。

HTML 元素默认的外观是通过浏览器样式表定义的，例如在谷歌中<h1>标签会被渲染成 32px 的粗体。

三条通用设计规则：

使用 HTML来构建页面结构，CSS 修饰页面样式，JavaScript 实现页面动态功能。
可以用 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>

使用以上两种方法，浏览器就会在解析 HTML 代码前将 CSS 代码准备好。这样有助于提高页面加载性能。

在页面底部 body 结束标签前输入 JavaScript 代码，这样有助于提升页面加载的速度，因为浏览器在解析 JavaScript 代码之前将页面加载完成，使用 JavaScript 会对页面元素产生积极的影响。

<body>
 
  ...
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

可以使用 Defer 和 async 属性，脚本元素具有 async 属性无法保证会按顺序执行。

可在 JavaScript 代码中添加 Handlers。千万别加到 HTML 内联代码中，比如下面的代码则容易导致错误且不易于维护：

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：

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

验证效果

优化网页的一种方法就是浏览器可处理非法的 HTML 代码。合法的 HTML 代码很容易调试，且占内存少，耗费资源少，易于解析和渲染运行起来更快。非法的 HTML 代码让实现响应式设计变得异常艰难。

当使用模板时，合法的 HTML 代码显得异常重要，经常会发生模板单独运行良好，当与其他模块集成时就报各种各样的错误，因此一定要保证 HTML 代码的质量，可采取以下措施：

在工作流中添加验证功能：使用验证插件如 HTMLHint 或 SublineLinter 帮助你检测代码错误。
使用 HTML5 文档类型
确保 HTML 的层次结构易于维护，要避免元素嵌套处于左开状态。
保证添加各元素的结束标签。
删除不必要的代码；没有必要为自关闭的元素添加结束标签；Boolean 属性不需要赋值，如果存在则为 True;

代码格式

格式一致性使得 HTML 代码易于阅读，理解，优化，调试。

语义标记

语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如<header>，<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性：

使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表
注意使用<article> 标签之前应添加<h1>标签；
选择合适的 HTML5 语义元素如<header>，<footer>,<nav>,<aside>;
使用<p>描述 Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用<em>和<strong>标签替代<i>和<b>标签。
使用<label>元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

例如：

<div>Name: <input type="text" id="name"></div>

换种写法会更好：


<div>
<label for="name">Name:</label><input type="text" id="name">
</div>

页面布局

要提高 HTML 代码的性能，要遵循 HTML 代码以实现功能和为目标，而不是样式。

使用<p>元素修饰文本，而不是布局；默认<p>是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用<br>分行，可以使用 block 元素或 CSS 显示属性来代替。
避免使用<hr>来添加水平线，可使用 CSS 的 border-bottom 来代替。
不到关键时刻不要使用 div 标签。
尽量少用 Tables 来布局。
可以多使用 Flex Box
使用 CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化 HTML，下面介绍了一些使用 CSS 的基本技能：

避免过多使用内联 CSS 样式
最多使用 ID 类一次
当涉及多个元素时，可使用 Class 来实现。

推荐好课：HTML微课（含HTML5）、HTML+CSS基础实战

以上就是小编为大家带来的关于 HTML 代码的优化技巧的全部内容。

w3cschool 编程狮，随时随地学编程

HTML代码的优化技巧 代码优化技巧有哪些？