yuadhのinterview_note yuadhのinterview_note
前端基础
软件框架
算法|数据结构
基础学科
系统|工具
项目
面试综合
专栏
GitHub (opens new window)
前端基础
软件框架
算法|数据结构
基础学科
系统|工具
项目
面试综合
专栏
GitHub (opens new window)
  • Browser
  • CN
  • CSS
  • Git
  • HTML
  • JS
  • Optimize
  • OS
  • Project-Others
  • React
  • Review
  • Vue
  • 场景题
  • 备注
  • 专栏
yuadh
2022-12-19

Review

尽量往自己熟悉的地方靠,后端引入到前端,展现出自己的思考能力和思考的过程,比如为啥用dva,因为实验室是使用dva技术栈,以前没用dva时,和现在做一个对比,有什么不同,有什么好的效果,使用口语化表示出来。尽量扩展,知道多少说多少,拿自己熟悉的点靠近。比如promise就是改善,万一第一个请求出错了怎么办,还有什么其他办法做这个请求先后次序问题呢?

# 2022/3/29 美团一面

90min
1

说说你的项目吧

为什么选择Dva,React

React原生route如何跨页面传参?

路由对应同一页面,你是怎么做的

react原生或Dva如何监听路由变化,从而改变页面

路由跳转的过程,浏览器发生哪些变化

性能优化有哪些

为什么通过变量改变CSS样式属于优化?——笨蛋,答错了!

React渲染机制

React生命周期

生命周期有哪些作用?

页面更新后还会执行componentDidMount吗?

不会

componentDidMount只有挂载时才会执行

页面更新render后getSnapshotBeforeUpdate,然后再是componentDidUpdate

setState一定是异步吗?什么时候是同步?

render为什么有时渲染两次?(求你,下次别给自己挖坑了!!!)

React在严格模式下会执行两次render以帮助检查额外的副作用

浏览器输入一个URL的完整流程

浏览器缓存机制

浏览器存储

cookie和session区别

浏览器渲染一个页面运行哪些进程或线程

页面更新,会触发什么进程线程

UDP和TCP区别

TCP为啥可靠?

滑动窗口?

网络层用的啥协议?

计算机网络OSI

进程线程区别

进程通信方式

DOM刷新后一个节点一定是VDOM算法吗

React的事件处理机制本身就是VDOM

根节点就只有root,即使一个节点发生了变化,还是使用的VDOM

原生就不是了

说说事件循环机制

说说输出的结果

哪些是微任务 哪些是宏任务

宏任务:script块,async前两句,setTimeout

微任务:await后面的语句放进微任务队列,promise回调

console.log('1');

async function async1() {
    console.log('2');
    await console.log('3');
    console.log('4');// 放进微任务队列
}

setTimeout(function () { console.log('5'); }, 0)

async1();

new Promise(function (resolve) {
    console.log('6');
    resolve(6);
}).then((x) => x + 6)
    .then((x) => { throw new Error('My Error') })
    .then(() => 6)
    .then((x) => x + 6)
    .then((x) => console.log(x))
    .catch(console.error)

