前端工程师：现在是最糟糕的时代，也是最好的时代

系统管理员 2022-10-27 05:24 198阅读 0赞

![图片来源于网络，与文章无关][9f8387e239cda667e42a74cc8d0450e9.png]

**从行业角度看，前端最糟糕的时期已经过去了；从开发者角度看，现在确实是个糟糕的时代。**

首先从前端行业的发展历史来看，前端正在变得越来越成熟。如果和过去相比，之前的前端才是真的糟糕。如果我们从未来的视角来看现在，那么现在也算是糟糕的，但是其糟糕程度也远不如过去。

十年前正处于前端的石器时代，那时的前端开发用一个词语来形容就是“刀耕火种”。糟糕到什么程度呢？

*  前端开发者的噩梦：兼容IE6。IE6发布于2001年，而ES5直到 2009年才定稿。IE6除了可以运JavaScript 之外还可以运行VBScript、JScript（一个Javascript的方言）。
 *  当时有一个只能运行于IE的技术叫 “ActiveX”，所以很多银行和政府的网站只能用 IE 浏览器打开，甚至只能使用IE的特定版本打开。
 *  还有一个技术是目前已经被淘汰的 Flash。

![6d880fb227e274a03ec4adf911932e9f.png][]

我们现在所说的前端通常这是包括了HTML、CSS、JS，甚至Node.js、SVG 等和Web UI层相关的开发技术。那么在没有ES6，没有HTML5，没有CSS3的时代，前端到底糟糕到什么程度呢?

糟糕到当时甚至没有”前端工程师”、“前端开发者” 这个词，那时这个岗位被称为“切图师”、“切图仔”。在大部分公司中，HTML和CSS都是由设计师来做，页面中动态效果比如鼠标划过显示菜单、轮播图等则是由后端开发者来完成。后端JSP、PHP 开发者兼职写jQuery是当时的普遍现象。

我们再对比一下同时期的后端，各种工具链和技术都已经非常成熟了。那时的前端也只是作为了后端MVC架构中的View层，在没有前后端分离的时期，View层也是由前端和后端一起开发的。现在我们开发前端项目都会涉及到打包、压缩、混淆等，而在之前虽然大型前端项目还是少数，当涉及到几百个js文件的时候，前端也会使用到打包、压缩、混淆等工具，而这些工具当时几乎都是由Java提供的，流行的有雅虎开发的YUI Compressor、谷歌开发的Google Closure Compiler。

前端经过这么多年的发展，尤其是Node.js发布到成熟的这几年，已经变得非常成熟，而“糟糕"的时代也已经成为了历史。

![e3de6f11fdcdc328516dc3878900e431.png][]

另一个角度，我们作为前端开发者，现在也许是个糟糕的时代。以前的开发技能经过这么多年的发展已经不再适用。前端逐渐规范的后果就是淘汰了一大批“古典/保守”前端开发者们，而抓住风口的开发者们已经实现了弯道超车。

常言道”乱世造英雄"，但是常言也道“乱世埋枯骨”。在Node.js出现之后，前端可谓是当时最有“钱途"的行业之一。目前这个风口也应关闭了，所以对很多人来说，现在是一个糟糕的时代。

如果我们看一下大厂，以阿里为例，基本上前端的那些高P都是在2010年之后搭着Node.js的快车一路升上来的。Node.js 不仅拓展了前端的边界,还提升了前端的研发效率。

> 有人说只有糟糕的东西才需要不停的推倒重来。

这句话我不认同，我觉得这句话的原因和结论都有问题。首先颠覆的不是前端，而是前端的某个技术和工具；再者并不是因为糟糕所以颠覆，而是因为前端具 有生命力所以才有颠覆性的创新和改变。我们看看后端，以前Java开发都是用Eclipse, 而现在几乎清一色的IDEA,那么我们是否能得出结论Java在不停的推到重来，所以后端处于-个糟糕的时代。显然不能。

工具的更新换代才能带来前端的繁荣。我们来讲一个真实的故事吧。

英国工业革命时期，机器生产逐渐替代手工劳动，导致大部分人失业、工资下跌。失业了就没事儿干了，于是他们开始思考思考:

我们为什么失业呢?因为工厂不需要这么多人。

厂为什么不需要这么多人呢?因为机器可以做很多事。

如果没有机器呢?那么工厂就多招人。

终于找到失业的原因了，于是莱斯特郡一个名叫卢德的工人第一个捣毁织袜机，进而在全国掀起了砸毁机器的浪潮，无数工人涌入工厂将机器砸毁。2333333，这场运动被称为"卢德运动”。而这次运动导致很多工厂被迫停工，加剧了更多工人的失业。最终英国政府制定律法，并对卢德分子进行镇压。

