天鹅到家:
1、es5的继承方式有哪些?
2、vue-router路由模式有什么?实现原理是什么
3、vue-x的核心原理是什么
4、改变this的方法有什么
5、flex布局的一些属性
6、前后端交互时候cookie跨域如何携带
7、axios如何处理携带cookies
8、http的状态码,304、301、302分别是什么意思
9、TCP和UDP区别是什么?
10、TCP是怎么做到保证数据传输正确的
11、前端在XSS、XSF防御是如何做的
12、前端是如何优化的
编程题:
1、
/*
实现一个next()
例如: var next = setup([1, 2,3, 4,5,6, 7])
依次调用 next(),分别输出1,2,3,4,5,6, 7;
*/
function setup(array) {
}
var next = setup([1, 2,3, 4,5,6, 7])
console.log(next())
console.log(next())
console.log(next())
console.log(next())
2、
/*
function ListNode(x){
this.val = x;
this.next = null;
}
输入:
{1,2,3}
复制
返回值:
{3,2,1}
*/
function ReverseList(pHead)
{
// write code here
}
const res = ReverseList(node1)
console.log(res)
美团一面:
1、项目中遇到的挑战
2、301和302有什么区别
3、浏览器在接收到301和302的时候是如何处理的
4、强缓存和协商缓存
5、协商缓存在浏览器中是如何判断的
6、说一下对cdn的理解
7、有cdn的资源和没有cdn的资源有什么区别
8、如何理解二叉树
9、说一下浏览器的同源策略
10、不同的浏览器同源策略有什么不一样吗
11、浏览器安全方面还做了什么
12、https的加密解密过程
13、进程和线程的关系
14、XSS的攻击方式是什么?如何实现过程
15、如何判断一个对象是否有某个属性
16、如何判断这个属性是实例上还是原型上的呢
17、__proto__和prototype怎么理解
18、箭头函数和普通函数有什么区别
19、esModule和commonJs的差异是什么
2021.8.9
方舟医药:
1、写一个深拷贝
2、写一个节流函数
3、vue的每一个生命周期都做了什么
4、箭头函数和普通函数的区别
5、…………忘记了,都是比较基础的题
阿里健康一面:
1、项目亮点
2、前端做过哪些性能优化
3、首屏优化
4、页面向下滚动卡顿的原因有可能是什么?
5、哪些资源可以使用cdn引入,如何判断
6、前端监控有做过什么
7、编程题:
(1) 、实现reverse()传入第一个节点node1,输出node3
const node3 = { val: 3, next: null }
const node2 = { val: 2, next: node3 }
const node1 = { val: 1, next: node2 }
function reverse(startNode) {
while (startNode.next) {
startNode = startNode.next
}
return startNode;
}
console.log(reverse(node1));
(2)、实现一个防抖函数
function debounce(fn, delay) {
let timer = null;
return function (...arg) {
timer && clearTimeout(timer);
timer = setTimeout(() => {
fn(...arg)
clearTimeout(timer);
}, delay);
}
}
青子未来
1、项目亮点
2、tree-shaking如何配置
3、微任务api有哪些
4、vdom-dom的过程
5、webpack配置当一个boundle文件大于1M新打一个文件如何配置
6、grid布局中的fr是什么意思
7、输出什么下面编程题
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
8、
// 这里做了什么操作?如何实现
const arr = [
['a', 'b', 'c'],
['a', 'd'],
['d', 'e'],
['f', 'g'],
['h', 'g'],
['i']
]
// 运行后的返回结果是:
[
['a', 'b', 'c', 'd', 'e'],
['f', 'g', 'h'],
['i']
]
9、配置什么属性可以实现强缓存
10、知道cache-control吗?有哪些属性,什么意思
强缓存、协商缓存
2021.8.10
中科院
都是vue当中比较基础的使用
元保数科
1、minixs混入策略
2、css盒模型
3、清除浮动方式
4、BFC
5、position属性值
6、跨域产生的原因以及如何解决
7、强缓存和协商缓存
8、数据类型的判断
9、深拷贝和浅拷贝的区别
10、object.assisn()是深拷贝还是浅拷贝
11、slice()是深拷贝还是浅拷贝(面试官说是浅拷贝,存在疑问)
12、箭头函数和普通函数区别
13、new操作符做了什么
14、vue响应式
15、computed和watch区别
16、nextTick的原理(高频题)
17、JS事件循环
18、重绘、回流
19、vue data组件中为什么是函数
20、webpack在打包构建有做过什么优化吗
21、组件如何按需加载
国美:
1、react16.3版本废弃了哪些生命周期
2、闭包的理解
3、浏览器输入了url回车之后发生了什么
4、call和apply的区别
5、css中的scope为什么可以实现局部作用
6、父子组件初始化和销毁时候顺序(生命周期)
…………等等,其他都是很基础的vue的一些使用
小米–事业创新部:
1、自我介绍
2、手写promise
3、js事件循环
4、v-if/v-show区别
5、vnode是什么样的
6、vuex的数据流
7、为什么使用mutation改变state?直接修改state会生效吗
8、async/await和promise区别
9、const和let区别
10、webpack打包构建过程
11、loader和plugin区别
12、style-loader和css-loader做了什么
13、css中的px,rem,em,vw,vh
编程题:
1、输出顺序
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(function () {
console.log("setTimeout");
});
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log("script end");
2、手写flat方法
Array.prototype.flat2 = function(num) {
let arr = this;
const target = [];
return fn(arr)
function fn(arr) {
if (num >= 0) {
for (let m = 0; m < arr.length; m++) {
if (!Array.isArray(arr[m])) {
target.push(arr[m])
} else {
num--
fn(arr[m])
}
}
} else {
target.push(arr)
}
return target
}
}
console.log(arr.flat2(3));
// 这个方法还有一点小问题
2020.08.11
百度一面
1、自我介绍
2、项目亮点
3、项目中如何做登陆验证
4、rem原理
5、webpack配置过哪些
6、loader和plugin区别
7、plugin可以替代loader吗
8、webpack有做过哪些打包优化吗
9、说一下浏览器的缓存机制
10、协商缓存有几种
11、多个link标签执行渲染顺序
12、script标签如何加载不阻塞
13、async和defer区别?会有什么后果
14、如何做到不同屏幕下的绝对的1px
15、css的transform和animation区别
算法题,实现一个数组回环
一个数组,输入一个key值,则向后移动key个位置,并且后面的数字移动到前面
例如:
输入:3
得到:5,4,3,1,2
const arr = [1, 2, 3, 4, 5] // 回环数组
function fn(num, arr) {
const length = arr.length;
const handlerNum = [];
num = num > length ? num % arr.length : num;
for (let i = 1; i <= num; i++) {
handlerNum.push(arr.pop())
}
arr.unshift(...handlerNum)
}
fn(3, arr)
顺丰同城一面
1、手写promise.all()
function promiseAll(arr) {
const promisesLength = arr.length;
const resArr = [];
let count = 0;
return new Promise((resolve, reject) => {
for (let i = 0; i < promisesLength; i++) {
arr[i].then(res => {
resArr.push(res)
count++;
if (count === promisesLength) {
resolve(resArr)
}
}).catch(err => {
reject(err)
})
}
})
}
2、公共组件如何共享
3、如何区分宏任务和微任务
4、webpack打包构建过程
5、什么是复杂请求
6、css中的pisition的值
7、css盒模型
8、如何将标准盒模型修改成按照怪异盒模型渲染
9、es6常用的方法
10、编程题:
洗牌
题目:一副牌 52张,打乱顺序,并且计算出时间和控件复杂度
const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5,]
fn()
function fn() {
const lengh = arr.length;
for (let i = 0; i < 52; i++) {
const num = parseInt(Math.random() * 52);
const newArr = arr.splice(num, 1);
arr.push(...newArr)
}
console.log(arr);
}
2020.08.12
360 (一二面一起)
1、手写防抖函数
2、数据基本数据类型
3、如何解决跨域
4、为什么使用代理可以解决跨域
…………现场面试,没有记录,都忘记问了什么问题了
天眼查一面
1、输入url到浏览器渲染的过程,发生了什么
2、浏览器的缓存说一下(强缓存、协商缓存)
3、如何解决跨域
4、说一下回流、重绘 哪些会引起回流重绘
5、vue的数据响应
6、说了一下promise的原理(针对某一个方法讲)
7、算法题:两数之和
领创集团一面
编程题:
实现一个removeClass的方法 删除dom中的class属性
// 源数据
<div class="box" style='width: 100px;'>
123
<span class="box1"></span>
</div>
// 下面的对象代表这个dom结构
const source = {
tag: 'div',
children: [
123,
{
tag: 'span',
children: [],
attrbuits: [
{
key: 'style',
val: 'width:100px'
},
{
key: 'class',
val: 'box'
}
]
}
],
attrbuits: [
{
key: 'style',
val: 'width:100px'
},
{
key: 'class',
val: 'box'
}
]
}
// 目标数据
<div style='width: 100px;'>
123
<span></span>
</div>
const source = {
tag: 'div',
children: [
123,
{
tag: 'span',
children: [],
attrbuits: [
{
key: 'style',
val: 'width:100px'
}
]
}
],
attrbuits: [
{
key: 'style',
val: 'width:100px'
}
]
}
function removeClass(rootNode){
// 之后补上代码
return rootNade;
}