head
meta标签:自动刷新/跳转
<meta http-equiv="Refresh" content="5;URL=page2.html">
要实现PPT自动播放的功能,只需要在每个页面的meta标签内设置好下一个页面的地址即可。
<meta http-equiv="Refresh" content="60">
每个一分钟就需要刷新页面的大屏幕监控,也可以通过meta标签来实现,只需去掉后面的URL即可。
但是在使用它的时候,刷新和跳转是不可取消的,对刷新时间间隔或需要手动取消的,推荐使用JavaScript定时器来实现。
如果只想实现页面的定时跳转或刷新,比如某些页面缺乏访问权限,在x秒后跳回首页这样的场景,建议使用meta标签。
title标签与hack手段:消息提醒
B/S架构的优点:版本更新方便,跨平台,跨终端。
但在处理某些场景,比如即时通信时,会变得比较麻烦,因为前后端通信深度依赖HTTP协议,而HTTP协议采用“请求-响应”模式,一种低效的解决方案是客户端通过轮询机制获取最新的消息。(HTML5下可使用WebSocket协议)。
消息提醒功能实现比较困难,HTML5标准发布之前,浏览器没有开放图标闪烁,弹出系统消息之类的接口,只能借助一些Hack的手段,比如修改title标签来达到类似的效果。(HTML5下可使用Web Notifications API弹出系统消息)。
1 | let msgNum = 1; //消息条数 |
定时修改title标签内容,可以制作其他动画效果,比如文字滚动,但需要注意浏览器会对title标签文本进行去空格操作。
性能优化
性能优化的两方面原因:渲染速度慢,请求时间长,合理使用标签,可以在一定程度上提升渲染速度以及减少请求时间。
script标签:调整加载顺序提升渲染速度
渲染引擎在解析HTML时,若遇到script标签引用文件则会暂停解析过程,同时通知网络线程加载文件,文件加载后会切换至JavaScript引擎来执行对应代码,代码执行完成之后切换至渲染引擎继续渲染页面。
script标签的三个属性:
- async属性——立即请求文件,但不阻塞渲染引擎,文件加载完毕后阻塞渲染引擎并立即执行文件内容。
- defer属性——立即请求文件,但不阻塞渲染引擎,等到解析完HTML之后再执行文件内容。
- HTML5标准type属性——对应值为“module”,让浏览器按照ECMA Script6标准将文件当作模块进行解析,默认阻塞效果同defer,也可以配合async在请求完成后立即执行。