前端自学路线之综合篇

接之前的两篇，今天来聊聊前端学习路上的杂七杂八的东西。如果说切图和js还可以缕出一条路线的话，今天的内容可真是无路可寻，因为很多前端知识都是网状的，需要你一点一点去覆盖。我今天把能想到的先罗列一下，供大家查漏补缺。

 

性能优化

这是每个前端都要具备的“硬实力”，因为性能优化的时候会涉及到方方面面的知识。常规的手段如：合并http请求、图片sprite、精简DOM、本地缓存、合理的内联和外链js和css、预加载、懒加载。再考验功力的就是代码层次，如缓存DOM对象、减少访问属性次数、避免回流、函数节流、浏览器渲染分析等等。

 

关于渲染分析，你得学会使用Chrome DevTools，通过Timeline来分析页面渲染的瓶颈在哪里，是哪个环节出了问题，应该如何针对处理。

 

如果是PV较高的web站点，你还需要做统计脚本，上报一些性能指标，如：白屏时间、首屏时间、关键功能可用时间、documentReady时间、页面加载完毕时间。分析影响性能的节点并做优化。

 

SEO

SEO也算是页面优化的一个重要课题，你要了解搜索引擎的爬取规则，写好keyword和description，优化页面结构，规范使用语义化标签，比如重要的标题都放在<h1>...<h5>。减少页面体积，外链高质量链接等。

 

当然以上是技术层面的基础工作，其实做好SEO还需要在运营上下功夫，比如和高质量网站交换链接获得更多内链。终极必杀技就是直接去找搜索引擎供应商“洽谈”，让其人为增加你的网站排名。当然这是技术之外的事情了，了解有这么回事就行。

 

浏览器兼容

这也是任重而道远的一件差事，尽管现在IE6已经被我们无视了，但它毕竟真实存在过，你也可以关心一下它都有哪些“经典”bug，比如盒模型啦，float问题啦，height问题啦等等。如果现在你能在面试的时候对IE6如数家珍，那必然能证明你有着很广的知识面。

 

除却IE，其他浏览器也有一些知名兼容问题，比如Firefox在监听事件的时候如果不显式写event参数会报错。

 

当前阶段最大的兼容工作应该是在移动端，你得接触一下各种安卓手机，写写移动端页面，知晓那些曾经“经典”的兼容问题。比如iPhone5上的position: fixed不支持，iframe滑动不支持，点击穿透，弹出软键盘后的诡异问题等。安卓上的问题那就更多了，司徒正美的github上收集了很多，可以去查阅。

 

小游戏

做前端的没写过H5小游戏，那也算一点欠缺吧。通过写一个小游戏，首先你能对canvas有一个全面的使用，当然用CSS3动画也是可以写出游戏的（我博客有例子）。其次你能对js的延迟函数setInterval有一个更深入的理解，你会了解到浏览器是如何刷新渲染的，什么是帧率，为什么会产生掉帧。用requestAnimationFrame为什么能够保证不掉帧。

 

写小游戏也能锻炼你用面向对象思维编码的能力，因为游戏通常比页面更容易抽象出对象。同时也锻炼你组织代码的能力。当你能完成一个小游戏的时候，再写网页上的动画效果，那就是小菜一碟了，因为游戏的本质也就是动画嘛。而且游戏对性能的要求更高，也会促使你写出更极致的代码。

 

如果你对小游戏别有兴致，还可以尝试专业的引擎，比如cocos2d-js，box2D以及国外的一些知名引擎。

 

http协议

这也是一块硬骨头啊，比较难啃。但作为web开发者，对web的老祖宗还是需要了解的。你起码要知道http的请求头和响应头中都有哪些字段，这些字段都是干嘛的。如何通过http头来控制缓存，catch-control，expres、last-modified这些都有什么区别。https也得了解下，它的对称加密和非对称加密是怎么回事，证书是怎么回事。https如何让传输更安全的，他的局限又在哪里。

 

