毕业一年以后自学前端，终于拿到offer啦

ゞ浴缸里的玫瑰 2022-10-22 09:16 166阅读 0赞

![eba0954588654ce74103aa8bba434356.png][]

先介绍下个人情况 ，非计算机本科专业，毕业一年以后自学前端，目前在杭州 ，正在跳槽 ，已有offer

如果是为了找工作，首先要准备几点

**1.准备简历**：公司要你有项目经验（没有工作就没有项目经验，没有经验就没有工作，是个死循环），可以在某课，某云弄上一两个项目写到简历上，关键是要能罗列出你做了什么，怎么用的，如何进行思考的！！！ 简历模版参考网上（建议一年，多了兜不住，项目最好别写饿了么，电商网站，jquery相关）

**2.面试**：如果没有工作经验，千万别把重心放在基础上，学会使用工具（框架）是重点，其次是背面试题，举例子css盒模型，垂直水平居中，flex，js数据类型，对数组或对象方法的处理，数组去重，es6 promise ，async ，箭头函数，this，异步，原型链，闭包，vue（数据响应式原理），react（setState同步还是异步），框架的api生命周期，http相关，这些都是问烂的题目（能理解就理解，理解不了就去背，工作了再去理解），面试的时候基础是一部分，还有对项目的理解，就是可以清楚的表达出你简历里面的项目（用了什么技术，实现了什么功能，如何进行思考，遇到的难题）

注意面试的时候 ， 表达能力大于技术！！！， 表达能力大于技术！！！， 表达能力大于技术！！！

**3.工作**：刚入职不要急着写代码，首先要学会看代码，刚工作的时候基础根本不重要（写业务），不要沉迷于基础，你不会写不是因为你的基础差，是因为你没有一个程序员应有的思考方式与习惯（这个很重要），先去看es6相关的（略过原生js，推荐阮一峰），然后边开发边看mdn，学会api的使用，还有就是组件库怎么用（element/antd），一些数据流框架（redux/vuex/mobx/rxjs），如果不会写，就问有经验的人（要先定位问题再去问，尽量养成独立思考的习惯！），学会写表单完成业务之后，再去补你剩下的基础，但是在你刚工作的时候 ，首先要学会如何与同事进行沟通（主管，后端，ui，产品，测试），然后去平衡你自身（学习，工作，生活）

没有编程基础的人，推荐第一家公司用vue/小程序（强烈不建议react！！！，对于没经验的人来说上手成本比vue高几倍）

**4.学习**：如果你是非计算机专业转行，推荐你用我说的方式学习，仅代表个人观点（我只是个普通人，能力强请忽略）！！！

1). 放弃你的基础知识积累，先学会去用工具（vscode，git，脚手架工具，node命令行，理解打包、需求评审、发布上线、生产/开发环境等开发相关的词汇）

2). html和css学会div+css写出基本布局就行，理解行内块元素，position，padding，border，flex会用就可以了（不要仿一个电商网站！！！，毕竟太傻了，面试另说），工作了有组件库的。

3). js 理解数据类型，数组字符对象操作与转换，循环分支，falsy值，与或非即可（原生js不重要，工作以后再补），es6理解模块化，箭头函数，解构赋值，promise（这个非常重要，建议工作之前就理解，推荐阮一峰es6先看一遍），ts看你个人基础，基础好就学，jq直接跳过(2020年以后还用jq的公司不建议去）

4).学vue/小程序(vue2) 理解mvvm，常用的生命周期，父子组件数据怎么传递的，数据流向，回调函数，常用指令，computed/watch（能独立用element写表单就可以找工作了），最好学一学vuex，router等如何使用，cli看个人情况（vue使用上至少能在面试的时候吹牛逼，小程序也一样，v3了解即可，刚入行不推荐），理解响应式原理（至少面试的时候吹牛逼，发布订阅模式，面试必问），能配合使用es6封装简单组件即可

5).webpack/gulp强烈不推荐，你刚入职不会交给你这种任务的 能背面试题吹牛逼即可，不会也行

6).node想学就学，有兴趣的话可以额外学一学koa/express/egg 配合mongo 写一写后端，了解一下前后端的交互，不会也行，用的公司进不去，进的公司用不到

7).算法/设计模式 理解（背下来）冒泡/快速排序，发布订阅即可 能力强的请忽略

8).面试 表达大于技术！！！

9).基础很重要，如果你现在没工作过只是想入行的话，我上面说的话比基础更重要（与后端或产品的沟通 > 对业务的理解 > 定位工作中的问题 > 工作与生活的平衡 >技术）10).平时尽量少去csdn 多去掘金/思否 看一看高赞的文章 或者在git上抄一个开源

如果你是科班出身的并且实习过 建议学好算法与数据结构 再学一学ts 直接投react（公司越大越好，外包或者派遣除外）

**5.其他**、: 目前感觉前端很杂，要学的东西有很多，实在没事可以刷刷leetcode，对于框架的话只把它当作使用工具来学就可以了，vue/react掌握一种就行，建议工作以后把css权威指南，红宝书第四版先看一遍，然后看一看框架的原理之类的或者进阶一点的书，举例子理解vue中的一些设计模式的妙用，看一看v3和v2的区别，怎么用的，vue的一些设计理念，为什么用着这么舒服（所以我用react，hooks真香！），今年打算学学flutter。

