提到 HTML 标签，前端工程师会非常熟悉，因为在开发页面时经常使用，HTML 都是最基础的内容。

但对于一些基本知识，我们不能完整的描述出来，例如：

1. 浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。
2. 一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部 head 标签内，虽然对用户不可见，但有着很好的效果。

html结构

• 元素是页面的根元素，它描述完整的网页；
• 元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容；
• 元素包含了我们访问页面时所有显示在页面上的内容，是用户最终能看到的内容。

浏览器是如何加载页面呢？

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程，其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。

由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。

网页加载流程

1. 当我们打开网页的时候，浏览器会从服务器中获取到 HTML 内容。
2. 浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。
3. 元素内容会先被解析，此时浏览器还没开始渲染页面。
4. 当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。
5. 当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。
6. 此时元素内容开始被解析，浏览器开始渲染页面。

在这个过程中，我们看到中放置的元素会阻塞页面的渲染过程：把 JavaScript 放在里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。

到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。

性能优化

性能问题无外乎两方面原因：渲染速度慢、请求时间长。

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

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

为了减少这些时间损耗，可以借助 script 标签的 3 个属性来实现

• async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
• defer 属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
• HTML5 标准 type 属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。

具体效果可以参看下图：
绿色的线表示执行解析 HTML ，蓝色的线表示请求文件，红色的线表示执行文件。

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

• dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程，从而减少时间损耗。
• preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。
• prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
• prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

上图为浏览器获取资源文件的流程

link 标签：减少重复
有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：

• https://lagou.com/a.html
• https://lagou.com/detail?id=“abcd”

那么在这些页面中可以这样设置：

这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。

meta 标签：提取关键信息
通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。
例如，在百度中搜索“拉勾”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果

对应代码如下：

总结：通过本文针对页面加载过程及加载过程的性能优化应该有一些了解，很多时候，我们对一些基础内容也都需要不定期地进行复习。一些原本认为已经固化的认知，在重新学习的过程中，或许你可以得到新的理解。