如何准备前端面试

11个月前 ⋅ 0

面试是一种考试，你只要把知识点掌握，然后合理的表达即可

HTML

1. html语义化标签（对语义化的理解）
2. 文档声明的作用？
3. meta标签
4. html5新特性
5. src和href的区别？
6. 行内元素，块级元素的区别？
7. link和@import导入样式的区别？
8. 常用的图片格式和应用场景
9. 常见的浏览器内核
10. srcipt中defer和async的区别？
11. 需要注意哪些SEO

CSS

1. css选择器
2. css选择器权重
3. 盒子模型（标准盒子模型和怪异盒子模型）
4. margin塌陷和margin重叠现象
5. 如何清除浮动
6. css定位属性position（文档流）
7. flex布局（grid布局） （必问，可以看阮一峰老师的那篇文档）
8. css单位的区别？(px, em, rem, vw, vh)
9: display相关属性
10: BFC(高频)
11. 常见布局方式 【 重点 】
- 居中的实现方式（必问）
- 三栏布局：圣杯布局和双飞翼布局
- css画三角形
12. 媒体查询
13. 移动端响应式布局方式
14. less和scss/sass的基本使用
15. 回流和重绘
16. z-index压盖顺序
17. 过渡与动画
18. 伪类和伪元素的区别
19. before和after双冒号和单冒号有什么区别？
20：css3新增了哪些特性？
21: css雪碧图的作用？
22: display:none和visibility:hidden、opacity: 0的区别
23: opacity和rgba区别
24: line-height如何继承？
25. 如何脱离文档流
26: 怎么让chrome支持12px以下的文字
27. 怎么画宽度为0.5px的线

Javascript(全都是重点）

  1. 数据类型（原始数据类型和引用数据类型，堆栈内存），数据类型检测和数据类型转换
    2. 数组常用方法、对象常用方法
    3. 类数组和数组的区别和转换，数组的检测方式，数组去重和排序
    4. 函数执行机制和执行上下文，执行上下文栈（普通函数，立即执行函数，箭头函数、构造函数）
    5. 闭包作用域（变量提升，arguments, 作用域与作用域链，闭包的应用场景，闭包优缺点）
    6. 内存泄漏和垃圾回收机制
    7. this指向的规则（call/bind/apply的使用)
    8. new和构造函数
    9. 原型与原型链的理解
    10. 继承实现的方式和区别？
    11. 深拷贝与浅拷贝
    12. 事件循环机制（任务队列，微任务，宏任务，同步，异步，进程和线程，浏览器线程）
    13. JS异步解决方案（回调函数、Promise、Generator、async、定时器）
    14. DOM选择器
    15. 常见DOM操作（增，删，改）
    16. 事件流的过程（事件冒泡和事件捕获）、事件处理程序（DOM0级事件处理程序和DOM2级事件处理程序）、事件对象、事件委托

    ES6

    1. let、const、var的区别
    2. 块级作用域
    3. 暂时性死区
    4. 解构赋值
    5. 箭头函数和普通函数的区别（this的指向）
    6. Symbol概念和作用
    --------------------
    下面几个的要求可以适当放松
    7. Set和Map数据结构
    8. WeaSet和WeakMap
    8. Proxy
    9. Reflect对象
    --------------------
    10.Promise（Promise的链式调用，Promise的状态、Promise的方法）【必考】
    11.Generator及其异步方面的应用
    12.async函数和await
    13. class基本语法及继承
    14. 模块加载方案比较（CommonJS和ES6的Module）
    15. Iterator和for...of（Iterator遍历器的实现）


    js具体面试题补充

  2. addEventListener和onClick()的区别
    2. new和Object.create()的区别
    3. DOM的location对象
    4. Object.defineProperty()的使用
    5. Array.sort()方法与实现机制
    6. 函数柯里化、组合函数
    7. BOM属性对象方法（scroll/client/offset)
    8. null和undefined的区别
    9. ==数据类型转换的规则
    10. 数组高阶函数、some、every、filter、map、reduce
    11. mouseenter和mouseover的区别？
    12. 伪数组转为数组的方式
    13. 遍历对象属性的方法
    判断是否是对象的私有属性：obj.hasOwnProperty()
    获取对象的所有实例属性和函数，不包含原型链继承的属性和函数 Object.getOwnPropertyNames()
    获取对象可枚举的属性，不包含继承属性 Object.keys()
    14. 合并数组的方法
    15. document和window的区别
    16. Object.is和===的区别
    17. isNaN和Number.isNaN()的区别？
    18. 0.1 + 0.2 !== 0.3
    19. 判断一个变量是数组还是对象
    20. 属性访问时点操作符和[]中括号操作符的区别
    21. 严格模式
    22. 扩展运算符与rest运算符的区别
    23. Object.assign()
    24. Map和普通对象、WeakMap的区别？
    25. 循环语法比较及使用场景（for、forEach、map的区别/ for...in、for...of的区别）
    26. forEach可以中断吗
    27. forEach和map方法的区别?
    28. e.target和e.currentTarget的区别？
    29. 阻止事件冒泡event.stopPropagation()
    30. event.stopPropagation()和stopImmediatePropagation()
    31. HTMLCollection和NodeList的区别？

Ajax

1. Ajax的请求过程(手写ajax)
2. POST请求格式
3. 跨域、同源策略及跨域实现方式和原理
4. JSONP, CORS
5. JSON序列化和反序列化
6. Axios的使用
7. Ajax和Fetch,Axios有什么区别

手写