console.log('8');
/**
 1 2 3 6 8 4 my error 5
 
then的第一个 throw 抛出错误,返回的新的promise状态为rejected,所以就不会继续向下执行回调了
/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

解析URL参数

我的思路

// 正则或直接是字符串提取
// https://campus.meituan.com/index?key=value&key2=value2
// {
//     key:value,
//     key2:value2
// }

function abstractPara(url) {
    let qIndex = url.indexOf("?");
    let newUrl = url.slice(qIndex + 1, url.length);
    newUrl = newUrl.split("&")
    let obj = {};
    for (let item of newUrl) {
        let tmp = item.split("=");
        obj[tmp[0]] = tmp[1];
    }
    console.log(obj);
}

let url = 'https://campus.meituan.com/index?key=value&key2=value2';
abstractPara(url);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

反问

# 2022/5/10 字节一面

1h
1

自我介绍

项目功能是啥?

使用的Taro?

小程序的功能?

项目积分有做二次加密吗?

为啥学前端,大一开始的吗

怎么学的前端?看过什么书

实验室用的框架,分别是?

接触过node吗?

项目中跨域如何解决的?

现在用的React哪个版本?

"react": "^16.6.3", //^表示不改变大版本号,可以改变次版本号
    //~ 表示 大版本和次版本号都不能
1
2

React15和React16的区别?

React生命周期钩子

说说Fiber机制吧?

使得 VDOM 生成变成可 打断的

介绍一下HTTP吧?

跨文本传输协议,笨蛋!!名字都记错了

这一块需要多扩展出来

超文本指的啥?

HTTP状态码分别是什么意思?

HTTPS是啥?

HTTP端口 HTTPS端口

HTTPS的认证机制?

盒模型?

下一次把box-sizing属性说出来:规定如何计算元素的总宽高

画一个三角形?

 .div {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-top-color: red;
        border-bottom-color: blue;
    }
1
2
3
4
5
6
7

事件循环

说说前端路由吧?

SPA路由跳转怎么实现的

程序怎么知道哪个路由跳转到哪个页面的?

配置完成之后,Nginx怎么知道去到哪一个页面呢

框架路由怎么实现的

Hooks接触过吗?

可以在if else中使用useState吗?

useState更新数据是浅比较吗?

hooks的依赖了解过吗?callback那些

VUE angular了解过吗?

词法作用域

function fun(a,b){
    console.log(b);
    return {
        fun:function(c){
            return fun(c,a);
        }
    };
}
var d=fun(0);d.fun(1);d.fun(2);d.fun(3);
//undefined 0 0 0
var d1=fun(0).fun(1).fun(2).fun(3);
//undefined 0 1 2
var d2=fun(0).fun(1);d2.fun(2);d2.fun(3);
//undefined 0 1 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14

合并两个有序数组,O(n)实现

直接双指针就行

从后往前遍历,把元素放进nums1数组

let nums1 = [1, 4, 7, 9];
let nums2 = [2, 3, 6, 8, 19, 21];

const merge=(nums1, nums2) =>{
    const m = nums1.length;
    const n = nums2.length;
    let left = m - 1;
    let right = n - 1;
    for (let i = m + n - 1; i >= 0; i--) {
        if (left >= 0 && right >= 0) {
            if (nums1[left] > nums2[right]) {
                nums1[i] = nums1[left--];
                continue;
            } else if (nums1[left] < nums2[right]) {
                nums1[i] = nums2[right--];
                continue;
            }
        }
        if (left >= 0) {
            nums1[i] = nums1[left--];
        } else if (right >= 0) {
            nums1[i] = nums2[right--];
        }
    }
    return nums1;
};
console.log(merge(nums1, nums2))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

时间复杂度 O(m+n)

实现Router.route

注册功能相当于是,监听到对应路由的话,就会去执行对应的函数

window.addEventListener('popstate',callback)
//页面通过history.pushstate 修改路径,更新路径 console.log 对应内容
class Routers {
    constructor(){
        
    }
    route(){
        
    }
}
Router=new Routers();
Router.route('/',function(){console.log('/')});
Router.route('/blue',function(){console.log('blue')});
Router.route('/green',function(){console.log('green')});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

TypeScript用过吗?

# 2022/6/2 知道创宇一面

30min
1

自我介绍

之前实习过吗?

flex布局?

flex元素适应策略?

flex定义元素的排列方式

space-between和space-around区别?

CSS动画写过吗?

项目中使用过canvas绘制圆弧

下来看看canvas绘制图形基础 及 可能踩的坑

Promise常用方法

用过allSettled吗?

ES6新增的数组方法

参考文档:https://es6.ruanyifeng.com/#docs/array

forEach和map区别?

迭代器

interator吗?

没回答上来

for...in和for...of

怎么实现的遍历?

对于没有迭代器的数据结构,可以遍历吗?

项目中防抖咋做的?

ES6的proxy了解过吗

restFul文档怎么规定的api编写

api编写规范有吗?

项目分支有吗?合并冲突怎么做的?

Linux常用指令知道吗?

了解TypeScript吗?

扩展了JS的语法

Hooks了解过吗?和Class有哪些不同

react性能优化有哪些

shouldComponentUpdate了解过吗?

父组件调用子组件的方法

类组件

React.createRef()

ref的函数式声明 和上述一样,这是定义ref方式不同

props自定义onRef属性

职业规划是啥?

反问

# 2022/8/27 百度一面

53min
1

自我介绍

下次可以根据应聘岗位动态调整自我介绍内容

项目同时用到React和Vue,是为啥?

Taro和原生区别,或者说Taro缺点

根据使用经验,原生拥有更多API,还有些小的bug,这些只有自己应用时才去进行调整

原生给的API比较丰富,语法相对来说比较简单,项目层次性没有Taro开发那么深

Taro的性能优于原生?

不然,针对不同场景,我们可以用原生写出性能最佳的代码,但是工作量太大,实际项目开发中需要掌握效率和优化之间的平衡

Taro的优势在于 能让我们书写更有效率的代码,拥有丰富生态的同时,带来不错的性能

你对JS了解程度怎么样?

简单说下JS的闭包

有了解过JS引擎里面的一些详细实现逻辑?

简单说下JS的作用域

局部作用域var声明的变量会提升到全局作用域吗

说一下JS的数据类型

ES6中你常用的语法

箭头函数和普通函数区别是啥?

除了this指向,还有啥区别

Linux中,怎么查看当前目前下的所有文件,包括隐形目录

V8引擎垃圾回收机制?

CSS选择器优先级

盒子模型了解过吗

下次可以再带上自己平时使用的,所接触的,表示自己是真的做过的

你nginx部署遇到过哪些问题?

你简单和我说一下反向代理,你理解的反向代理

反向代理除了解决跨域,还有啥作用

为了安全考虑,可以保护真实服务器IP地址,用代理,不知道我服务器的真实IP地址

还有吗?

负载均衡了解过?

并发访问一台服务器,压力过大,对用户访问实时性较高,减少服务器的承载压力

分发的行为称为啥?

设计全链路的登录模块,你会怎么设计,包含前后端和数据库

token怎么生成

为了加密,使用字符串拼接

密码 +随机字符串

密码放token中吗

加密算法被破解的话,密码也暴露了,反应过来,不需要,万一破解的话,密码就没了

可以使用用户名,加一些随机数,带一些随机性较强的比如时间戳

token不容易被模仿

时间戳还有其他目的吗

token实时性高一些

如何对方不是同时登录,就会失败(不确定)

更高的作用是——登录超时,在一定时间内,让它重新登录

jwt是后端生成的吧

原生小程序遇到哪些坑吗?

怎么做的响应式

那有了解它这块具体怎么做的响应适配吗

移动端布局,有了解吗?

移动端布局如何做到设计稿的高还原度

我看你比较善于总结,这几个项目

哪个对你挑战最高,学到的东西最多

做项目,接触一门新技术,会怎么学习

拿到项目,首先看项目结构,再看别人写的代码,文件作用

结合官网看

遇到不熟悉的,官网没有的,就求助 google和github

自己写的时候,再模仿别人的代码写

画图或者其他方式理清逻辑

第三个项目总结有个页面设计合理性……,能说一下项目中的case

你经常写CSDN吗?

怎么访问谷歌,是搭梯子吗?

项目中,是单独负责项目,还是负责整个项目

从系统设计宏观层面介绍项目,哪个最了解的

系统的设计,业务模块,模块间的关系

了解过项目管理吗

讲一下你了解的项目管理

拿出实施计划后,后面会有闭环反馈吗

有项目总结吗?团体性的总结

明年毕业,没错吧?

公司一个新需求,到交付,角色分别是?他们的职责?

webstorm用的正版吗?

算法:手写二分法

了解过nodejs吗

反问

# 2022/8/31 神策一面

41min
1

自我介绍

描述自己做的项目

React用的哪个版本

使用的class还是hooks

了解过hooks吗?他们有啥区别

useEffect的第二个参数如何理解监听数据改变?

JS

数据类型

看下次能否再多说些

数组API引起数组本身变化

reduce用过吗

ES5实现reduce

为啥不能用箭头函数?

用了箭头的话,this指向?

initial条件判断规范些

如果初始值为0的话,判断方法是undefined

Array.prototype.reduce = function (func, initial) {
    let val = initial!==undefined ? initial : this[0];
    for (let i = initial ? 1 : 0; i < this.length; i++) {
        let ele = this[i];
        val = func(val, ele, i, this);
    }
    return val;
}

let arr = [1, 2, 3, 4]
let ans = arr.reduce((pre, cur, index, arr) => {
    return pre + cur;
}, 0)
console.log(ans)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

304和200区别

expires和Cache-Control字段

last_modified和etag

下次还可以说说他们之间的优先级,还有优势也说一下

过程描述清晰一些

CSS水平垂直居中

反问

# 2022/9/2 百度二面

24min
1

自我介绍

项目是实验室的吗?

XXX教学平台负责的啥

介绍下React+Vue的衔接处理

为啥使用React而不是Vue

开发的项目上线了吗

跳转是路由自己的跳转吗?

window.open跳转有遇到问题吗?

项目比较复杂的点?收获大的点?

性能优化哪些方面考虑

有什么方法做缓存?

了解过CDN

接着说性能优化

简单介绍原生微信小程序

通过什么实现用户信息获取的?

获取用户身份授权信息通过什么API实现的?

最近 微信小程序更新了,取消了一些钩子函数

你知道微信小程序的更新吗

跨页面数据传递怎么做的?

没完全说出来

  1. url
  2. data-属性
  3. 缓存
  4. 全局变量

使用原生微信小程序和Vue的区别或是体验?

ES6的模块加载

CommonJS和ES6

先说为什么有这个东西——这个东西有啥作用——我们平时如何使用的,结合自己的项目经验——具体用法语法,表明自己是有准备的——结合自己的理解

this取值情况

待会有时间吗,三面

# 2022/9/2 百度三面

15min
1

分享一下做项目过程中有挑战或者能体现出技术深度的地方吗?

合适的时间选择合适的工具,正确高效的找出问题出现的原因并解决

之前一直使用React?

React对比式更新和需要注意的地方?

React对比式更新是如何做的,更新过程如何保证性能的?

PureComponent

不能完全靠react官方文档实现性能优化

有了解过Taro如何实现一套代码多端使用?

同一套代码多端运行,底层编译时 生成适应多端的配置文件

git rebase和git merge区别

用过Nodejs吗?

有用过?

项目中写了微前端

# 2022/9/5 京东一面

35min
1

自我介绍

为啥要使用React+Vue一起开发

React和Vue,你怎么看

错误处理?

如果变量状态不对?怎么处理?

项目组几个人?你负责哪部分?

关于状态管理的理解?

你觉得你的亮点是啥?

大学生涯最有挑战的事情

这个过程中,对你影响最大的是

自己对自己的影响占而更多比例

反问

# 2022/9/6 途虎一面

34min
1

自我介绍

如何开始学习前端

手写发布/订阅模式

class myEventEmitter {
    constructor() {
        this.eventObj = new Map()
    }

    On(type, handler) {
        if (typeof handler !== 'function') {
            throw new Error('error')
        }
        if (!this.eventObj[type]) {
            this.eventObj[type] = []
        }
        this.eventObj[type].push(handler);
    }

    emit(type, payload) {
        if (this.eventObj[type]) {
            this.eventObj[type].forEach((handler, index) => {
                handler(payload);
            });
        }
    }

    off(type, handler) {
        if (this.eventObj[type]) {
            let tmp = [];
            let tmpIndex = this.eventObj[type].indexOf(handler)
            tmp = this.eventObj[type].filter((item, index) => {
                return item !== tmpIndex;
            })
            this.eventObj[type] = [...tmp]
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

加个once,只执行一次

set和map

map比对象更适用?

对象和map区别

对象键值对有序吗?map有序吗

weakmap和weakset

JS垃圾回收机制

Class和Hooks区别

React用的demo

有了解过Hooks底层实现吗?

场景题,初始值为0,useEffect中useState(1),useState(2),页面会触发几次?console.log(1)执行几次

会先打印0,再打印两次2

如果换成setTimeout会执行几次呢?

反问

# 2002/9/6 神策二面

35min
1

自我介绍

印象最深项目?深入理解

系统是否能够抽象出来,用于其他的一些赛事

难点体现在哪?

小程序没有跨域问题!!答错了

后台跨域,两个域名吗

一个人既写小程序也写后台吗

状态管理页面,如何维护的代码

C页面中间状态判断,用户体验?为啥不加一个中间层

看前辈的东西,觉得有哪些东西设计的好,哪些觉得不合理?

设计层面可以优化的地方

你是否尝试做过改进

说过对组件封装,让你封装一个form组件,从哪些方面考虑组件封装?设计哪些API

布局方面的考虑呢?这里可以去看看antd如何实现的form

反问

# 2022/9/7 易校一面

自我介绍

哪一个项目最满意

印象比较深刻的地方,业务逻辑

关于代码可读性和可维护性,展开说说

协作通过什么方式

你有主持过会议,或是阶段性成果?

前后端如何合作

使用较多的git命令

如何解决冲突

项目还有比较有意思的地方吗?

跨越是提前知道的,还是遇到了发现的

网页渲染成页面的过程

JS啥时候加载

JS放在head标签呢?

让script标签不阻塞

重绘和重排

哪些操作引起重排

React常用生命周期

了解过ts吗

场景题

一个会员制网站,会员到期弹出提示,过期前一个月弹出,用户关闭后,一周之内再次弹出,如何实现

cookie和localStorage区别

cookie设置域名访问字段

你的理解,前端是做啥的

你自己感兴趣的方向?

通过哪些途径学习前端

简单说一下让你收获较多的项目

React和Vue的设计思想有啥不同吗

反问

# 2022/9/9 易校二面

42min
1

自我介绍

git pull和git fetch

如何解决冲突

了解rebase吗

项目介绍,背景,亮点,遇到的问题,思路是啥,如何解决,收获了啥

遇到的技术难点

关于技术的细节

用了富文本,如何封装组件,考虑哪些事项,暴露哪个API

为啥选择这个富文本编辑器

使用Quill插件遇到的问题

组件是同一封装再使用吗

介绍封装过的组件,比较有意思,有难点的

场景题,滚动加载

封装组件,使用哪些属性,需要暴露哪些API

input需要验证输入内容,//就提示,http://就不提示

场景在JSON编辑器中,传输JSON格式数据,不能有单行注释,有个问题 反向否定查找有兼容性问题

(?<!http:)// 反向否定查找

使用普通正则?

用户在链接中添加 转义字符 ,正则只检测 //(干掉!很麻烦)

(str).replace('/http:,/gm',"") 解决问题,没有全局替换,gm

实现细节?replaceAll()??兼容性问题

indexOf()只能查到第一个

循环,串变为数组

反问

# 2022/9/13 神策三面

40min
1

自我介绍

你对前端的理解?

你刚说到原生,那我问一些原生的

let 相比var有啥区别

var时代如何避免对全局变量的污染

箭头函数好处是啥

什么场景使用箭头函数

没有箭头函数咋做

声明函数不使用箭头函数,如何让函数指向我声明的类,比bind更简单的?

介绍花的时间多的项目

技术选型参与过吗

选择Taro不是你的决策?

使用Taro的原因是啥

Taro不稳定,使用过程中是否遇到坑?

讲讲跨域问题

了解过其他解决跨域的方法

服务端设置Access-Control-Allow-Origin,前端不做代理可以吗?

说的不可以,笨蛋!打错了!

面试官反问了几次,还是没答对,这就是解决跨域问题啊!

对前端的方向和职业规划

反问

# 2022/9/15 途虎二面

44min
1

自我介绍

自己平时会写代码 做项目吗

自己会写博客 记笔记吗

求最长连续不重复字符串长度

function func(s) {
    let arr = [], max = 0;
    for (let i = 0; i < s.length; i++) {
        let index = arr.indexOf(s[i]);
        if (index !== -1) {
            arr.splice(0, index + 1);
        }
        arr.push(s.charAt(i));
        max = Math.max(arr.length, max)
    }
    return max
}

console.log(func('aaacdaaaa'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优化?

没想出来

let list=['zhifuboa/aaaa','xmh/wwwl/wwww'...]
let ans='aaaa/wwww'
一个数组元素都是URL,挨个发送请求,将结果拼接成字符串
1
2
3

实际工作中,时间很紧,除了项目功能完成,还需要做啥

怎么看待用户体验

反问

# 2022/9/15 途虎HR面

33min
1

为啥想要离开四川?

为啥不考研

为啥大三就下定决心找工作了

为什么考虑是否考研不适合

今年就业形势不乐观,当初考虑过吗?或者说还是对自己很有信心的?

介绍下3个项目

哪个项目对个人成长最大?

一个新的领域,如何去学习?

你如何评价自己写的模块代码质量?

还是需要在实际工作中才发现问题吗?

项目中有需要更新的地方?

项目之中发现的问题还是?

是否做过相关的优化?

如何确定先优化哪些?

反问

# 2022/9/16 优赛时代一面

22min
1

自我介绍

Promise常用方法

allSettled和all区别

场景题,2个异步请求,同时发起,整理结果后,再渲染结果

如何使用git做迭代,切分支

master上线了,代码有问题 代码回滚?

React和Vue谁用的多

TS了解吗

如何看待TS,为啥现在还没有往TS走

数组index或重复元素作为key,解释下原理?

数组索引作为key,会造成什么问题?会渲染错误吗?

无法渲染更新后的数据?为啥

实际上,普通列表并未渲染错误?为啥?

除了对比key,还可以对比key啥

代码命名规范

小/大驼峰啥时候用到

# 2022/9/28 同程一面

25min
1

自我介绍

行内/块级元素

哪些是行业/块级?

分别的定义?

link标签是行内?块级?都不算?

link和@import区别

浏览器存储

localStorage容量上限了,但还是想存数据咋整?

滚动存储

跨域存储

原型和原型链

跨域,项目中咋解决的

性能优化需注意的点

性能优化指标?

减少http请求数量?对http2.0来说,这个优化有必要吗

http缓存

微信小程序和web区别

反问

# 2022/9/28 百奥一面

50min
1

自我介绍

最近学过什么新的技术?

若不是秋招,推上一些在学什么

BFC

创建BFC

垂直居中方案

使用兼容性好的属性设置居中(display:inline-block)

一个方块平移的动画,使用CSS还是JS写?

为啥觉得CSS性能好?(如果能够从浏览器进程原理去解释,我觉得会更好)

使用JS如何实现动画?

setTimeout和setInterval区别

除了这个两个API,还有什么JS的API

requestAnimationFrame对比setTimeout好处是?

什么情况会重排,如何避免?

从你的语言中,你可能对性能优化有了解,如果多的话,可以从网络层展开说说

CDN分发原理

避免CDN缓存我的节点资源,如何使用nginx的配置

如果想让CDN缓存呢?会根据哪些哪些字段缓存

什么资源用强缓存,什么资源用协商缓存

了解过什么负载均衡算法

解释下跨域,开发环境和线上环境

开发环境配置的什么?

原生端?(微信原生小程序没有跨域问题)

get请求,后端会收到吗?

什么情况会发送预检请求?

什么时候浏览器会认为发送的请求是复杂请求?

跨域时会携带cookie吗?(不会)

如何在跨域时携带cookie?

VDOM的本质?

MVVM的架构一定会比原生性能更好吗?

React的状态提升了解过吗

diff算法了解过吗

diff主要的算法思路?(后面时间赶,就没咋展开说了)

如果使用index作为key,有什么后果?

有什么途径可以验证页面性能如何?(f12 performance)

是否有通过链表完成过什么东西?

二分查找的时间复杂度?(log2n)

知道是如何推算出来的吗?

x===1&&x===2&&x==3?(valueOf重写方法)

关闭页面后继续发请求

CommonJS和ES6

若没有模块化导出,如何实现作用域封闭?(闭包,自执行函数,let const)

检测用户什么时候关闭页面?关闭页面后再发请求

如果页面关闭后再发请求

# 2022/9/29 同程二面

17min
1

自我介绍

CSS优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div.a{
            color: red;
        }
        .b{
            color: blue;
        }
    </style>
</head>
<body>
<div class="a b">s</div>
<div class="b a">v</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最有挑战的事?自定义页面栈

微信最大层级页面(10层)

如果想要到11层,怎么办

MVVM双向数据绑定实现原理

最有成就感的事?

反问

# 2022/9/30 睿联一面

40min
1

自我介绍

数组内存不够了,但还是要继续push元素咋办?

数组遍历方法

for-of可遍历哪些数据类型

for-of如何遍历对象

哪些数据类型可迭代

JS的作用域分类

如何理解这个"块"字?

for循环的setTimeout输出,var和let定义变量区别

它们算是闭包吗?

setTimeout是异步吗?

setTimeout设置的时间一定是1s后执行吗?

开一个服务,如何在外部电脑访问?

具体咋实现

代码输出,答错了

try {
    new Promise(function (resolve) {
        resolve(1);
        console.log(2);
    })
        .then(function (v) {
        console.log(v);
        throw new Error(3);
    });
} catch (e) {
    console.log(e.message)
} finally {
    console.log(4)
}
console.log(5)
/**
2
4
5
1
Uncaught (in promise) Error: 3
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

输出2后,其他任务进入微任务队列,立即执行finally语句块,然后回头执行微任务,此时不能catch到错误,因为宏任务已经执行完了?

try {
   await new Promise(function (resolve) {
        resolve(1);
        console.log(2);
    })
        .then(function (v) {
        console.log(v);
        throw new Error(3);
    });
} catch (e) {
    console.log(e.message)
} finally {
    console.log(4)
}
console.log(5)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

实现Promise.all()思路

puppeter实现点击付款流程

waitfor实现思路

await后面可以跟setTimeout吗

前端领域很多,有想要发展的方向吗?

反问

# 2022/10/10 水滴一面

35min
1

自我介绍

讲下项目经历

简单说下axios,为啥用axios,axios和fetch区别

fetch能监听网络请求超时吗

JS单线程,针对异步事件如何处理

事件循环的事件队列有优先级吗

宏任务和微任务区别

微任务和宏任务谁先执行

dom渲染时啥时候?

渲染后干啥?

了解nodejs和浏览器的事件循环区别

你表达的是整个事件循环都不一样,是吗

有了解过跨域吗

document.domain+iframe,两个页面域名完全不一样,如何解决跨域

JWT的概念简单说说

JWT和cookie方案区别

使用Vue多还是React对

Vue和React区别

重新学习一个新的框架成本大吗

现在流行的框架,React和Vue的核心思想是啥

反问

# 2022/10/11 联友一面

30min
1

自我介绍

介绍项目,难点,负责部分

用了什么微前端框架吗

2个技术栈间的跳转如何保证用户体验?

ElementUI的el-table,如何实现表格内容宽度自适应?

改变table第二列第二行的input框内容?

vue用的多吗?

react的hook和vue的hooks区别?

ES6新特性

ES6新特性 数组去重

介绍React的diff原理

更新时除了对比类型,还会对比啥?

项目中你是用的什么做的key

React的高阶组件

React中哪几种方式获取dom

反问

# 2022/10/12 百奥二面

50min
1

自我介绍

了解过React和vue区别吗

看过React源码吗

介绍React的diff

项目是从头搭建还是自己搭建

熟悉webpack构建工具吗

webpack 和 Rollup适用场景

vite了解过吗

nginx对资源做缓存的配置

啥资源使用强缓存,啥资源使用协商缓存

跨域除了反向代理,还有啥问题

浏览器跨域的请求会在什么时候中断,会真的发送到服务端呢

package.json和package-lock.json区别

devDependencies和dependencies区别

npm build时会打包devDependencies下的依赖吗

了解过npm有啥缺陷吗

那为啥现在还是使用npm,有替代方案吗

了解过pnpm吗

axios可用在node环境吗?有了解过原理吗?

axios如何区分浏览器还是node环境,库的开发者,判断环境的操作应该由开发者还是提供者判断

单向链表和双向链表区别

链表在前端的应用

手撕 css画三角形,判断空对象的方法,反转链表

项目过程中特别难的地方,如何解决的

用canvas做过其他应用吗

可视化框架是什么

加入你选的话,倾向做后台还是小游戏 动效 3d 2d 酷炫的效果

# 2022/10/13 睿联二面

45min
1

自我介绍

你理解的前端如何划分,技术这块的理解

3个项目哪个觉得更有成就感一点

XXX项目的背景

系统功能上你怎样理解去划分的,你承担的角色

测试 ,沟通 ,部署这方面时间占比和你自己开发占比如何区分

核心的地方,是指什么,可以举个栗子吗

在编码上的核心是指什么

简历提到深入了解http跨域问题,你了解的解决跨域问题的方案主要有哪些

场景题

典型的自营电商的一个解决平台,这种情况你会选择哪种方式解决跨域(小米商城 、苹果等)

为什么使用CORS

使用了JWT吗,jwt和token的差别

JWT有可能破解码

可能从哪个层面去破解呢?比如https层面也不一定是绝对安全的

HTTPS通信,如何能劫持到JWT

浏览器网页是否能实现一个功能,去本地选择视频,浏览器播放

本地选择图片,网页上显示,可行吗

不跟服务端交付,纯本地实现图片在浏览器显示

你如何理解宏任务微任务及其调度

使用过puppeteer进行爬虫测试吗

测试的效果怎么样

除了这个还有什么方法实现自动化测试吗

你总结的前端性能优化规范和方案有哪些

把不太变化的本地存在本地localStorage,假设网站比较大 复杂,localStorage存满之后,可能是别人的项目造成的干扰,你去写入的时候可能失败,类似这种异常,如何处理比较好

开始答的 换种方式存,存在另一个地方或者换个源

站在个人开发这样说,若是站在团队开发如何处理,因为不可能每个人遇到都去处理一下,复杂度上去,团队角度的处理规范规避这样的事情发生

但其实收拢不一定可能,因为有时候不能将所有情况具象化到一个具体的,不是具体的就不知道大小,不清楚是否超预算

对域名进行划分?让专门的业务组规范使用划分的域名

没有规范答案

反问

# 2022/10/13 达达一面

37min
1

自我介绍

使用Taro的原因是啥

最早操纵DOM是JS原生,后面是jQuery,再后面是React使用VDOM操作,你觉得它的优势在哪

体验是研发的体验还是用户的体验

前端的数据类型

null和undefined区别

你觉得typeof和instanceof的区别

对原型链概念的理解

代码输出

function Person(){
	this.name ='DaDa'
}
const people = new Person()
Person.prototype = {age: 18}
console.log(people.name, people.age)
1
2
3
4
5
6

如果将 Person.prototype = {age: 18} 换成 Person.prototype.age=18 有啥区别

你觉得它对实例的影响是啥?

描述下对事件循环的理解

代码输出

setTimeout(()=>{console.log(1)}, 5000)
setTimeout(()=>{console.log(2)}, 1000)
1
2

为什么是这样的,按照刚才的理解,为什么先打印2再打印1?

时间戳一到push进任务队列,你觉得这个事情是谁在做

还记得浏览器由其他进程线程吗

GUI线程和JS引擎线程为啥互斥

JS阻塞DOM解析,CSS会阻塞DOM构建吗?顶部的CSS是否会阻塞底部JS代码执行吗

按照你的说法,理解下这个过程

反问

# 2022/10/14 酷家乐一面

1h22min
1

自我介绍

线程和进程概念有了解吗

说的抽象的概念,可以用浏览器举例说明吗

浏览器的渲染过程,大概讲讲

解析HTML代码时遇到scrip标签会怎样

数组和链表区别

数组和链表分别插入 或查询效率如何

栈和队列区别

对于二叉树有哪些遍历方式

遍历对象属性有哪些方式

for-in和Object.keys()区别

说下对原型链的理解

对于闭包的理解

使用闭包可能造成什么问题

还有其他什么操作会造成内存泄露

了解过哪些ES6新特性

const let和var区别

箭头函数和普通函数区别

除了localStorage,浏览器其他的一些存储方式

大概讲下跨域问题如何理解

简述下React和Vue生命周期

React中setState(1)两次,render触发几次

如果state=1,再次setState(1),render是否会执行

特定条件下,render会触发,只是页面不会变

git常见命令

代码输出

var name = 'window';

var person = {
    name: 'person',
    sayName: function () {
        console.log(this.name)
    }
}

function sayName () {
    var sss = person.sayName;

    sss();

    person.sayName();

    (person.sayName)();

    (b = person.sayName)();
}

sayName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

实现比num大的最小的数字

/*2.寻找比目标数字大的最小数字:

输入:排序后的数组A,包含从小到大排序的数字;

目标数字:num

要求:从数组A中找出比num大的最小数字,若不存在则返回第一个数字;

例如:

输入数组A = [5,11,15,20,100]

目标数字num = 13

则返回15*/
let A = [5, 11, 15, 20, 100];


