Document.querySelector

为什么说dom操作很慢
https://segmentfault.com/a/1190000004114594

浏览器有很多线程，例如：
1、GUI 渲染线程
2、JS 引擎线程
3、定时器触发线程 (setTimeout)
4、浏览器事件线程 (onclick)
5、http 异步线程
6、EventLoop轮询处理线程
7、…

各线程各司其职

dom操作是跨线程操作的
js引擎不能操作页面，只能操作js
渲染引擎不能操作js，只能操作页面

属性同步

标准属性

对div1的标准属性修改，会被浏览器同步到页面中
比如id className title

data-*属性

同上

非标准属性

对非标准属性的修改，只会停留在JS线程中
不会同步到页面里

提示
如果有自定义属性，又想被同步到页面中，请使用data-x作为前缀

data-x 例子

  1.         <li class="${index === 0 ? 'selected' : ''}" data-index="0"><span>1111</span></li>

li的响应事件中可以获取
e.currentTarget.dataset.index 获取�值