千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
1.如何理解HTML5结构语义化?
简单来说，我们可以理解为:用正确的标签做正确的事情。
段落用p标签，标题用h系列标签，边栏用aside标签，主要内容用rmain标签。对开发者:
便于团队的开发和维护。
·在没有加载CSS的情况下也能呈现较好的内容结构与代码结构，易于阅读。
对浏览器:
·有利于SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
·方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。
2.html5的新特性?
.HTML5现在已经不是bGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
。用于媒介回放的video和audio元素
。本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失o sessionStorage的数据在浏览器关闭后自动删除
。语意化更好的内容元素，比如article、footer.
header、nav、section
。表单控件，calendar、date、time、email、url、search
。新的技术webworker, websocket, Geolocatiol
n
移除的元素:
。纯表现的元素: basefont，big,center，for
nt, s,strike,tt,u
。对可用性产生负面影响的元素: frame,frameset,noframes支持HTML5新标签:
o IE8/IE7/IE6支持通过document.createElement方法产生的标签。可以利用这一特性让这些浏览器支持HTML53
新标签
。浏览器支持新标签后，还需要添加标签默认的样式当然也可以直接使用成熟的框架、比如html5shim
3.请描述一下cookies,sessionstorage和localStorage的区别?
. cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据（通常经过加密)cookie数据始终在同源的http请求中携带（即使不需要)，记会在浏览器和服务器间来回传递sessionstorage和1oca1storage不会自动把数据发给服务器，仅在本地保存
·存储大小:
ocookie数据大小不能超过4k
o sessionStorage和1ocalStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
I
·有期时间:
o loca1storage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据o sessionstorage数据在当前浏览器窗口关闭后自动删除
o cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
4.浏览器的渲染机制一般分为几个步骤?·处理HTML并构建DoM树。
。处理css构建csSOM树。
将DoM与cSSOM合并成一个渲染树。根据渲染树来布局，计算每个节点的位置。调用GPU 绘制，合成图层，显示在屏幕上。注意:
·在构建 CSSOM树时，会阻塞渲染，直至CSSOM树构建完成。并且构建CSSOM树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行速度越慢
当HTML解析到script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS文件。
5.重绘(Repaint)和回流(Reflow)l 工
·重绘是当节点需要更改外观而不会影响布局的，比如改变color就叫称为重绘
·回流是布局或者几何属性需要改变就称为回流（需要计算它们在设备视口(viewport)内的确切位置和大小)
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流
所以以下几个动作可能会导致性能问题:
添加或删除可见的DOM元素
·元素的位置发生变化
·元素的尺寸发生变化(包括外边距、内边框、边框大小、
高度和宽度等)
·内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。·定位或者浮动
浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
减少重绘和回流
批量修改DOM
·对于复杂动画效果,使用绝对定位让其脱离文档流
. css3硬件加速(GPU加速) transform、opacity、filters这些动画不会引起回流重绘
6.简述data:属性的用法（如何设置，如何获取)，有何优势?data-*的值的获取和设置，2种方法:
1）传统方法getAttribute()获取data-属性值; setAttribute()设置data-属性值getAttribute()获取data-属性值;
setAttribute()设置data-属性值2)HTML5新方法
例如data-kerwin
dataset.kerwin 获取data-kerwin属性值
dataset.kerwin =“赵钱孙李”设置data-kerwin属性值注意:
·传统方法无兼容性问题，但是不够优雅、方便HTML5新方法很优雅、方便，但是有兼容性问题。
优势:自定义的数据可以让页面拥有更好的交互体验（(不需要使用Ajax或去服务端查询数据)
二.CSS面试题
1. display: none;与visibility: hidden;的区别·联系∶它们都能让元素不可见
·区别:
display : none ;会让元素完全从渲染树中消失,
渲染的时候不占据任何空间;visibility: hidden;不
会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘2.外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin
叫做外边距折叠。规则如下:
两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素或in7ine-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠。创建了块级格式化上下文（BFC)的元素，不会和它的子元素发生margin折叠
