从行业角度看,前端最糟糕的时期已经过去了;从开发者角度看,现在确实是个糟糕的时代。
首先从前端行业的发展历史来看,前端正在变得越来越成熟。如果和过去相比,之前的前端才是真的糟糕。如果我们从未来的视角来看现在,那么现在也算是糟糕的,但是其糟糕程度也远不如过去。
十年前正处于前端的石器时代,那时的前端开发用一个词语来形容就是“刀耕火种”。糟糕到什么程度呢?
-
前端开发者的噩梦:兼容IE6。IE6发布于2001年,而ES5直到 2009年才定稿。IE6除了可以运JavaScript 之外还可以运行VBScript、JScript(一个Javascript的方言)。
-
当时有一个只能运行于IE的技术叫 “ActiveX”,所以很多银行和政府的网站只能用 IE 浏览器打开,甚至只能使用IE的特定版本打开。
-
还有一个技术是目前已经被淘汰的 Flash。
我们现在所说的前端通常这是包括了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发布到成熟的这几年,已经变得非常成熟,而“糟糕"的时代也已经成为了历史。
另一个角度,我们作为前端开发者,现在也许是个糟糕的时代。以前的开发技能经过这么多年的发展已经不再适用。前端逐渐规范的后果就是淘汰了一大批“古典/保守”前端开发者们,而抓住风口的开发者们已经实现了弯道超车。
常言道”乱世造英雄",但是常言也道“乱世埋枯骨”。在Node.js出现之后,前端可谓是当时最有“钱途"的行业之一。目前这个风口也应关闭了,所以对很多人来说,现在是一个糟糕的时代。
如果我们看一下大厂,以阿里为例,基本上前端的那些高P都是在2010年之后搭着Node.js的快车一路升上来的。Node.js 不仅拓展了前端的边界,还提升了前端的研发效率。
有人说只有糟糕的东西才需要不停的推倒重来。
这句话我不认同,我觉得这句话的原因和结论都有问题。首先颠覆的不是前端,而是前端的某个技术和工具;再者并不是因为糟糕所以颠覆,而是因为前端具 有生命力所以才有颠覆性的创新和改变。我们看看后端,以前Java开发都是用Eclipse, 而现在几乎清一色的IDEA,那么我们是否能得出结论Java在不停的推到重来,所以后端处于-个糟糕的时代。显然不能。
工具的更新换代才能带来前端的繁荣。我们来讲一个真实的故事吧。
英国工业革命时期,机器生产逐渐替代手工劳动,导致大部分人失业、工资下跌。失业了就没事儿干了,于是他们开始思考思考:
我们为什么失业呢?因为工厂不需要这么多人。
厂为什么不需要这么多人呢?因为机器可以做很多事。
如果没有机器呢?那么工厂就多招人。
终于找到失业的原因了,于是莱斯特郡一个名叫卢德的工人第一个捣毁织袜机,进而在全国掀起了砸毁机器的浪潮,无数工人涌入工厂将机器砸毁。2333333,这场运动被称为"卢德运动”。而这次运动导致很多工厂被迫停工,加剧了更多工人的失业。最终英国政府制定律法,并对卢德分子进行镇压。
在故事中,"机器生产逐渐替代手工劳动” 是一次生产力的变革,作为类比,前端技术的更替也正是生产力的变革,对比一下 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的朋友,可以加入这边的技术交流裙,点击此处蓝字进群,裙里从学生到大佬都有,还有一份2020年大厂面试题真题合集(含答案)可以免费获取,不见不散哦!
HTML
- 浏览器页面有哪三层构成,分别是什么,作用是什么?
- HTML5的优点与缺点?
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
- HTML5有哪些新特性、移除了哪些元素?
- 你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
- 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
- 说说你对HTML5认识?(是什么,为什么)
- 对WEB标准以及W3C的理解与认识?
- …
CSS
- 解释一下CSS的盒子模型?
- 请你说说CSS选择器的类型有哪些,并举几个例子说明其用法?
- 请你说说CSS有什么特殊性?(优先级、计算特殊值)
- 常见浏览器兼容性问题与解决方案?
- 列出display的值并说明他们的作用?
- 如何居中div, 如何居中一个浮动元素?
- 请列举几种清除浮动的方法(至少两种)?
- block,inline和inlinke-block细节对比?
- 什么叫优雅降级和渐进增强?
- 说说浮动元素会引起的问题和你的解决办法
- 你有哪些性能优化的方法?
- …
JavaScript
- js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?
- js拖拽功能的实现
- 异步加载js的方法
- js的防抖与节流
- 说一下闭包
- 说说你对作用域链的理解
- JavaScript原型,原型链 ? 有什么特点?
- 请解释什么是事件委托/事件代理
- Javascript如何实现继承?
- 函数执行改变this
- babel编译原理
- 函数柯里化
- 说一下类的创建和继承
- 说说前端中的事件流
- 如何让事件先冒泡后捕获
- 说一下图片的懒加载和预加载
- js的new操作符做了哪些事情
- 改变函数内部this指针的指向函数(bind,apply,call的区别)
- Ajax解决浏览器缓存问题
- …
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的计算属性?
- …
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请求中间件如何处理并发
浏览器
- 跨标签页通讯
- 浏览器架构
- 浏览器下事件循环(Event Loop)
- 从输入 url 到展示的过程
- 重绘与回流
- 存储
- Web Worker
- V8垃圾回收机制
- 内存泄露
- reflow(回流)和repaint(重绘)优化
- 如何减少重绘和回流?
- 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
- localStorage 与 sessionStorage 与cookie的区别总结
- …
服务端与网络
- HTTPS和HTTP的区别
- HTTP版本
- 从输入URL到页面呈现发生了什么?
- HTTP缓存
- 缓存位置
- 强缓存
- 协商缓存
- 缓存的资源在那里
- 用户行为对浏览器缓存的影响
- 缓存的优点
- 不同刷新的请求执行过程
- …
算法与数据结构
- 二叉树层序遍历
- B树的特性,B树和B+树的区别
- 尾递归
- 如何写一个大数阶乘?递归的方法会出现什么问题?
- 把多维数组变成一维数组的方法
- 说一下冒泡快排的原理
- Heap排序方法的原理?复杂度?
- 几种常见的排序算法,手写
- 数组的去重,尽可能写出多个方法
- 如果有一个大的数组,都是整型,怎么找出最大的前10个数
最后
想学习前端web的朋友,和需要PDF文档的朋友都可以加入这边的技术交流裙,点击此处蓝字进群,裙里从学生到大佬都有,资源免费分享,不见不散哦!