![c255c97f7f2ff1cee9e604849718daa4.png][]

在故事中，"机器生产逐渐替代手工劳动” 是一次生产力的变革，作为类比，前端技术的更替也正是生产力的变革，对比一下 React/Vue开发维护几万行代码的项目和用jQuery开发维护几万行代码的项目，哪个更容易。是技术上的差距吗，也不尽然，只要规划的合理，jQuery 一样可以开发大于大型项目的工具链了。

我之前是一名Java开发者，直到Chrome、Node.js 发布后我对前端越来越感兴趣，后来转行称为前端开发者，我经历过前端最糟糕的时代一一兼容 IE5.5，也搭着前端的快车实现了工资爆炸式增长。当我刚学会最流行的Prototype库时，jQuery 出现了；当我刚学会Underscore后，Lodash出现了；当我庆幸自己没学Grunt而直接学了Gulp时，Webpack出现了。我大概在2015/2016年实现了自己的第一个目标:工资翻10倍。

不要疲于追求新的工具，给自己明确清晰的定位,然后去学习不同领域的相关知识。我入行前端以来就一直深耕前端工程化以及前端性能两个方向。而新工具新框架出现后,不应该仅仅停留在作为一个框架的使用者，而应该考虑框架为什么出现，解决了哪些痛点，如果没有XXX框架的出现我是否能解决类似的痛点…

总而言之，说的俗一点就是，目前前端处于糟糕的时代,是因为前端开发者的工资无法向之前一样爆炸式增长了。但是现在也是最好的时代，前端开发者可以靠综合能力获得更高的薪酬，如何将自己的前端知识转化为生产力，在公司中，是做到了“为研发提效，为业务赋能”，还是仅仅只会某个框架的知识，天天写bug，找bug，改bug。

对一些开发者来说感觉目前前端太糟糕，还有一个原因就是工具迭代太快，而又没有大牛来指导，面对众多的前端技术感到眼花缭乱，不知道如何学习，更不知道该学习什么。

然而网上的知识点都比较零碎，不成体系，自己看书但缺乏实践，看了不少的知识但是在实际项目中却依然使用不到。干了几年之后提升也不是很多，甚至遇到了职业的天花板。

> **想学习前端web的朋友，可以加入这边的技术交流裙，[点击此处蓝字进群][Link 1]，裙里从学生到大佬都有，还有一份2020年大厂面试题真题合集（含答案）可以免费获取，不见不散哦！**

### HTML ###

*  浏览器页面有哪三层构成，分别是什么，作用是什么?
 *  HTML5的优点与缺点？
 *  Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
 *  HTML5有哪些新特性、移除了哪些元素？
 *  你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
 *  每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
 *  说说你对HTML5认识?（是什么,为什么）
 *  对WEB标准以及W3C的理解与认识?
 *  …

![c7c1f19592b94db3b38479b49e74936b.png][]

### CSS ###

*  解释一下CSS的盒子模型？
 *  请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
 *  请你说说CSS有什么特殊性?（优先级、计算特殊值）
 *  常见浏览器兼容性问题与解决方案？
 *  列出display的值并说明他们的作用？
 *  如何居中div, 如何居中一个浮动元素?
 *  请列举几种清除浮动的方法(至少两种)?
 *  block，inline和inlinke-block细节对比？
 *  什么叫优雅降级和渐进增强？
 *  说说浮动元素会引起的问题和你的解决办法
 *  你有哪些性能优化的方法？
 *  …

![095da229ed20be484cb335334ed1797f.png][]

### JavaScript ###

*  js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
 *  js拖拽功能的实现
 *  异步加载js的方法
 *  js的防抖与节流
 *  说一下闭包
 *  说说你对作用域链的理解
 *  JavaScript原型，原型链 ? 有什么特点？
 *  请解释什么是事件委托/事件代理
 *  Javascript如何实现继承？
 *  函数执行改变this
 *  babel编译原理
 *  函数柯里化
 *  说一下类的创建和继承
 *  说说前端中的事件流
 *  如何让事件先冒泡后捕获
 *  说一下图片的懒加载和预加载
 *  js的new操作符做了哪些事情
 *  改变函数内部this指针的指向函数（bind，apply，call的区别）
 *  Ajax解决浏览器缓存问题
 *  …

![4a5419a1c90ddbb21a2fdcf130577364.png][]

### Vue ###