function solve(arr, num) {
    /*arr.sort((a, b) => a - b);
    for (let i of arr) {
        if (i > num) {
            return i;
        }
    }
    return arr[0];*/

    arr.sort((a, b) => a - b);
    let left = 0, right = arr.length - 1;
    while (left < right) {
        let mid = left + (Math.floor((right - left) / 2));
        if (arr[mid] > num) {
            right = mid ;
        } else {
            left=mid+1;
        }
    }
    return arr[left];
}

console.log(solve(A, 13))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

合并2个有序数组

/*3.数组Union
合并两个有序数组A和B,要求合并后的数组C仍然保持有序。
例如:

数组A = 【2,3, 6, 7, 9】 B=【1,4, 5,8】

结果数组C应为【1,2,3,4,5, 6, 7, 8,9】 */
let a = [2, 3, 6, 7, 9]
let b = [1, 4, 5, 8]

function merge(ary1, ary2) {
    let len1 = ary1.length - 1, len2 = ary2.length - 1;
    let len = ary1.length + ary2.length - 1;
    let bufs ;
    while (len1>=0 || len2>=0) {
        if (len1 === -1) {
            bufs = ary2[len2--];
        } else if (len2 === -1) {
            bufs = ary1[len1--];
        } else if (ary1[len1] > ary2[len2]) {
            bufs = ary1[len1--];
        } else {
            bufs = ary2[len2--];
        }
        ary2[len--] = bufs;
    }
    return ary2;
}

