2021-11-19 15:55 web前端

关注

渣渣硕的秋招——前端开发入门及面试分享

整个秋招，还是参加了十几场面试，在牛客上看了不少面经，所以自己也记录了一些秋招面试题，希望能帮到别人。

前端开发入门：

我开始看前端相关的东西其实挺晚的，建议大家还是早一点。开始是看的黑马的一个教程，主要是学习html和css的基础知识，讲的挺细的，但大家知道的，很多东西看完之后就忘得差不多了，动手敲才是真理，所以我觉得赶时间的话，可以看晓舟报告的视频，很棒的一个up主，他有介绍如何开始前端学习，从基础知识体系到框架，我几乎把他那一个系列视频都看完了。另外，js数据结构与算法（主要是应对笔试），推荐coderwhy的视频，看他的简书也可以。建议大家边看前端相关的教学视频边练习力扣HOT 100，可以先把简单和中等的题刷了。

除了常见的八股文，其实在面试过程中最容易被问到的还是自己的项目，大家要对自己的项目有一个深入的理解，不能只是跟着教学视频敲一遍代码（我就是这样，接收到的知识都是浮于表面，所以结果不怎么好😑），要多去思考。

面试题合集共享：

（1）前端工程师自检清单及答案整理

（2）一名【合格】前端工程师的自检清单

（3）前端开发面试题

一些面试分享：

有些当时就记下来了，有些就不太记得了，大家见谅哈。

兴业数金：

1. 生命周期函数：

创建实例前后（create），模板渲染到页面前后（mount），更新数据前后（update），销毁实例前后（destory）

2. 插槽及种类：

slot标签，将值插入到相应位置

种类：具名插槽、作用域插槽

l 具名插槽：一个组件中定义多个插槽，用属性name来区分

l 作用域插槽：子组件向父组件传值，slot-scope

字节一面：

1. 数据库的范式：

范式是符合某一种设计要求的总结；

要设计一个结构合理的关系型数据库，要满足一定的范式

第一范式（1NF）、第二范式（2NF）、第三范式（3NF）

2. 浏览器请求的过程

（1）首先对url进行解析，拿到域名字段

（2）在浏览器缓存/本地host文件中查找对应域名的ip，若没有，则发起dns请求中查找

（3）获取到域名对应的ip地址后，发起tcp连接，tcp三次握手后

（4）浏览器发起http请求，服务器回应

（5）浏览器解析响应报文，渲染页面

（6） Tcp四次挥手，断开连接

3. 进程间的通讯方式

管道pipe、消息队列MessageQueue、信号量Semaphore：

线程发生阻塞，忙等待的原因：

线程阻塞：被挂起，不占用cpu（睡眠指令，执行了一个对象的wait()方法，等待相关的资源）；线程忙等：消耗CPU，一直在轮询某个变量直到符合条件

4. 发生死锁的必要条件：

多个并发进程因争夺系统资源而产生相互等待的现象；

互斥（某种资源一次只允许一个进程访问）、占有且等待、不可抢占、循环等待

腾讯一面：

1. 打开订阅号，随便点进一篇公众号的推文，没有白屏，是为什么？（浏览器的推文就有）

补充：首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。

（1）减少head标签的JS堵塞，将script放在body后面

（2）减少head里的css资源，由于css必须要放在head里（否则页面加载会出问题，比如加载完成后又进行DOM重绘），但是css太多，在head里又会阻塞页面渲染，所以我们要尽可能减少css代码量。

（3）压缩和缓存

（4）升级到HTTP/2，对于一个域只进行一次tcp连接，使用多路复用，传输多个资源（同时加载）

2. 重绘与重排：

重排负责元素的几何属性更新，重绘负责元素的样式更新

重排必然带来重绘，但是重绘未必带来重排

建议：

多刷面经，应对一些基础问题；

大前端思维的培养：端的开发；各种网站的设计；后台逻辑；安全方面

具体的攻击手段以及防御措施

问题与解决的思路。

北森一面：

1. 介绍项目：实现的功能，用到的vue的知识点；两个网页怎么传递数据？vue的组成；vue怎么进行路由导航？

两个网页传递数据：可以通过URL带参数的方式（获取上一个页面的url：window.location.host），可以通过post到服务端再返回参数给下一个页面，可以通过session，cookies传值等；

路由导航：（1）.使用a标签的href实现页面跳转。（2）使用声明式导航router-link（3）使用编程式导航 router.push()

2. Vue组件传值，共享数据的状态state，被问懵了

3. Vue元素显示设置：v-if/v-show?

4. V-model，双向数据绑定的原理

5. Vue的生命周期函数

6. 对于js有了解吗？这种要把握机会，往熟悉的地方领

7. Es6新增的，其中的promise没答好，还给自己挖了一个回调函数的坑

8. 原型链是什么？

9. Css实现垂直居中，

10. 弹性布局flex，属性有哪些

11. 定位的种类，漏了固定定位

12. 对于css有了解吗？Css3新特性:新增的选择器、盒子模型

13. 反问：对vue的文档要熟悉，对于自己的项目，要深入思考。

网易有道一面：

1. 三列，左右固定，中间自适应宽度（代码呈现）

2. 盒子垂直居中的方式（越多越好）

3. Flex属性

4. 移动端，自适应布局

5. 显示与隐藏元素

6. Css标签：伪类选择器

7. 跨域是什么，解决跨域的方法

8. Js数据类型

9. Symbol具体是什么？

10. Vue2与vue3的区别

11. 两个升序数组排序为一个升序数组

12. 反问？html，css，js基础知识；框架的使用与原理；新的概念

海康面试：

1. Css，display属性

布局方式：display:flex(弹性布局);display:grid（流式布局）

元素显示模式的转换

2. js数组的几种方法：

改变数组的：push(),pop(),unshift(),shift(),reverse(),sort(),splice(),

不改变原数组方法:concat(),join(),toString(),slice()

3. 排序算法有哪些，性能比较好的？

冒泡排序O(n²);选择排序O(n²),直接插入排序；希尔排序，快速排序O(nlogn),归并排序

字节电商：

1. css伪类，伪元素的区别，伪元素画圆点

伪元素：设置元素指定部分的样式；伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容

::first-line 伪元素用于向文本的首行添加特殊样式；::first-letter 伪元素用于向文本的首字母添加特殊样式； ::before 伪元素可用于在元素内容之前插入一些内容； ::after 伪元素可用于在元素内容之后插入一些内容； ::selection伪元素匹配用户选择的元素部分（鼠标选中的）

伪元素创建的元素是行内元素

伪元素画圆：