这个问题大部分答案都是一年前五年前的了，你点他们的链接会发现很多作者都不更新文章了。&br&&br&以下是我2016年整理的（手工编辑），也会持续更新。&br&&br&多点赞，少感谢。&br&只感谢不点赞，就好像在说，你辛苦了，但是我不认同你。&br&&br&优质中文前端博客：&br&&br&原载于 &a href=&//link.zhihu.com/?target=https%3A//github.com/FrankFang/best-chinese-front-end-blogs/blob/master/README.md& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/FrankFang/be&/span&&span class=&invisible&&st-chinese-front-end-blogs/blob/master/README.md&/span&&span class=&ellipsis&&&/span&&/a&&br&&br&个人（控制在42个以内）&ol&&li&&a href=&//link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/javascript/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阮一峰的网络日志&/a&（蚂蚁金服）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/11/ecmascript-specification.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《读懂 ECMAScript 规格》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/monad.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《图解 Monad》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2010/10/why_lisp_is_superior.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《为什么Lisp语言如此先进？（译文）》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lifesinger/blog/issues%3Fq%3Dis%253Aissue%2Bis%253Aopen%2Bsort%253Aupdated-desc& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&玉伯也叫射雕&/a&（蚂蚁金服）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lifesinger/blog/issues/184& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Web 研发模式演变》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lifesinger/blog/issues/114& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《jQuery 为什么优秀兼谈库与框架的设计》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lifesinger/blog/issues/141& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《阿里前端的困局与突围》&/a&&/li&&li&九个月没有更新，考虑去掉博客链接。最新动向可以看他的&a href=&//link.zhihu.com/?target=http%3A//weibo.com/u/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微博&/a&。&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/hax/hax.github.com/issues& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&贺师俊/Hax&/a&（百姓网）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//johnhax.net/2015/js-the-best/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《JavaScript — The World’s Best Programming Language》&/a&&/li&&li&&a href=&https://www.zhihu.com/question//answer/& class=&internal&&《参加第十届D2前端技术论坛，你有什么收获？》&/a&&/li&&li&&a href=&https://www.zhihu.com/question//answer/& class=&internal&&《jQuery会过时吗？》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/rubylouvre/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&司徒正美&/a&（去哪儿）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/rubylouvre/p/5012458.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《为什么虚拟DOM更优胜一筹》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/rubylouvre/p/3598133.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《迷你MVVM框架avalon在兼容旧式IE做的努力》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//pinggod.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PING4GOD&/a&（美团）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//pinggod.com/2016/Math-random/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Math.random()》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//pinggod.com/2015/React-%25E7%25BB%%25BB%25B6%25E7%259A%%E5%2591%25BD%25E5%%25E6%259C%259F/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《React 组件的生命周期》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//segmentfault.com/u/jiyinyiyong/articles& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&题叶&/a&（前 Teambition）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//segmentfault.com/a/7098& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《简聊首屏性能优化方案一些记录》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//segmentfault.com/a/0866& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《想象一下未来如何写代码和调试》&/a&&/li&&/ul&&/li&&li&&a href=&https://www.zhihu.com/people/stein.cun/posts& class=&internal&&寸志&/a&（陆金所）&ul&&li&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&《为什么整个互联网行业都缺前端工程师》&/a&&/li&&li&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&《与外刊君一起学习2016前端开发者大会 PPT》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/fouber/blog& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&张云龙&/a&（UC）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/fouber/blog/issues/3& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《前端工程与性能优化》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/fouber/blog/issues/7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《如何进行前端自动化测试》&/a&&/li&&li&其 GitHub 博客最近一次更新是在八个月前，考虑删掉&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/xufei/blog& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&徐飞/民工精髓&/a&（前苏宁云商、现 Teambition）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/xufei/blog/issues/37& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《对当前单页应用的技术栈思考》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/xufei/blog/issues/19& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《2015前端组件化框架之路》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/xufei/blog/issues/24& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《未来Web应用的前端技术选型畅想》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.h5jun.com/archives/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&月影&/a&（360）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//www.h5jun.com/post/why-object-literals-in-javascript-are-cool.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《【译】为什么我要说 JavaScript 对象字面量很酷？》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.h5jun.com/post/wait-promise.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Promise 与定时器》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/phodal/articles/issues& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&黄峰达/Phodal Huang&/a&（ThoughtWorks）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//www.phodal.com/blog/how-to-create-ideas/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《程序员如何批量生产idea》&/a&&br&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.phodal.com/blog/how-to-make-money-and-improve-impact/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《程序员如何艺术的提升技术、影响力&赚钱》&/a&&br&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.phodal.com/blog/programmer-how-to-write-a-good-article/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《程序员怎样才能写出一篇好的博客或者技术文章》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&张鑫旭&/a&（腾讯）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/2016/01/development-of-ui-components-based-on-native-html/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《基于原生HTML的UI组件开发》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《CSS深入理解vertical-align和line-height的基友关系》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//otakustay.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&宅居&/a&（百度）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//otakustay.com/es6-develop-overview/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《使用ES6进行开发的思考》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//imququ.com/archives.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&屈光宇/JerryQu&/a&（360）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//imququ.com/post/summary-of-my-blog-optimization.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《本博客零散优化点汇总》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//imququ.com/post/http2-new-opportunities-and-challenges.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《HTTP/2：新的机遇与挑战》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//jiongks.name/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&勾三股四/赵锦江&/a&（淘宝）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//jiongks.name/slides/css-memos/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《手机淘宝 CSS 实践启示录》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//jiongks.name/blog/vue-code-review/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Vue.js 源码学习笔记》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.qianduan.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&神飞&/a&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《QQ浏览器X5内核问题汇总》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.hacke2.cn/posts/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&hacke2/蛋总&/a&（阿里巴巴）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//www.hacke2.cn/scroll-in-uc/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《在移动端上使用原生滑屏解决方案》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.hacke2.cn/share-jsbin/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《我在jsbin里存的好东西》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//barretlee.com/entry/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&李靖/小胡子哥&/a&（阿里巴巴，1992年生）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//barretlee.com/blog//donnot-repeat-yourself/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《工作五年，后面四年重复着第一年的活儿？》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//barretlee.com/blog//h5-crash-research/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《H5 Crash 研究》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//barretlee.com/blog//thing-about-taobao-homepage/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《聊一聊淘宝首页和它背后的一套》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//barretlee.com/blog//step-in-aria/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《信息无障碍不是献爱心更不是做公益慈善》&/a&&/li&&/ul&&/li&&li&&a href=&https://www.zhihu.com/people/tapir/answers& class=&internal&&貘吃馍香的知乎回答&/a&&ul&&li&&a href=&https://www.zhihu.com/question//answer/& class=&internal&&《onclick = xxx这种赋值写法绑定事件的原理是什么？》&/a&&/li&&li&&a href=&https://www.zhihu.com/question//answer/& class=&internal&&《有哪些CSS标准是前端工程师很有必要研读的？》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//icodeit.org/blog/archives/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&邱俊涛&/a&（ThoughtWorks）&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//icodeit.org/2016/05/design-for-failure/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《为故障和失败做设计》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//icodeit.org/2016/02/pitfall-of-technology/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《技术的执念》&/a&&/li&&/ul&&/li&&/ol&团队（控制在16个以内）&p&大部分团队博客，都有拼凑感，质量良莠不齐，所以还是推荐大家关注个人博客。&/p&&ol&&li&&a href=&//link.zhihu.com/?target=http%3A//taobaofed.org/categories/Web%25E5%25BC%%258F%2591/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TaobaoUED&/a&&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//taobaofed.org/blog//font-end-tech-inventory/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《近几年前端技术盘点以及 2016 年技术发展方向》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//taobaofed.org/blog//a-strange-bug-research-at-taobao-home-page/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《记一次淘宝首页奇葩的渲染问题》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//efe.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度EFE（Excellent FrontEnd）&/a&&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//efe.baidu.com/blog/float/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《回归CSS标准之Float》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.alloyteam.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AlloyTeam&/a&（腾讯）&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lcxfs1991/blog/issues/3& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&李成熙《这是前端最好的时代——论前端的“三化”建设》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/lcxfs1991/blog/issues/1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&李成熙《如何写一个webpack插件（一）》&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.alloyteam.com/2016/01/let-see-css-world/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《我就是要用CSS实现》&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//fe.ele.me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&饿了么大前端&/a&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//fe.ele.me/position-sticky-zai-yi-dong-duan-de-ying-yong-yu-shi-jian/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&position: sticky 在移动端的应用与实践&/a&&/li&&/ul&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//imweb.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IMWeb&/a&（腾讯）&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.75team.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&360奇舞团&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//f2e.souche.com/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&大搜车&/a&&/li&&/ol&其他&ul&&li&&a href=&//link.zhihu.com/?target=http%3A//www.75team.com/weekly/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&奇舞周刊&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//fex.baidu.com/weekly/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度 FEX 周刊&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//qianduan.guru/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端外刊评论&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//www.awesomes.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Awesomes.cn&/a& - 「 也许是最好的开源前端库、框架和插件集合 」&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.w3ctech.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&w3ctech&/a& - 文章聚合网站&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//w3help.org/zh-cn/home/compatibility.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&W3Help&/a& - 内容看起来很久没更新，但是文章很有质量。&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//div.io/%23/welcome& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&div.io&/a& - 文章聚合网站&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.w3cplus.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&w3cplus&/a& - 文章聚合网站&/li&&/ul&
这个问题大部分答案都是一年前五年前的了，你点他们的链接会发现很多作者都不更新文章了。 以下是我2016年整理的（手工编辑），也会持续更新。 多点赞，少感谢。 只感谢不点赞，就好像在说，你辛苦了，但是我不认同你。 优质中文前端博客： 原载于
&figure&&img src=&https://pic4.zhimg.com/v2-d302fcebdfef_b.png& data-rawwidth=&1536& data-rawheight=&2048& class=&origin_image zh-lightbox-thumb& width=&1536& data-original=&https://pic4.zhimg.com/v2-d302fcebdfef_r.png&&&/figure&&br&&br&&figure&&img src=&https://pic3.zhimg.com/v2-81a28ead0b59edd590398e_b.jpg& data-rawwidth=&800& data-rawheight=&1067& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/v2-81a28ead0b59edd590398e_r.jpg&&&/figure&&br&&p&项目地址： &a href=&//link.zhihu.com/?target=https%3A//github.com/Jianru-Lin/lambda-view& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&lambda-view: A New Tool for Reading JavaScript Code in 2017&/a&&/p&&p&在线 DEMO：&a href=&//link.zhihu.com/?target=http%3A//demo.lambda-view.com/lv.html%3Fid%3Da46ab6a4b6b86478& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&demo.lambda-view.com/lv&/span&&span class=&invisible&&.html?id=a46ab6a4b6b86478&/span&&span class=&ellipsis&&&/span&&/a&&/p&&br&&p&&b&这是一个为了阅读复杂 JavaScript 代码而开发的工具，以阅读 Vue.js 为例，在 Sublime Text 中打开后感觉非常复杂，不知道该从哪里读起：&/b&&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic2.zhimg.com/7d747eb646fd5cc237c7f943df453781_b.png& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic2.zhimg.com/7d747eb6&/span&&span class=&invisible&&46fd5cc237c7f943df453781_b.png&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&2784& data-rawheight=&1642& class=&content_image& width=&2784& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic2.zhimg.com/7d747eb646fd5cc237c7f943df453781_r.png& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic2.zhimg.com/7d747eb6&/span&&span class=&invisible&&46fd5cc237c7f943df453781_r.png&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&p&&b&使用 lambda-view 打开后，可以看到源代码整体的轮廓其实就是一个立即调用的匿名函数：
展开函数部分，值得注意的缩进风格与 Sublime Text 之类的编辑器完全不同，更易读；并且内部结构默认处于收缩状态，可以比较清楚的看到整个函数内的轮廓：
点击后可以继续展开：
不仅可以阅读 Vue.js 之类的前端代码，Node.js 代码也完全没问题。下面的截图来自 Node.js v4.5.0 源代码中的 node.js 文件，可以清晰的看到其整体结构也是一个立即调用的匿名函数：
展开后内部结构很清楚：
对于最新版本的 Node.js v6.5.0 （使用了 ES6 语法）也完全没问题，可以放心实验。该工具的安装使用方法参见项目主页：&a href=&//link.zhihu.com/?target=https%3A//github.com/Jianru-Lin/lambda-view& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/Jianru-Lin/l&/span&&span class=&invisible&&ambda-view&/span&&span class=&ellipsis&&&/span&&/a&
（截止日，最新版本为 v4.7.0，修复了全部已经反馈的故障）
----------------------------------------------------------------------&/b& &/p&&p&&b&下述内容已不再具有意义，保留仅作历史记录
----------------------------------------------------------------------&/b& &b&
（λ-VIEW 目前已经更新到 3.0 ，本文回答的内容已经不符合目前的情况了，稍后我会做同步的更新，指明新版本的操作方法）&/b&&/p&&p&这个问题是我自己问的，因为这一点困扰了我很久。但是这个月初的时候，我抽了一些时间写了这个工具。它能够将复杂的 JavaScript 代码简化到极易阅读的程度。具体的原理和细节我在后面解释，我们先看看使用体验——&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/8ab994db2ad02ebeeefe_b.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/8ab994db&/span&&span class=&invisible&&2ad02ebeeefe_b.jpg&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&1663& data-rawheight=&931& class=&content_image& width=&1663& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/8ab994db2ad02ebeeefe_r.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/8ab994db&/span&&span class=&invisible&&2ad02ebeeefe_r.jpg&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&p&上图是原始的 AngularJS 源码，可以看到左侧的行号已经超过 2 万行，直接阅读这样的代码无异于&b&划着独木舟在大海里寻找孤岛&/b&，其难度可想而知。不过当我们对其进行处理后（点击上方的 After 按钮），情况就不同了，如下图所示：&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/d147c0a90b16ba5c7e2e6_b.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/d147c0a9&/span&&span class=&invisible&&0b16ba5c7e2e6_b.jpg&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&1663& data-rawheight=&931& class=&content_image& width=&1663& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/d147c0a90b16ba5c7e2e6_r.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/d147c0a9&/span&&span class=&invisible&&0b16ba5c7e2e6_r.jpg&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&p&诶？2 万行代码怎么只剩下两行了？仔细一看，哦，原来这才是 AngularJS 的「真容」！整个 AngularJS 只是由一个立即调用的匿名函数（这里用 {λ} 表示），以及一行额外的处理代码组成。通常我们阅读代码的原则是——&b&先从最外层轮廓上对代码本身获得一个直观的认识，然后再深入到具体的细节里，&/b&这能从根本上避免在刚开始就陷入细节的泥潭。这个工具正是建立在这一原则之上的。或者说，它可以帮助你更好的贯彻这一原则。（我们在稍后会用它来和其他常见的 IDE、文本编辑器进行对比，这会让你对此看得更清楚）&/p&&p&现在我想看看 AngularJS 中的那个匿名函数里到底做了些什么。于是我点击
{λ} 部分，紧接着就变成了下面的样子：&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/4a7000a04bfede4ab6eb4b36_b.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/4a7000a0&/span&&span class=&invisible&&4bfede4ab6eb4b36_b.jpg&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&1663& data-rawheight=&931& class=&content_image& width=&1663& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/4a7000a04bfede4ab6eb4b36_r.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/4a7000a0&/span&&span class=&invisible&&4bfede4ab6eb4b36_r.jpg&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&p&你会注意到：&/p&&ol&&li&顶部标识出了当前函数的路径 &Program& / λ-0 （&Program& 代表顶级作用域，而 λ-0 是我们目前所处于的位置，它是顶级作用域下的第 0 号匿名函数）&/li&&li&左侧列举出了当前作用域内定义的子函数&/li&&li&右侧的源代码区域出现的&b&不是&/b&原始的 JavaScript 代码，而是经过美化的——花括号都不见了，而是改为使用缩进；分号都去除了；等等&/li&&/ol&&br&&p&今天先写到这里，后续会补上&/p&&p&待续1：这个工具是怎么实现的？
待续2：和 IDE 相比这个工具有什么优缺点？
待续3：后续会增加什么功能？&/p&&p&我强烈建议你亲自上 &a href=&//link.zhihu.com/?target=http%3A//www.miaodeli.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&喵德利&/a& （我已经部署好了） 试一试，因为有些细节如果由我在此描述难免太冗长，但你一旦自己亲身体验，就会立刻体会到。&/p&&p&&i& 更新&/i&&/p&&p&&b&这个工具是怎么实现的？&/b&&/p&&p&这个工具看起来很复杂。这可能会产生出让人钦佩的误解。事实上我确实做了一些工作，但并不像看起来那么艰巨。如果列举一下，整个工作实际上是由以下部分合力完成的：&/p&&ol&&li&ACE 编辑器，提供了代码编辑支持&/li&&li&Esprima 解析器，能够将 JavaScript 源代码解析为 AST（抽象语法树）&/li&&li&jQuery 库，帮助我便捷的进行 DOM 操作&/li&&li&Bootstrap 库，简化了界面布局和组织的工作&/li&&li&我自己的代码，实现了最终的功能&/li&&/ol&&br&&p&可见我确实做了一些事。但更主要的工作还是由 1-4 的部分完成的。如果你觉得这个软件很不错，或许上述库的作者们更应当被感谢。&/p&&p&特别值得一提的是 Esprima，它是这整个软件所用到的核心部件。我首先使用它来完成 AST（抽象语法树）的构建，紧接着，我会遍历这颗 AST 树，然后重新按照我想要的方式生成一颗 DOM 树。这样就完成了一次重渲染，将原始的 JavaScript 代码改写为了更简洁的形式。&/p&&p&当然，在遍历 AST 树的过程中也要做一些简单的分析工作。否则就无法实现将子函数抽取出来这样的操作了。不过这个分析操作实在很简单，也没什么可谈的。后续我会在分析过程上做很多工作，实现更多实用的功能。详细的情况可以参见后续的路线图部分。&/p&&p&&b&和 WebStorm 之类的 IDE 相比有什么优缺点？&/b&&/p&&p&术业有专攻。尽管 WebStorm 之类的 IDE 提供了强大的「编辑」功能。但是从实践的角度来说，这些编辑器在用于阅读代码时还存在诸多不足。&/p&&p&比较典型的一点是，编辑器总是老老实实的把原始的排版格式呈现出来。而实际上我们需要的是更加紧凑、标准、一致、适度简化后的呈现。例如下面的对比图所示：&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/c2d5badc689f47c8630c76fe_b.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/c2d5bad6&/span&&span class=&invisible&&f47c8630c76fe_b.jpg&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&535& data-rawheight=&259& class=&content_image& width=&535& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic3.zhimg.com/c2d5badc689f47c8630c76fe_r.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic3.zhimg.com/c2d5bad6&/span&&span class=&invisible&&f47c8630c76fe_r.jpg&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&br&&p&上图是同一段代码（选自 AngularJS）处理前后的对比。我们可以注意到一些细节：&/p&&ol&&li&分号被移除了&/li&&li&花括号被移除了（改为用缩进来表示层次关系）&/li&&li&行间距被适当增大了，看起来没那么拥挤了&/li&&li&函数调用时，前后括号和参数之间都增加了空白&/li&&li&最重要的是，代码从 6 行变成了 4 行，缩短了&/li&&/ol&&br&&p&任何程序员——任何真正尝试过阅读陌生的大型项目的程序员，应该都能够理解这种形式简化将带来的实际好处。它让你更加专注于代码的逻辑，而不是形式。&/p&&p&我们的代码阅读软件能够理解代码的结构，并能够将其转换为更加简洁的形式，这一点有时候能给我们带来意想不到的帮助——例如阅读在 web 环境下那些被压缩过的代码。下图的代码截取自某站点：&/p&&p&&img src=&&a href=&//link.zhihu.com/?target=https%3A//pic2.zhimg.com/bf2ec34c2b9b_b.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic2.zhimg.com/&/span&&span class=&invisible&&0e2bf2ec34c2b9b_b.jpg&/span&&span class=&ellipsis&&&/span&&/a&& data-rawwidth=&1657& data-rawheight=&343& class=&content_image& width=&1657& data-original=&&a href=&//link.zhihu.com/?target=https%3A//pic2.zhimg.com/bf2ec34c2b9b_r.jpg& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&pic2.zhimg.com/&/span&&span class=&invisible&&0e2bf2ec34c2b9b_r.jpg&/span&&span class=&ellipsis&&&/span&&/a&&&&/p&&br&&p&这样的代码是经过压缩的——删掉了空格、缩进、换行等字符并改写了变量名等——阅读几乎是不可能的。但有些人却必须要从这样的代码里找出感兴趣的东西，比如大家熟悉的白帽子安全人员。&/p&&p&相对一般的 IDE，专门的代码阅读软件在处理这样的问题上更加得心应手。&/p&&p&综上所述，WebStorm 之类的软件在「编辑」、「项目管理」方面更加强大，但在「阅读」、「分析」方面，专门的代码阅读工具会更加方便。&/p&&p&&b&未来的发展路线图——后续功能开发计划&/b&&/p&&p&（待续）&/p&
项目地址： 在线 DEMO： 这是一个为了阅读复杂 JavaScript 代码而开发的工具，以阅读 Vue.js 为例，在 Sublime Text 中打开后感觉非…
&p&3.28&/p&&p&这破回答居然有 4k 赞，知乎药丸。&/p&&p&----------&/p&&p&7.2 更新&/p&&p&被私敲的烦了，私信不回，要问问题可以去值乎付费提问。&/p&&p&对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答案的最后了……&/p&&p&统一更新下前端现状：&/p&&p&文本编辑器：VS Code + 一系列插件&/p&&p&包管理工具：npm&/p&&p&JS：紧跟每年更新的ES标准，强烈推荐上TypeScript&/p&&p&CSS：多了个PostCSS，以及CSS Modules等一系列模块化方案……&/p&&p&框架：React全家桶，Vue全家桶，本身就是全家桶的Angular（至少擅长其一）&/p&&p&构建工具：webpack&/p&&p&流程工具：npm script足够了，实在不够再用gulp&/p&&p&额外值得强烈推荐的：函数式编程，响应式编程（RxJS）&/p&&p&----------&/p&&p&3.5 更新&/p&&p&大家还是别点赞了吧，这个答案似乎给了很多人前端入坑很简单的错觉，十分惶恐…&/p&&p&----------&/p&&p&11.25 更新&br&至今 1570 赞，3452 收藏，有点被吓到了。&br&其实这个回答主观性很强，不适合大多数人，所以收藏的意义不大。&br&----------&br&原答案：&/p&&p&五角场文秘职业技术学院，大三狗一枚。&br&刚刷完IFE最终任务之一，来分享下自己过去三个月的前端学习经历。&br&我的提交 &a href=&//link.zhihu.com/?target=http%3A//ife.baidu.com/review/detail%3FworkId%3D11105& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度前端技术学院&/a&&/p&&p&前端是干什么的我就不赘述了，推荐看这个答案：&a href=&https://www.zhihu.com/question//answer/& class=&internal&&Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？ - 张秋怡的回答&/a&&br&直接进入正题。前端入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。&/p&&p&IFE是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大，新手很容易在task1-6丧失信心，那个任务实在是太麻烦了。所以我个人建议先刷15年的task1和task2，都是很基础的题目了，不会做也可以参考别人的代码。&/p&&ul&&li&IFE2015：&a href=&//link.zhihu.com/?target=https%3A//github.com/baidu-ife/ife/tree/master/2015_spring/task& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ife/2015_spring/task at master · baidu-ife/ife · GitHub&/a& &/li&&li&IFE2016：&a href=&//link.zhihu.com/?target=http%3A//ife.baidu.com/task/all& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度前端技术学院&/a&&/li&&/ul&&p&我把这三个月大致分为三个阶段。&/p&&p&&b&1. HTML + CSS&/b&&br&前端的入门门槛极低，体现在HTML和CSS上。运行环境就是浏览器，推荐Chrome。你需要的只是一个文本编辑器，推荐Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。当然你非要用记事本的话，也不是不行的。刚入门查阅资料可以用 &a href=&//link.zhihu.com/?target=http%3A//www.w3school.com.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&w3school&/a& 或者 &a href=&//link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MDN&/a& 。&/p&&p&HTML和CSS不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，推荐慕课网 &a href=&//link.zhihu.com/?target=http%3A//www.imooc.com/view/9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML+CSS基础课程&/a&。&br&我当时是看了一本书 &i&Head First HTML and CSS&/i&，讲得浅显易懂，不过价格比较感人，也是只翻一遍的书，没有必要买了。&br&迅速刷一遍慕课网，对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。&br&HTML5的API可以先放一放，回头再看。&/p&&p&接下来就是深入学习CSS了。推荐：&/p&&ul&&li&《CSS权威指南（第3版）》。很枯燥的一本书，但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。&/li&&li&《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主，知道CSS3有什么内容就好，记忆属性是枯燥且毫无意义的。&/li&&/ul&&p&&br&&/p&&p&以上内容用时5天左右，下面是实践。&br&学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。&/p&&p&我X，完全写不出来。&/p&&p&这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。&/p&&p&画完第一张图后，别着急往下写。你的代码肯定会有如下问题：&/p&&ul&&li&胡乱的代码缩进&/li&&li&毫无章法的属性顺序&/li&&li&满页的div&/li&&li&不停地写id和class&/li&&/ul&&p&重写吧，是的。重写之前先看一份代码规范 &a href=&//link.zhihu.com/?target=https%3A//github.com/ecomfe/spec& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - ecomfe/spec: This repository contains the specifications.&/a&。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。&br&再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。&br&开始重写了，会发现功力大增，写代码速度也快了很多的。&br&写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入JavaScript的学习了。&br&以上内容用时10天左右。&/p&&p&进阶部分可以回头再看：&/p&&ul&&li&掌握预处理工具Sass，自动化工具Gulp。&/li&&li&阅读Bootstrap源码。&br&&/li&&li&《CSS揭秘》，极其惊艳的一本书，涵盖了CSS3的很多奇技淫巧，虽说有些地方不太实用，但让人眼前一亮，很值得看。&/li&&/ul&&p&&br&&/p&&p&&b&2. JavaScript&/b&&/p&&p&这是至关重要的阶段。&/p&&ul&&li&强烈推荐《JavaScript高级程序设计（第3版）》，俗称红宝书。前七章是重中之重，必须反复阅读，直至完全理解，期间可配合其他书一起读。DOM，事件流，表单，JSON，Ajax与最后几章也相当重要。其余章节可以略读或跳过（比如浏览器嗅探，XML以及那些列举大量API的章节，完全可以用到再查）&/li&&li&推荐《JavaScript语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，我个人是喜欢把这些坑点全部搞清楚的，但这本书却避而不谈了，剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。&/li&&li&强烈推荐《你不知道的JS》。精彩至极的一本书，将JavaScript的坑一网打尽。之前搞不懂的问题，比如闭包，this之类的都可以在这里找到答案。&/li&&li&ES6也是必学的内容，推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多，所以还是留个大概印象，以后写到类似的地方，查一查有没有ES6更简洁的写法就好，不必死记硬背。以及需要学会Webpack的使用，Babel和模块化就靠Webpack了。&/li&&li&不太推荐《JavaScript权威指南》，也就是犀牛书。那就是一本字典……&/li&&/ul&&p&&br&&/p&&p&进阶：&/p&&ul&&li&《JavaScript设计模式与开发实践》，设计模式是必须了解的内容，这本是写得不错的。&br&&/li&&li&《高性能JavaScript》，红宝书作者的另一力作，讲了一些优化技巧与性能瓶颈问题，值得一读。&/li&&/ul&&p&&br&&/p&&p&以上内容用时1个月左右，中途可穿插IFE2015 task2的题，比2016年的要简单。&br&这些书全部刷完的话，应该可以跟人谈笑风生了。&br&开始实践，IFE2016阶段二的题，想怎么刷就怎么刷吧。如果有编程经验的话，应该没什么压力了。&/p&&p&&b&3. JavaScript框架&/b&&br&这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。&br&目前主流框架经常被提及的是React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性，说不定过两年这些框架全都被淘汰了呢【逃&br&学习至少一种框架，把IFE2016刷通关吧。耗时1个半月左右。&/p&&p&进阶：看各种源代码。这也是我最近打算做的事情，但是好像期末考要到了TAT&/p&&p&最后补充一下，计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书，抽空还是要看看的：&/p&&ul&&li&《深入理解计算机系统》，CSAPP，也是我们专业这学期的课程（但是我的专业明明是EE啊）。&br&&/li&&li&《计算机网络 自顶向下方法》，看名字就知道必读了吧。&br&&/li&&li&操作系统好书挺多的，推荐一本 &i&Operating Systems: Three Easy Pieces &/i&，英文不够好就《现代操作系统》吧。&br&&/li&&li&算法和数据结构，推荐两本：《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大，但作为一个码农，不要求你写红黑树，至少快速排序和二分查找这种要会写的吧。&/li&&/ul&&p&话说这几本中文的，都是机械工业出版社的啊……&/p&&p&后记：其实学的内容越多，就越感到自己知识面的匮乏。这个答案本应还有4,5,6甚至更多的，但由于本人只学了三个月，水平有限，目前只能达到这个程度了。写得不对的地方，望大牛们指正，轻拍。谢谢大家~&/p&&p&------------&/p&&p&惊人的点赞收藏比……只收藏不点赞的都是坏银QAQ&/p&
3.28这破回答居然有 4k 赞，知乎药丸。----------7.2 更新被私敲的烦了，私信不回，要问问题可以去值乎付费提问。对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答…
1、&strong&前端&/strong&是一个比较新的行业，不像C、Java之类的在学校就可以学到（当然能学到多少是另一回事），目前我还没听说哪个学校会专门为CSS、Javascript开一个课程。相比后端或者设计人才，在学校的时候就希望往前端方向发展的人要少的多。这个圈子的人专业都不对口。 &br&&br&
2、&strong&前端&/strong&真正高速发展不过几年，相较C、Java，历史积累的技术经验少，很多前端牛人的技术都是自己在项目中锻炼出来的，但他们可能又没有时间和精力去总结升华自己的经验。新入门的同学品尝不到“前辈”的积淀，又没有合适的项目练手，成长缓慢。 &br&&br&
3、HTML是一个“一看就懂”的语言，“不需要学习”；会写color:red就号称会CSS（我一直说那是English，不是CSS）；会写标签页
切换就敢称会Javascript。后端同学用div+span或table就可以把页面拼出来，再加上jquery，效果还不错；设计同学可以方便的把
ps转到dw里，代码都不用手写，就可以交给后端继续开发了。都觉得前端“不过如此”，圈子浮躁，愿意持续关注和往深度研究的人少，“精通”更是奢望。 &br&&br&
4、对于后端同学，不愿或没时间对Javascript深入研究；设计同学一看到函数、变量就头大；而直接入前端行业，没有其他后端语言基础的同学，又难
以更深入的理解Javascript。Javascript是一门“夹缝语言”，能够安心把Javascript学好用好的人更少。 &br&&br&
5、本着多快好省的原则，一部分Javascript需求被Flash包揽，另一部分被开发人员告知“无法实现”后夭折。重Javascript、并持续开发的项目少，参与的人自然也少。 &br&&br&
6、技术靠谱的人，无论前后端，都是有性格有想法的，不会因为只言片语就被人挖走。在他们看来，人靠谱、事靠谱、钱靠谱的项目也很难找。
1、前端是一个比较新的行业，不像C、Java之类的在学校就可以学到（当然能学到多少是另一回事），目前我还没听说哪个学校会专门为CSS、Javascript开一个课程。相比后端或者设计人才，在学校的时候就希望往前端方向发展的人要少的多。这个圈子的人专业都不对…
&b&&blockquote&01.前端这个圈子&/blockquote&&/b&&p&&b&社区/组织&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.w3.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&W3C&/a&&a href=&//link.zhihu.com/?target=http%3A//www.chinaw3c.org/member-meetings.html%23tpac& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TPAC&/a&&a href=&//link.zhihu.com/?target=http%3A//w3ctech.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&w3ctech&/a&&a href=&//link.zhihu.com/?target=http%3A//www.webrebuild.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebReBuild&/a&&a href=&//link.zhihu.com/?target=http%3A//www.mhtml5.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5研究小组&/a&&a href=&//link.zhihu.com/?target=http%3A//adc.alibabatech.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阿里技术嘉年华&/a&&a href=&//link.zhihu.com/?target=http%3A//jsconf.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&京/沪JS&/a&&a href=&//link.zhihu.com/?target=http%3A//fequan.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端圈&/a&&a href=&//link.zhihu.com/?target=http%3A//www.html5dw.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5梦工场&/a&&a href=&//link.zhihu.com/?target=http%3A//accessibilityunion.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&无障碍联盟&/a&&/p&&p&&b&国内综合&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//ke.jikexueyuan.com/zhiye/web/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&极客学院WEB大前端工程师路径图&/a&&a href=&//link.zhihu.com/?target=http%3A//www.qianduan.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端观察&/a&&a href=&//link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阮一峰&/a&&a href=&//link.zhihu.com/?target=http%3A//www.w3cfuns.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&W3CFUNS&/a&&a href=&//link.zhihu.com/?target=http%3A//www.daqianduan.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&大前端&/a&&a href=&//link.zhihu.com/?target=http%3A//www.w3school.com.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&W3SCHOOL&/a&&a href=&//link.zhihu.com/?target=http%3A//www.html5cn.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5中国&/a&&a href=&//link.zhihu.com/?target=http%3A//www.html-js.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端乱炖&/a&&a href=&//link.zhihu.com/?target=http%3A//f2e.im/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&F2E社区&/a&&a href=&//link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MDNNEW&/a&&a href=&//link.zhihu.com/?target=http%3A//wiki.jikexueyuan.com/list/front-end/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端开发入门基础教程&/a&&a href=&//link.zhihu.com/?target=http%3A//wiki.jikexueyuan.com/project/fedHandlebook/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端开发者手册&/a&&/p&&p&&b&国内个人&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.cssforest.org/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS森林&/a&&a href=&//link.zhihu.com/?target=http%3A//www.twinsenliang.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&twinsen&/a&&a href=&//link.zhihu.com/?target=http%3A//blog.ivane.me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&艾文王&/a&&a href=&//link.zhihu.com/?target=http%3A//yuguo.us/weblog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&余果&/a&&a href=&//link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&张鑫旭&/a&&a href=&//link.zhihu.com/?target=http%3A//bigc.at/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&大猫&/a&&a href=&//link.zhihu.com/?target=http%3A//pufen.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&飘飘&/a&&a href=&//link.zhihu.com/?target=http%3A//s5s5.me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&米随随&/a&&a href=&//link.zhihu.com/?target=http%3A//www.99css.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&99css&/a&&a href=&//link.zhihu.com/?target=http%3A//www.topcss.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&进步博客&/a&&a href=&//link.zhihu.com/?target=http%3A//wange.im/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&万戈&/a&&a href=&//link.zhihu.com/?target=http%3A//rpsh.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&任平生&/a&&a href=&//link.zhihu.com/?target=http%3A//www.ofcss.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&小李刀刀&/a&&a href=&//link.zhihu.com/?target=http%3A//www.yuanyun.me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&元云&/a&&a href=&//link.zhihu.com/?target=http%3A//csshouse.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&珍妮&/a&&a href=&//link.zhihu.com/?target=http%3A//tommyfan.com/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&偷米饭&/a&&a href=&//link.zhihu.com/?target=http%3A//www.smallni.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&丁小倪&/a&&a href=&//link.zhihu.com/?target=https%3A//github.com/lifesinger/lifesinger.github.com/issues%3Flabels%3Dblog& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&玉伯&/a&&a href=&//link.zhihu.com/?target=http%3A//jayli.github.io/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&拔赤&/a&&a href=&//link.zhihu.com/?target=http%3A//www.osmn00.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&堂主&/a&&a href=&//link.zhihu.com/?target=http%3A//www.planabc.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&怿飞&/a&&a href=&//link.zhihu.com/?target=http%3A//www.aoao.org.cn/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&嗷嗷&/a&&a href=&//link.zhihu.com/?target=http%3A//www.iyunlu.com/view/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一丝&/a&&a href=&//link.zhihu.com/?target=http%3A//jiongks.name/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&勾三股四&/a&&a href=&//link.zhihu.com/?target=http%3A//hax.iteye.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&贺师俊&/a&&a href=&//link.zhihu.com/?target=http%3A//hikejun.com/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&张克军&/a&&a href=&//link.zhihu.com/?target=http%3A//gaowhen.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&糖拌西红柿&/a&&a href=&//link.zhihu.com/?target=http%3A//www.css88.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&愚人码头&/a&&a href=&//link.zhihu.com/?target=http%3A//linxz.github.io/tianyizone/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&林小志&/a&&a href=&//link.zhihu.com/?target=http%3A//i.wanz.im/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&丸子&/a&&a href=&//link.zhihu.com/?target=http%3A//uicss.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&崔凯&/a&&a href=&//link.zhihu.com/?target=http%3A//js8.in/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&三水清&/a&&a href=&//link.zhihu.com/?target=http%3A//uicss.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&崔凯&/a&&a href=&//link.zhihu.com/?target=http%3A//blog.bingo929.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&彬go&/a&&a href=&//link.zhihu.com/?target=http%3A//www.wufangbo.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&武方博&/a&&a href=&//link.zhihu.com/?target=http%3A//panweizeng.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&潘魏增&/a&&a href=&//link.zhihu.com/?target=http%3A//swordair.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&葵中剑&/a&&a href=&//link.zhihu.com/?target=http%3A//www.css3china.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css3China&/a&&a href=&//link.zhihu.com/?target=http%3A//www.brucewar.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&brucewar&/a&&/p&&p&&b&国外综合&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//css-tricks.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS-Tricks&/a&&a href=&//link.zhihu.com/?target=http%3A//www.webplatform.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebPlatform&/a&&a href=&//link.zhihu.com/?target=http%3A//smashingmagazine.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SmashingMagazine&/a&&a href=&//link.zhihu.com/?target=http%3A//www.csszengarden.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&cssZenGarden&/a&&/p&&p&&b&国外个人&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.stevesouders.com/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SteveSouders&/a&&a href=&//link.zhihu.com/?target=http%3A//ejohn.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JohnResig&/a&&a href=&//link.zhihu.com/?target=http%3A//javascript.crockford.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DouglasCrockfordNEW&/a&&a href=&//link.zhihu.com/?target=http%3A//meyerweb.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&EricMeyer&/a&&a href=&//link.zhihu.com/?target=http%3A//www.nczonline.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NicholasZakas&/a&&a href=&//link.zhihu.com/?target=http%3A//addyosmani.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Addy OsmaniNEW&/a&&/p&&br&&br&&blockquote&&b&02.UED团队博客&/b&&/blockquote&&br&&p&&b&腾讯系&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//tgideas.qq.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯TGideas&/a&&a href=&//link.zhihu.com/?target=http%3A//isux.tencent.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯ISUX&/a&&a href=&//link.zhihu.com/?target=http%3A//cdc.tencent.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯CDC&/a&&a href=&//link.zhihu.com/?target=http%3A//www.alloyteam.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&alloyteam&/a&&a href=&//link.zhihu.com/?target=http%3A//gdc.qq.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QQ游戏GDC&/a&&a href=&//link.zhihu.com/?target=http%3A//mxd.tencent.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯无线MXD&/a&&a href=&//link.zhihu.com/?target=http%3A//tid.tenpay.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&财付通TID&/a&&/p&&p&&b&阿里系&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.aliued.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阿里中文UED&/a&&a href=&//link.zhihu.com/?target=http%3A//www.aliued.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阿里国际UED&/a&&a href=&//link.zhihu.com/?target=http%3A//alipay-ued.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&支付宝UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.taobao.org/blog/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&淘宝UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.tmall.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&天猫UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ux.etao.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一淘UED&/a&
百度系&a href=&//link.zhihu.com/?target=http%3A//ued.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度searchUX&/a&&a href=&//link.zhihu.com/?target=http%3A//fex.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度FEX&/a&&a href=&//link.zhihu.com/?target=http%3A//mux.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度MUX&/a&&a href=&//link.zhihu.com/?target=http%3A//ueo.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度UEO&/a&&/p&&p&&b&搜狐系&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//ued.sogou.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&搜狗UED&/a&&a href=&//link.zhihu.com/?target=http%3A//mued.sohu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&搜狐MUED&/a&&a href=&//link.zhihu.com/?target=http%3A//vc.changyou.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&搜狐畅游UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.focus.cn/wordpress/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&搜狐焦点UED&/a&
新浪系&a href=&//link.zhihu.com/?target=http%3A//ued.sina.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新浪网UED&/a&&a href=&//link.zhihu.com/?target=http%3A//udc.weibo.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新浪微博UDC&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.leju.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新浪乐居UED&/a&&/p&&p&&b&网易系&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//uedc.163.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&网易UEDC&/a&&a href=&//link.zhihu.com/?target=http%3A//gux.163.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&网易游戏GUX&/a&&/p&&p&&b&其他&/b&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//ued.ctrip.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&携程UEDNEW&/a&&a href=&//link.zhihu.com/?target=http%3A//blog.19ued.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&19楼UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.5173.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&5173UED&/a&&a href=&//link.zhihu.com/?target=http%3A//cued.xunlei.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&迅雷CUED&/a&&a href=&//link.zhihu.com/?target=http%3A//uxc.360.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&360UXC&/a&&a href=&//link.zhihu.com/?target=http%3A//www.gameued.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&昆仑游戏UED&/a&&a href=&//link.zhihu.com/?target=http%3A//ued.yhd.com/blog& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一号店UED&/a&&a href=&//link.zhihu.com/?target=http%3A//jdc.jd.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&京东设计中心&/a&&/p&&br&&blockquote&&b&03.浏览器百宝箱&/b&&/blockquote&&br&&p&&b&综合
&/b&&a href=&//link.zhihu.com/?target=https%3A//www.google.com/intl/zh-CN/chrome/browser/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&谷歌浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//www.firefox.com.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&火狐浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//www.opera.com/zh-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&欧朋浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//www.apple.com/cn/safari/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Safari浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//windows.microsoft.com/zh-cn/internet-explorer/download-ie& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IE浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//browser.qq.com/index_m.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QQ浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//www.maxthon.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&遨游浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//se.360.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&360浏览器&/a&&a href=&//link.zhihu.com/?target=http%3A//www.theworld.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&世界之窗浏览器&/a&&/p&&p&&b&插件火狐
&/b&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/firebug/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FireBUG&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/css-usage/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&cssUsage&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/yslow/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&YSlow&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/web-developer/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebDeveloper&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/html-validator/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HtmlValidator&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/zh-CN/firefox/addon/colorzilla/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&colorzilla&/a&&a href=&//link.zhihu.com/?target=https%3A//addons.mozilla.org/ZH-cn/firefox/addon/httpfox/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&httpfox&/a&&/p&&p&&b&谷歌
&/b&&a href=&//link.zhihu.com/?target=https%3A//developers.google.com/chrome-developer-tools/%3Fhl%3Dzh-CN& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ChromeDevTools&/a&&/p&&p&&b&其他
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.debugbar.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DEBUGGER&/a&&a href=&//link.zhihu.com/?target=http%3A//www.microsoft.com/en-us/download/details.aspx%3Fid%3D18359& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IEToolbar&/a&&/p&&br&&b&&blockquote&04.前端工具箱&br&&/blockquote&&/b&&br&&p&&b&客户端编辑器
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.sublimetext.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sublimeText&/a&&a href=&//link.zhihu.com/?target=http%3A//notepad-plus-plus.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&notepad++&/a&&a href=&//link.zhihu.com/?target=http%3A//www.editplus.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&EditPlus&/a&&a href=&//link.zhihu.com/?target=http%3A//www.jetbrains.com/idea/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IntelliJIDEA&/a&&a href=&//link.zhihu.com/?target=http%3A//www.adobe.com/cn/products/dreamweaver.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Dreamweaver&/a&&a href=&//link.zhihu.com/?target=http%3A//www.vim.org/download.php& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VIM&/a&&a href=&//link.zhihu.com/?target=http%3A//aptana.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Astana&/a&&/p&&p&&b&代码在线编辑
&/b&&a href=&//link.zhihu.com/?target=http%3A//jsfiddle.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jsfiddle&/a&&a href=&//link.zhihu.com/?target=http%3A//jsbin.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jsbin&/a&&a href=&//link.zhihu.com/?target=http%3A//cssdeck.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&cssdeck&/a&&a href=&//link.zhihu.com/?target=http%3A//codepen.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&codepen&/a&&a href=&//link.zhihu.com/?target=http%3A//jsdo.it/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jsdoit&/a&&a href=&//link.zhihu.com/?target=http%3A//dabblet.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dabblet&/a&&/p&&p&&b&页面性能测试
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.alibench.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阿里测&/a&&a href=&//link.zhihu.com/?target=http%3A//developers.google.com/speed/pagespeed/insights/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PageSpeed&/a&&a href=&//link.zhihu.com/?target=http%3A//www.webpagetest.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebPageTest&/a&&a href=&//link.zhihu.com/?target=http%3A//gtmetrix.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&gtmetrix&/a&&a href=&//link.zhihu.com/?target=http%3A//www.telerik.com/download/fiddler& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Fiddler&/a&&a href=&//link.zhihu.com/?target=http%3A//www.httpwatch.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&httpwatch&/a&&/p&&p&&b&格式化/压缩
&/b&&a href=&//link.zhihu.com/?target=http%3A//csscomb.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&csscomb&/a&&a href=&//link.zhihu.com/?target=http%3A//yui.github.io/yuicompressor/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&YUIcompressor&/a&&a href=&//link.zhihu.com/?target=http%3A//tool.css-js.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线CSS/JS压缩&/a&&a href=&//link.zhihu.com/?target=http%3A//closure-compiler.appspot.com/home& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ClosureCompiler&/a&&a href=&//link.zhihu.com/?target=http%3A//jsmini.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jsmini&/a&&a href=&//link.zhihu.com/?target=https%3A//tinypng.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tinypng&/a&&a href=&//link.zhihu.com/?target=http%3A//www.smushit.com/ysmush.it/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&smushit&/a&&/p&&p&&b&CSS3在线生成
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.css3maker.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3maker&/a&&a href=&//link.zhihu.com/?target=http%3A//css3generator.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3generator&/a&&a href=&//link.zhihu.com/?target=http%3A//www.colorzilla.com/gradient-editor/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3渐变生成&/a&&a href=&//link.zhihu.com/?target=http%3A//css-tricks.com/examples/ButtonMaker/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3按钮生成&/a&&a href=&//link.zhihu.com/?target=http%3A//ecd.tencent.com/css3/tools.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3动画生成-ECD&/a&&/p&&p&&b&虚拟机
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.my-debugbar.com/wiki/IETester/HomePage& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IEtester&/a&&a href=&//link.zhihu.com/?target=http%3A//windows.microsoft.com/zh-cn/windows7/install-and-use-windows-xp-mode-in-windows-7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WINXPmode&/a&&a href=&//link.zhihu.com/?target=http%3A//www.vmware.com/cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vmware&/a&&a href=&//link.zhihu.com/?target=https%3A//www.virtualbox.org/wiki/Downloads& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&virtualbox&/a&&/p&&p&&b&数据转换
&/b&&a href=&//link.zhihu.com/?target=http%3A//webcodertools.com/imagetobase64converter& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&图片转base64&/a&&a href=&//link.zhihu.com/?target=http%3A//json.parser.online.fr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线解析json&/a&&/p&&p&&b&CSS/JS手册CSS
&/b&&a href=&//link.zhihu.com/?target=http%3A//css.doyoe.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS参考手册&/a&&a href=&//link.zhihu.com/?target=http%3A//www.zhangxinxu.com/css3/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3参考手册&/a&&a href=&//link.zhihu.com/?target=http%3A//www.divcss5.com/css3/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS3参考手册&/a&&/p&&p&&b&JS
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.php100.com/manual/javascript.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&原生JS手册&/a&&a href=&//link.zhihu.com/?target=http%3A//api.jquery.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jQueryAPI&/a&&a href=&//link.zhihu.com/?target=http%3A//www.php100.com/manual/jQuery/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jQuery1.7手册&/a&&/p&&p&&b&其他
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.getmarkman.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&马克鳗&/a&&a href=&//link.zhihu.com/?target=http%3A//www.jslint.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jslint&/a&&/p&&br&&blockquote&&b&05.CSS/HTML&/b&&/blockquote&&br&&p&&b&CSS框架
&/b&&a href=&//link.zhihu.com/?target=http%3A//necolas.github.io/normalize.css/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Normalize.css&/a&&a href=&//link.zhihu.com/?target=http%3A//lessframework.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&lessFramework&/a&&a href=&//link.zhihu.com/?target=http%3A//www.formee.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Formee&/a&&a href=&//link.zhihu.com/?target=http%3A//960.gs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&960GRID&/a&&a href=&//link.zhihu.com/?target=http%3A//responsive.gs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ResponsiveGridSystem&/a&&/p&&p&&b&UI框架
&/b&&a href=&//link.zhihu.com/?target=http%3A//getbootstrap.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Bootstrap&/a&&a href=&//link.zhihu.com/?target=http%3A//designmodo.github.io/Flat-UI/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FlatUI&/a&&a href=&//link.zhihu.com/?target=http%3A//purecss.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&pure&/a&&a href=&//link.zhihu.com/?target=http%3A//metroui.org.ua/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MetroUI&/a&&a href=&//link.zhihu.com/?target=http%3A//www.maxmert.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Maxmertkit&/a&&a href=&//link.zhihu.com/?target=http%3A//semantic-ui.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Semantic UI&/a&&/p&&p&&b&CSS资源库
&/b&&a href=&//link.zhihu.com/?target=http%3A//www.cssreset.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&cssReset&/a&&a href=&//link.zhihu.com/?target=http%3A//www.iecss.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IE默认CSS&/a&&a href=&//link.zhihu.com/?target=http%3A//browserhacks.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&浏览器hack大全&/a&&a href=&//link