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

原创

前端面试题库助手 2022-10-19 10:56:46 博主文章分类：前端领域 ©著作权

文章标签 数组盒模型 css 文章分类 HTML5 移动开发

©著作权归作者所有：来自51CTO博客作者前端面试题库助手的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS+HTML

1、H5新增特性

Canvas -- 用于绘画的元素
video、audio -- 用于播放视频和音频的媒体。
语义化标签：headernavmainarticlesectionasidefooter
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 的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用

11、JS中map和filter区别？

两者都可返回一个新的数组，并且不改变原数组
map返回的是每个元素执行return后的结果组成的一个新数组，而不是返回原数组中的元素组成的一个新的数组，新的数组长度和原数组是一致的；然而filter返回的是对原数组的过滤，其元素还是原数组中的元素，长度可能发生变化，但不改变原数组中的元素值。

let arr = [1, 2, 3, 4, 4, 3, 8, 9];
let filterArr=arr.filter((item,index,arr)=>{
    console.log("当前元素值:",item,"当前元素索引:",index,"被遍历的数组",arr);
    return item>4
    //注意：此方法可以返回符合条件的元素组成的新的数组，此方法不会改变原数组
     })
let mapArr=arr.map((item,index,arr)=>{
    console.log("当前元素值:",item,"当前元素索引:",index,"被遍历的数组",arr);
     //return item>4
    //对原数组每个元素判断如果条件为真返回true否则返回flase
    //结果：[false, false, false, false, false, false, true, true]
    //当为return item+"mapArr"  
    //结果是['1mapArr', '2mapArr', '3mapArr', '4mapArr', '4mapArr', '3mapArr', '8mapArr', '9mapArr']
})

复制代码

12、数组去重(重点掌握数组的方法)

JS中数组去重的几种方式

filter、Arr.from+set、for循环+splice

filter 遍历数组，过滤出一个符合条件的新数组

let newArr = arr.filter((item,index)=>{return item>4})//筛选出原数组中值大于4的元素
console.log(newArr);
复制代码

Set是es6中提供的一种数据结构，它类似数组但与数组不同的是，它的值都是唯一的没有重复值.

Set本质也是一个构造函数，因此在使用时需要new，同时Set可以接收一个数组（或者具有 iterable 接口的其他数据结构）作为参数用来初始化Set
Set中的值可以是任意类型的，但必须不能重复
Set的最大特点就是，里面的值都是唯一的，因此可以用来进行数组去重使用
Set中认为NaN和NaN是同一个值，因此Set中只能有一个NaN值（但我们知道事实上NaN和NaN用于是不相等的）
Set中两个对象永远是不相等的，即使键和值都是一样的
Set也可以为字符串去重
在向Set添加值的时候不会发生类型转换
Set 是可遍历的

let arr = [1,1,1,2,3,4,4,5,6,7,8,8,8]
arr = Array.from(new Set(arr))// 或者 arr = [...new Set(arr)]
//输出结果：[1,2,3,4,5,6,7,8]
复制代码

13、ES6常用的

（1）Let和Const和var

用来声明变量，与var不同的是，let和const会创建一个块级作用域（花括号包裹的可称之为一个块级作用域）
在for循环中let和const会每循环一次就生成一个块级作用域，而且for循环会给下一个变量重新赋值
var、let、const都有变量提升，不同的是var在创建的时候就会给变量初始化值（undefined），而let和const只有当声明的语句执行了才会初始化并赋值，而这时const是必须得赋值。创建到初始化之间的代码块叫就形成了暂时性死区。
const声明的变量是常量（不会改变的变量），如果声明的是引用类型，则不能改变其引用地址。

（2）箭头函数

箭头函数和function声明的普通函数区别

箭头函数没有Protype属性不能使用new关键字调用
没有自己的this

14、基本数据类型和引用数据类型的区别

Number String Boolean Null Undefined Symbol

