前端基础问题

html和css

w3c 规范

结构化标准语言
样式标准语言
行为标准语言
html5新增的标签有哪些？
audio
video
nav
progress
time
aside
mark
aside
section
figure

盒模型

常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css3 新特性

常问：

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子阴影
border-image 边框图片
css3 背景
background-image 背景图片
background-size 背景大小
background-origin 背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制

BFC

BFC是块级格式化上下文。

计算BFC高度时，浮动元素也会参与计算、
在BFC这个元素垂直方向的边距会发生重叠
BFC的区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容器，其里外的元素不会互相影响

BFC应用:
防止margin重叠
清除内部浮动
自适应两栏布局
防止字体环绕

BFC的生成条件：
根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixed

弹性盒

display:flex;
align-items:center;
justify-conter:center;

元素垂直水平居中

不需要知道宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

需要知道宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

css定位方式

position：static;//默认定位
position：relative;//相对定位（参照物是自身,不脱离文档流）
position:absolute;//绝对定位（参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）
position:fixed;//固定定位（参照物是可视区窗口，脱离文档流）相对于浏览器窗口进行定位。
position:sticky;//元素不脱离文档流

rem和em的区别

总而言之，就是浏览器把谁转化成“px”
rem 依据的是html的font-size值。1rem=16px
em 依据的是父元素的font-size值。

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

移动端1像素问题

伪元素+scale

.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>

border-image

div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

做移动端开发有没有遇到不兼容的问题?如何解决？

使用背景图来代替img标签

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; 
height:50px

防止手机中网页放大和缩小,设置meta标签中的viewport;

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

浮动子元素撑开父元素盒子高度
```
1.父元素设置为 overflow: hidden;

2.父元素设置为 display: inline-block;
```
　如何解决移动端滚动条卡顿问题
安卓或者ios
```
\-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 \*/  
\-webkit-overflow-scrolling: touch; /\* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比
```
响应式布局
所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同选择的渲染方式也不同。
换句话说就是先做好PC端的样式，然后使用css中的@media媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，啥是栅格化，bootstrap就是栅格化，栅格化就是将页面划分成一块一块的区域，然后在不同的终端适配，最后将栅格重新排列。
响应式布局需要遵循以下几点：

①页面元素宽度不是用px作为单位，而是使用百分比。

②页面框架之间使用流式布局，也就是用float属性，这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。

③还有就是注意图片的大小，尤其是宽度，同样使用百分比

/*当设备宽度小于800px的时候切换成移动端的布局*/    

@media screen and (max-width: 800px) {    

    .header img {    

        width: 15%;    

        height: 15%;    

    }    

    .main {    

        float: none;    

        width: 95%;    

        margin: 0 auto;    

        box-sizing: border-box;    

    }    

}

圣杯布局

body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

双飞翼布局

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

javascript

js 中常见的数据类型:
string
number
boolean
underfined
Null
NaN
object
symbol

typeof

可以判断出'string','number','boolean','underfined','symbol'
当判断typeof(null)时值为'object',判断数组和对象的值均为'object'

instanceof

原理是构造函数的 prototype 属性是否出现在对象的原型链中的任何位置

cookie,sessionStorage和localStorage

cookie用来保存登录信息，大小限制为4KB左右
localStorage是Html5新增的，用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在5MB
sessionStorage接口方法和localStorage类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。

跨域

什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
什么是同源策略？
同源策略/ SOP（Same origin policy）是一种约定，由Netscape公司发布。它是浏览器最核心，也最基本的安全功能，如果有了同源策略，所谓相似是指协议+域名+端口三者相同，如果有一个不同，即为非同源。
跨域解决方案：
１.　cors 跨域资源共享
设置响应头

response.setHeader("Access-Control-Allow-Origin", "*")

缺点：是会引起CSRF攻击，如何解决这个问题呢？
解决方法：1.主要使用token 2. 尽量使用Post
２.　jsonp
jsonp缺点：只能实现get一种请求。

CORS与JSONP 区别

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持，要支持IE7还是要用jsonp方式]

cookie 跨域问题

nginx反向代理
jsonp
nodejs superagent 其实本质也是jsonp的方式

localStorage跨域问题

可以使用postMessage和iframe

思路如下：

假设有a页面和b页面，两个页面。

通过a页面去修改b页面的本地数据：

> ①　在a页面创建一个iframe，嵌入b页面。
> ②　a页面通过postMessage传递指定格式的消息给b页面。
> ③　b页面解析a页面传递过来的消息内容，调用localStorage API 操作本地数据。
> ④　b页面包装localStorage的操作结果，并通过postMessage传递给a页面。
> ⑤　a页面解析b页面传递回来的消息内容，得到 localStorage 的操作结果。

