如何编写简练清晰的HTML代码?

如何提升 Web 页面的性能,很多开发人员从多个方面来下手如 JavaScript、图像优化、服务器配置,文件压缩或是调整 CSS。

很显然 HTML 已经达到了一个瓶颈,尽管它是开发 Web 界面必备的核心语言。HTML 页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的 HTML 元素,页面Size会更大。

如何有效的降低 HTML 代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的 HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

在设计和开发过程中需要遵循以下原则:

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

HTML、CSS 和 JavaScript 三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用 CSS 来修饰布局元素和外观比较合适。HTML 元素默认的外观是由浏览器默认的样式表定义的,如在 Chrome 中 H1 标签元素会渲染成 32px 的 Times 粗体。

三条通用设计规则:

  • 使用 HTML 来构造页面结构,CSS 修饰页面呈现,JavaScript 实现页面功能。CSS ZenGarden 很好地展示了行为分离。
  • 如果能用 CSS 或 JavaScript 实现就少用 HTML 代码。
  • 将 CSS 和 JavaScript 文件与 HTML 分开存放,这有助于缓存和调试。

文档结构方面也可以做优化,如下:

  • 使用 HTML5 文档类型,以下是空文件:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Recipes: pesto</title>
  5. </head>
  6. <body>
  7. <h1>Pesto</h1>
  8. <p>Pesto is good!</p>
  9. </body>
  10. </html>

复制代码

  • 在文档起始位置引用CSS文件,如下:
  1. <head>
  2. <title>My pesto recipe</title>
  3. <link rel="stylesheet" href="/css/global.css">
  4. <link rel="stylesheet" href="css/local.css">
  5. </head>

复制代码

使用这两种方法,浏览器会在解析 HTML 代码之前将 CSS 信息准备好,因此有助于提升页面加载性能。

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

  1. <body>
  2. ...
  3. <script src="/js/global.js">
  4. <script src="js/local.js">
  5. </body>

复制代码

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

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

index.html:

  1. <head>
  2. ...
  3. <script src="js/local.js">
  4. </head>
  5. <body onload="init()">
  6. ...
  7. <button onclick="handleFoo()">Foo</button>
  8. ...
  9. </body>

复制代码

下面的写法比较好:

index.html:

  1. <head>
  2. ...
  3. <script src="js/local.js">
  4. </head>
  5. <body onload="init()">
  6. ...
  7. <button onclick="handleFoo()">Foo</button>
  8. ...
  9. </body>

复制代码

js/local.js:

  1. <blockquote>init();

复制代码

验证

优化网页的一种方法就是浏览器可处理非法的 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>元素,输入类型,占位符及其他属性来强制验证。
  • 将文本和元素混合,并作为另一元素的子元素,会导致布局错误,

例如:

  1. <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 代码以实现功能和为目标,而不是样式。

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

CSS

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

  • 避免内联css
  • 最多使用ID类 一次
  • 当涉及多个元素时,可使用Class来实现。

总结

以上就是本文介绍的优化HTML代码的技巧,一个高质量高性能的网站,往往取决于对细节的处理,因此我们在日常开发中,能够考虑到用户体验,后期维护等方面,则会产生更高效的开发。

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

29360
来自专栏天天

微信小程序中自定义组件solt的使用

我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载...

2.3K20
来自专栏vue学习

20、分类详情页之数据渲染

然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。

23820
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

13940
来自专栏埋名

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用。

78440
来自专栏漫漫全栈路

ASP.NET MVC学习笔记03视图

早在ASP.NET MVC 3就引入了Razor视图引擎( Razor view engine)。Razor视图模板文件使用.cshtml文件扩展名,并提供了...

32630
来自专栏向治洪

android 优化之布局优化

布局优化的思路很简单,尽量减少布局文件的层级,看过系统源码的都知道,Android view绘制都是逐层绘制的,所以布局的层级少了,decodeview的时候绘...

23060
来自专栏编程坑太多

「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

11020
来自专栏lgp20151222

IntelliJ IDEA光标变粗 backspace无法删除内容解决方法

84410
来自专栏张戈的专栏

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 WordPress 插件时,把这...

30540

扫码关注云+社区

领取腾讯云代金券