H5面试题

• HTML5面试题

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

简单来说，我们可以理解为：用正确的标签做正确的事情。

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

对开发者：

便于团队的开发和维护。

在没有加载css的情况下也能呈现较好的内容结构和代码结构，易于阅读。

对浏览器：

有利于SEO（搜索引擎优化），搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。

方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

1. HTML5的新特性

HTML5现在已经不是SGML（标准通用标记语言）的子集，主要是关于图像，位置，存储，多任务等功能的增加

用于媒介回放的video和audio元素

本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失

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

语义化更好的内容元素，比如article、footer、header、nav、section

表单控件，calender、date、time、email、url、search

新的技术webworker，websocket，Geolocation

移除的元素：
纯表现的元素：basefont，big，center，font，s，strike，tt，u

对可用性产生负面影响的元素：frame，frameset，noframes

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签

可以利用这一特性让这些浏览器支持HTML5标签

浏览器支持新标签后，还需要添加标签默认样式

当然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>

<script> src=”http://html5shim.googlecode.com

/svn/trunk/html5.js”</script><![endif]-->

如何区分HTML5：doctype声明/新增的结构元素/功能元素

1. 请描述一下cookies，sessionStorage和localStorage的区别？

Cookie是网站为了标示用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）

Cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递

Sessionstorage和localStorage不会把数据发送给服务器，仅在本地保存

存储大小：

Cookie数据大小不能超过4K

Sessionstorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有效时间：

localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

SessionStorage数据在当前浏览器窗口关闭后自动删除

Cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

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

处理HTML并构建DOM树。

处理css构建cssom树。

将dom与cssom合并成一个渲染树。

根据渲染树来布局，计算每个节点的位置。

调用GPU绘制，合成图层，显示在屏幕上。

注意：

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

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

1. 重绘（Repaint）和回流（Reflow）

重绘是当前节点需要改变外观而不会影响布局的，比如改变color就称为重绘

回流是布局或者集合属性需要改变就称为回流（需要计算它们在设备视口（viewport）内的确切位置和大小）

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

所以以下几个动作可能会导致性能问题：

添加或删除课件的dom元素

元素的位置发生变化

元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）

内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。

定位或浮动

浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

减少重绘和回流

批量修改dom

对于复杂动画效果，使用绝对定位让其脱离文档流

Css3硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘

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

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

1. 传统方法

getAttribute（）获取data-属性值；setAttribute（）设置data-属性值

getAttribute（）获取data-属性值；

SetAttribute（）设置data-属性值

1. HTML5新方法

例如 data-mez

Dataset.mez  获取data-mez属性值

Dataset.mez=”Human” 设置data-mez属性值

注意：传统方法无兼容性问题，但是不够方便。

HTML新方法很方便，但是有兼容性问题。

优势：自动以的数据可以让页面拥有更好的交互体验（不需要使用Ajax或去服务器查询数据）