千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
一.H5面试题
1.如何理解h5结构语义化：
用正确的标签做正确的事情，利于开发和维护
2.h5的新特性：
(1)关于图像，位置，存储，多任务等功能的增加，比如：用于媒介回访的video和audio元素，本地存储localStorage，语义化标签，表单控件：date，time，email等
(2)移除元素：
纯表现元素：basefont，big，center
3.cookie，sessionStorage和localStorage的区别:
cookie是网站为了标示用户身份而存储再本地终端上的数据
cookie数据始终在同源的http请求中携带
sessionStorage和localStorage不会自动把数据发给服务器
cookie数据大小不超过4kb
sessionStorage和localStorage数据大小可达5mb
4.浏览器的渲染机制一般分为几个步骤
(1)处理html并构建dom树
(2)处理css构建cssom树
(3)将dom与cssom合并成一个渲染树
(4)根据渲染树来布局，计算每个节点的位置
(5)调用GPU绘制，合成图层，显示在屏幕上
5.重绘和回流
重绘：是当节点需要更改外观而不会影响布局，比如color
回流：是布局或者几何属性需要改变就成为回流（需要计算它们在设备视口内的确切位置和大小）
6.data：属性的用法，有何优势？
data获取和设置：
（1）传统方法：
getAttribute()获取data-属性值，setAttribute()设置data-属性值
（2）h5新方法：
dataset.xx获取，dataset.xx='XX'设置
二。css面试题
1.display：none与visibility：hidden的区别
display：none会让元素完全从渲染树中消失，不占据空间，回流
visibility：hidden不会让元素从dom树小时，继续占用空间，重绘
2.外边距折叠
相邻两个盒子垂直方向margin会合并
浮动元素或行内块或绝对定位不会发生折叠
3.z-index是什么？
z-index属性设置元素的堆叠顺序，仅在定位元素上触发
4.简述box-sizing的有效值以及所对应的盒模型规则
box-sizing：content-box;盒子所在区域由width，padding，border，margin组成
box-sizing：border-box;盒子所在区域由width，margin组成
5.移动端适配怎么做？
(1) viewport视口适配
(2)图片适配：max-width
(3)媒体查询
(4)rem(相对根元素html的font-size)，用js动态设置rem大小实现自动适配
6.什么是css3 transform？transition？animation？区别？
transform：描述元素静态样式，本身不会呈现动画效果
transform：过渡，需要一个事件触发
animation区别transform是自发的
7.父元素和子元素宽高不固定，如何实现水平垂直居中
(1).父元素弹性盒,子元素margin：auto
(2).父元素弹性盒，设置主轴和侧轴居中
(3).父元素相对定位，子元素绝对定位，top，left50%，margin-left，margin-top元素本身的一半
(4).父元素相对定位，子元素绝对定位，top，left50%，transform：translate（-50%，-50%）
三.js面试题
1.js内置对象
数据封装对象：Object，Array,Boolean,Number,String
其他对象：Function,Math,Date
es6新增：Symbol,Map,Set,Proxy
2.如何最小化重绘和回流
需要对元素进行复杂的操作时，可以使用dispaly：none先隐藏，操作完再显示
需要创建多个dom节点是，使用docmentfragment创建完后一次性加入document
缓存layout属性
尽量避免用table布局
3.js作用域链
全局函数无法查看局部函数的变量，但局部函数可以查看上层的变量
如果当前作用域没有找到属性或方法，会向上层作用域查找，直至全局函数
4.数据请求
(1)xhr封装
(2)fetch(w3c）解决回调地狱
(3)jsonp：解决跨域
