整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
起HTML标签，前端工程师会非常的有发言权，因为在平时开发中一定会用到，可以说是前端的入门必备知识。但往往在意更多的是页面的渲染效果及交互方式，也就是页面可见的部分，比如导航栏，菜单栏，列表，图文等。
其实还有一些页面上没有呈现出来却非常重要的标签，这些标签大部分在页面的头部head标签内，虽然在页面上看不见摸不着，但如果在特定的场景下，会产生意想不到的效果。下面我将从交互优化，性能优化，搜索优化三个方面并结合场景来聊聊被“忽视”的HTML标签。
交互优化
meta 标签：自动跳转/刷新
假设要实现一个类似自动播放的页面，首先我们第一反应会想到用js定时器控制页面跳转来完成。但是其实有更加简便的方法，通过meta标签的refresh功能来实现。
<meta http-equiv="refresh" content="10; url=view2.html">上面的代码会在 10s 之后自动跳转到同域下的 view2.html 页面。我们要实现自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。
如果要实现定时刷新的功能，只要去除后面url即可：
<meta http-equiv="refresh" content="10">注意，用meta标签实现刷新/跳转的过程是不可取消的，所以需要手动取消的还是得老老实实使用js的定时器，但是对于简单的定时刷新或跳转，还是可以去亲自实践meta的用法。
title 标签：消息提醒
消息提醒功能实现在HTML5标准发布之前，浏览器还没有开放图标闪烁、音频播放，弹出系统消息之类的api，只能借助其他非常规的手段，比如修改title 标签来达到类似的效果。
下面的代码通过定时修改title标签的内容，实现了消息提醒的功能，可以让用户在浏览其他页面时候，及时发现服务端返回的消息。
let messageNum = 1; // 消息条数
let count = 0; // 计数器
const msgInterval = setInterval(() => {
count = (count + 1) % 2;
if(messageNum === 0) {
// 通过DOM修改title
document.title += `当前页面`;
clearInterval(msgInterval);
return;
}
const pre = count % 2 ? `新消息(${msgNum})` : '';
document.title = `${pre}当前页面`;
}, 1000);当然，动态修改title标签的用途不仅仅是消息提醒，还可以显示一些异步进行的任务，比如下载进度，上传进度等。
性能优化
script 标签：调整加载顺序提升渲染速度
不知道你们有没有过这样的体验：当在浏览器打开某个页面时，发现页面一直在loading转圈，或者等了好长的时间页面才有响应。这一现象，除了网络网速的原因外，大多数都是由于页面结构设计不合理导致加载时间过长。因此，如果想要提升页面的渲染速度，就需要了解浏览器页面的渲染过程是怎样的，从根本上来解决问题。
浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起，等执行完 JavaScript 的脚本程序后又会切换 GUI 线程继续渲染页面。
所以我们可以知道页面渲染过程中包含了请求脚本文件以及执行脚本文件的时间，但页面的首次渲染可能并不需要执行完全部的文件，这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。
为了快速将内容呈现给用户，减少用户等待时间，可以借助script标签的3个属性来实现：
async：表示立即请求脚本文件，但不阻塞 GUI 渲染引擎，而是文件加载完毕后阻塞 GUI 渲染引擎并立即执行文件内容。
defer。立即请求脚本脚本，但不阻塞 GUI 渲染引擎，等到解析完 HTML 之后再执行文件内容。
HTML5 标准 type，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。
所以可以得知，采用defer 属性以及 type="module" 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗的时间，让用户更快地看见页面（即使这些页面内容可能并没有完全地显示）。除此外还要知道，当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染，这就是为什么会把引用JavaScript 代码的 script 标签放入到 body 标签底部。
link 标签：通过预处理提升渲染速度
在我们对中大型项目进行性能优化时，往往会对资源做减法（gzip压缩，缓存等）或除法（按需打包，按需加载），可是如果能想到 link 标签的 rel 属性值来进行预加载，也能加快页面的渲染速度。
dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程（DNS查询），从而减少时间损耗。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）
preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）
prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）
搜索优化
你所写的前端代码，除了要让浏览器更好执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用 meta 标签和 link 标签，恰好能让搜索引擎更好地理解和收录我们的页面。
meta 标签：提取关键信息
通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。
例如，在百度中搜索“淘宝”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。
为了让搜索引擎更好地识别页面，除了描述信息description之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。
当我们搜索关键字“安全购物”的时候搜索结果会显示淘宝网的信息，虽然显示的搜索内容上并没有看到“安全购物”字样，这就是因为淘宝网页面中设置了这个关键字。
对应代码如下：
<meta content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" name="keywords">在实际工作中，推荐使用一些关键字工具来挑选，比如
Google Trends
https://trends.google.com/trends
站长工具
https://data.chinaz.com/keyword/
link 标签：减少重复
有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：
- https://baidu.com/a.html
- https://baidu.com/detail?id=abcd
那么在这些页面中可以这样设置：
<link href="https://baidu.com/a.html" rel="canonical">这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。
当然，要合并网址还有其他的方式，比如使用站点地图，或者在 HTTP 请求响应头部添加 rel="canonical"。
文将介绍，淘宝直播前端团队为提升业务触达效率而设计的零代码弹窗动态化方案。
业务背景
众所周知，产品有三宝：弹窗，红点和引导。在淘宝直播业务里面，每当有功能上新、活动邀约、系统消息、奖励发放等事件发生时，我们通常采用弹窗来及时告知目标用户。可见弹窗是一项极其重要的触达手段，它打通了平台与主播的信号传达通路。
为了能高效快捷地与主播传递信息，我们必然要牺牲弹窗的视觉效果和灵动性。因此，过去的弹窗基本上由纯文本或单张图片组成：
图1 传统纯文本或图片弹窗
当然，由纯文本或单张图片构成的弹窗往往缺乏视觉张力，使用户不能在短时间内阅读并理解弹窗内容，造成触达效率下降。另外，由于无法定制业务逻辑，主播不可以在弹窗上及时做出反馈动作，造成用户体验和触达效率的进一步下降。
因此，为了能在前端开发资源有限的前提下，提供更加美观、灵活的弹窗形式，提升业务触达效率，淘宝直播前端团队设计了一套零代码弹窗动态化方案（No-Code Dynamic Popup）。
方案探索
为了使弹窗的视觉效果更加多样、交互更加灵活，在不依赖客户端发版的前提下，必然要引入前端到各个需求的开发流程中来。因此，我们站在前端视角对弹窗这一场景进行了技术方案调研。
我们首先能想到的是按传统需求交付 SOP 来开发弹窗。当然，在初期阶段我们确实采取过这种流程并在今年年初上线了最早的几个 H5 弹窗。
图2 传统开发流程图
如图 2 所示，传统产研流程需要把弹窗从其父需求中拆解出来，因为弹窗通常不是一个独立的需求，它是作为某个功能迭代、活动/任务上新等业务的附属需求。拆解完后经过需求评审，再由设计师出手设计弹窗的视觉稿，然后分别进入各端的开发、联调阶段。
客户端已经有了现成的 H5 弹层容器（WebViewLayer）故不需要投入开发；服务端也有了成熟的配置方案（疲劳度、优先级等）并且需要返回给前端的字段不多，因此工作量也不大。
而前端由于缺少相关基础设置，需要把弹层当作一个页面从零开始投入，具体包括工程初始化、视觉稿还原（视图层开发）、业务逻辑实现、Mock 数据、接口联调、冒烟测试等。这一系列「组合拳」下来至少要花费 1.5 至 2 天的开发时间，在交付流程中位于「关键路径」之上，若出一点问题就有可能影响整个需求的交付。因此我们需要寻找一个更加敏捷的方案。
众所周知，集团内有一个神器「斑马搭建」，它是一个页面搭建平台。提供了文本、图片、热区链接等基础组件，可使用户通过「搭积木」的方式快速搭建出大促、活动页面。在淘宝直播，斑马搭建也在素材中心的素材生产环节起了重要作用。
然而在弹窗场景下，若使用斑马搭建会带来如下问题：
上述 1、2 点比较好理解，斑马搭建不能像 Sketch、Photoshop 等制图工具一样实现复杂的效果，因此需要设计师通过其他制图软件设计好后，切图导入到斑马上来，这无疑增加了设计成本。
为了让用户及时做出响应，我们需要在弹窗上实现一些复杂的业务逻辑。如点击按钮调用 Mtop 接口并通过 toast 反馈给用户结果等。这种形式的业务逻辑无法通过斑马实现，也就是问题 3 所在。
斑马搭建给我们实现弹窗提效带来了很好的启发，但我们发现 imgcook 能更好地服务于直播弹层场景。据官方宣传材料，imgcook 采用计算机视觉、深度学习等智能化技术，能够智能解析视觉稿并生成 H5 页面，赋能前端开发。
这听起来很诱人，但通过调研我们也找到了 imgcook 的痛点问题：
不过弹窗业务也具有其特殊性，它们巧妙地抵消了上述痛点问题 1 和 2：
因此我们可以借助 imgcook 的优势，即视觉稿还原能力，然后实现出直播弹窗场景下的 NoCode 弹窗生成方案。
图3 imgcook 的 logo
如何实现弹窗自由
借助成熟的前端智能化技术，打造淘宝直播触达弹窗领域下的无代码解决方案，解放前端开发，赋能业务上线，提高业务触达效率。
我们知道完整的前端开发流程可以简化为视图层和逻辑层的编码，在弹窗场景下也是如此。通过上述方案探索，我们了解到 imgcook 可以很好地 cover 掉视图层的工作量，但我们仍需要实现一套立足于直播弹窗业务的搭建平台来处理生产环节中逻辑层部分，即直播弹窗生成器。
图4 简化版前端开发流程
下图是动态弹窗生产链路：
图5 新方案流程图
首先由设计师将弹窗的视觉稿上传到 imgcook 工作台，对于视觉还原不准确的地方可以通过工作台的图形界面进一步调整。
在 imgcook 内部，会通过一份数据来做结构化的描述。这份数据从设计工具（如 Sketch、PhotoShop）导出开始，流经一系列的数据处理环节，最终生成一份模块从而产出代码。这份结构化数据信息描述叫做 schema。
图6 智能解析视觉稿
解析完视觉稿后，需要移步直播弹窗生成器（目前位于小二工作台）。生成器会首先要求配置弹窗的基本信息，比如弹窗名称、尺寸、SPM 等。
图7 配置弹窗信息
由于弹窗具有无需迭代的特殊性，我们并不需要 imgcook 帮助我们生成最终的代码，只需要提供结构化描述信息即可。在生成器的第二步，我们需要导入 imgcook 生成的 schema。在右侧的预览画面中可以看到渲染结果，当然这只是还原了视觉稿中的静态效果。
图8 导入 Schema
为了实现弹窗的动态化，我们需要通过接口下发的图片或文案来替代视觉稿中的相应元素，同时增加一些简单的可交互逻辑。我们归纳出弹窗中的动态逻辑如下：
我们对上述可枚举的业务逻辑进行封装，并实现了基于图形界面的字段映射和事件绑定能力。如下图所示，这个工具包含两个模块：静态预览和动态绑定模块。我们可以在预览模块选中一个元素，选择需要的动态化类型，那么便可在右侧完成字段或事件的绑定操作，让静态弹窗「动」起来。
图9 弹窗动态化
自从今年 5 月初动态弹窗上线以来，我们已经基于此快速上线了多个业务弹窗。特别的，我们在今年 618 大促期间上线了 618 主播任务的弹窗，目的是吸引用户参加大促，赋能主播成长和等级跃迁。
但在复盘业务数据时，我们可以明显看到任务的领取率不高。通过投放效果分析，发现根本原因是弹窗的点击率低，很多用户在弹窗出现后便直接关闭了，原因可能是不小心碰到，或思维惯性造成的。
为了解决弹窗停留时长短，用户点击率低的问题，我们打算从视觉效果上入手，通过华丽的弹窗打开动画吸引用户眼球，以提高用户点击率和业务触达效率。动效的具体实现方式为 lottie 和 CSS 动画，lottie 作为弹窗背景动画，CSS 实现弹窗前景动画。动画效果均可拓展。
图10 动画效果配置
通过智能解析视觉稿，我们获取到了描述页面视图层的结构化数据（Imgcook Schema） ；在弹窗生成器上，我们生产出了包含弹窗尺寸、SPM、动画在内的配置信息（Configuration Data）和让静态元素动态化的映射数据（Mapping Data）。
将上述三者合并便得到了最终产物：Popup DSL，这也是我们最终交付和发布的文件。
，时长01:41
目前在淘宝直播供给侧，主播工作台、主播 APP、PC 中控台和小程序都有弹窗的触达需求。为了统一四端的弹窗表现，我们实现了在消费侧渲染动态弹窗的 H5 容器。
上文提到生产侧的最终交付物是一份 Popup DSL 描述文件，那么弹窗容器的主要工作便是解析这份文件并渲染出来。
无论是在移动端还是 PC 端，我们会在应用启动时查询弹窗信息。如果有，接口会返回 Popup DSL 文件以及相应的业务数据结构。
在移动端，我们通过 WebView 装载弹窗容器，并通过 JS Bridge 讲 DSL 和业务数据传递进去；在 Web 端我们通过 iframe 装载弹窗容器，通过 Post Message 通信。
弹窗容器在收到底层传来的 DSL 描述文件后，会首先解析出其中的视图层描述信息，即 imgcook schema。然后通过这份描述信息生成 HTML 结构和 CSS 层叠样式表，将相应的 DOM 节点装载在前景层，此时弹窗的静态部分渲染完成。
当静态部分渲染完成后，容器会解析出映射数据（Mapping Data），依次为前景层上的元素绑定事件。同时会绑定背景层的点击关闭事件。
如果弹窗有配置动画，则会将 CSS Animation 作用于前景，在背景播放 lottie 动画。
图11 弹窗的层级信息
实践案例
从今年三月到现在，淘宝直播供给侧已通过动态弹窗方案，零代码生产上线了十余个弹窗案例。虽然每生成一个弹窗只能减少有限的开发成本，但随着需求数量的不断增长，从总体看上是能产生很大的收益的。同时，在上线动画效果后，弹窗的点击率从提升到了 45%，触达效率进一步提升。
下图列举了一些动态弹窗案例：
图12 动态弹窗案例
心得体会
团队介绍
我们是大淘宝内容前端团队，核心负责淘宝的内容业务（直播、图文、短视频）和内容中台建设，主要业务包括淘宝直播、逛逛、亲拍、有好货，并且也通过平台化的方式支持着阿里系的其他内容业务，包括饿了么、盒马、优酷、闲鱼、飞猪等 24 个 BU，160 个业务场景。内容化是一个较新的战场，整个前端团队在多媒体、机器学习、播放器、视频剪辑、LowCode 等技术领域都有比较多挖掘和技术应用。
作者|檀鹏程（弈坤）
来源:微信公众号:大淘宝技术
出处:https://mp.weixin.qq.com/s/WPJjsHa5NZF0jyZAXQtxow
文主要讲解那些“看不见”的 HTML 标签。
提到 HTML 标签，前端工程师会非常熟悉，因为在开发页面时经常使用。但往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文。
其实还有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部 head 标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们就可以达到事半功倍的效果。
这一课时就和你来聊聊那些“看不见”的 HTML 标签及其使用场景。
交互实现
我经常会向我的团队成员提倡一个编码原则：Less code, less bug。
在实现一个功能的时候，我们编写的代码越多，不仅开发成本越高，而且代码的健壮性也越差。
它和 KISS（Keep it simple, stupid）原则及奥卡姆剃刀原则（如无必要，勿增实体）有相同的意思，都是提倡编码简约。
下面介绍几个标签，来看看如何帮助我们更简单地实现一些页面交互效果。
meta 标签：自动刷新/跳转
假设要实现一个类似 PPT 自动播放的效果，你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。但其实有更加简洁的实现方法，比如通过 meta 标签来实现：
<meta http-equiv="Refresh" content="5; URL=page2.html">上面的代码会在 5s 之后自动跳转到同域下的 page2.html 页面。我们要实现 PPT 自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。
另一种场景，比如每隔一分钟就需要刷新页面的大屏幕监控，也可以通过 meta 标签来实现，只需去掉后面的 URL 即可：
<meta http-equiv="Refresh" content="60">细心的你可能会好奇，既然这样做又方便又快捷，为什么这种用法比较少见呢？
一方面是因为不少前端工程师对 meta 标签用法缺乏深入了解，另一方面也是因为在使用它的时候，刷新和跳转操作是不可取消的，所以对刷新时间间隔或者需要手动取消的，还是推荐使用 JavaScript 定时器来实现。但是，如果你只是想实现页面的定时刷新或跳转（比如某些页面缺乏访问权限，在 x 秒后跳回首页这样的场景）建议你可以实践下 meta 标签的用法。
title 标签与 Hack 手段：消息提醒
作为前端工程师的你对 B/S 架构肯定不陌生，它有很多的优点，比如版本更新方便、跨平台、跨终端，但在处理某些场景，比如即时通信场景时，就会变得比较麻烦。
因为前后端通信深度依赖 HTTP 协议，而 HTTP 协议采用“请求-响应”模式，这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息（HTML5 下可使用 WebSocket 协议）。
消息提醒功能实现则比较困难，HTML5 标准发布之前，浏览器没有开放图标闪烁、弹出系统消息之类的接口，只能借助一些 Hack 的手段，比如修改 title 标签来达到类似的效果（HTML5 下可使用 Web Notifications API 弹出系统消息）。
下面这段代码中，通过定时修改 title 标签内容，模拟了类似消息提醒的闪烁效果：
let msgNum = 1 // 消息条数
let cnt = 0 // 计数器
const inerval = setInterval(() => {
cnt = (cnt + 1) % 2
if(msgNum===0) {
// 通过DOM修改title
document.title += `聊天页面`
clearInterval(interval)
return
}
const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
document.title = `${prefix}聊天页面`
}, 1000)通过模拟消息闪烁，可以让用户在浏览其他页面的时候，及时得知服务端返回的消息。
定时修改 title 标签内容，除了用来实现闪烁效果之外，还可以制作其他动画效果，比如文字滚动，但需要注意浏览器会对 title 标签文本进行去空格操作。
动态修改 title 标签的用途不仅在于消息提醒，你还可以将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。
性能优化
性能优化是前端开发中避不开的问题，性能问题无外乎两方面原因：渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案，但其实只要通过合理地使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。
script 标签：调整加载顺序提升渲染速度
由于浏览器的底层运行机制，渲染引擎在解析 HTML 时，若遇到 script 标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至 JavaScript 引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。
在这一过程中可以看到，页面渲染过程中包含了请求文件以及执行文件的时间，但页面的首次渲染可能并不依赖这些文件，这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。
为了减少这些时间损耗，可以借助 script 标签的 3 个属性来实现。
async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
defer 属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
HTML5 标准 type 属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。
具体效果可以参看下图：
其中，绿色的线表示执行解析 HTML ，蓝色的线表示请求文件，红色的线表示执行文件。
从图中可以得知，采用 3 种属性都能减少请求文件引起的阻塞时间，只有 defer 属性以及 type="module" 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗的时间，让用户更快地看见页面（即使这些页面内容可能并没有完全地显示）。
除此之外还应当注意，当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染。所以这也就是为什么构建工具会把编译好的引用 JavaScript 代码的 script 标签放入到 body 标签底部，因为当渲染引擎执行到 body 底部时会先将已解析的内容渲染出来，然后再去请求相应的 JavaScript 文件。如果是内联脚本（即不通过 src 属性引用外部脚本文件直接在 HTML 编写 JavaScript 代码的形式），渲染引擎则不会渲染。
link 标签：通过预处理提升渲染速度
在我们对大型单页应用进行性能优化时，也许会用到按需要加载的方式，来加载对应的模块，但如果能合理利用 link 标签的 rel 属性值来进行预加载，就能进一步提升渲染速度。
dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程，从而减少时间损耗。下图是淘宝网设置的 DNS 预解析。
preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。
prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。
这几个属性值恰好反映了浏览器获取资源文件的过程，在这里我绘制了一个流程简图，方便你记忆。
浏览器获取资源文件的流程
搜索优化
你所写的前端代码，除了要让浏览器更好执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用 meta 标签和 link 标签，恰好能让搜索引擎更好地理解和收录我们的页面。
meta 标签：提取关键信息
通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。
例如，在百度中搜索“拉勾”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。
为了让搜索引擎更好地识别页面，除了描述信息之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。
当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息，虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样，这就是因为拉勾网页面中设置了这个关键字。
对应代码如下：
<meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">在实际工作中，推荐使用一些关键字工具来挑选，比如 Google Trends、站长工具。下图是我使用站长工具搜索“招聘”关键字得到的结果，可以看到得到了相当关键的一些信息，比如全网搜索指数、关键词特点。
link 标签：减少重复
有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：
https://xx.com/a.html
https://xx.com/detail?id="abcd"
那么在这些页面中可以这样设置：<link href="https://xx.com/a.html" rel="canonical">这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。
当然，要合并网址还有其他的方式，比如使用站点地图，或者在 HTTP 请求响应头部添加 rel="canonical"。这里，我就不展开介绍了，道理都是相通的，你平时可以多探索和实践。
延伸内容：OGP（开放图表协议）
好了，前面我们说了 HTML5 标准的一些标签和属性，下面再延伸说一说基于 meta 标签扩展属性值实现的第三方协议——OGP（Open Graph Protocal，开放图表协议 ）。
OGP 是 Facebook 公司在 2010 年提出的，目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些 meta 标签及属性，支持 OGP 协议的社交网站就会在解析页面时生成丰富的预览信息，比如站点名称、网页作者、预览图片。具体预览效果会因各个网站而有所变化。
下面是微信文章支持 OGP 协议的代码，可以看到通过 meta 标签属性值声明了：网址、预览图片、描述信息、站点名称、网页类型和作者信息。
现在百度已经宣布支持，微信文章的不少页面上也添加了相关标签属性，有兴趣的话你可以查看官方网站：https://ogp.me/
总结
本文，从交互实现、性能优化、搜索优化场景出发，分别讲解了 meta 标签、title 标签、link 标签，以及 script 标签在这些场景中的重要作用，希望这些内容你都能有效地应用到工作场景中，不再只是了解，而是能够熟练运用。
最后留下一道思考题：说一说你还知道哪些“看不见”的标签及用法？
态度
*请认真填写需求信息，我们会在24小时内与您取得联系。
