HTML面试题

1. 如何理解HTML 5结构语义化？

简单来说，就是==用正确的标签去做正确的事情==

段落用p标签，标题就用h标签，边栏就用aside标签，主要内容就用main标签

对开发者：

• 便于团队的开发和维护
• 在没有加载CSS的情况下也可以呈现一个比较好的内容结构，易于阅读

对浏览器来说：

• 有利于SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重
• 方便其他设备的解析（盲人阅读器），有益于无障碍阅读

2. HTML 5的新特性

媒介播放： video和audio元素

本地离线存储：localStorage

sessionStorage的数据在浏览器关闭后自动删除

更多语义化的内容元素：article，footer，header，nav，section

新技术： websocket，geolocation

3. Cookie, sessionStorage和 localStorage 的区别

cookie是网站为了标识用户身份而存储在用户本地浏览器的数据

cookie会在http请求中携带发送，在浏览器和服务器中来回传递

而sessionStorage和localStorage不会自动把数据发送给服务器，仅存在本地

存储大小：

​ cookie大小不超过4K

​ session和local也有存储大，但比cookie大很多，有5M甚至更大

有效时间：

​ localStorage存储持久化

​ sessionStorage数据在浏览器窗口关闭后就会自己删除

​ cookie有一段生效时间，在过期之前一直有效, 如一周或者一月

4. 浏览器的渲染机制一般分为几个步骤

1. 处理HTML构建DOM树
2. 处理CSS构建CSSOM树
3. 将DOM树和CSSOM树合并生成一个渲染树
4. 根据渲染树来布局，计算每个节点的位置
5. 通过GPU绘制，合成图层，显示在页面上

在构建CSSOM树的时候会阻塞渲染，直至构建完成，是一个比较消耗性能的过程，所以要尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行速度越慢

当HTML解析到script标签时，会停止构建DOM，完成后再重新开始

所以如果你想在首屏渲染的越快，就应该减少首屏JS的文件加载

5. 什么是重绘和回流

重绘是指 ==界面发生外观改变而不会影响布局==

回流是指 ==布局和几何属性发生改变== (比如浏览器窗口尺寸变化)

回流一定会发生重绘，重绘不一定会发生回流

==减少重绘和回流的方法==

1. 批量修改DOM，减少修改DOM的频率
2. 对于复杂的动画效果，使用绝对定位让其脱离文档流
3. CSS硬件加速（GPU）transform，opacity，filters这些动画不会引起回流重绘

6. 简述data: 属性的使用

data-* 属性是 HTML5 中引入的一种自定义数据属性。它允许开发者在 HTML 元素上存储额外的信息，这些信息可以通过 JavaScript 访问和修改。

<div data-fruit='apple' onClick='submit'></div>
const submit = (event) => {
  const element = event.target;
  const dataset = element.dataset;
  dataset.apple = 'banana';
};