96道前端面试题，从基础到源码统统帮你搞定

ゞ浴缸里的玫瑰 2022-10-05 10:57 94阅读 0赞

## 一.我们为什么需要CSS？ ##

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

*  将HTML页面的内容与样式分离。
 *  提高web开发的工作效率

#### 一面 ####

*  css 如何实现垂直居中？
 *  position 有哪几种？分别说一下对应的效果和用法
 *  css 选择器优先级
 *  js 原型链，问了js 如何创建对象
 *  页面渲染和响应 式
 *  MVVM 和 MVC的区别
 *  Vue 生命周期，在哪个阶段可以获取页面 dom 信息
 *  Vue 的组件通信 ，聊到一些网络相关
 *  TCP 和 UDP 的区别
 *  TCP 的三次握手和四次挥手
 *  promise 有哪几种状态
 *  手写一个 promise
 *  算法题：最长公共前缀
 *  算法题：多层数组嵌套降级

#### 二面 ####

*  问项目的情况  
    根据项目问了一点我的工作，接触前端有多久，在每个项目里学到了什么，没做项 目的时候学了什么，怎么学的这样的问题，然后开始就是实战写代码
 *  css 实现  
    给一个具体的需求写 html+css，需求大概是模块水平垂直居中对齐+不 定高，按文字自适应+带灰色遮罩+弹出动画
 *  css 的动画怎么做
 *  flex 有哪些常用标签
 *  position 的属性影响
 *  具体实现，给一个 ul 下面插入 100 个 li 应该怎么插入，如何优化 dom 操作
 *  具体实现：有一个有一百万个 url 的数组，如何从这一百万个 url 里获得资源
 *  算法：判断链表内是否存在环

总体上字节的二面特别看重具体实现，会说思路不够，需要真正的写出可以实现 的代码来。一般算法就是 leetcode 的 easy/medium，不会太难，一些基本概 念也会挖的比较深，总体上说还是很有难度。

#### 三面 ####

之前都是先问基础，这次很难得的从一面就开始问项目了！

*  http 请求的几个常见方法
 *  说下 get 和 post 的区别
 *  get 和 post 的具体应用场景和一些注意事项
 *  线程和进程的区别
 *  说下跨域
 *  http 简单请求是什么意思
 *  浏览器缓存策略
 *  TCP 和 UDP 的区别
 *  了解流媒体对 UDP 稳定性的优化处理吗
 *  js 的基本数据类型
 *  哪些操作是异步的？
 *  promise 的一些基本概念
 *  async await 的一些用法
 *  js 继承的几种方式
 *  排序算法的时间复杂度空间复杂度
 *  做个题，实现链表尾部插入新节点
 *  算法题：版本号判断

#### 四面 ####

*  大概问了一些项目相关问题，比如印象比较深的技术点，怎么学习的和解决 的 balabala
 *  css 的垂直居中和水平居中
 *  css 选择器优先级
 *  html 的 dom 树如何生成的
 *  小程序和 pc 页面有什么差异（因为项目里写了小程序）
 *  项目里的一些性能优化的点
 *  做个题，看代码是否能完成输出，如果不能就说下几个改的点（题太长了没记）
 *  代码实现：设计一个任务队列，有 on，trigger 和 off 方法，分别完成注册 事件触发回调，触发当前事件全部回调，和取消当前事件的任务队列的功能

#### hr 面 ####

*  看了我的投递记录发现我来字节面了这么多次问我这几次有什么进步，学了什么
 *  字节的面试体验怎么样
 *  有没有考研的打算，为什么？
 *  介绍一下简历上的三个项目，为什么要选这三个项目进行展示？
 *  在项目中学到了哪些东西，有什么心得体会
 *  怎么学习前端的，怎么规划未来学习
 *  小组合作中的压力怎么应对的，如果要面对失败会怎么调节
 *  大概什么时候可以来，可以来实习多久？

> 看了上面的面试题，下面也分享一些大佬搜集整理的前端面试题，上面的题目大多都有包含。PDF文档整理有很多，篇幅原因就不都列举出来了。

### 最后 ###

**给大家分享一些关于HTML的面试题，有需要的朋友[可以戳这里免费领取][Link 1]，先到先得哦。**

![e9c80426d2bd6c732a4a53ff74a52e1a.png][]  
![381fc11eb902926b75c451e2fb1e851b.png][]

h)，先到先得哦。\*\*

\[外链图片转存中…(img-uJxnKc59-1623148346121)\]  
\[外链图片转存中…(img-XzDJHnh9-1623148346124)\]

[Link 1]: https://docs.qq.com/doc/DSlNuUUFPWmpZVlJh
[e9c80426d2bd6c732a4a53ff74a52e1a.png]: /images/20221005/2e1825cd90664cf69050373526e604bc.png
[381fc11eb902926b75c451e2fb1e851b.png]: /images/20221005/96b6841ca1bf4a60b34687f4b6ddb975.png