前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗?
提到HTML标签,我们会非常熟悉,开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑,也就是对用户可见可操作的部分,比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签,这些标签大多数用在页面头部head标签内,虽然对用户不可见,但如果在某些场景下,比如交互实现、性能优化、搜索优化,合理利用它们可以让我们在开发中达到事半功倍的效果。
1、交互实现
在实现一个功能的时候,我们编写的代码越多,不仅开发成本越高,而且代码的健壮性也越差。因此我们在开发中提倡编码简约原则:Less code, less bug
1.1 meta标签:自动刷新/跳转
meta标签妙用场景一:假如每隔一分钟就需要刷新页面,这个时候就可以用到meta标签:
<meta http-equiv="Refresh" content="60">
meta标签妙用场景二:假如想让某个页面在对用户展示一段时间后,然后跳转到其他页面去,也可用到meta标签:
<meta http-equiv="Refresh" content="5; URL=page2.html">
上面这行代码的意思是当前页面展示5s之后,跳转到page2.html页面去。
1.2 title标签:消息提醒
B/S架构有很多优点,比如版本更新方便、跨平台、跨终端,但在处理某些场景时,比如即时通信时,会变得有点麻烦。
因为前后端通信深度依赖HTTP协议,而HTTP协议采用“请求-响应”模式,这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息(HTML5下可使用WebSocket协议)。
另外在HTML5标准发布之前,浏览器没有开放图标闪烁、弹出系统消息之类的接口,因此消息提醒功能实现比较困难。但是我们可以通过修改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标签文本进行去空格操作;还可以将一些关键信息显示到标签上(比如下载时的进度、当前操作步骤),从而提升用户体验。
2、性能优化
性能优化是前端开发中避不开的问题,性能问题无外乎两方面原因:渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案,但其实只要通过合理地使用标签,就可以在一定程度上提升渲染速度,以及减少请求时间。
2.1 script标签:调整加载顺序提升渲染速度
由于浏览器的底层运行机制,一般情况下,渲染引擎在解析HTML时从上往下执行,若遇到script标签引用文件,则会暂停解析过程,同时通知网络线程加载引用文件。
文件加载完成后,再切换至JavaScript引擎来执行对应代码,代码执行完成之后,再切换至渲染引擎继续渲染页面。
即默认情况下,加载HTML的过程主要有四个步骤:
- 从上往下解析HTML;
- 碰到script标签引用文件,暂停解析,同时通知网络线程加载引用文件;
- 文件加载完成,切换至JavaScript引擎来执行对应代码;
- 代码执行完成后,再切换至渲染页面,继续渲染HTML。
从这一过程可以看出,页面渲染过程包含了请求文件以及执行文件的时间,但页面的首次渲染可能并不依赖这些文件。这些请求和执行文件的动作反而延长了用户看到页面的时间,从而降低了用户体验。
为了减少这些时间损耗,可以借助script标签的三个属性来实现:
- async属性:立即请求文件,但不阻塞渲染引擎,而是文件加载完成后,再阻塞渲染引擎并立即执行文件内容。
- defer属性:立即请求文件,但不阻塞渲染引擎,等到解析完HTML之后再执行文件内容。
- HTML5标准type属性,对应值为“module”:让浏览器按照ECMA Script6标准将文件当作模块进行解析,默认阻塞效果同defer,也可以配合async在请求完成后立即执行。
通过对比,我们看出,设置defer和type="module"最推荐,都是在HTML渲染完成后才执行script引用的文件代码。
效果图比较见下面:
另外注意,当渲染引擎解析HTML遇到script标签引入文件时,会立即进行一次渲染。
所以这也就是为什么构建工具会把编译好的引用JavaScript代码的script标签放入到body标签底部。因为当渲染引擎执行到body底部时,会先将已解析的内容渲染出来,然后再去请求相应的JavaScript文件。
如果是内联脚本(即不通过src属性引用外部脚本文件直接在HTML中编写JavaScript代码的形式),渲染引擎则不会渲染,先执行脚本代码再渲染页面。
我们可以来做个试验验证下,第一个测试:在HTML页面中间引用外部js文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引用js脚本</title></head>
<body>
<br/><br/><br/><br/><br/>
<h3>古人学问无遗力,少壮工夫老始成;</h3>
<script type="text/javascript" src="./test.js"></script>
<h3>纸上得来终觉浅,绝知此事要躬行。</h3>
</body>
</html>
引用外部js脚本test.js:alert('男儿何不带吴钩,收取关山五十州');
效果图:
第二个测试:在HTML页面中间内联js脚本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联js脚本</title></head>
<body>
<br/><br/><br/><br/><br/>
<h3>古人学问无遗力,少壮工夫老始成;</h3>
<script type="text/javascript">
alert('男儿何不带吴钩,收取关山五十州');
</script>
<h3>纸上得来终觉浅,绝知此事要躬行。</h3>
</body>
</html>
效果图:
2.2 link标签:通过预处理提升渲染速度
在大型单页应用进行性能优化时,也许会用到按需赖加载的方式来加载对应的模块。但是如果能合理利用link标签的rel属性值来进行预加载,就能进一步提升渲染速度。
- dns-prefetch:当link标签的rel属性值为“dns-prefetch”时,浏览器会对某个域名预先进行dsn解析并缓存。这样,当浏览器在请求同域名资源的时候,能省去从域名查询IP的过程,从而减少时间损耗。下图是淘宝网设置的dns预解析。
- preconnect:让浏览器在一个HTTP请求正式发给服务器前预先执行一些操作,这包括dns解析、TLS协商、TCP握手,通过消除往返延迟来为用户节省时间。
- prefetch/preload:两个值都是让浏览器预先下载并缓存某个资源,但不同的是,prefetch可能会在浏览器忙时被忽略,而preload则是一定会被预先下载。
- prerender:浏览器不仅会加载资源,还会解析执行页面,进行预渲染。
这几个属性值恰好反映了浏览器获取文件的过程,它们获取文件的流程:
- 设置dns-prefetch, 然后判断是否有对dns进行预解析。没有则进行dns解析,有则执行下一步preconnect;
- 执行preconnect, 对ddns、TLS、TCP进行预连接,然后判断是否已经TCP连接。没有则进行TCP连接,有则执行下一步prefetch/preload;
- 执行prefetch/preload,加载资源文件。然后判断资源文件是否已经预加载。没有则进行http进行资源请求下载,有则进行下一步prerender;
- 执行prerender, 预渲染页面。然后判断预渲染是否成功。没有预渲染成功则进行渲染,预渲染成功则呈现给用户看。
流程图如下:
3、搜索优化
我们写的前端代码,除了要让浏览器更好的执行,有时候也要考虑更方便其他程序(如搜索引擎)理解。合理地使用meta标签和link标签,恰好能让搜索引擎更好的理解和收录我们的页面。
3.1 meta标签:提取关键信息
通过meta标签可以设置页面的描述信息,从而让搜索引擎更好的展示搜索结果。
比如在百度中搜索“拉勾”,就会发现网站的描述,这些描述信息就是通过meta标签专门为搜索引擎设置的,目的是方便用户预览搜索到的结果。
为了让搜索引擎更好的识别页面,除了描述信息之外还可以使用关键字,这样即使页面其他地方没有包含搜索内容,也可以被搜索到(当然搜索引擎有自己的权重和算法,如果滥用关键字是会被降权的,比如Google引擎会对堆砌大量相同关键词的网页进行惩罚,降低它被搜索的权重)。
当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息,虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样,实际上因为拉勾网页面中设置了这个关键字。
对应代码如下:
<meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">
3.2 link标签:减少重复
有时候为了用户访问方便或者出于历史原因,对于同一个页面会有多个网址,又或者在某些重定向页面,比如:https://xx.com/a.html、 https://xx.com/detail?id=abcd,那么在这些页面中可以设置:<link href="https://xx.com/a.html" rel="canonical">
这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是,它还有个限制条件,那就是指向的网站不允许跨域。
当然,要合并网址还有其他的方式,比如使用站点地图,或者在http请求响应头部添加rel="canonical"。
3.3 延伸内容:OGP(开放图表协议)
前面说的是HTML5标准的一些标签和属性,下面再延伸说一说基于meta标签扩展属性值实现的第三方协议---OGP(open graph protocal, 开放图表协议)。
OGP是Facebook公司在2010年提出的,目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些meta标签及属性,支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息,比如站点名称、网页作者、预览图片。具体预览效果会因各个网站而有所变化。
下面是微信文章支持OGP协议的代码,可以看到通过meta标签属性值声明了:标题、网址、预览图片、描述信息、站点名称、网页类型和作者信息。
总结
本篇从交互实现、性能优化、搜索优化场景触发,分别讲解了meta标签、title标签、link标签,一级script标签在这些场景中的重要作用,希望这些内容你都能应用到工作场景中,不再只是了解,而是能够熟练运用。
最后在思考一下:你还知道哪些“看不见”的标签及用法?
前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗?的更多相关文章
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- Spring笔记01(基础知识)
1.基础知识 01.Spring:轻量级Java EE开源框架,它是由Rod Johnson为了解决企业应用程序开发的复杂性而创建. 02.目标:实现一个全方位的整合框架,实现“一站式”的企业应用开发 ...
- [terry笔记]data guard基础知识
如下介绍了data guard的基础知识,整理自网络: Data Gurad 通过冗余数据来提供数据保护,Data Gurad 通过日志同步机制保证冗余数据和主数据之前的同步,这种同步可以是实时,延时 ...
- FreeRTOS学习笔记——FreeRTOS 任务基础知识
RTOS 系统的核心就是任务管理,FreeRTOS 也不例外,而且大多数学习RTOS 系统的工程师或者学生主要就是为了使用RTOS 的多任务处理功能,初步上手RTOS 系统首先必须掌握的也是任务的创建 ...
- iOS 阶段学习第11天笔记(OC基础知识)
iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import 用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- ios开发学习笔记001-C语言基础知识
先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...
- Java 8实战之读书笔记二:基础知识
好记性不如烂笔头,整理一些个人觉得比较重要的东西. 一.基础知识 第1章 为什么要关心Java 8 Java 8提供了一个新的API(称为"流", Stream),它支持许多处理数 ...
- MySQL必知必会笔记——查询的基础知识
查询基础知识 第七章 数据过滤 组合where子句 MySQL允许给出多个WHERE子句.这些子 句可以两种方式使用:以AND子句的方式或OR子句的方式使用. AND操作符 可使用AND操作符给WHE ...
随机推荐
- 题解 CF1348D 【Phoenix and Science】
题目大意,每天细菌会在早上选择分裂,晚上生长. 观察题目,我们可以发现.不管我们怎么分裂细菌,这一天晚上的总质量都是前一天晚上的总质量加上今天的细菌数. 那么我们肯定希望细菌分裂的越多越好,这样我们减 ...
- ASP.NET防止自己网站的资源被盗(通过IHttpHandler 带样例说明)
我这里用的图片被盗举例子 一个正常的网页 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind ...
- Java实现 LeetCode 690 员工的重要性(简易递归)
690. 员工的重要性 给定一个保存员工信息的数据结构,它包含了员工唯一的id,重要度 和 直系下属的id. 比如,员工1是员工2的领导,员工2是员工3的领导.他们相应的重要度为15, 10, 5.那 ...
- Java实现第九届蓝桥杯哪天返回
哪天返回 题目描述 小明被不明势力劫持.后被扔到x星站再无问津.小明得知每天都有飞船飞往地球,但需要108元的船票,而他却身无分文. 他决定在x星战打工.好心的老板答应包食宿,第1天给他1元钱. 并且 ...
- 「从零单排canal 01」 canal 10分钟入门(基于1.1.4版本)
1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...
- 制作zipkin docker镜像
这里使用的zipkin知识基于内存的版本,没有接入外部存储 https://zipkin.io/ https://github.com/openzipkin/zipkin https://github ...
- js防抖函数
一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...
- TD课程通的最终版评价
相较之前的软件,功能得到了完善,同时也修复了BUG,还增加了辅助工具,可以查询一周的占用情况,省空间,很方便. 添加课程表的功能也得到了完善,同时增加了链接到教务系统的功能,方便查询相关的课程.问题是 ...
- 「从零单排canal 02」canal集群版 + admin控制台 最新搭建姿势(基于1.1.4版本)
canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Service)的开 ...
- App接口设计之token的php实现
为了保证移动端和服务端数据传输相对安全,需要对接口进行加密传输. 一.ttoken的设计目的: 因为APP端没有和PC端一样的session机制,所以无法判断用户是否登陆,以及无法保持用户状态,所以 ...