var 、let 和const区别

在作用域方面

var 声明的变量不存在块及作用
let 声明的变量存在块及作用域、

在变量提升方面

var 声明的变量存在变量提升
let const声明的变量不存在变量提升唯一不同的是 const 声明的变量一旦赋值就不能再改变了

在重复声明方面

var 可以多次声明，let不存在多次声明
const和let基本相同唯一不同的是const声明的变量一旦赋值就不能在改变。

面向对象

特点：封装，继承，多态

封装
把一些数据和对数据的操作集中在一起，向外暴露需要的接口（属性和方法）
继承
一个类型的实例能够访问另外一个类型的属性和方法。类和类之间的关系子类继承父类，你只不过是子类中的实例。
构造函数继承
原型链继承
组合继承
寄生组合式继承
class 继承
多态
```
 所谓多态，就是同一个方法的多种调用方式
```
promise
promise是一个类，是异步编程的解决方案和回调函数的使用有关，多个回调函数使用行成回调地狱。promise有三个状态分别是等待，成功，失败，每个promise都有一个.then的方法，resolve代表成功，reject代表失败，不管先调用resolve方法，还是先调用reject方法，按照先调用先生效的原则。
ES5新增的有哪些？
像
数组:
```
forEach();map();every()filter();isArray()
```
string:
```
trim()
```
Data:
```
Date.now()
```
Json:
```
 JSON.stringify()//将js对象转化成字符串
 JSON.parse()//将字符串转换为js值
```
this指向
ES6新增的有哪些？
let const可以再说说var,const,let的区别
模板字符串
解构赋值对数组和对象的优化
箭头函数，可以多说说，this指向问题
扩展运算符 ...
set方法，常用于数组去重
promise解决异步问题
set和map方法
for...of...
ES7新增
求幂运算符
```
Math.pow(3, 2) === 3 ** 2 
```

Array.prototype.includes()

  indexOf(3) > -1 //true
  区别：1. 简便性；includes返回值是布尔值，indexOf返回值是索引 2.精确性 对于NaN,在严格模式下，includes返回值是布尔值,indexOf返回值是-1

ES8新增

使用async await异步解决
Object.entries()

  Object.entries({ one: 1, two: 2 })    
  //[['one', 1], ['two', 2]]
  Object.extries([1, 3])    //[['0', 1], ['1', 3]]

字符串填充padStart()、padEnd()

promise

Promise.all():当所有的异步都执行完毕以后才会执行.then中的操作。  
Promise.race():只要有一个promise执行完毕后就会执行.then操作。

基础promise封装

===========

functionajax(url) {

return newPromise(function (resolve, reject) {

    if (window.XMLHttpRequest) {

         var xhr=newXMLHttpRequest();

        } else {

        var xhr=newActiveXObject("Microsoft.XMLHTTP");

        }

        xhr.open("GET", url, true);

        xhr.send();

        xhr.onreadystatechange = function () {

    if (xhr.readyState==4) {

        if (xhr.status==200) {

            var data = xhr.responseText;

            resolve(data);

                }

            }

        }

    })

}

set和map区别

 set: 　　
 set是ES6提供的一种新的数据结构，类似于数组，但是成员的值是唯一的没有重复的，接受的参数是一个数组方法有： 　　     add():添加 　　
delete():删除 　　
size:长度 　　
has():查找 　　
clear：清除所有 
map： 　　
map类似于对象，也是键值对的集合， 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键方法有： 　　
set():设置 　　
get():获取 　　
delete():删除 　　
has():查找 　　
clear():清除所有

for of 和for in区别:

for in 循环特别适合遍历对象
for…in是遍历数组、对象的key
for…of是遍历数组的value

闭包的概念及优缺点

=========
闭包的概念：

就是在一个函数外部能够访问该函数内部局部变量的函数。

优点：
避免全局变量的污染。
希望一个变量长期储存在内存中。

缺点：
内内存泄漏
增加内存的使用量

this 指向问题

宗旨就是：谁调用它，它就指向谁

箭头函数中的this指向它的环境。
构造函数调用，this 指向实例对象
对象方法调用，此时 this 指向该方法所属的对象
通过事件绑定，此时 this 指向绑定事件的对象

如何改变this指向以及它们的区别

call apply bind

call和apply区别是参数个数不同。
call的参数可以无限个；而apply的参数最多只能有两个。
bind是创建一个新函数，与被调函数有相同的函数体。

http和https的区别？

