前端自学路线之综合篇

接以前的两篇，今天来聊聊前端学习路上的杂七杂八的东西。若是说切图和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插件来完成压缩、合并、打版本号、编译ES六、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这样的播放器工具。这些就是广度方面的扩展了，前端的业务场景不少，你要能知道什么场景下用怎样的解决方案，业界是否是已经有成熟的开源库了，它们有哪些坑，等等。

 

今天就说这么多了，我发现我啰嗦的功力真是见长了~ 一提及来没完~~固然我列的确定是不全的，你们也能够在留言中补充哦。