前端面试题目小结，拿走不谢

HTML和CSS

1、H5的新特性

• Canvas -- 用于绘画的元素
• video、audio -- 用于播放视频和音频的媒体。
• 语义化标签 ： header nav main article section aside footer
• webSocket -- 单个TCP连接上进行全双工通讯的协议。
• localStorage、sessionStorage -- 本地离线存储。
• 新的表单控件 -- 如：date、time、email、url、search。

2、重绘&&重排

• 重排（回流） ：当DOM变化，引起了元素形状大小等几何变化，浏览器会重新计算元素的几何属性，将其放置到正确位置，这个过程叫重排。
• 重绘：当一个元素的外观发生变化但并未引起布局上的变化，重新把元素绘制出来对的过程叫做重绘

个人理解：涉及到计算的相关内容都会重排，涉及到样式改变而未改变布局的都会重绘

3、BFC

官方解释：块级格式上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

浏览器对BFC的限制规则是:

• 生成BFC元素的子元素会一个接一个的放置。
• 垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC-- 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
• 生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

触发条件：

• 根元素，即HTML标签
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 定位元素：position值为 absolute、fixed

4、CSS响应式布局有哪些？

• CSS3媒体查询@media 查询（麻烦，需要考虑的情况很多，不推荐）
• 在头部meta标签中加入“name=“viewport元标签””代表网页宽度默认等于屏幕宽度
• 借助bootstrap中的栅格
• 弹性盒子（推荐使用）

JS相关

1、闭包（面试+笔试===高频）

闭包是指有权访问另一个函数作用域中的变量的函数

• 优点：延长变量生命周期、私有化变量
• 缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏

 function fun1() {
      let n = 0;
      function fun2() {
        n++;
        console.log("@"+n);
        return n
      }
      return fun2;
    }
    let res = fun1();
    // 执行12次,fn2中的变量的生命周期变长了
    for (let i = 0; i < 12; i++) {
      console.log(res()+"执行的第"+(i+1)+"次");
    }

2、原型、原型链（高频）

• 原型链：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，这就是原型链。

• 原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。 Object.prototype.toString.call([])//tostring可以返回一个精确的类型
• 原型：在 JS中，每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象

3、this指向(笔试题高频)

• 全局函数中，this指向window
• 作为对象的方法调用 this 指向调用对象
• 自定义构造函数中，this指向新的实例化对象（new 会改变 this 的指向）
• 事件绑定中this指向事件源
• 定时器函数中this指向window

4、JS继承的方式有哪些？

• 原型链的方式继承
• 借用构造函数来实现继承
• 组合继承
• ES6中使用extends和super关键字来实现继承

5、JS事件循环机制或js的执行机制？一次弄懂Event Loop

EventLoop，就像是一个银行叫号系统，负责去找到对应任务队列中的函数，然后放入执行栈中进行调用，任务队列分为宏任务和微任务。在执行过程中，某个宏任务执行结束后，然后查看是否有微任务，如果没有，则执行下一个宏任务，以此类推直到全部执行结束。

js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步 任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程， 某个异步任务可以执行了，该任务才会进入主线程执行。

宏任务包含

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

请写出下段代码的输出结果（js事件循环机制）

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

答案： 1 5 3 4 2

6、原生ajax

ajax是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。

实现步骤：

• 创建XMLHttpRequest对象;
• 调用open方法传入三个参数 请求方式(GET/POST)、url、同步异步(true/false);
• 监听onreadystatechange事件，当readystate等于4时返回responseText;
• 调用send方法传递参数。

7、事件冒泡、委托（捕获）

• 事件冒泡指在在一个对象上触发某类事件，如果此对象绑定了事件，就会触发事件，如果没有，就会向这个对象的父级对象传播，最终父级对象触发了事件。
• 事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以在父节点上定义监听函数，我们就可以到具体触发事件的元素，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。 event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡

8、promise是什么？他有哪些作用？常用的方法有哪些？

是异步编程解决的一种方案，可以浅显的认为他就是个容器，里面存放着未来才会结束的事情的结果。同时Promise也是一个对象，可以从该对象获取异步操作的消息。可以解决回调层层嵌套的问题。

• promise.all-----同时多个异步操作时，同时发生，等待最后一个结束才结束。只要有一个出错，则都获取不到

const request1 => () => axios.get()
const request2 => () => axios.get()
const request3 => () => axios.get()
const request4 => () => axios.get()
Promise.all([request1(), request2(), request3(), request4()]).then(res => {
    // res中就包含了四个请求得到的结果
})

• promise.race-----可以在同时多个异步操作时，同时发生，第一个结束就结束 在一些异步处理中，我们想要设置超时时间的话，xhr对象可以调用xhr.abort()让请求结束，但是其他的没有

const asyncFn = () => new Promise(() => {
    // 代码
})
Promise.race([asyncFn(), new Promise((resolve) => {
    setTimeout(() => {
        resolve()    
    }, 5000)
})])

• Promise.reject （返回一个失败的 promise）
• Promise.resolve （返回一个成功的 promise）
• Promise.prototype.finally （无论成功还是失败都会执行 finally）
• Promise.prototype.catch （就是调用 promise 自身的 then 方法，只传入失败的回调）

• 1、sync/await是生成器函数的语法糖 
  2、async/await是基于promise实现的，他们不能用于普通的函数回调 
  3、async/await更符合同步语义 使得异步代码看起来更像同步代码 
  4、async/await与promise一样，是非阻塞的 执行async函数返回的都是promise对象```