HTML5新特性：
新增语义化标签：nav、header、footer、article、section、aside
音频、视频标签：audio、video
数据存储：localStorage、sessionStorage
canvas、geolocation、websocket
input标签新增属性：placeholder、autocomplete、autofocus、required
websocket：HTML5标准中的通信协议，不实行同源策略，只要服务器支持就行。
因为websocket请求头信息中有origin字段，表示请求源来自哪个域。服务器可以根据这个字段判断是否允许本次通信，白名单内可通过。
postMessage：HTML5标准中的API，接受两个参数，参数一：发送的数据，参数二：接受者的地址
可以实现
1.页面和新打开的窗口间数据传递
2.多窗口间数据传递
3.页面与嵌套的iframe间数据传递
4.以上三个场景之间的跨域传递
canvas相关：
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的宽度和高度。
cookie,session,localStorage区别
共同点：都是保存在浏览器端，同源限制
生命周期
存放数据大小
http请求
作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的
事件模型以及三种事件绑定方式
事件捕获阶获：捕获指的是事件从html根元素向下传播到实际点击的目标元素（指在dom文档树中向下层），依次检查经过的节点是否绑定了该事件监听函数，如果有且该事件是设定在捕获阶段执行，便执行。
冒泡阶段：捕获阶段结束后，反向再检查一次，冒泡回根元素
事件绑定方法：
①：行内事件，过时
<button onclick="alert('ok')">Press me</button>
②s中在元素节点上添加事件属性，缺点：重复定义后者会覆盖前者
③addEventListener（eventName，function，useCaptrue），常用，可取消
const btn = document.querySelector('button');
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.addEventListener('click', bgChange);
btn.removeEventListener('click', bgChange);
事件代理/事件委托以及优缺点
事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。
使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。
事件委托的优点：
1. 减少内存消耗，不必为大量元素绑定事件
2. 为动态添加的元素绑定事件
事件委托的缺点:
1. 部分事件如 focus、blur 等无冒泡机制，所以无法委托。
2. 事件委托有对子元素的查找过程，委托层级过深，可能会有性能问题
3. 频繁触发的事件如 mousemove、mouseout、mouseover等，不适合事件委托
js判断图片是否加载完毕的方式（从没遇到过考这个）
- load事件
> 所有浏览器都支持img的load事件。
- readystatechange事件
> readyState属性为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
- img 的 complete属性
> 轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
js 延迟加载的方式有哪些（五种）
> js 延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。
一般有以下几种方式：
- defer 属性
- async 属性
- 动态创建 DOM 方式
- 使用 setTimeout 延迟方法
- 让 JS 最后加载
defer 和 async 的区别
前者要等到整个页面正常渲染结束，才会执行，script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
图片懒加载：
懒加载是一种网页性能优化的方式。全部加载会影响用户体验，并且浪费用户流量。
实现方式：
HTML实现：给img标签加上loading="lazy"
js实现：主要是判断当前图片是否到了可视区范围内
拿到所有图片的dom（document.body.clientHeight获取可视区高度）
遍历每个图片判断当前图片是否到了可视区范围。使用element.getBoundingClientRect()得到元素相对浏览器的top值。
如果到了就设置图片的src属性
绑定window的scroll事件，对其进行事件监听
