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

写在前面

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 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执
行几次事件，然后会先执行冒泡还是捕获
......

Vue

vuex 有哪几种属性？
vuex 的 State 特性是？
vuex 的 Getter 特性是？
vuex 的 Mutation 特性是？
Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中？
什么是 MVVM？
mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
vue 的优点是什么？
组件之间的传值？
vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？
vue 如何实现按需加载配合 webpack 设置
Vue 中引入组件的步骤?
指令 v-el 的作用是什么?
在 Vue 中使用插件的步骤
vue 生命周期的作用是什么
vue 生命周期总共有几个阶段
第一次页面加载会触发哪几个钩子
DOM 渲染在哪个周期中就已经完成
简单描述每个周期具体适合哪些场

浏览器

跨标签页通讯
浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8 垃圾回收机制
内存泄露
reflow(回流)和 repaint(重绘)优化
如何减少重绘和回流?
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
localStorage 与 sessionStorage 与 cookie 的区别总结
浏览器如何阻止事件传播，阻止默认行为