m-HTML

HTML5

谈谈你对 HTML5 的理解

语义化标签
 音视频处理
 增强型表单：表单元素和表单校验
 响应式布局

CSS 预编译语言

LESS
SASS

canvas/webGL

canvas 基础
 canvas 动画
webGL：3D 动画，暂时没兴趣，用不着

history API

history.back()
返回上一页，等价于history.go(-1),等同于点击浏览的返回按钮。
当浏览器历史栈处于最底端时( 当前页面处于第一页时 )调用此方法没有效果也不报错。
history.forward()
下一页，等价于history.go(1),等同于点击浏览的前进按钮。
当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。
history.go(0)
刷新页面。如果传入其他整数，就是跳转到相对于当前处于的浏览器历史栈的位置。
history.pushState(stateObj, title, url)
- stateObj：状态对象，用来存储自定义数据的元素，与 url 配合使用
- title：标题，字符串，用于页面的标题，目前浏览器不支持，设置为空字符串
- url：一般是简单的?page=2等相对路径，自动以当前 url 为基准。如果该参数的 URL 与当前页面的 URL 不同源会报错。
  history.pushState会生成一条历史记录，可以让浏览器无跳转的各种状态保存到浏览器历史记录中，通过历史记录加载站点的时候，可以直接加载到对应状态。
history.replaceState()
与history.pushState方法基本相同，区别是，history.replaceState不会生成新的历史记录，而是替换。
window.onpopstate
触发条件比较苛刻，只有点击浏览器的’前进’、‘后退’等导航按钮，或者由 JS 调用的history.back()等导航方法，切切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。
”同一网页文档“,JS 环境的 document 是同一个，而不是指基础 URL 相同。

requestAnimationFrame()

要求浏览器在下次重绘之前调用指定的回调函数更新动画，参数是回调函数，该回调函数会在浏览器下一次重绘之前执行。
返回值：请求 ID，整数。可以使用window.cancelAnimationFrame(id)取消回调函数。
异步编程- requestAnimationFrame

地理定位

function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}

Web Sockets

跨域-webSocket

Web Storage

localStorage
没有时间限制的数据存储
sessionStorage
针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

面试题

1.统计 HTML 标签中以 b 开头的标签数量

法一

const Nodes = document.getElementsByTagName('*');
  let result = [...Nodes].filter(ele => {
      let {
          tagName
      } = ele;
      const reg = /^B/;
      return reg.test(tagName)
  });

法二

const prefixBElements = []
const prefixB = (el) => {
    console.log(el.tagName.startsWith('B'));
    if (el.tagName.startsWith('B')) {
        prefixBElements.push(el)
    }
    for (const child of el.children) {
        prefixB(child)
    }

}
prefixB(document.documentElement)

const nodes = document.getElementsByTagName('*');
const map = new Map();
let tag = '';
let max = 0;
[...nodes].forEach(ele => {
    let {
        tagName
    } = ele;

    if (map.has(tagName)) {
        let count = map.get(tagName)
        map.set(tagName, count + 1)
    } else {
        map.set(tagName, 1)
    }
    if (map.get(tagName) > max) {
        tag = tagName;
        max = map.get(tagName)
    }
});