console.log(merge(a, b))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

反问

# 2022/10/14 酷家乐二面

45min
1

自我介绍

892. 三维形体的表面积 (opens new window)

function solve(grid) {
    let size = grid.length;
    let num = 0, area = 0;
    for (let i = 0; i < size; i++) {
        for (let j = 0; j < grid[i].length; j++) {
            let bufs = grid[i][j];
            if (bufs > 0) {
                num += bufs;
                area += (bufs - 1) * 2;
                area += i > 0 ? Math.min(bufs, grid[i - 1][j]) * 2 : 0;
                area += j > 0 ? Math.min(bufs, grid[i ][j-1]) * 2: 0;
            }
        }
    }
    return num * 6 - area;
}
console.log(solve([[1, 2], [3, 4]]))
console.log(solve([[1,1,1],[1,0,1],[1,1,1]])) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

img

反问

# 2022/10/17 睿联HR面

深圳
20min
1
2

自我介绍

为啥选择睿联

项目经历

统筹前端小组困难的地方,或者自己不太擅长的地方

团队合作的时候,最大的难点,或者比较头疼的事情

为什么老师选择你作为组长

平时喜欢看哪些书

介绍一下《明朝那些事儿》看到哪里了,在分享哪些事情

这本书谁写的(当年明月)

