1. 数据清洗

数据清洗通常是指对从服务器获取的数据进行处理,以减少页面内存占用并提高加载速度。

在服务器渲染网页时,页面会被存储在 Redis 缓存中。小型的 HTML 文件不仅可以减轻存储空间压力,还有助于提升页面加载速度。

如何才能减少 HTML 文件的大小呢?

在服务器渲染时,一些请求接口的数据会被转换成文本并嵌入到 HTML 文件中,而这些数据可能包含很多冗余信息。我们只需要在请求接口后对数据进行清理,保留必要的部分,就可以有效地减小 HTML 文件的大小。


  1. 压缩 HTML 代码

使用压缩工具或服务可以去除 HTML 文件中的空格、注释和其他不必要的字符,从而减小文件大小。


如压缩工具:https://www.minifier.org/


  1. 使用缩写和简化代码

尽量使用简洁的标记和属性,避免冗余的代码和不必要的标签,以减少 HTML 文件的体积。


  1. 合并和压缩 CSS 和 JavaScript 文件

将多个 CSS 和 JavaScript 文件合并为一个文件,并对这些文件进行压缩,可以减小页面加载所需的 HTTP 请求次数,提高加载速度。


  1. 使用语义化标记

使用语义化的标记结构,使代码更易读且更具可维护性,同时也可以减少冗余代码。html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析。


  1. 延迟加载资源

将不是首要加载的资源(如图片、视频等)延迟加载,可以减少页面初始加载时所需的资源量,加快页面呈现速度。


  1. 使用图片优化技术

对网页中的图片进行优化,包括压缩图片、选择合适的格式(如 WebP 格式)、使用适当的尺寸和质量,可以减小页面大小。


  1. 减少嵌入式内容

减少或避免在 HTML 文件中嵌入大量的外部资源(如嵌入式视频、音频等),可以减小文件大小。


  1. 使用 CDN 加速

将静态资源(如图片、CSS、JavaScript 文件)托管到 CDN(内容分发网络)上,可以提高资源加载速度,减轻服务器负担,并间接减小 HTML 文件大小。CDN 在全球各地都有服务器节点,这意味着无论用户身在何处,都可以从最近的 CDN 边缘服务器获取网站的静态资源,从而提高页面加载速度。


扩展:

以下是HTML中常用的语义化标签及其简要说明:

  1. <header>:用于定义页面或区域的头部,通常包含标题、logo、导航等元素。

  2. <nav>:用于定义导航链接部分,包含主导航、侧边栏链接等。

  3. <main>:标识文档的主要内容区域,确保页面主要内容在所有设备和浏览器上都能正确显示。

  4. <article>:用于定义独立的内容块,如博客文章、新闻报道等。

  5. <section>:用于将页面内容划分为不同的部分或区域,便于组织和样式化。

  6. <footer>:用于定义页面或区域的底部,通常包含版权信息、公司标识等。

  7. <h1> - <h6>:用于定义六个不同级别的标题,<h1>表示最高级别标题,<h6>表示最低级别标题。

  8. <p>:用于定义段落。

  9. <figure>:用于表示独立的内容,如图片、图表等,常与<figcaption>一起使用来添加标题。

  10. <div>:用于对页面内容进行分区和样式化,常与CSS一起使用。

  11. <span>:用于对文本或其他元素进行分组,常与CSS一起使用来添加样式。

  12. <aside>:用于定义与页面内容相关但不直接相关的内容,如侧边栏、广告等。

  13. <details>:用于创建可展开和折叠的内容块,常与<summary>一起使用来添加标题。

  14. <summary>:用于定义<details>元素的标题。

  15. <label>:用于定义表单控件的标签,有助于提高表单的可访问性。

  16. <form>:用于创建表单,包含输入控件、提交按钮等。

  17. <input>:用于创建输入控件,如文本框、单选框、复选框等。

  18. <textarea>:用于创建多行文本输入框。

  19. <button>:用于创建按钮。

  20. <select><option>:用于创建下拉选择框。

  21. <datalist>:与<input>元素结合使用,提供预定义的选项列表供用户选择。

  22. <progress><meter>:分别用于表示进度信息和度量标准。

  23. <section><article>/<section>的区别在于<article>表示一个独立的、完整的片段,如博客文章或新闻报道;而<section>则表示页面中的一部分内容或区域。在实际开发中,根据内容的性质和结构选择合适的语义化标签,有助于提高网页的可读性和可访问性。同时,遵循HTML5规范和语义化标签的使用原则,还可以提高SEO效果和用户体验。




点赞(1) 打赏

评论列表 共有 0 条评论

暂无评论

服务号

订阅号

备注【拉群】

商务洽谈

微信联系站长

发表
评论
立即
投稿
返回
顶部