https协议需要申请证书，一般不免费
http是超文本传输协议，信息是明文传输的，https具有安全性，https采用的是加密传输协议。
http和https采用的不同的连接方式，http端口号是80，https端口号是443.
节流和防抖
防抖
防抖是指在一段时间内，函数被触发多次，但是只执行一次，当达到了一定的时间间隔就会执行一次

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}

节流
节流是会有规律的每隔时间n就执行一次函数。

function throttle(fn, cycle) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= cycle) {
      fn.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, cycle);
    }
  }
}

谈谈js事件循环机制

程序开始执行之后，主程序则开始执行同步任务，碰到异步任务就把它放到任务队列中,等到同步任务全部执行完毕之后，js引擎便去查看任务队列有没有可以执行的异步任务，将异步任务转为同步任务，开始执行，执行完同步任务之后继续查看任务队列，这个过程是一直循环的，因此这个过程就是所谓的事件循环，其中任务队列也被称为事件队列。通过一个任务队列，单线程的js实现了异步任务的执行，给人感觉js好像是多线程的。

async 和 await

原理：async 和 await 用了同步的方式去做异步，async 定义的函数的返回值都是 promise，await 后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js的代码

get 和 post 区别

get 传输不安全，因为数据放在请求的 url 中；post 所有操作用户是看不到的。
get 传输数据量小，因为受到 url 长度的限制；post 传输的数据量较大，一般不受限制。
get 执行效率比 post 更好。get 是 form 提交的默认方式。

深拷贝和浅拷贝的区别

==========
浅拷贝：是将原对象和原数组的引用直接赋值给新数组，新对象/新数组只是原对象的一个引用。

Object.assign()
for...in ...

深拷贝：是将原对象和原数组的值直接拷贝给新的对象和数组。

JSON.stringify()
JSON.parse()
**借用JQ的extend方法**
扩展运算符 ...

Ajax

ajax是“Asynchronous JavaScript and XML”的缩写，是一种创建交互式网页应用的网页开发技术，
ajax具有以下优点：

使用异步方式与服务器通信，具有更加迅速的响应能力。
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
Ajax最大特点可以实现动态不刷新（局部刷新）
同时ajax也是有缺点的：
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
阻止事件流方式有哪些
==========

阻止冒泡的方式有哪些？

IE8: 事件对象.cancelBubble=true
火狐：事件对象.stopPropagation();

阻止浏览器的默认行为有哪些？

event.preventDefault();//现代浏览器。  
event.returnValue=false; //IE 低版本及部分现代浏览器。  
return false;//兼容性比较好 最好用在代码的最后面。

DOM二级事件和普通事件的区别

捕获由外向内传播；冒泡由内向外。
传统事件不支持捕获；DOM2级事件支持捕获。
传统事件多个相同的事件名，会覆盖；DOM2级事件会依次执行。
DOM2级事件有兼容性的。

　对前端性能优化有什么了解？一般都通过那几个方面去优化的？

减少请求数量
减小资源大小
优化网络连接
优化资源加载
减少重绘回流
性能更好的API
webpack优化

回流和重绘有什么区别？以及分别介绍它们。

区别：
回流必将引起重绘，而重绘不一定引起回流。

回流：
当render tree中的一部分（或全部）元素的属性改变而需要更新构建页面。这就称为回流。

重绘：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不影响布局的，称为重绘。

比方说：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流。

DOM 事件有哪些阶段？谈谈对事件代理的理解

或者问：js 事件传播流程是什么？
主要分为三个阶段，分别是：

捕获阶段
目标阶段
冒泡阶段

事件代理，又叫事件委托，就是说利用冒泡原理，事件不直接绑定到某原元素上，而是绑定到该元素的父元素上。
好处：（1）代码更简洁（2）节省内存开支

同步和异步

Javascript语言的一大特色就是单线程，同一时间只能做一件事。这门语言的设计者布兰登·艾奇意识到这个问题，于是将任务分为两种，一种是同步任务；另外一种就是异步任务。

同步又叫阻塞模式，当一个方法被调用时，调用者需要等待该发法执行完毕才能执行，我们就称这种方法时同步方法。

异步又叫非阻塞模式，当一个方法被调用时立即返回，并获取一个线程执行该方法内部的业务，调用者不用等待该方法执行完毕，我们称这个方法为异步方法。

变量提升（变量的声明提升）

它是分为两步进行的，
第一步：预编译阶段。先扫描当前环境中所有声明的变量，包括变量声明和函数声明，将这些声明提升到原来的位置。
第二步：代码执行阶段。在原来的位置进行运算或者输出等操作。

map 和 foreach 区别

