四年前端老司机对小白的建议(面试、提升)
这是我在简书写的第二篇文章，第一篇vue实现菜单权限控制
貌似到现在已经是简书中vue权限相关文章收获喜欢数排行前三的(有点小膨胀，哈哈～～)其它技术文章请到我的博客园浏览。本文适合刚入门前端的道友们以及工作过一段时间的前端工程师，大神勿喷～～
我先简单介绍下自己的经历——2014年底开始接触前端（准确来讲那时候还是网页设计），15年进行整体的自学（大二利用周末完成自学），16年至今开始苦逼的前端生涯（从互联网上市公司到创业公司）。
有好多人问我前端怎么学，难不难，前景如何，如何提升自己等等，下面我就详细的一一告诉大家。
前端怎么学？
看书+实践！看书+实践！看书+实践！看书比看视频节省时间，而且更管用。我在15年拿出2000小时看慕课网的前端视频（巨累，看完就忘了，但里面的视频是在15年来说质量是数一数二的）。
image.png
前端的学习顺序个人推荐如下：
- HTML+CSS (这个很基础，通过w3c走两遍demo)
- JavaScript （《JavaScript高级程序设计》必须看，一定要打好基础，这是前端的重中之重，对以后学习框架非常有帮助）
- 打包工具(webpack webpack之前端性能优化（史上最全，不断更新中。。。） 之前写的文章，浏览数已过万 ,yarn)+框架(vue,react,angular)
举一个简单的例子，大公司基本都会考的一个问题，原型继承有几种方式，大多数人都会想到ES3的实现方式，阿里巴巴的前端技术专家则会用ES5的Object.create来实现，ES5不兼容低版本浏览器，如何用ES3实现Object.create，然后你要知道各种继承方式好处是啥坏处是啥。
看书的时候可能一次看不懂，这个就要你在工作中遇到问题了，然后再到书中带着问题找答案，就会豁然开朗了。
比如一个90%的公司都会遇到的问题：如何埋点（就是比如我有一个list列表，我要看用户的PV,UV）。在《javascript高级程序设计》中有一节讲的是pingback，大家记住，所有的埋点，包括谷歌设计的埋点，原理都是图像ping。
谨记：在工作中学习是进步最快的！没毕业的同学们早点去实习！没实习之前一定要把基础知识记扎实，看js高程这本书就好。毕业第一家公司有机会一定选择大公司！！！因为大公司重基础，流程规范，不缺牛人，可以跟着大佬学。
前端难不难？
万事开头难，比如你刚开始学vue，感觉很恶心，用了一段时间后学wepy(微信小程序框架)，这时候你就会发现，这不就是vue嘛。前端难就难在你刚开始学习一个新的东西的时候会踩很多坑，然后这需要一段时间的过渡，之后就游刃有余啦。还有一点，前端知识更新得很快，我记得17年webpack还是V2.0，现在都到4.0了。一定到跟得上学习的步伐！
前端前景如何？
北京的前端人才是最多的。虽然现在是互联网寒冬，但几乎每个公司都严重缺乏技术全面的前端以及深耕某一领域的前端(某些公司甚至会出现webpack配置工程师...)，一线城市的创业公司相对来说对能力的要求更低一点。对于成都、杭州、青岛这种新一线城市来说，前端中低端人才的需求量更大一点。
如何提升自己？
这个我要重点说一下。很多创业公司在做项目时可能赶时间，这样我们的排期会紧一些。当我们完成项目时，可能有的地方会由于时间紧写的比较low，这时候就需要你去优化代码。这是最能提升自己的时候！！！所以一定要好好优化自己的代码。
比如过滤一个list中某几项并添加一部分属性，这个功能可能你一开始使用命令式方法来写代码，在你优化的时候可以考虑使用高阶函数（函数式编程），它最大的作用就是编写声明式代码：描述你做什么，而不是怎么做。以后在看代码时会更快的知道它的业务逻辑，也更有利于后面开发人员的维护。最常用的几个高阶函数——map,filter,reduce。
主动承担任务，更有利于提升自己。17年底交接到易车指数的官网，我主动提出优化首页加载时间，当时用的是webpack2.0，然后我利用各种插件从3800ms优化到了1600ms。比如commonchunkplugin（可以抽取公共代码，我的博客园中有详细的介绍），这个怎么用才最正确，如何做到真正的持久化缓存，它的实现机制是啥，这个需要你自己去写demo，自己看源码，这样才是真正的提升自己。当然现在都到webpack4.0了，貌似去掉了commonchunkplugin。对于url-loader和externals有很多用法，哪种最规范呢，都需要我们自己好好根据项目实践。现在我们的新项目用yarn来代替webpack，效率更高。
然后告诉大家一个小秘诀：尽量不会的问题去stack overflow去查，这个网站上几乎都是各个领域的编程狂人解答问题。
有一本书是《高性能js》，里面的定时器精度讲的很细腻，可以对比《js高级程序设计》一起看。我之前有个页面是很多请求并发进行，然后为了提高性能，不阻塞UI进程的情况下用了高性能js里面的yield process，具体的细节大家可以到这本书中看，也可以找电子书，比较懒的朋友可以加我微信问我要电子书也行哈。
OK，上面是优化代码的提升。还有一个是你不优化代码的提升，比如我们都会写移动端，然后必须有一个viewport 。
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,user-scalable=no">
可能有的朋友写完就完事了，好一点的话可能会看下这是什么意思。那么我有一个问题：去掉这个标签，在iphone5上width为320px的一个div，占整个屏幕的多少比例。真实情况是占几乎三分之一，怎么计算的呢。
image.png
image.png
ios中默认的布局viewport是980px，然后根据刚才的计算的iphone5分辨率才会出现此情况。其实你应该在这之前就要考虑的是iphone5的分辨率是怎么算出来的呢。这里面涉及到很多原理，你就会去查，然后就知道了设备像素和逻辑像素，然后慢慢往下深入（不想各种查的朋友们可以看我的博客园，里面有详细的介绍）。这方面也是在不断提升自己。
结语
个人能力有限，目前想到的基本就这些，大家有不明白的或者有更好的建议欢迎在下面留言。当然也可以加本人（老关羽微信ID:sunsh8888）微信哈，免费送30本前端电子书，资源多多，欢迎骚扰～～
微信区2000局老关羽，可以一起上分～
