第01讲：你真的熟悉 HTML 标签吗？

Apricity
197 阅读6分钟

本文已参与「新人创作礼」活动．一起开启掘金创作之路。

第01讲：你真的熟悉 HTML 标签吗？

HTML 标签

HTML标签，前端工程师在开发页面时经常使用 但往往关注更多的是页面渲染效果及交互逻辑，比如表单、菜单栏、列表、图文还有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部head标签内在某些场景下，比如交互实现、性能优化、搜索优化

交互实现

提倡一个编码原则:Less code, less bug
它和KISS (Keep it simple, stupid)原则及奥卡姆剃刀原则(如无必要,勿增实体)有相同的意思，都是提倡编码简约

meta 标签：自动刷新/跳转

<mata http-equiv="Refresh" content="5;URL=page2.html">

要实现PPT自动播放的功能
只需要在每个页面的 meta标签内设置好下一个页面的地址即可

<meta http-equiv="Refresh" content="60">

比如每隔一分钟就需要刷新页面的大屏幕监控
也可以通过meta标签来实现,只需去掉后面的URL即可

为什么这种用法比较少见?

  • 不少前端工程师对meta标签用法缺乏深入了解
  • 在使用它的时候,刷新和跳转操作是不可取消的
  • 对刷新时间间隔或者需要手动取消的，推荐使用JavaScript定时器来实现如果只是想实现页面的定时刷新或跳转(比如某些页面缺乏访问权限，在x秒后跳回首页这样的场景) 建议实践下meta标签的用法

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

B/S架构的优点:版本更新方便、跨平台、跨终端
但在处理某些场景，比如即时通信场景时,会变得比较麻烦
因为前后端通信深度依赖HTTP协议，而HTTP协议采用“请求-响应”模式
一种低效的解决方案是客户端通过轮询机制获取最新消息 (HTML5下可使用WebSocket协议)
消息提醒功能实现比较困难
HTML5标准发布之前，浏览器没有开放图标闪烁、弹出系统消息之类的接口
只能借助一些Hack的手段，比如修改title标签来达到类似的效果
(HTML5下可使用Web Notifications API弹出系统消息)

let msgNum= 1//消息条数let cnt=0//计数器
const inerval = setlnterval(()=>{cnt = (cnt + 1)% 2
if(msgNum===O){//通过DOM修改title
document.title +=`聊天页面`clearlnterval(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在请求完成后立即执行

image.png 绿色的线表示执行解析HTML，蓝色的线表示请求文件，红色的线表示执行文件

当渲染引擎解析HTML遇到script标签引入文件时，会立即进行一次渲染
构建工具会把编译好的引用JavaScript代码的script标签放入到body标签底部
当渲染引擎执行到body底部时会先将已解析的内容渲染出来，然后再去请求相应的JavaScript文件
如果是内联脚本（即不通过src属性引用外部脚本文件直接在HTML编写JavaScript代码的形式)
渲染引擎则不会渲染

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

  • dns-prefetch 当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名预先进行DNS解析并缓存

image.png

  • preconnect 让浏览器在一个HTTP请求正式发给服务器前预先执行一些操作
    包括DNS解析、TLS协商、TCP握手，通过消除往返延迟来为用户节省时间
  • prefetch/preload
    两个值都是让浏览器预先下载并缓存某个资源,但不同的是
    prefetch可能会在浏览器忙时被忽略，而preload则是一定会被预先下载
    -prerender 浏览器不仅会加载资源,还会解析执行页面，进行预渲染

image.png

搜索优化

合理使用meta标签和link标签 image.png

meta标签： 提取关键信息

image.png 这些描述信息是通过meta标签专门为搜索引擎设置的 目的是方便用户预览搜索到的结果

image.png

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

在实际工作中，推荐使用一些关键字工具来挑选，比如Google Trends、站长工具

link标签: 减少重复

对于同一个页面会有多个网址，又或者存在某些重定向页面，比如: xx.com/a.html xx.com/detail?id="…"

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

合并网址的方式: 比如使用站点地图，或者在HTTP请求响应头部添加 rel="canonical"

延伸内容:OGP(Open Graph Protocal，开放图表协议)

OGP是Facebook公司在2010年提出的
目的是通过增加文档信息来提升社交网页在被分享时的预览效果
只需要在一些分享页面中添加一些meta标签及属性
支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息
比如站点名称、网页作者、预览图片

image.png 官方网站: ogp.me/

总结

从交互实现、性能优化、搜索优化场景出发分别讲解了meta标签、title标签、link标签以及script标签在这些场景中的重要作用

avatar
文章
阅读
粉丝