2024年终总结——前端入坑四年，今年实惨

2020最后一天，我在KFC写总结。前几天就想写了，嗯，我是拖延症患者。😔 2020年，换工作、被裁员，体检一堆问题… 回顾我31年的人生，没有重点小学、没有重点初高中、专科学历、没有获奖经历、没有特殊技能、学习能力差、英语不好、拖延… 加上现在算大龄程序员了吧，似乎我的人生拿了一把烂牌，可是我还是想赢啊。

我怎么走上了前端这条路？

---

11年毕业后，在工厂里打工，做技术员，跟IT无关。最好的4年光阴，感觉错付了，但是不后悔，每个人都有不同的经历。然后14年的时候，觉得这么下去我能看见我退休甚至死亡的时刻。所以我觉得我应该学点什么？好让我的人生稍微有点不同。 于是我买了大学接触过的单片机，想做硬件开发工程师哦。

所以要学汇编、学C（事实上我没学好，也能做个计时器啥的…） ，然后放弃了，这个不太好找工作。 然后学Java去了（因为上网找C语言资料的时候），学了一段时间后，大概到SSH框架吧，15年那时候来过一次杭州，面了一个做Java开发的，给了3500的工资（没去，那时候正在跟女朋友谈婚阶段了）。 后面16年初的时候接触了web前端（因为JSP要写HTML，查资料的时候web前端培训的广告挺火的），慎重考虑后，16年6月辞了工作（已经结婚了，老婆也支持），来杭州报了一个线下的培训班学习4个月，挺贵的，我还是觉得自己没学好。然后10月底的时候拿了个7K的offer，感觉月薪过万有希望了。 我就正式入坑了…_

四年的工作经历

---

第一份工作

16年10月份找工作，面了4家公司拿了2个offer，选择了这家做医疗检验的。工作了差不多三年。一开始去公司，改.net项目样式。后面前后端分离用JQ写项目。然后用Vue全家桶来做项目。这个阶段技术成长了很多。 也组建了一个8人的前端团队（特别感谢老板的信任，当初我买房还找他借了20多万周转，现在还欠着这个人情呢）。后面有想法做了一些工程化的工作，对于前端基建方面没有任何认知，团队管理方面也没有管理知识的支撑。

第二份工作

出于提升自己的目的来到这家公司的，结果跟我想的不太一样（虽然公司大了些，开发跟第一家公司也差不多），这一年成长太少了。好在学了算法。参加了早早聊，打开了视野。也在团队中也做了几次分享。

第三份工作

本打算好好工作的，奈何天不遂人愿，被裁了（为了融资扩招，然后裁员，找工作真的要擦亮眼啊）。三个多月的时间，简历被搞花了…

第四份工作（还在面试中…）

可能会选择去大一点的团队吧。

2020，我到底干了啥？

---

工作

7月份之前，主要还是写业务代码，不过从年初到7月，大概面试了有小百人吧，这个对我来说收获还是蛮大的。接触了从应届到工作10年工作经验、大小厂的各种前端大小朋友。最大的感觉就是：

• 工作年限不等于工作能力

• 平台牛不代表你牛

• 基础任何阶段都不能拉下

7月份换工作的时候也不是我本意，本来是申请回到总部办公的。由于其他原因变成了离职。7月底的时候来了新公司（当时Scott建议我去丁香园的，考虑距离问题选择了这家），然后11月被裁了（为了融资扩招，可怜我试用期还没过呢）。内心委屈，毕竟是想好好上班的…

11月到现在，面试了9家大型互联网公司，暂时没有拿到offer，但是很有信心，我一定可以。 这个月面试的感触：

• 基础知识要夯实

• 要有前端广阔的视野，后端要有一定的认知

• 要有某一方向的技术深度

• 性能优化必问

• 算法一定要刷

学习

这段时间刷了很多大厂面试题，做了一个整理，也是为了方便自己复习，有空就可以拿出来刷一刷。

HTML 和 CSS

• 你如何理解 HTML 结构的语义化？

• 谈谈以前端角度出发做好 SEO 需要考虑什么？

• 有哪项方式可以对一个 DOM 设置它的 CSS 样式？

• CSS 都有哪些选择器？

• CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

• 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

• 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

• 请用 Css 写一个简单的幻灯片效果页面

• 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

• 什么是外边距重叠？重叠的结果是什么

…

JS基础

• call 和 apply 的区别

• b 继承 a 的方法

• JavaScript this 指针、闭包、作用域

• 事件委托是什么

• 闭包是什么，有什么特性，对页面有什么影响

• 如何阻止事件冒泡和默认事件

• 添加 删除 替换 插入到某个接点的方法

• javascript 的本地对象，内置对象和宿主对象

• document load 和 document ready 的区别

• “”和“=”的不同

• javascript 的同源策略

• 编写一个数组去重的方法

由于内容较多，为了避免阅读体验仅展示部分面试题，完整版的面试题+解析，【点击我】免费获取,无偿分享给大家，算是一个感恩回馈吧

Ajax

• Ajax 是什么? 如何创建一个 Ajax？

• 同步和异步的区别?

• 如何解决跨域问题?

• 页面编码和被请求的资源编码如果不一致如何处理？

• 简述 ajax 的过程。

• 阐述一下异步加载。

• 请解释一下 JavaScript 的同源策略。

• GET 和 POST 的区别，何时使用 POST？

• Ajax 的最大的特点是什么。

• ajax 请求的时候 get 和 post 方式的区别

• 解释 jsonp 的原理，以及为什么不是真正的 ajax

• http 常见的状态码有那些？分别代表是什么意思？

• 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

…

JS高级

• JQuery 一个对象可以同时绑定多个事件，这是如何实现的？

• 知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?

• 如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit…)

• 前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

• 简述一下 Handlebars 的基本用法？

• 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

• 用 js 实现千位分隔符?

• 检测浏览器版本版本有哪些方式？

• 我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-xbt8lns3-1714133938484)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】