前端面试题目小结 之一（精选10题）

CSS+HTML

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​​

我的理解： 内部的盒子会在垂直方向上一个接一个放置；垂直方向上的盒子间距​​margin​​决定，但是同属于一个​​BFC​​的两个盒子会发生​​margin​​重叠;每个盒子左右外边距不会超出包含他的块;​​BFC​​的区域不会与​​float​​的元素区域重叠；计算高度时浮动元素也要计算在内;

• 解决​​margin​​​重叠问题：给其中一个盒子添加​​float​​​利用规则（​​BFC​​​的区域不会与​​float​​的元素区域重叠）
• 利用​​BFC​​可以清除浮动：计算高度时浮动元素也要计算在内所以可以利用这一点清除浮动

4、编写CSS代码的时候如何优化CSS渲染性能？

• 内联首屏关键关键Css，优先加载主要的内容。
• 异步加载Css

//设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
//通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
复制代码

• 合理使用选择器

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

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

6、CSS盒模型（标准盒模型和IE盒模型）

共同点：两种盒模型都是由 ​​content + padding + border + margin​​​ 构成，其大小都是由 ​​content + padding + border​​​ 决定的，但是盒子内容宽/高度（即 ​​width/height​​）的计算范围根据盒模型的不同会有所不同：

• 标准盒模型：只包含​​content​​ 。
• IE盒模型：​​content + padding + border​​ 。

box-sizing 改变元素的盒模型：

• ​​box-sizing: content-box​​ ：标准盒模型（默认值）。
• ​​box-sizing: border-box​​ ：IE（替代）盒模型。

JS相关

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

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

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

function fun1() {
      let n = 0;
      function fun2() {
        n++;
        console.log("@"+n);
        return n
      }
      return fun2;
    }
    let res = fun1();
    // 执行12次,fn2中的变量的生命周期变长了，fun2函数中的n被外部使用了
    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有几种状态？三种

• ​​promise​​有三种状态pending（等待）、已完成（fullled）、已拒绝（rejected）
• 一个​​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 方法，只传入失败的回调）

Async和await

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

9、函数防抖和节流（高频---笔试+面试）

函数防抖：在规定时间内多次执行代码，只执行最后一次（按钮频繁点击时，只让最后一次生效） 函数节流：定义一个执行频率时间，在执行的过程每隔对应的频率时间执行一次（表单验证中输入内容时、滚动条事件）

平时项目中我们会直接使用​​lodash​​库，来解决对应的问题

• ​​防抖函数用法​​
• ​​节流函数用法​​

// 防抖
function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

// 节流函数
function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { console.log('scroll事件触发' + Date.now()) }, 200)

复制代码

10、let；const；var区别？

不同点：

作用域：

• Var声明的变量只能是全局对的或者是函数块的
• let声明的变量它的作用域既可以是全局或者整个函数块
• var 允许在同一作用域中重复声明，而 let 不允许在同一作用域中重复声明，否则将抛出异常
• var 在全局环境声明变量，会在全局对象里新建一个属性，而 let 在全局环境声明变量，则不会在全局对象里新建一个属性。
• var 声明变量存在变量提升；let 声明变量存在暂存死区

相同点：

• var 和 let 的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用