最重要的是拥有独立思考的能力，保持对技术的好奇心。

最后，心态很重要。开始找工作的时候很容易各种碰壁，怎么调节心态，继续面试，很重要，最好自己有心理准备，多和同学交流。

我把在面试过程中遇到的面试题和刷过的面试题做了一个整理，希望希望自己绵薄之力能帮助到大家，在金三银四之际，找到一份称心如意的工作：

## HTML ##

1.你是怎么理解HTML语义化  
2.你用过哪些HTML5标签  
3.metaviewport是做什么用的，怎么写？  
4.H5是什么  
5.label标签的作用  
6.行内元素有哪些？块级元素有哪些？空(void)元素有那些？  
7.a标签中如何禁用href跳转页面或定位链接  
8.canvas在标签上设置宽高和在style中设置宽高有什么区别  
9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?  
10.iframe有哪些缺点？  
11.HTML5新特性  
12.HTML5离线储存  
13.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？  
14.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?  
15.HTML与XHTML——二者有什么区别

![260feafe580ee05bb0b8e92a03fe8251.png][]

## CSS ##

1.页面渲染时，dom元素所采用的布局模型,可通过box-sizing进行设置。根据计算宽高的区域可分为：  
2.几种获得宽高的方式  
3.边距重叠解决方案(BFC)BFC原理  
4.拓展各种获得宽高的方式  
5.边距重叠解决方案（BFC）BFC原理  
6.css reset和normalize有什么区别  
7.居中方法  
8.介绍一下CSS的盒子模型  
9.CSS选择符有哪些？  
10.CSS3新增伪类有哪些  
11.什么是cssHACK？  
12.Less/Sass/Scss的区别  
13请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

![c1cd7f485a8154e80455bec392300820.png][]

## JavaScript ##

1.请你谈谈Cookie的优缺点  
2.Array.prototype.slice.call(arr，2)方法的作用是  
3.以下代码执行后，控制台的输出是  
4.简单说一下浏览器本地存储是怎样的  
5.原型/构造函数/实例  
6.原型链  
7.执行上下文(EC）  
8.变量对象  
9.作用域链  
10.闭包  
11.对象的拷贝  
12.new运算符的执行过程  
13.instanceof原理  
14.代码的复用

![ef5df9179e818e6ad3366c7a0572a6ca.png][]

## 浏览器 ##

1.跨标签页通讯  
2.浏览器架构  
3.浏览器下事件循环(EventLoop)  
4.从输入url到展示的过程  
5.重绘与回流  
6.存储  
7.WebWorker  
8.V8垃圾回收机制  
9.内存泄露  
10.reflow(回流)和repaint(重绘)优化

![e6776cc8e3066894acc391b01971f0a4.png][]

## 服务端与网络 ##

1.http/https协议  
2.常见状态码  
3.get/post  
4.Websocket  
5.TCP三次握手  
6.TCP四次挥手  
7.Node的EventLoop:6个阶段  
8.URL概述  
9.安全  
10.HTTPS和HTTP的区别

![c0ab3242b3489e469fe68b314ba01d73.png][]

## VUE ##

1.vue.js的两个核心是什么？  
2.vue的双向绑定的原理是什么?  
3.vue生命周期钩子函数有哪些？  
4.请问v-if和v-show有什么区别？  
5.vue常用的修饰符  
6.什么是vue生命周期  
7.数据响应(数据劫持）  
8.virtualdom原理实现  
9.Proxy相比于defineProperty的优势  
10.vue中key值的作用

![2409130d27615d5ecb518ea86ec75365.png][]

## 算法 ##

1.五大算法  
2.基础排序算法  
3.高级排序算法  
4.递归运用(斐波那契数列)：爬楼梯问题  
5.数据树  
6.天平找次品

![b77e8d5c93c7dd89e127aecf0b0e40b8.png][]

#### 完整版面试题资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

最后的最后，加油。努力就有收获

[eba0954588654ce74103aa8bba434356.png]: /images/20221022/b83e8c17bc784295998b3beab09c8ba1.png
[260feafe580ee05bb0b8e92a03fe8251.png]: /images/20221022/137e0be628e345cfbe9f8bcc238ed64d.png
[c1cd7f485a8154e80455bec392300820.png]: /images/20221022/f355e3fb58114ababcdea431f67f9fc3.png
[ef5df9179e818e6ad3366c7a0572a6ca.png]: /images/20221022/d0ed173e811e467d902caf2c681e43b6.png
[e6776cc8e3066894acc391b01971f0a4.png]: /images/20221022/49e5932d4b1c4bb28f88e8d0ee48c879.png
[c0ab3242b3489e469fe68b314ba01d73.png]: /images/20221022/89052995f3194437bd37cb8854e168e7.png
[2409130d27615d5ecb518ea86ec75365.png]: /images/20221022/962b099f11ad4b64a5b394075c27ec9d.png
[b77e8d5c93c7dd89e127aecf0b0e40b8.png]: /images/20221022/d665c2aff8694bbc8def8f51d397ba36.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=ZEKfV3Ax