区别：
forEach()，不改变原数组，不会返回一个新的数组，没有返回值。
map()，不会改变原数组，会返回一个新的数组。
共同点：
参数一：function(currentValue, index, arr)必需
参数二: thisValue 可选

宏任务和微任务的区别？

【宏任务 [微任务]】 -> 【宏任务 [微任务]】-> 【宏任务 [微任务]】...

当宏任务和当前宏任务产生的微任务全部执行完毕后，才会执行下一个宏任务。每遇到生成的微任务就放到微任务队列中，当前宏任务代码全部执行后开始执行微任务队列中的任务
传给 new Promise 的函数会直接执行
async 包装的函数相当于包了一层 Promise ，因此返回的一定是一个 Promise
3.执行到 await，先执行 await 右边的东西，执行完后后会暂停在 await 这里，并且把后边的内容丢到 then 中（再结合第 5 点）。跳到外边接着执行。外边都执行完之后开始执行微任务队列
4.当 promise 变为 resolve 或者reject 的时候才会将 then 中注册的回调函数加入微任务队列中
5.setTimeout 产生宏任务

宏任务怎么产生的？

生成方法：

1.用户交互：用户在页面上进行交互操作（例如点击、滚动、输入等），会触发浏览器产生宏任务来响应用户操作。
2.网络请求：当浏览器发起网络请求（例如通过 Ajax、Fetch、WebSocket 等方式）时，会产生宏任务来处理请求和响应。
3.定时器：通过 JavaScript 宿主环境提供的定时器函数（例如 setTimeout、setInterval）可以设置一定的时间后产生宏任务执行对应的回调函数。

DOM 变化：当 DOM 元素发生变化时（例如节点的添加、删除、属性的修改等），会产生宏任务来更新页面。
5.跨窗口通信：在浏览器中，跨窗口通信（例如通过 postMessage 实现）会产生宏任务来处理通信消息。
6.JavaScript 脚本执行事件；比如页面引入的 script 就是一个宏任务。

微任务是怎么产生的呢？

生成方法：

Promise：Promise 是一种异步编程的解决方案，它可以将异步操作封装成一个 Promise 对象，通过 then 方法注册回调函数，当 promise 变为 resolve 或者 reject 会将回调函数加入微任务队列中。
MutationObserver：MutationObserver 是一种可以观察 DOM 变化的 API，通过监听 DOM 变化事件并注册回调函数，将回调函数加入微任务队列中。
process.nextTick：process.nextTick 是 Node.js 中的一个 API，它可以将一个回调函数加入微任务队列中。

如何获取用户的浏览器是什么？

navigator.userAgent

原型和原型链

每一个构造函数都有一个原型对象protype,每一个原型对象都有一个指向构造函数的内部指针construct,每一个实例都有一个指向原型对象的内部指针-proto-，原型对象上的属性和方法都能被实例所访问到。

排序算法

选择排序

function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     // 寻找最小的数
                minIndex = j;                 // 将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

