大话Web前端

【WARNING】本故事纯属虚（chě）构（dàn），如有雷同纯属巧（zhuāng）合（bī）。

人物背景

小菜：原名张XX，22岁，湖南长沙人，上海某大学计算机专业应届毕业生，刚入职某互联网公司从事Web前端开发。
大鸟：原名李XX，29岁，云南昆明人，毕业后一直从事互联网开发和管理工作，对软件开发有自己独到的见解。

序

小菜和大鸟是在上海合租认识的，因为都是从事IT（挨踢）所以彼此都有共同话题…

正文

第一节，UI框架的选取

某日下班小菜和大鸟就聊起天

小菜：我们公司需要做一个网站后台管理系统，希望能够快速上线，而且又要简洁、漂亮，你有没有好的想法或者点子？

大鸟：这个就要看你们的取向了，如果为了漂亮我推荐你们用Bootstrap，文档全面而且界面风格简约，当然这个对IE低版本支持不好（基于这个UI国人也开发了一套Amazeui）。当然这个UI有个弊端就是需要写很多HTML，毕竟长得漂亮是需要付出代价的。

小菜：这个Bootstrap的确长得挺漂亮，但是要写很多HTML会增加我们的开发成本，而且这个管理系统只是给公司内部人员使用不需要多漂亮，能够快速响应业务的迅速发展就行，我们的工期又短算上我就只有两个人负责这个项目，如果用它我担心不能按时完成项目的上线。

大鸟：快速上线，那就只能舍弃颜值了，更何况都是给公司内部人员使用的，不需要多漂亮，那你就用 Web 2.0 盛行的jQuery EasyUI，后台提供JSON格式数据给你，如果业务简单的情况下一天能够做10个CURD（创建–Create、更新–Update、读取–Read和删除–Delete），当然智慧的国人基于 jQuery EasyUI 开发出一系列的后台管理UI， 诸如DWZ、LigerUI，显然用大厂 jQuery 明显要卓越其它框架。

…… 两周后，小菜将自己的成果分享给大鸟，如下图：

小结：前端的UI框架繁多，极简型以 Bootstrap 为代表，后台型以 jQuery EasyUI 为代表，不仅适用于前端RD、后端RD和产品经理，其实设计师也能够借鉴它，设计出更加优秀的UI。这里需要我们理智的选择，适合自己的才是最好的。

第二节，记一次性能调优

一个月后小菜顺利完成公司的网站后台管理系统，随着公司的发展不断壮大，网站的访问量也越来越大，公司扩大规模招了一个Web前端的妹纸，团队的氛围更加浓烈，毕竟男女搭配干活不累。通常会出现如下场景：

某日小菜加班（其实是为了等妹子一起下班），办公室人都走得差不多了，然后妹子轻声问小菜，咱们网站的页面加载真的很慢，这个怎么处理？面对这个突如其来的问题，小菜摸摸后脑勺眼神无奈却又充满希望（其实小菜早已暗下决心，一定要优雅的在妹子面前装好这个B）。

……

小菜绅士的将妹子送到地铁，第一时间赶到家，气喘吁吁的让大鸟出主意，最终以请吃撸串+几瓶啤酒犒劳大鸟才给出撩妹方案。

大鸟侃侃而谈：看来你的目的是装逼，优雅地装逼，要让妹子觉得你很牛逼对不对？要让妹子听你分析完之后就投怀送抱对不对？

首先，想装逼就要显得随性、自然，看一眼就知道问题在哪。如果你需要吭吭哧哧的查半天log、分析core文件，那逼格自然就降低了许多。那如何才能随性自然呢？答案是看网页瀑布图。啥是瀑布图？

1.后端的问题：优化php、优化数据库、优化一切可以优化的东西，要让妹子觉得很爽才行。

2.请求数太多：网页发请求数就跟妹子的前男友数一样，越少越好。

3.JavaScript 阻塞请求：可能是因为妹子写的JavaScript性能有问题，如果发生了这个情况，你就应该耐心安慰妹子，问一下妹子是不是在写代码的时候身体不舒服啊、心情不好啊之类的关心一下，切记不能直接说妹子代码写的不行，不然肯定没有然后。

4.老鼠屎：可以和妹子一起找出这颗老鼠屎，发生这种问题可能的原因：a)资源在第三方站点上，他们很慢；b)这个资源太大了；c)这个资源使用的域名有问题。

PS：写到这里我忽然想到了一点，妹子抱怨慢的时候你当时没有装逼，现在才学如何装逼，还来得及么？来得及么？得及么？及么？么？

小菜： bala bala ~~~ 明天我就按照你的这个 瀑布图 在妹子面前分析分析，目测妹子离投怀送抱不远了。

小结：我们在做网站性能优化的时候， 瀑布图 就显得非常重要，根据它能迅速定位问题的所在，比较常用的工具：Google pagespeed、Gtmetrix和性能魔方（如上的 瀑布图 就是用的它）。同时也让我们感受到技术的魅力，轻松摆脱单身狗。

第三节，空前繁荣的框架

几个月后，小菜终究没有辜负大鸟的期望，凭借着 瀑布图 的分析和自己的努力顺利泡到妹子…

某日下班，小菜和大鸟就又侃起来了…