原始类型存储在栈内存中，修改对应的值，值会被覆盖。

引用类型存储在堆内存中，在栈内存中只是一个地址。

15、数据类型判断（掌握）？

16、cookie,localstorage, sessionstrorage 之间有什么区别？

相同点：存储在客户端

不同点

与服务器交互： cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密） cookie 始终会在同源 http 请求头中携带（即使不需要），在浏览器和服务器间来回传递 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
存储大小： cookie 数据根据不同浏览器限制，大小一般不能超过 4k ，sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关

常见Jquery面试题

1、jquery中$()是什么？

$前端面试题目小结，拿走不谢_css_02$ () 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

2、Jquery中的选择器？

ID选择器、类选择器、标签选择器等

$('#LoginTextBox') //ID选择器
$('.active')//类选择器
$("div")//标签选择器
复制代码

3、如何在点击一个按钮时使用 jQuery 隐藏一个图片？

思路：为按钮设置事件并执行hide() 方法

$('#Button').click(function(){
    $('#ImageToHide').hide();
});
复制代码

4、 $(document).ready() 是个什么函数？为什么要用它？（重要）

ready() 函数用于在文档进入ready状态时执行代码。当DOM 树完全加载（例如HTML被完全解析DOM树构建完成时），jQuery才允许执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，解决了跨浏览器的难题。

5、 JavaScript window.onload 事件和 jQuery.ready 函数有何不同？

前者，需要等待dom树加载完毕以及外部资源完全加载完毕后才会执行后续代码

后者，只需要对dom树进行等待

对比：使用 jQuery $(document).ready() 的优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。

6、如何找到所有 HTML select 标签的选中项？

原理：利用属性选择器和 :selected 选择器，结果只返回被选中的选项

<select name="n_select" class="c_select" id="i_select1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
</select>
<scrpit>
 $('[name=NameOfSelectedTag] :selected')
 $('.c_select option:selected');
 $('.c_select').find('option:selected');
    //获取选中的值
    $('[name=NameOfSelectedTag] :selected').text()或者......val()
</scrpit>

复制代码

7、jQuery 里的 each() 是什么函数？你是如何使用它的？

解释：遍历一个元素的集合

//遍历数组
$(function () { 
    $.each([52, 97], function(index, value) {
        alert(index + ': ' + value);//0:52  1:97
});
})
//遍历对象
$(function () { 
    var obj = {
        "name": "张三",
        "age": 18
    };
    $.each( obj, function( key, value ) {
        alert( key + ": " + value );//name：张三  和  age：18
    });
})
//遍历一个元素
$(function () { 
    $.each({ name: "张三", age: 19 }, function( k, v ) {
        alert("键:"+ k ,"值："+v );//键：name，值：张三   和  键：age，值19
    });
})
复制代码

8、你是如何将一个 HTML 元素添加到 DOM 树中的？

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

9、$(this) 和 this 关键字在 jQuery 中有何不同？

$(this) 返回一个 jQuery 对象，可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。

10、如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href?

首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值

$('a').each(function(){
   alert($(this).attr('href'));
});
复制代码

11、如何使用jQuery设置一个属性值?

attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值例如. attr(name, value), 这里name是属性的名称，value是属性的新值

12、jQuery中 detach() 和 remove() 方法的区别是什么?

detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
remove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。

13、利用jQuery来向一个元素中添加和移除CSS类?

利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态

14、使用 CDN 加载 jQuery 库的主要优势是什么？

报错节省服务器带宽以及更快的下载速度
如果已有缓存的库就不会再次下载

15、 `jQuery.get()` 和 `jQuery.ajax()` 方法之间的区别是什么?

ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

16、你要是在一个 jQuery 事件处理程序里返回了`false`会怎样？（可以阻止事件冒泡）

上一篇：嗨，程序员，你知道高级工程师用的搜索引擎吗？

下一篇：超详细的 TypeScript 入门总结

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