面试题 - 前端 - HTML5

发表于 分类于 阅读次数：

HTML5 有哪些新特性？

  • 增强多媒体功能：video,audio 元素。
  • 新增本地存储：localStorage, SessionStorage。
  • 语义化标签：header,article,footer 等。**伴随提问：**如何理解 HTML5 结构语义化？
  • 新增表单控件：date, time, email 等。写法是 <input type="date" />
  • 新增位置，多任务等功能：GeoLocation，webWorker。

如何理解 HTML5 结构语义化？

HTML5 语义元素有 header,article,footer 等。

对于开发者：

  • 易于阅读。
  • 便于团队开发和维护。

对于浏览器：

  • 有利于 SEO 优化，方便搜索引擎的爬虫确定上下文和关键字的权重。
  • 方便其他特殊设备解析，例如盲人阅读器。

老浏览器如何支持新的 HTML5 标签？

又一个 JS 库：HTML5 Shiv 。 它的原理是使用 document.createElement。

如何区分 HTML5 文档和非 HTML5 文档？

在文档开头会有 <!DOCTYPE> 声明。

HTML4 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言），所以 HTML4 要在声明中指定 DTD，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。
HTML5 不是基于 SGML，所以只要声明 html 就行了：<!DOCTYPE html>。

请描述一下 Cookie， LocalStorage 或 SessionStorage 的区别？

类型 目的 存储大小 有效时间
Cookie 网页前后端访问是无状态的。为了让后端知道当前是谁在访问，浏览器就在 Cookie 中就存放用户信息，在同源的 HTTP 请求中携带。即 Cookie 会在浏览器和服务器中来回传递。 4k 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 ｜
LocalStorage 客户端本地存储数据 5M 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
SessionStorage 同上 同上 数据在当前浏览器窗口关闭后自动删除

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

  • 处理 HTML 并构建 DOM 树。
  • 处理 CSS 构建 CSSOM 树。
  • 将 DOM 与 CSSOM 合并成一个渲染树。
  • 根据渲染树来布局，计算每个节点的位置。
  • 调用 GPU 绘制，合成图层，显示在屏幕上。

注意：

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

  • 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。

怎么理解重绘（Repaint）和回流（Reflow）？

  • 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
  • 回流是布局或者几何属性需要改变就称为回流（需要计算它们在设备视口(viewport)内的确切位置和大小）

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

具体什么操作会导致重绘和回流？

  • 添加或删除可见的 DOM 元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
  • 定位或者浮动
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

如何减少重绘和回流？

  • 批量修改 DOM，即减少修改 DOM 次数。
  • 对于复杂动画效果,使用绝对定位让其脱离文档流。
  • 对一个节点做大量复杂操作的时候，可先让该元素 display:none
  • css3 硬件加速（GPU 加速）transform、opacity、filters 这些动画不会引起回流重绘。

简述data:属性的用法（如何设置，如何获取），有何优势？

data-* 的值的获取和设置，2种方法：

一、 传统方法

getAttribute() 获取data-属性值；

setAttribute() 设置data-属性值

二、HTML5新⽅法

例如 data-kerwin

dataset.kerwin 获取data-kerwin属性值

dataset.kerwin = “赵钱孙李” 设置data-kerwin属性值

注意：

  • 传统⽅法⽆兼容性问题，但是不够优雅、⽅便
  • HTML5新⽅法很优雅、⽅便，但是有兼容性问题。

优势：把数据存放在标签属性中可以让⻚⾯拥有更好的交互体验（不需要使⽤ Ajax 或去服务端查询数据）