冒泡排序

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
    for(i=0;i<arr.length-1;i++){
        for(j=0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
sortarr(examplearr);
console.log(examplearr);

快速排序

 function quickSort(arr){
        if(arr.length<1){
            return arr;
        }
        var pivotIndex=Math.floor(arr.length/2);//找到那个基准数
        var pivot=arr.splice(pivotIndex,1)[0]; //取出基准数，并去除，splice返回值为数组。
        var left=[]; 
        var right=[];
        for(var i=0;i<arr.length;i++){
            if(arr[i]<pivot){
                left.push(arr[i]);
            }else{
                right.push(arr[i]);
            }
        }
        return quickSort(left).concat([pivot],quickSort(right)); //加入基准数
    }
    arr=[2,1,5,8,3,7,4,6,9];
    console.log(quickSort(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

浏览器的渲染原理(浏览器是怎样工作的)

用户输入url,浏览器向服务器发送请求，服务器返回html文件，浏览器载入html代码，当浏览器解析到head中有使用link标签引入的css样式的时候，浏览器再次向服务器发出请求，请求css文件，然后服务器返回css文件，当浏览器解析到html中body部分，此时的css文件已经到手了，浏览器开始渲染页面，当浏览器解析到img标签的时候，再次向服务器发送请求，此时浏览器是不会先加载图片的，而是先加载后面的代码，当服务器返回图片时，浏览器重新渲染这部分代码，当浏览器发现script标签的时候，很快去运行它，当浏览器解析到</html>，此时浏览器叹了口气，终于完成任务了，我太难了。

git常见面试题

常用的几个git命令？

新增文件的命令：git add file或者git add .
提交文件的命令：git commit –m
查看工作区状况：git status
拉取合并远程分支的操作：git fetch/git merge或者git pull
查看提交记录命令：git reflog

提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的？

公共类的公共方法，我和别人同时修改同一个文件，他提交后我再提交就会报冲突的错误。
如何解决的就是发生冲突，在IDE里面一般都是对比本地文件和远程分支的文件，然后把远程分支上文件的内容手工修改到本地文件，然后再提交冲突的文件使其保证与远程分支的文件一致，这样才会消除冲突，然后再提交自己修改的部分。特别要注意下，修改本地冲突文件使其与远程仓库的文件保持一致后，需要提交后才能消除冲突，否则无法继续提交。必要时可与同事交流，消除冲突。

通过git stash命令，把工作区的修改提交到栈区，目的是保存工作区的修改；
通过git pull命令，拉取远程分支上的代码并合并到本地分支，目的是消除冲突；
通过git stash pop命令，把保存在栈区的修改部分合并到最新的工作空间中

能不能说一下git fetch和git pull命令之间的区别？

简单来说：git fetch branch是把名为branch的远程分支拉取到本地；而git pull branch是在fetch的基础上，把branch分支与当前分支进行merge；因此pull = fetch + merge。

如果本次提交误操作，如何撤销？

如果想撤销提交到索引区的文件，可以通过git reset HEAD file；
如果想撤销提交到本地仓库的文件，可以通过git reset –soft HEAD^n恢复当前分支的版本库至上一次提交的状态，索引区和工作空间不变更；
可以通过git reset –mixed HEAD^n恢复当前分支的版本库和索引区至上一次提交的状态，工作区不变更；
可以通过git reset –hard HEAD^n恢复当前分支的版本库、索引区和工作空间至上一次提交的状态。

你使用过git stash命令吗？你一般什么情况下会使用它？

命令git stash是把工作区修改的内容存储在栈区。
以下几种情况会使用到它：

解决冲突文件时，会先执行git stash，然后解决冲突；
遇到紧急开发任务但目前任务不能提交时，会先执行git stash，然后进行紧急任务的开发，然后通过git stash pop取出栈区的内容继续开发；
切换分支时，当前工作空间内容不能提交时，会先执行git stash再进行分支切换；

如何把本地仓库的内容推向一个空的远程仓库？

首先确保本地仓库与远程之间是连同的。如果提交失败，则需要进行下面的命令进行连通：

git remote add origin URL

如果是第一次推送，则进行下面命令：

git push -u origin master

之后的提交，只需要下面的命令：

git push origin master

前端基础问题

html和css

w3c 规范

html5新增的标签有哪些？

盒模型

css3 新特性

css3 边框

css3 背景

BFC

弹性盒

元素垂直水平居中

css定位方式

rem和em的区别

浏览器内核

移动端1像素问题

做移动端开发有没有遇到不兼容的问题?如何解决？

如何解决移动端滚动条卡顿问题

响应式布局

圣杯布局

双飞翼布局

javascript

cookie,sessionStorage和localStorage

跨域

CORS与JSONP 区别

cookie 跨域问题

localStorage跨域问题

var 、let 和const区别

面向对象

promise

ES5新增的有哪些？

ES6新增的有哪些？

ES7新增

ES8新增

基础promise封装

for of 和for in区别:

闭包的概念及优缺点

this 指向问题

如何改变this指向以及它们的区别

http和https的区别？

节流和防抖

谈谈js事件循环机制

async 和 await

get 和 post 区别

深拷贝和浅拷贝的区别

Ajax

阻止事件流方式有哪些

DOM二级事件和普通事件的区别

对前端性能优化有什么了解？一般都通过那几个方面去优化的？

回流和重绘有什么区别？以及分别介绍它们。

DOM 事件有哪些阶段？谈谈对事件代理的理解

同步和异步

变量提升（变量的声明提升）

map 和 foreach 区别

宏任务和微任务的区别？

宏任务怎么产生的？

微任务是怎么产生的呢？

如何获取用户的浏览器是什么？

原型和原型链

排序算法

浏览器的渲染原理(浏览器是怎样工作的)

git常见面试题

常用的几个git命令？

提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的？

能不能说一下git fetch和git pull命令之间的区别？

如果本次提交误操作，如何撤销？

你使用过git stash命令吗？你一般什么情况下会使用它？

如何把本地仓库的内容推向一个空的远程仓库？

Hole

引用和评论

Html面试题

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

　如何解决移动端滚动条卡顿问题

　对前端性能优化有什么了解？一般都通过那几个方面去优化的？