HTML 的一些优化技巧
如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。
很显然 HTML
已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML
页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的 HTML
元素,页面Size会更大。
下面简单的总结了一下:
在设计和开发过程中需要遵循一些原则:
- 结构分离:使用
HTML
增加结构,而不是样式内容; - 保持整洁:为工作流添加代码验证工具,使用工具或样式向导维护代码结构和格式;
- 学习新语言:获取元素结构和语义标记;
- 确保可访问:使用ARIP属性和Fallback属性等; (资料显示)
- 测试:使网站在多种设备中能够良好运行,可使用emulators和性能工具。
文档结构方面也可以做优化:
使用 HTML5 文档类型,下面是空文件:
在文档起始位置引用CSS文件:
使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。
在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。
1234567 > <body>> ...> <script scr='...'></script>> <script></script>> </body>>>
代码格式:
格式一致性使得 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>
换种写法会更好:
1234 > <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来实现。
以上就是初步的总结,希望能帮到大家~