1. new 【高频 】
2. call/bind/apply
3. Promise.all 【 大厂高频 】
4. instanceof
5. 柯里化函数，组合函数
6. 防抖和节流【必考】
7. Ajax [必考]
8. 深拷贝与浅拷贝【必考】
9. 继承 【必考】
10. 数组去重，数组排序 [小公司必会]
11. 数组扁平化
12. 字符串中出现最多次数的字符
13. 字符串反转
14. 字符串驼峰转换
15. 实现trim过滤字符串空格
16. 事件委托
17. 解析url中的key
18. 正则匹配手机号

Vue

1. vue生命周期(父子组件)
created和mounted的区别
在那个生命周期中获取数据
2. computed/methods/watch的区别
3. v-show和v-if的区别
4. v-if和v-for优先级
5. v-for为什么要用key
6. 组件通信
7. 插槽的使用
8. nextTick的使用和原理
9. 常用的指令
10. scoped的作用
11. 常用的修饰符
12. keep-alive的作用？keep-alive中的生命周期钩子
13. vue如何监听对象或者数组属性的变化
------------
1. 说说你对vue的理解？
2. v-model的实现原理
3. 双向数据绑定的原理
4. MVVM和MVC的区别？
5. 虚拟DOM和diff算法
-------------
1. Proxy和defineProperty的区别
2. Vue3.0为什么要使用proxy
3. Composition API
---------------
1. hash和history模式的区别？
2. SPA单页面应用的优缺点
3. params和query传递参数的区别
4. 路由钩子函数/路由守卫
5. 路由懒加载
6. router和route的区别
7. 编程式导航和声明式导航
--------------------
1. vuex的作用？
2. state/mutation/action/getter/module的作用
3. mutation和action的区别？

Webpack

1. webpack的基础配置和基本概念
2. loader和plugin的不同
3. 常用的loader和plugin?
4. webpack的proxy配置解决跨域问题

网络/浏览器

  1. TCP/IP网络分层
    2. tcp和udp的区别和使用场景
    3. 三次握手和四次挥手
    4. HTTP请求方法
    5. GET和POST的区别
    6. HTTP请求报文和响应报文、请求头和响应头
    7. HTTP状态码 【 高频 】
    8. HTTP缓存 【 高频 】
    9. HTTP1.0/1.1/2.0/3.0之间的区别？
    10.HTTPS和HTTP之间的区别？
    对称加密和非对称加密
    11.对Keep-Alive的理解
    12.DNS查询过程
    13.CDN
    --------------------
    1. XSS攻击及防御
    2. CSRF攻击及防御
    --------------------
    1. 浏览器页面渲染过程
    2. 浏览器缓存 （强缓存和协商缓存）
    3. 浏览器存储
    localStorage、sessionStorage、cookie之间的区别？
    4. 从url输入到界面展示，发生了什么？
    5. 重排和重绘
    6. 浏览器进程
    7. 浏览器同源策略
    ---------------------
    1. 进程和线程之间的区别
    2. 进程通信
    3. 死锁

其他

1. 项目性能优化方案
CDN
懒加载
防抖和节流
回流与重绘
图片优化
webpack优化
代码优化
2. 发布-订阅设计模式
3. 函数式编程
4. git的使用 [重要]
5. 代码规范：eslint

非技术性面试

  1. 自我介绍
    2. 你的职业和技术规划？【 每家公司都会问 】
    3. 为什么学习前端而不是其他方向？【大概率会问 】
    4. 你是怎么学习前端的？
    5. 项目的重点和难点？【必问】
    6. 对于工作地点的考虑
    7. 对于我们公司你还有什么想问的嘛？
    -------------------------------
    1. 实习经历
    2. 期望薪资
    3. 你的优缺点
    4. offer情况

如何准备面试

  1. 根据知识体系分模块、逐个解决
    校招前端面试通常就是 基础布局（html/css） + JS核心概念清楚 + 框架+ 一定的项目经验 + 计算机基础（主要是计算机网络和算法）。对于每一个知识点，你可以尝试进行自我回答，然后在掘金，知乎等平台上搜索对于这个知识点的详细解析（比如BFC、闭包这些难懂的概念），最终形成一个比较完善的回答。

  2. 一定要记录（这里推荐语雀或者飞书的知识库，真的很好用）
    记录会形成一个进度条一样的东西（反馈很重要），比如说我前面提到的那些知识点，你可以打印出来（就几张纸），你可以学完一条，打个对勾，这样你就知道自己复习了什么，还有什么没学。

  3. 对于不懂的知识点多看多复习
    有一些概念就是很容易忘记的，或者很难的，不然也不会有“js三座大山”的说法，对于这些比较难懂的知识点或者经常忘记的知识点（比如布局、手写），最好的办法就是多看多写。概念可以通过看不同的文章去帮助你理解概念，手写则是每几天写一遍（可以尝试白纸默写）

  4. 积极面试
    以面带学，人吧有的时候会很自信，觉得自己对于某一个方面复习好了，很主动的说自己这个方面很了解，但面试官一往深里问，整个人都傻了，有的时候则是觉得自己啥都没准备好，这也不会，那也不会。不去面试是没有发言权的，不去面试一下你都不知道自己有多菜（🐶）。所以多去面试，对于面试结果不要过分在意，即便面的不好也要学会快速调整过来（你答的不好，隔着屏幕呢，面试官又不会吃了你，不行下一家呗，下一个福利更好，下一个待遇更高，下一个还965），及时复盘，因为下一家可能问的东西是一样的。

  5. 面试技巧
    讲概念：用一句话描述是什么
    说用途：结合具体场景，说你的应用
    理原理：梳理该技术是怎么实现的（根据自我能力回答吧）
    优缺点：横向对比其他技术解决方案（可以作为引导面试官的重要手段）

  6. 项目经历

    • 完成了什么具有技术难度或者价值的需求
    • 用了怎样的方案解决了什么样的问题
    • 是否能够独立完成任务