前端自学路线之综合篇

接之前的两篇,今天来聊聊前端学习路上的杂七杂八的东西。如果说切图和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这样的播放器工具。这些就是广度方面的扩展了,前端的业务场景很多,你要能知道什么场景下用怎样的解决方案,业界是不是已经有成熟的开源库了,它们有哪些坑,等等。

 

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

posted @ 2016-08-29 13:18  吕大豹  阅读(2533)  评论(3编辑  收藏  举报