目前手上有offer吗

对手上的offer是否满意

期望薪资

哪里人

想过考研吗

班级考研同学多吗

反问

# 2022/10/17 百奥HR面

广州
28min
1
2

什么时候决定走前端这条路

成绩挺好的,是否有想过偏软件开发,比如后端这个方向发展

挑一个项目介绍开发工作流程

项目是0到1还是说在原有基础改进迭代的

前端多少个人

在学姐带领下负责项目哪块功能

项目中0到上线做了多久

你们的组长如何筛选的

开始写代码后面带别人写代码,你觉得角色转换最大的区别是啥(花了哪些功夫去做了转换)

教学平台是实习项目吗

啥时候开始秋招

感觉今年的行情怎么样

成绩不错,有考研想法吗

手上有一些offer在对比了吧

对秋招这份工作会比较关注哪些点

项目对接有遇到难沟通的人或事吗

之前聊过工作氛围吗

期望薪资

对工作地点的想法

秋招导出都会投吧

反问

以下皆为实习岗位
1

# 2022/11/8 先胜业财一面

38min

对H5的新特性

CSS3的新特性

flex实现垂直居中

flex实现两栏布局

ES6新特性

项目中如何处理异步问题?

promise

async/await

使用方式差异和优缺点

promise API用过哪些

