html那些你不知道的事

利用meta标签自动刷新和跳转

• 自动播放下一个页面

<meta http-equiv=“Refresh” content=“5”; url=page2.html”>

• 自动刷新

<meta http-equiv=“Refresh” content=“60”; >

meta属性设置关键字 搜索引擎

<meta content=“关键字”; name=“keywords”>

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

为了浏览器加载时间损耗，可以借助 script 标签的 3 个属性来实现。

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

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

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

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

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

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

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

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