优化性能的 HTML

一、SEO 优化

SEO 是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！

常见的搜索引擎，比如百度，谷歌等等..

SEO 是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及产品的曝光度。 简单的说酒香不怕巷子深，我们要把酒做的足够香，才能引来大量的顾客。

1. title 标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。

建议：

首页标题：网站名（产品名）- 网站的介绍   

<title>
	小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站
</title>

2. Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以稍多一点

<meta name="keywords" content="小米,redmi,小米11,Redmi Note 9,小米MIX Alpha,小米商城">

关键字查询工具 站长工具 Google Trends

3. description 网站说明

对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。

<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 、小米10 Pro、小米MIX Alpha，Redmi 红米系列Redmi Note 9、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">

注意点：

1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。

2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。

3. 补充在 title 和 keywords 中未能充分表述的说明.

二、性能优化

性能问题无外乎两方面原因：渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案，但其实只要通过合理地使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。

1. script 标签：调整加载顺序提升渲染速度

由于浏览器的底层运行机制，渲染引擎在解析 HTML 时，若遇到 script 标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至 JavaScript 引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。

这也就是为什么建议 script 标签写在 body 标签的底部的原因， 当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染，因为当渲染引擎执行到 body 底部时会先将已解析的内容渲染出来，然后再去请求相应的 JavaScript 文件。如果是内联脚本（即不通过 src 属性引用外部脚本文件直接在 HTML 编写 JavaScript 代码的形式），渲染引擎则不会渲染已解析的内容。

• async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。

• defer 属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。

• HTML5 标准 type 属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行

• 绿色的线表示执行解析 HTML
• 蓝色的线表示请求文件
• 红色的线表示执行文件

2. link 标签：通过预处理提升渲染速度

在我们对大型单页应用进行性能优化时，也许会用到按需懒加载的方式，来加载对应的模块，但如果能合理利用 link 标签的 rel 属性值来进行预加载，就能进一步提升渲染速度。

• dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程，从而减少时间损耗。

  <!-- a 标签的 dns 预解析是默认打开的， https 会关闭掉 a 标签的 dns 预解析-->
  <!-- 强制打开 a 标签的 dns 预解析 -->
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <link rel="dns-prefetch" href="http://g.alicdn.com" />
  <!--如果不确定是http还是https连接的话建议如下写法 -->
  <link rel="dns-prefetch" href="//g.alicdn.com">
  

  • dns-prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面

  • dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数

• preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。

• prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。

  • <link rel="preload" href="路径" as="资源类型" />
    

• prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。