2022秋招前端面试题集结，刷完之后，助你快速拿offer,获高薪

置顶小小飞肖

已于 2022-02-22 11:47:30 修改

阅读量708

点赞数 2

分类专栏：面试文章标签： vue.js javascript html5

于 2019-07-07 20:38:12 首次发布

本文链接：https://blog.csdn.net/qq_32766999/article/details/95026933

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.link与import区别

二者区别：

link属于html标签，而@import是css提供的。
页面被加载时，link因为是HTM标签, 把认会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

面试题一：

1.浏览器缓存与协商缓存主要是利用那两个点？

2.vue中computed与mehod区别？

3.v-if与v-show区别？

4.什么是session?session在客户端还是服务端？

5.原型链继承的弊端？

6.http协议的组成，从url地址栏输入url地址按回车键之后，详述背后的机制原理？

7.vue常用的指令？

8.vue按需加载？

9.http与tcp区别？以及在具体的那一层级。

面试题二

主要是js读程序

var x = 1, y = 0, z = 0;
var add = function (x) {
     return x = x + 1;
}
y = add(x);
function add (x) {
     return x = x + 3;
}
var add = function (x) {
     return x = x + 5;
}
z = add(x);
console.log(x, y, z);

此题答案是 1，2，6

y=add(x) 这儿有一个坑，首先是你认为return x = x+1 所以y=x=2 这样是错误的想法，因为在函数add里面，x只是一个参数，一个形参，这个参数可以用任何字符来表示，所以不要被它迷惑了双眼也可以表示为 y=a=2,所以x的值依旧是1，

与此y=2 ,z=6

var x=1,y=0,z=0;
var add=function(x){
return x = x+1;
}
y=add(x);
function add(x){
return x=x+3;
}
z = add(x);
console.log(x,y,z);
//输出1,2,2

这个，在js进行编译的时候，就把这个function add(x){
return x=x+3;
}放到最上层了, x,y,z=undefined add = function(x){return x+=3}

然后开始执行赋值，x=1，y=0,z=0.然后add=x+=1，然后执行y=add(1),z=add(1)

变量声明和函数表达式都会提升声明，但是函数表达式不会提升函数实体。函数声明会把函数实体一起提升了

词法作用域，在声明的时候找，所以foo上面一层的a就是window的a

console.log('A');
var promise = new Promise((resolve, reject) => {
    console.log('C');
    setTimeout(() => {
        console.log('D');
        resolve();
        reject();
        resolve()
    }, 10)
    setTimeout(() => {console.log('H');});
})
promise.then((res) => {
    console.log('E')
})
promise.then((res) => {
    console.log('F')
})
promise.catch((res) => {
    console.log('G')
})
console.log('B')

输出结果

A
C
B
H
D
E
F

题解如下：a,c,b，都是同步的，在promise里，先有一个setTimeout，先放到event table里，因为第一个10ms执行，所以会等待10ms之后注册回调函数。第二个setTimeout是立即执行的，所以会立即往event queue里注册回调函数。等同步任务执行之后，会根据event queue里的入栈顺序来执行，所以h在d前面，等d执行完，then才会有那些回调，所以，e，f就正常按顺序执行了

4.js中new操作符具体做了什么，用代码解释 ,可以结合原型链来理解

例：var obj = new Base();

该步一共做了三件事：

即 var obj = {};

obj.__proto__ = Base.prototype(每个对象都有一个私有属性_proto_,指向构造函数的原型对象);

Base.call(obj);

第一行，我们创建了一个空对象obj

第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象

第三行，我们将Base函数对象的this指针替换成obj。

面试题三快手面试题以及笔试题（笔试题已整理）

1.url从地址栏输入地址，一系列的变化过程，包括页面加载js，css的顺序，以及css中如果有图片加载顺序

2.promise.all（），是所有promise都成功，才执行的，如果封装一个promise.errAll,即使所有的都失败如何封装

可以封装方法比如new promise(()=>{}).then(()=>{throw error}).catch(()=>{

resolve()}) 将正确的与错误的颠倒

3.parseInt(),里面有几个参数，具体的参数意义，0.125488043 转换成12.54%,有没有比较好的方法？(Math.floor(0.1857874903*100*100)/100 +‘%’

4.301与302区别？各状态码？

5.git merge与git rebase区别？

6.echarts 就是把图像中的线段名称与数值以表格的形式展现即key:value，用到哪一个工具类；

7.typeof typeof typeof [] 结果是string 然后延伸 tyoeof本身是什么？是对象还是啥？

8.判断是数组的3种方式 ?、

9.[1,2,3,4,5].map(parseInt)

面试题四字节跳动校招面试题

1.es6新特性

利用const定义一个对象，可以修改对象的值吗？可以修改

2.变量提升与函数提升？

3解释vue双向数据绑定？

4解释虚拟dom? react 中的diff只是一种手段，对其进行渲染效率的提升，此题主要是去讲解真实dom的映射。讲基础结构

5.解释jsBridge的原理？

6.事件代理？三个阶段事件捕获，目标，事件冒泡阶段

7.require原理？require外面包裹一层盒子，require 对其进行传递参数？

8.export 在页面中可以书写多次吗？可以

9.export default 抛出是什么答案是object

面试题五网易web前端提前批试题

let a = 0;
const obj = {
a:1,
b:function(){
console.log(this.a)
}
}
const obj1 = {a:2}
const fun = obj.b
fun()
fun.apply(obj)
fun.bind(obj1).apply(obj)
const fun1 = fun.bind(obj1)
new fun()

结果为undefined 1 2 undefined

在使用 bind() 了之后，会创建一个新的函数，而这个函数必须手动调用才能触发。而且新函数的this永远指向bind的第一个参数，不管它被调用了多少次,被谁调用。

let和const在进入代码段的时候，进行变量提升，放到当前代码段的作用域链[[scoped]]的Script里。和我们平时说的全局变量Global变量同级。let 和const 的变量提升，也是暂时性死区的开始，直到遇到该变量的let或者const 声明之后，把该变量从死区的中释放。

进入作用域，创建执行上下文，初始化变量对象，在初始化变量对象的时候，会把一些变量提升，let 和const也会提升，提升的同时出现暂时性死区，也可以理解成把变量放到内存的某个地方，从第一行到let或者const声明该变量之间就是死区，该变量被let声明之后，就从那个内存里释放了

是因为this是全局变量不是script

面试题六

拼多多笔试题

读程序题

1.var num1 =1,num2=2;

function cal(){

var num1=10,num2=20;

console.log(this.num1+this.num2)

}

var calBind = cal.bind({num1:100,num2:200})

new cal();

cal();

new calBind();

calBind();

NaN
3

NaN
300

2.Array.prototype.method = function(){
console.log(this.length)
}
var myArray =[1,2,3];
myArray.name = 'array';
for(var value of myArray){
console.log(value)
}
for(var index in myArray){
console.log(myArray[index])
}

第一个for的结果如下
1
2
3

第二个for的结果如下

2
3
array
ƒ (){
console.log(this.length)
}

选择题

1.amd与cmd区别

2.函数声明提升优先级与变量提升优先级比较

3.鼠标点击时的超链接样式怎么设置

4.div>p 的意义

简单题

1.匹配正浮点数与负浮点数的正则

2.flex布局属性以及属性值的含义

3.元素之后插入内容可以用伪类吗