进阶_html

html进阶

下面是被忽视的html标签的学习

交互实现

meta标签 : 自动刷新/跳转

• 跳转
  使用场景：类似ppt自动播放，除了可以用js的定时器进行实现还可以使用html中的meta标签。

// 作用是会在5秒之后自动跳转到同域下的page2.html页面。实现自动播放只需要在URL位置设置好下一个跳转的页面既可以。
<meta http-equiv="Refresh" content="5 ; URL=page2.html">

• 刷新
  使用场景：大屏幕监控数据，也可以通过meta来实现。只需要去掉URL。

// 作用是会在5秒之后自动跳转到同域下的page2.html页面。实现自动播放只需要在URL位置设置好下一个跳转的页面既可以。
<meta http-equiv="Refresh" content="60">

为什么使用效率较少原因：

1. 对meta标签缺乏深入了解。
2. 使用meta跳转和刷新的时候操作不可取消

title 标签与 Hack 手段：消息提醒

前后端通信依赖HTTP协议，而HTTP协议采用请求响应模式，造成了服务端之被动的发送数据。一种低效的解决方法是通过客户端轮训机制获取最新消息html5可以使用web Socket协议。

消息提醒功能实现很困难，html5标准发布之前，浏览器没有开发图标闪烁，弹出系统消息之类的接口，只能借助一些hack手段，修改title标签来达到类似效果，html5可以使用 web Notifications API弹出系统消息

使用场景：消息提醒的闪烁效果

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标签引用文件，则会暂停解析过程，通知网络线程加载文件，文件加载后会切换js引擎来执行对应的代码，代码执行完成后切换至渲染引擎继续渲染页面。

在这个过程中可以看到页面渲染过程中包含可请求文件以及执行文件的时间，但是页面的首次渲染可以能并不依赖这些文件，这些请求和执行文件的动作反而延长了渲染页面的时间，从而降低了用户使用体验。

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

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

执行效果如下 :

其中，绿色的线表示执行解析 HTML ，蓝色的线表示请求文件，红色的线表示执行文件。

采用的3中属性都能减少请求文件引起的阻塞时间，只有defer属性以及type=“module” 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗时间，让用户可以更快的看见页面，即使这些页面内容可能并没有都加载完。

除此之外还应当注意当渲染引擎解析html遇到script标签引入文件时，会立刻进行一次渲染，所以这就是为什么构建工具会把编译好的应用js代码的script标签放入到body底部，因为当渲染引擎执行到body底部时会先将已解析的内容渲染出来，然后再去请求相应的js文件，如果是内联脚本（即不通过src属性应用外部脚本文件直接在html编写js代码的形式 ）渲染引擎则不会渲染。

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 content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">

link标签：减少重复

为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，如下设置可以让搜索疫情避免话费时间抓取重复网页。注意是有限制条件的就是同域，指向网站不可跨域。
当然要合并网址还有其他方式 比如站点地图，或者在http请求响应头加rel=“canonical” ,这个属性作用主要是帮助搜索引擎解决网站内容存在多个版本，来制定规范的链接。解决内容重复的收录。

<link href="https://lagou.com/a.html" rel="canonical">

扩展 OGP(Open Graph Protocal)开放图表协议

基于meta标签扩展属性值实现的第三方协议。

OGP是faceBook公司在2010年提出的，目的是通过增加文档信息来提升社交网页在被分享时的预览效果。只需要在一些分享页面中添加一些meta标签以及属性，支持ogp协议的社交网站会在解析页面时生成丰富的预览信息，比如站点名称 网页作业 预览图片。具体预览效果会因各个网站而有所变化。

下面是微信文章支持ogp协议的代码，可以看到通过meta标签属性值声明了网址 预览图片 描述信息 站点名称 网页类型和作者信息。

现在百度已经宣布支持，微信文章的不少页面上也添加了相关标签属性，有兴趣的话你可以查看官方网站：https://ogp.me/。