提到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标签引用文件,则会暂停解析过程,同时通知网络线程加载引用文件。
从这一过程可以看出,页面渲染过程包含了请求文件以及执行文件的时间,但页面的首次渲染可能并不依赖这些文件。这些请求和执行文件的动作反而延长了用户看到页面的时间,从而降低了用户体验。 为了减少这些时间损耗,可以借助script标签的三个属性来实现:
通过对比,我们看出,设置defer和type="module"最推荐,都是在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: 第二个测试:在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属性值来进行预加载,就能进一步提升渲染速度。
这几个属性值恰好反映了浏览器获取文件的过程,它们获取文件的流程:
流程图如下: 3、搜索优化我们写的前端代码,除了要让浏览器更好的执行,有时候也要考虑更方便其他程序(如搜索引擎)理解。合理地使用meta标签和link标签,恰好能让搜索引擎更好的理解和收录我们的页面。 3.1 meta标签:提取关键信息通过meta标签可以设置页面的描述信息,从而让搜索引擎更好的展示搜索结果。 当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息,虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样,实际上因为拉勾网页面中设置了这个关键字。 <meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords"> 3.2 link标签:减少重复有时候为了用户访问方便或者出于历史原因,对于同一个页面会有多个网址,又或者在某些重定向页面,比如:https:///a.html、 https:///detail?id=abcd,那么在这些页面中可以设置: 3.3 延伸内容:OGP(开放图表协议)前面说的是HTML5标准的一些标签和属性,下面再延伸说一说基于meta标签扩展属性值实现的第三方协议---OGP(open graph protocal, 开放图表协议)。 OGP是Facebook公司在2010年提出的,目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些meta标签及属性,支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息,比如站点名称、网页作者、预览图片。具体预览效果会因各个网站而有所变化。 下面是微信文章支持OGP协议的代码,可以看到通过meta标签属性值声明了:标题、网址、预览图片、描述信息、站点名称、网页类型和作者信息。 总结本篇从交互实现、性能优化、搜索优化场景触发,分别讲解了meta标签、title标签、link标签,一级script标签在这些场景中的重要作用,希望这些内容你都能应用到工作场景中,不再只是了解,而是能够熟练运用。 |
|