这块内容我本人也不是学的很好，要系统学习的话推荐还是看书吧。《http权威指南》比较枯燥，如果你看不下去的话可以试试《图解http》，这本会易读很多。

 

前后端分离

很多前端招聘启事都会写，懂后端语言的优先，作为web开发的两架马车，如果你能了解旁边的另一架，那自然是再好不过。数据库层和model层你可以少关心，但至少controller层你还是得能看懂的，因为这是直接与前端对接的地方。

 

前后端分离也是曾经比较热门的话题，由曾经的后端渲染，经历了前端全部渲染、数据全异步请求，再到后来的后端渲染首屏，再到后来的nodejs作为中间件，才算有了一个结论。

 

其实在现实项目中，前后端分离还是会有各种迥异的方案，都是根据项目的具体情况来搞的，也并不是所有公司都在用nodejs。你需要了解的就是，前后端分离到底是在解决什么问题，分离的是什么，有哪些常用方式。

 

前端工程化

把前端工程化简单的理解为gulp/grunt/webpack构建，其实是有点浅，因为工程化还要考虑实际项目的各种特殊需求。但是在学习阶段，如果我们能掌握好这些构建工具，也就足够了。

 

你可以尝试用gulp插件来完成压缩、合并、打版本号、编译ES6、jslint检查等常规任务，知道现在都有哪些插件能用，知道他们是如何在nodejs这个大环境中运行的。此时你也会接触到nodejs中的一些基础知识，比如一个commonjs模块的基本规范，nodejs提供的模块以及各种API等。

 

关于前端工程化，其实是建立在对开发-调试-上线流程的理解之上，对这一系列流水化工作进行的自动化。参考资料当然首推张云龙的，github上能搜到。

 

nodejs

一年前不懂nodejs还是可以“正常工作”的，但是现在已经不行了，一方面是基于前端工程化的原因，现在前端团队基本都有了自己的工作流，无论gulp、webpack还是npm scripts，都是建立在nodejs环境之上。所以你必须要懂点nodejs了，能做到自己摸索着搭建出开发环境就够，其实这一过程也是比较繁琐的，难怪有人调侃现在的前端要变成“配置工程师”了。

 

另一方面，nodejs作为一个服务端运行的语言环境，现在越来的越多的被用在业务开发中了。连我们这样重后端的公司，今年都开始用到nodejs。当然最多的场景还是把它作为一个“中转层”，也就是接收前端请求进行预处理，对返回数据进行二次处理，与数据访问层对接等。

 

也有一些公司会把nodejs直接用来作为业务层，毕竟nodejs下有很多模块还是很好用的，比如用PhantomJs做爬虫或者动态截屏等等。

nodejs的框架的话，我建议从express入手，毕竟算是比较经典的一个框架，而且也足够简单。另外像koa以及国产的ThinkJs，在一定程度后也可以开始学习。

 

其他

上面罗列了8个方面，都是前端比较重要的领域，需要你有一个深入的了解。其他的还有没有了呢？当然是有的，再列也列不完了，所以我简略说说。

 

正则表达式、设计模式，使用率虽然不是很高，但是也总有需要用的时候，所以也需要你有一个知识储备。

 

关于知识储备上，你还应该养成阅读规范和源码的好习惯，比如：W3C、ECMA、commonjs/AMD、Promise这些有名的规范文档，没事就可以翻阅，技术深度就从这而来。

 

作为一个前端老手，你也应该对业界有名的一些开源工具类框架有所接触，比如百度的ueditor、webuploader、echarts，图表类中的highcharts，以及像jplayer这样的播放器工具。这些就是广度方面的扩展了，前端的业务场景很多，你要能知道什么场景下用怎样的解决方案，业界是不是已经有成熟的开源库了，它们有哪些坑，等等。

 

今天就说这么多了，我发现我啰嗦的功力真是见长了~ 一说起来没完~~当然我列的肯定是不全的，大家也可以在留言中补充哦。