小菜：最近一直去社区、论坛灌水，发现它们说的好多东西我都没有听过，比如服务器端有：Nodejs， MVC（MVVM）框架：Backbone、Angularjs、Reactjs，模块化加载：Seajs、Requirejs，自动化构建工具：Grunt、Gulp、Fis，甚至用JavaScript还可以写硬件做嵌入式开发…这么多东西要学，有时候突然就有这种感觉：知道的越多，会的就越少。前端的水可真深，大鸟哥，这些东西你全都精通吧？给我讲讲呗！

（大鸟思考片刻，想到上个月公司官网改版，前端那块也是争执不下，这也算得上越早知道越好的小知识吧！）

大鸟：那我就给你讲讲我们公司的事儿吧！

上个月我们公司要做网站全新改版，一群专家、老鸟、菜鸟、前端、后台、全栈们汇集一堂讨论技术框架。

后台框架的选型讨论略显沉闷，“SpringMVC + MyBatis + Redis”，几个后台老鸟互相给了个眼色，白纸黑字写了下来。本想有所作为的全栈们似乎想要说些什么，奈何自己势单力薄，欲言又止。

前端框架的选型开始了。几个全栈前端撸了撸袖子，意欲大干一场。

“用ng吧，google的产品，质量有保证！”老A抛出了一个烫手的山芋。

“ng是什么？”前端菜鸟小B小声问旁边的师父C。

“就是Angular.js，老A就不会说人话。”老C跟小B说。

“笑话！ng用哪个版本？1版问题太多快要被抛弃，2版刚从娘胎里出生走路都还不会呢，谁敢用？”作为全栈代表的老D毫不留情地回击老A。

“还是backbone好，结合marionette，代码写起来还是很爽的！”用惯了backbone的菜鸟小E勇敢地提出了自己的想法。

“backbone框架也太简单点了吧？要写好多代码，做好多重复性工作。”刚被浇了一盆冷水的老A重新挺直了腰板发表意见。

“支持国产，用一下vue.js？”

几个老鸟纷纷摇头，“没怎么用过不太熟悉啊！”

“react？”

“貌似学习曲线有点高啊！”

“Extjs吧，我用着还是蛮好用的。”众人纷纷投之以鄙夷的眼神。

“GWT呢？”众人哄堂大笑

“我建议这个框架选型问题我们先放一边，我们先来选择一下用什么来写？js？coffeeScript？es6？”一个后台老鸟看不下去了。

“当然是js啊！”

“别老土了，看过2016年的前端流行趋势没？以后是es6的天下，我们要有点远见不是？”

“coffeeScript我觉得也挺好啊，有点小清新的感觉~”

“要不我们试试TypeScript？”

“TypeScript的模块加载机制很怪啊。”

“用ES6 webpack就可以。”

“不习惯，前端还是用requirejs的好！”

“seajs多简洁啊，阿里出品，玉伯发起的，我还是他的粉丝呢~”

眼见还是争执不下，PM（项目经理）过来维护了一下秩序：“这样讨论下去也不是个事儿，我提议这样，让这次承担开发任务的X组组长会议之后做一次技术方案出来，然后大家有针对性的讨论。正好现在也到饭点了，大家要不先去吃饭去吧？”

众人作罢。

“backbone + jQuery2.1 + requirejs + grunt + mocha” X组组长提出了这一整套技术方案。

“为什么用jQuery2，不考虑兼容性吗？”

“jQuery太大了，用zepto代替吧”

“这个网站不是主要在移动端展示嘛，cash体积最小，很合适的！”

“grunt太笨重，gulp多简洁”

“jasmine测试也不错”
……

最后，由于项目经理对开发周期的要求，前端选型不得不告一段落，最终的网站只用到了jQuery等几个简单的js库。由于大家对jQuery都很熟悉，所以开发效率很高，再加上几个前端老鸟的性能调优，整个网站呈现效果颇让人满意。

小结：前端的开源和共享的本质造就了前端资源的空前繁荣，同样也会逼死选择困难症患者。同时，前端发展这么快，新框架后浪推前浪，想要对每个框架都了如指掌是很困难的。所谓前端熟手大多数情况下只能对自己熟悉的几个框架做出合理的评价。然而只是作为框架使用者是很难达到顶尖前端的程度。在你确定需要框架之前，不要迷恋框架，不要过度设计。简单的往往是最好的。有了扎实的基础做根蒂，框架不过是浮华云烟。

写在最后

正如最后一节说讲，前端的开源和共享的本质造就了前端资源的空前繁荣，但是我们务必要夯实基础。前端三要素：HTML、CSS、JavaScript为基础，HTTP协议为辅，内功方面设计模式、数据结构和算法，还有更加好玩的WebGL、SVG、Canvas做游戏开发，让前端充满色彩！路漫漫其修远兮，吾将上下而求索！祝大家早日领悟装逼之道！

本文参考

• 前端妹子跟我抱怨她们的页面加载很慢的时候，如何在她面前优雅地装逼？
• 前端界有哪些越早知道越好的小技巧小知识？

出品：Frank（卫老师）、Aaron Guan（官老师）、Eimo（鹏哥）
表情：东哥、全哥和YY（大学同学）
观众：技术部所有兄弟包括程序猿（媛）、设计师（射鸡湿）和产品
客串：东哥
编辑：Eval（作者）