前端面试总结一

大范围内的话题为： HTML&CSS:对web标准的理解，浏览器内核及区别，浏览器兼容，hack。css基本：布局，盒模型，选择器优先级及使用，移动端适应。HTML5和CSS3新特性。

 JavaScript：数据类型，面向对象，事件代理，继承，闭包，作用域 

vue：数据双向绑定原理，生命周期，路由，vuex，单项数据流，指令

 git:常用指令，git原理 

es6:阮一峰es6入门

HTML：

 1,元素设置为浮动后，该元素的display值是多少

display:block

HTML5新的input类型：

Email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color

HTML新特性：

css：

不定高图文垂直居中

方法1：父级：display:table-cell;子级：vertical-align：mddle;

方法2：display:flex;align-items:center;

方法3：父级：display:flex;子级：margin：auto;

方法4：父级：position：relative；子级：position：absolute；transformY(-50%)

css选择器优先级：

内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

!important > 行内样式>ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

盒模型：

box-sizing有三种模式：

1，inherit规定应从父元素继承box-sizing属性的值 2，content-box（标准盒模型）padding和margin和宽高一起决定盒子大小3，border-box IE盒模型，宽高包含padding和margin

清除浮动的方法：

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

浮动会导致父级元素高度坍塌，父元素不能被撑开，所以需要清除浮动

1，clear清除浮动，在所有的浮动元素最后增加一个空标签，设置style:clear:both

2，使用clearfix:

使用:after伪元素清除浮动

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

3，bfc清除浮动（块级格式化上下文）可以触发两个元素的bfc解决垂直边距折叠问题

给父元素设置overflow：hidden（缺点：内部宽高超过父级 div 时，会出现滚动条）

移动端的css3动画性能优化：

1，尽可能多的使用硬件能力，如使用3D变形来开启cpu加速

transform: translate3d(0, 0, 0);

2、尽可能少的使用box-shadows与gradients

css hack：

css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。

css 常见布局：

1，文档流布局

2，浮动布局：使用float属性，使元素脱离文档流

3，定位布局：使用position属性定位

4，flex布局

5，grid网格布局

px，rem，em的区别

1，px：固定长度单位，不随其他元素的变化而变化，相对于显示屏屏幕分辨率而言。缺点是：IE无法调整使用px作为单位的字体大小

2，rem：相对于根目录元素，会随HTML元素的属性变化而变化，如html元素设置font-size=16px，html中的div元素设置为font-size=1rem,则这1rem=16px

3，em：相对于父级元素单位，会随父级元素的属性变化而变化

rem和em一般用于设置字体大小

JavaScript：

函数节流和防抖：

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

应用：按钮防止重复点击，事件持续触发的过程中不频繁执行函数

vue防止重复点击
新建plugins.js
import Vue from 'vue'const preventClick = Vue.directive('preventReClick',{    inserted(el,binding) {        el.addEventListener('click',()=>{            if(!el.disabled){                el.disabled = true                setTimeout(() => {                    el.disabled = false                },binding.value||3000)            }        })    }})export {preventClick}

节流：连续触发事件但是在n秒内止执行一次函数

事件代理（事件委托）

把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，原理是事件冒泡机制

阻止事件冒泡：event.stopPropagation()

阻止默认事件：event.preventDefault()

vue阻止事件冒泡：事件修饰符：.stop

.once:只响应一次事件 

.self 当事件由元素本身触发才响应事件

 .prevent:阻止默认事件 

.passive:preventDefault阻止该次事件的默认动作

 .capture:在事件捕获阶段回调事件处理函数

 .native:在某个组件的根元素上监听一个原生事件

console.log('1')setTimeout(() => {    console.log('2')})new Promise((resolve, rejects) => {    console.log('3')    resolve()}).then(() => {    console.log('4')})console.log(5)