all()使用的场景

async/await错误处理

try catch 其实很简单

若后端返回数据结构和预期不一致,咋整

前端存储

用的类组件开发吗

Hooks项目中用过吗

为啥不使用hooks

反问

# 2022/11/10 先胜业财一面

自我介绍

怎样学习前端

前端和后端区别

有看书的习惯,红宝书看完了吗

实习的时候,自己的角色,感受是啥,加班厉不厉害,有啥看法

作为一个新人,在公司最重要的是什么

React的合成事件

setState是同步或异步

React合成事件中实现setState同步怎么办

父组件更新子组件不更新

反问

# 2022/11/11 同程一面

34min

自我介绍

提到了新的技术,简单描述学的新的东西

低代码,微前端

对低代码怎么看,如何理解

做低代码会导致技术退步,你怎么看

低代码在国内是不断探索的状态,2条路如何选,做低代码还是说选择低代码平台项目开发

介绍教学平台项目,啥角色,做了啥功能

react跳转vue的jwt如何传递

token比较长,URL会有长度限制,咋整

使用cookie,切换验证方案

结合前后端和网络系统想到的解决方案

若cookie做验证,整个路径是啥,说一下想法

set-cookie做身份验证

cookie同源限制,建议后端怎么做

cors去解决

若token过期了,还用登录吗

