html技巧

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弹出系统消息）。

let msgNum = 1;  //消息条数
let cnt = 0;   //计数器
const interval = 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标签文本进行去空格操作。

性能优化

性能优化的两方面原因：渲染速度慢，请求时间长，合理使用标签，可以在一定程度上提升渲染速度以及减少请求时间。

script标签：调整加载顺序提升渲染速度

渲染引擎在解析HTML时，若遇到script标签引用文件则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至JavaScript引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。

script标签的三个属性：

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