zoukankan      html  css  js  c++  java
  • 前端自学路线之综合篇

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

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

  • 相关阅读:
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    基于分布式锁解决定时任务重复问题
    基于Redis的Setnx实现分布式锁
    基于数据库悲观锁的分布式锁
    使用锁解决电商中的超卖
  • 原文地址:https://www.cnblogs.com/lvdabao/p/5817635.html
Copyright © 2011-2022 走看看