token不能一直有效,定时去查看token

后端做了有效校验,前端如何做才知道token过期了

每次发送请求,后端会返回对应数据,401前端再做响应处理,重新登录

刚说了,会关注社区

使用React哪个版本,为啥不使用17、18

了解过React17、18的新特性吗?

讲下浏览器的垃圾回收机制

对未来实习岗位的预期,平台?行业和业务线?

反问

# 2022/11/11 映宇宙一面

1h25min

实现垂直水平居中

image-20221111163519232

代码输出

var obj = {
    name: 'baidu',
    arr: ['a', 'b', 'c']
}

var obj2 = obj
var arr = obj.arr

obj2.arr = ['a', 'b', 'c', 'd']
obj2.name = 'inke'

console.log(arr)
console.log(obj.name)
console.log(obj === obj2)
console.log(obj.arr === obj2.arr)
console.log(obj.arr === arr) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实现清除浮动的几种方法

代码输出

var MAP =  {
    onclick: function () {

    },
    curry: function (val) {
        return function (z) {
            return val++ + z
        }
    }
}

var getInfo = function (val) {
    return MAP[val]
}
var fn = getInfo('curry')

var a = fn(100)

console.log(a(200))
console.log(a(300))
console.log(fn(100)(200))
console.log(getInfo('curry')(100)(300))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

