1. 数据清洗
数据清洗通常是指对从服务器获取的数据进行处理,以减少页面内存占用并提高加载速度。
在服务器渲染网页时,页面会被存储在 Redis 缓存中。小型的 HTML 文件不仅可以减轻存储空间压力,还有助于提升页面加载速度。
如何才能减少 HTML 文件的大小呢?
在服务器渲染时,一些请求接口的数据会被转换成文本并嵌入到 HTML 文件中,而这些数据可能包含很多冗余信息。我们只需要在请求接口后对数据进行清理,保留必要的部分,就可以有效地减小 HTML 文件的大小。
压缩 HTML 代码
使用压缩工具或服务可以去除 HTML 文件中的空格、注释和其他不必要的字符,从而减小文件大小。
如压缩工具:https://www.minifier.org/
使用缩写和简化代码
尽量使用简洁的标记和属性,避免冗余的代码和不必要的标签,以减少 HTML 文件的体积。
合并和压缩 CSS 和 JavaScript 文件
将多个 CSS 和 JavaScript 文件合并为一个文件,并对这些文件进行压缩,可以减小页面加载所需的 HTTP 请求次数,提高加载速度。
使用语义化标记
使用语义化的标记结构,使代码更易读且更具可维护性,同时也可以减少冗余代码。html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析。
延迟加载资源
将不是首要加载的资源(如图片、视频等)延迟加载,可以减少页面初始加载时所需的资源量,加快页面呈现速度。
使用图片优化技术
对网页中的图片进行优化,包括压缩图片、选择合适的格式(如 WebP 格式)、使用适当的尺寸和质量,可以减小页面大小。
减少嵌入式内容
减少或避免在 HTML 文件中嵌入大量的外部资源(如嵌入式视频、音频等),可以减小文件大小。
使用 CDN 加速
将静态资源(如图片、CSS、JavaScript 文件)托管到 CDN(内容分发网络)上,可以提高资源加载速度,减轻服务器负担,并间接减小 HTML 文件大小。CDN 在全球各地都有服务器节点,这意味着无论用户身在何处,都可以从最近的 CDN 边缘服务器获取网站的静态资源,从而提高页面加载速度。
扩展:
以下是HTML中常用的语义化标签及其简要说明:
<header>
:用于定义页面或区域的头部,通常包含标题、logo、导航等元素。<nav>
:用于定义导航链接部分,包含主导航、侧边栏链接等。<main>
:标识文档的主要内容区域,确保页面主要内容在所有设备和浏览器上都能正确显示。<article>
:用于定义独立的内容块,如博客文章、新闻报道等。<section>
:用于将页面内容划分为不同的部分或区域,便于组织和样式化。<footer>
:用于定义页面或区域的底部,通常包含版权信息、公司标识等。<h1>
-<h6>
:用于定义六个不同级别的标题,<h1>
表示最高级别标题,<h6>
表示最低级别标题。<p>
:用于定义段落。<figure>
:用于表示独立的内容,如图片、图表等,常与<figcaption>
一起使用来添加标题。<div>
:用于对页面内容进行分区和样式化,常与CSS一起使用。<span>
:用于对文本或其他元素进行分组,常与CSS一起使用来添加样式。<aside>
:用于定义与页面内容相关但不直接相关的内容,如侧边栏、广告等。<details>
:用于创建可展开和折叠的内容块,常与<summary>
一起使用来添加标题。<summary>
:用于定义<details>
元素的标题。<label>
:用于定义表单控件的标签,有助于提高表单的可访问性。<form>
:用于创建表单,包含输入控件、提交按钮等。<input>
:用于创建输入控件,如文本框、单选框、复选框等。<textarea>
:用于创建多行文本输入框。<button>
:用于创建按钮。<select>
和<option>
:用于创建下拉选择框。<datalist>
:与<input>
元素结合使用,提供预定义的选项列表供用户选择。<progress>
和<meter>
:分别用于表示进度信息和度量标准。<section>
和<article>
/<section>
的区别在于<article>
表示一个独立的、完整的片段,如博客文章或新闻报道;而<section>
则表示页面中的一部分内容或区域。在实际开发中,根据内容的性质和结构选择合适的语义化标签,有助于提高网页的可读性和可访问性。同时,遵循HTML5规范和语义化标签的使用原则,还可以提高SEO效果和用户体验。
文章为作者独立观点,不代表DLZ123立场。如有侵权,请联系我们。( 版权为作者所有,如需转载,请联系作者 )
网站运营至今,离不开小伙伴们的支持。 为了给小伙伴们提供一个互相交流的平台和资源的对接,特地开通了独立站交流群。
群里有不少运营大神,不时会分享一些运营技巧,更有一些资源收藏爱好者不时分享一些优质的学习资料。
现在可以扫码进群,备注【加群】。 ( 群完全免费,不广告不卖课!)
发表评论 取消回复