*  Vue中 key 值的作用
 *  Vue 组件中 data 为什么必须是函数？
 *  vuex的State特性是？
 *  介绍一下Vue的响应式系统
 *  computed与watch的区别
 *  介绍一下Vue的生命周期
 *  为什么组件的data必须是一个函数
 *  组件之间是怎么通信的
 *  Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
 *  Vue如何实现按需加载配合webpack设置
 *  简单描述每个周期具体适合哪些场景
 *  scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
 *  聊聊你对Vue.js的template编译的理解？
 *  Vue 路由跳转的几种方式
 *  Vue如何实现按需加载配合webpack设置?
 *  Vue的路由实现：hash模式和history模式
 *  Vue与Angular以及React的区别？
 *  Vue路由的钩子函数
 *  什么是Vue的计算属性？
 *  …

![0432b8e539325b94948089383d0bfa8c.png][]

### React ###

*  介绍一下react
 *  React单项数据流
 *  react生命周期函数和react组件的生命周期
 *  react和Vue的原理，区别，亮点，作用
 *  reactJs的组件交流
 *  有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
 *  项目里用到了react，为什么要选择react，react有哪些好处
 *  怎么获取真正的dom
 *  选择react的原因
 *  react的生命周期函数
 *  setState之后的流程
 *  react高阶组件知道吗？
 *  React的jsx，函数式编程
 *  react的组件是通过什么去判断是否刷新的
 *  如何配置React-Router
 *  路由的动态加载模块
 *  Redux中间件是什么东西，接受几个参数
 *  redux请求中间件如何处理并发

![9749ea39072fc4b7b27af6f3a4db5ab1.png][]

### 浏览器 ###

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

![ea5b7660c67efee09904a7b17a48fc49.png][]

### 服务端与网络 ###

*  HTTPS和HTTP的区别
 *  HTTP版本
 *  从输入URL到页面呈现发生了什么？
 *  HTTP缓存
 *  缓存位置
 *  强缓存
 *  协商缓存
 *  缓存的资源在那里
 *  用户行为对浏览器缓存的影响
 *  缓存的优点
 *  不同刷新的请求执行过程
 *  …

![fc61f4efc44449b406d8a56d5f103d67.png][]

### 算法与数据结构 ###

*  二叉树层序遍历
 *  B树的特性，B树和B+树的区别
 *  尾递归
 *  如何写一个大数阶乘？递归的方法会出现什么问题？
 *  把多维数组变成一维数组的方法
 *  说一下冒泡快排的原理
 *  Heap排序方法的原理？复杂度？
 *  几种常见的排序算法，手写
 *  数组的去重，尽可能写出多个方法
 *  如果有一个大的数组，都是整型，怎么找出最大的前10个数

![09a5a6e1addc121711d53e3c113caeda.png][]

## 最后 ##

**想学习前端web的朋友，和需要PDF文档的朋友都可以加入这边的技术交流裙，[点击此处蓝字进群][Link 1]，裙里从学生到大佬都有，资源免费分享，不见不散哦！**

[9f8387e239cda667e42a74cc8d0450e9.png]: /images/20221024/775a8a52b86742b48ab376ce461eafbd.png
[6d880fb227e274a03ec4adf911932e9f.png]: /images/20221024/f643d87e12704cb6a3a5829b2adfe510.png
[e3de6f11fdcdc328516dc3878900e431.png]: /images/20221024/11aa0c57f1584f0fa5943fdceea3e723.png
[c255c97f7f2ff1cee9e604849718daa4.png]: /images/20221024/0150a96ee08a412e8a98478a45bc2bea.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=ZEKfV3Ax
[c7c1f19592b94db3b38479b49e74936b.png]: /images/20221024/cc706f748ddd40ada137828a007c3d1c.png
[095da229ed20be484cb335334ed1797f.png]: /images/20221024/df5d987f20da414887fdaa4e5dc92db6.png
[4a5419a1c90ddbb21a2fdcf130577364.png]: /images/20221024/e4a24d5e05ad43b0a97f50c03c253eff.png
[0432b8e539325b94948089383d0bfa8c.png]: /images/20221024/aa4ff05bb66f4e1092fa906ee07deabd.png
[9749ea39072fc4b7b27af6f3a4db5ab1.png]: /images/20221024/56e9de0107c4461a857ccd7c7d1038ad.png
[ea5b7660c67efee09904a7b17a48fc49.png]: /images/20221024/786eee44a5a94e998311afee2f7c804d.png
[fc61f4efc44449b406d8a56d5f103d67.png]: /images/20221024/f410df38fe434094a4d265622a2474fd.png
[09a5a6e1addc121711d53e3c113caeda.png]: /images/20221024/c01d59cdc3814781b653b0317119385e.png