我们来聊聊前端吧

引言

  Web 前端是什么?我蛮害怕有人问我这个问题,因为如果我解释的比较简单,别人会误认为前端很垃圾;如果我解释的全面一点,又会觉得我在吹牛逼。所以回答完这个问题,我在别人眼里要么是个垃圾要么是个会吹牛逼的垃圾。蛮尴尬的。

  之所以会出现这种情况,是因为 web 前端最近几年发生的重大的改变和快速的发展,前端开发体现出其独有的、强大的跨平台特性。“前端”这两个字已经不能完全体现前端开发人员的工作内容和技术涵养了。现代前端技术,纵横着 Web 端、服务端、桌面端和移动端,甚至包括嵌入式开发,几乎无所不在,无孔不入。

  所以…像不像在吹牛逼?

要不要学前端?

  首先,前端的薪资待遇并不差,尤其是在前端技术越来越成熟、越来越强大的趋势下。所以薪资待遇并不是影响你选择前端的顾虑。

  其次,前端并不简单。有人觉得前端简单,无非就是 html、css、和 JavaScript 这三个东西搞来搞去。确实是这样没错,如果你能精通这三个东西,完全可以在校招中拿到满意的 Offer。但这三个东西真的这么简单吗?比如 CSS 中的 BFC IFC Containing Box 等等概念你搞明白了吗?CSS2.1 规范你读了多少?Javascript 中的原型链、闭包和设计模式你懂多少?ES6、ES7、ES8 你有关注吗?除去这些,浏览器渲染机制、HTTP 通信原理、网页性能优化、跨平台兼容性等等相关知识每一个都能写一本书出来。

  所以前端的知识涉及越来越庞杂,早已不是以前仅仅还原 UI 设计图那么简单了。你要考虑你有没有这样的兴趣和精力来学习这么庞杂的知识,而不是像其他方向专心于算法或性能。这是两种不同的学习过程,没有孰难孰易,但每个人却有不同的偏好。

  最后,前端近几年的竞争一直都很激烈。印象比较深的是腾讯西安霸面时,前端的简历堆了一沓,可能是技术岗里最多的,很多同学等了一天也没机会见到面试官一面。而移动开发的简历寥寥无几,HR 来叫了好几次问还有没有移动开发的同学要面试。另外,美团初面时西安有大概二十多个同学,后来被刷了,问了美团的学长说西安最多招两个,不区分本科硕士。话说回来,竞争激烈是对于像我这种在秋招时没有没准备充分,技术基础薄弱的人来说,对于真正有技术积累的人来说,激烈的竞争往往更能凸显他的价值和能力。

校招要准备什么

基础知识

  校招很看重基础知识,HTML 相对简单一些,掌握 HTML5 的新功能,尤其是一些新 API,比如 websock、web workers 是加分项。

  面试最喜欢考 CSS,因为 CSS 可以出的题太多了,经典的有“双列、三列布局”、“垂直水平居中”,这两个问题网上的解析很多,除了常见的解决方案,记得使用 flex,如果能给出 grid 的解决方案也会是加分项。

  CSS 的定位几乎是必考的,但这一点也是最容易眼高手低的。可以去网上多搜一些这方面的面试题,自己总结起来所有的解决方案,##动手实践##。

  除了布局,还有盒模型比较容易考,包括标准盒模型和 IE 盒模型。其他要掌握 CSS3 的常用动画。

  如果你能被面试官问到我上面提到过的 BFC、IFC 等问题,那你面试通过的几率很高了。类似的问题还有 normalflow、containing、base line 等问题,这些属于比较深入的问题了,有些我现在还在学习。

  Javascript 面试问得反而没有太多,主要就是原型链和 this 的问题,关于原型链我整理过一篇博客,如果能完全看明白原型链这块就没问题了。其次就是闭包和作用域,然后可以关注一些 ES6、ES7 的新规范,尤其是 promise 涉及的新的异步风格,在开发中很常用到。

  另外就是常见的 Ajax 和跨域了,跨域的解决方案要能列举几个,JSONP 的原理要掌握。

框架

  框架其实并不重要,在大厂的面试中也没被问到(也许面试官觉得我基础知识都不合格?)。其实框架并不难学,我有一次问过饿了么的面试官,面试官说之所以不问是因为只要基础知识掌握的好,框架在以两周内就能掌握。确实我在实习中就是用了一周的时间上手了 Vue。

  不过,既然框架并不难学,何不掌握一门来增加自己的自信和技术面呢?我推荐从 React 学起,因为 React 的单项数据流和生命周期钩子简单明确,容易上手也不容易出问题。并且 React 目前是最流行的前端库,具体你可以去百度下,当时 FaceBook 正是因为不满意其他库才自己开发了 React。

项目

  项目并没有那么重要,最重要就是基础知识。项目面试官很少会问太多,因为他看不上。但是,如果你的项目里能涉及到性能优化等“骚操作”就不一样了。项目不需要太复杂,但要有亮点。甚至我觉得你没有什么项目都可以,只要基础知识扎实,但话说回来,你连项目都没写过基础知识怎么可能扎实,这是个悖论。

其他

  浏览器渲染机制(我曾简单整理过博客)。这块包含了回流重绘、首屏计算等知识点。

  HTTP 相关的知识,包括压缩、缓存、安全性等知识。至少的把那些常见的状态码给背会吧,虽然很多用不到。(GET POST 这些基本知识要掌握)

  性能优化,这个涉及的东西太多了,包括脚本的优化(博客),网络的优化,缓存的优化等等等,有一本书专门介绍过,感兴趣去看看吧。

  其他的自动化前端构建工具,npm、webpack 等等掌不掌握都无所谓了,在这里只是给个提醒,要会用 webpack 等工具构建前端项目,这是主流,手动构建前端项目的刀耕火种的方式早被淘汰了。

总结

  再次强调,基础知识是最重要的。按上面列举的顺序依次掌握,千万不要眼高手低,尤其是 CSS 方面,学起来简单,理解起来也不难,但一旦让你写可能就懵逼了。另外不要执着于项目,基础知识对于校招来说是最重要的。这些都是学长沉痛的教训,现在我把教训总结出来,给大家指明方向,希望你们省些力气,少些迷茫,对你们的秋招起到一些启发和帮助作用。

  另外,我上面讲的很多是关于面试的,笔试很多是基础知识,JavaScript 考的居多,还有算法等等,还有简历的制作等等。要注意的地方很多很多,我真的是不想你们踩我的坑,有机会再给你们分享吧。面试题目多去网上搜,我这短短的篇幅不可能“一言蔽之”。

  最后,我的博客 hozen.site,里面关于 HTML、CSS 和 JavaScript 基础的内容可以看一看,是我秋招时整理的,其他吹牛逼的内容就别看了。好了,该睡了,晚安哦,亲爱的学弟学妹们,祝你们校招好运。

  2018 年 2 月 11 日,于杭州实习返家前凌晨。