代码输出

var name = 'oop'

var Person = function (options) {
    this.name = options.name
}

Person.prototype.name = 'Person'
Person.prototype.getName = function () {
    return this.name
}
Person.getName = function() {
    return this.name;
}

var p = new Person({name: 'inke'})

console.log(p.constructor ===  ?) // true

console.log(p instanceof ?) // true

console.log(p.__proto__ === ?) // true

console.log(p.hasOwnProperty('name')) 
console.log(p.hasOwnProperty('getName')) 

var getName = p.getName

console.log(getName === Person.getName) // ?
console.log(getName()) // ?

console.log(Person.prototype.getName()) // ?

console.log(p.getName())

console.log(Person.getName())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

写出React常见生命周期方法

componentWillMount()
componentDidMount()

componentWillUnMount()

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
render()

1
2
3
4
5
6
7
8
9
10
11

渲染顺序

image-20221111163534282

问觉得自己最牛逼的技能是啥?

熟悉this算吗?

那如何修改this指向呢?

熟悉的常用算法

能用JS实现一个吗

实现冒泡排序

function bubbleSort(arr) {
    let size = arr.length;
    for (let i = 0; i < size - 1; i++) {
        for (let j = 0; j < size - 1 - i; j++) {
            arr[j] > arr[j + 1] ? [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] : '';
        }
    }
    return arr;
}

console.log(bubbleSort([2, 4, 1, 22, 9, 22]))

1
2
3
4
5
6
7
8
9
10
11
12

反问

# 2022/11/11 同程二面

30min

自我介绍

100万条数据找到出现次数Top10的数

分段分多少合适?

考虑很多因素,遍历方式

算法的时间复杂度是?O(n)

Map的时间复杂度是?不清楚

做了多久的前端

圆角如何实现?CSS2情况如何实现border-radius?

场景题,看页面有哪些功能?哪些功能的实现是难点?

影视类的内容上传文件的组件,需要考虑哪些内容

上传中途网络中断怎么办,可以怎么做到呢?可能需要哪些事情实现

之前实习中收获最大的是啥

反问

编辑 (opens new window)
上次更新: 2023/02/07, 15:11:55
React
Vue

← React Vue→

最近更新
01
青训营真题day01
02-07
02
01day01-html与css
02-07
03
day02-js
02-07
更多文章>
Theme by Vdoing | Copyright © 2022-2023 yuadh | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式