HTML5

HTML5有哪些更新

• 语义化标签：header, section, footer, nav, menu, article, aside
• 媒体标签：
  • audio音频
  • video视频（附：source标签，兼容不同浏览器的视频源）
• 表单：
  • 新的表单类型：email,url,number,search,range,color,time,date,datetime,week,month
  • 新的表单属性：autofocus, autocomplete, required, pattern, multiple
  • 新的表单事件：oninput, oninvalid
• 其他标签：progress进度条， meter度量器，canvas画布，svg矢量图形
• 一些HTML5 API：
  • Drag/drop API：
    • draggable属性：元素可拖放
    • drag事件：dragstart/drag/dragend, dragenter/dragover/dragleave/drop
  • Geolocation获取地理位置
  • Web存储(保存在浏览器端，同源，只能存储字符串类型的对象，5M或更大)
    • localStorage: 存储到本地，没有时间限制
    • sessionStorage: 存储session，当前窗口/标签页关闭之前
  • web worker后台js
  • webSocket
  • requestAnimationFrame
• DOM查询操作
  • document.querySelector()
  • document.querySelectorAll()

说一下 web worker

• javascript是单线程的，但是浏览器是多线程的
• Web worker是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 可以通过 postMessage 将结果回传到主线程
• 如何创建web worker:
  • ①检测是否支持

if (window.Worker) {
  // ...
}

• 创建web worker文件(ps: worker.js)

// 发送给主线程的数据
postMessage(data);

// 接收来自主线程的数据
onmessage = function(e) {
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
}

• 创建web worker对象(ps: main.js)

var myWorker = new Worker('worker.js');
// 接收来自worker的数据
myWorker.onmessage = function(e) {
  result.textContent = e.data;
}

// 发送给worker的数据
myWorker.postMessage([arg1, arg2, ...]);

Canvas和SVG的区别

	Canvas	Svg
概述	是个画布，通过js绘制的2D图形	是个矢量图，使用xml描述的2D图像
受分辨率影响	是	否
支持事件	否	是
应用于游戏	是	否
保存格式	Jpg,png等图片	svg格式
重绘	位置变换时	属性改变时

对requestAnimationframe的理解

浏览器在下次重绘之前调用指定的回调函数更新动画，与屏幕刷新频率同步，保证动画的流畅，避免丢帧。 好处：减少DOM操作，CUP节能，函数节流，保证流畅度

// callback参数：开始去执行回调函数的timestamp
// 返回请求 ID 
let reqId = window.requestAnimationFrame(callback);

// 取消动画
window.cancelAnimationFrame(myReq);

// demo
var start = Date.now();
var myReq;
function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
myReq = requestAnimationFrame(step);
return;
  }
  window.cancelAnimationFrame(myReq);
}
myReq = requestAnimationFrame(step);

Document.createDocumentFragment()的应用

• 创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。
• 在DOM树中，文档片段被其所有的子元素所代替。
• 因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流。因此，使用文档片段通常会带来更好的性能。

// demo
var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

对requestIdleCallback的理解

requestIdleCallback(callback)：回调函数将在浏览器空闲时期被调用，不会影响主事件，提高性能