1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| 1. HTML5 结构语义化：
用正确的标签做正确的事情。p段落、h标题、aside边栏、main主要内容等...
对开发者：便于维护、较好的呈现内容结构和代码结构、易于阅读；
对浏览器：有利于SEO，搜索引擎爬虫依赖于标签、方便其他设备解析、提高可访问性
2. HTML5 新特性：
新增：主要是关于图像、位置、存储、多任务等功能的增加 - 媒体播放的 video/audio 元素、本地存储 localStorage 长期存储(浏览器关闭不消失) / sessionStorage 数据浏览器关闭删除、语义化更好的内容元素(article,footer,header,nav,section)、表单控件(calendar、date、time、email、url、search)、新的技术(webworker,websocket,geolocation)
移除：纯表现的元素(basefont, big, center, font, s, strike, tt, u)、可用性有负面影响的元素(frame, frameset, noframes)
3. cookies, sessionStorage, localStorage 区别：
cookies(最大4k): 标识用户身份，存储在用户本地终端(通常经过加密)，始终自动同源http请求中携带
sessionStorage(5M或更大): 数据在当前浏览器窗口关闭后自动删除
localStorage(5M或更大): 持久化存储数据，浏览器关闭不会丢失除非主动删除
4. 浏览器的渲染机制的步骤：
处理HTML并构建DOM树 → 处理CSS构建CSSOM树 → 将DOM与CSSOM合并为一个渲染树 → 布局并计算每个节点的位置 → 调用GPU绘制合成图层并显示在屏幕上
注意：CSSOM树会阻塞渲染，因此CSS选择器要尽量层级扁平，减少过度层叠；JS文件要按需加载，不在首页去全部加载
5. 重绘（Repaint）和回流（Reflow）
重绘：节点需要更改外观而不影响布局的，如改变color就是重绘
回流：布局或者几何属性改变就是回流
减少重绘和回流：
① 批量修改 DOM
② 复杂动画效果，使用绝对定位使其脱离文档流
③ CSS3硬件加速(GPU加速) transform/opacity/filters 这些动画不会引起回流重绘
6. data:属性的用法，有何优势？
data-* 的值的获取和设置，2种方法：
① getAttribute() 获取 data-属性值；setAttribute() 设置 data-属性值
②
|
