译自 Philip Walton 的博客 看过之后非常有感触，很多观点都是自己长期非常坚持和认同的，所以翻译出来分享给更多的前端同学！ 最近我收到一封读者来信让我陷入了思考，信是这么写的： Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？ 我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅，而且大家面试我的时候都不知道从何问起 话虽这么说，我到现在做得还算不错，而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候，我经常会被要求招聘我的继任者。现在回看这些面试，我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘，即便我个人的这种经历也有可能成功。 我在 web 领域工作越长时间，我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然，知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域，你前进和获取知识的方式 (至少在相当长的一段时间里) 会比你已经掌握的知识显得更加重要。更重要的是：你是如何运用这些知识解决每天的问题的。 这里有许许多多的文章谈论你工作中需要的语言、框架、工具等等。我希望给一些不一样的建议。在这篇文章里，我想谈一谈一个前端工程师的心态，希望可以帮助大家找到通往卓越的道路。 别光解决问题，想想究竟发生了什么 很多人埋头写 CSS 和 JavaScript 直到程序工作起来了，然后就去做别的事情了。我通过 code review 发现这种事经常发生。 我总会问大家：“为什么你会在这里添加 float: left？”或者“这里的 overflow: hidden 是必要的吗？”，他们往往答道：“我也不知道，可是我一删掉它们，页面就乱套了。” JavaScript 也是一样，我总会在一个条件竞争的地方看到一个 setTimeout，或者有些人无意中阻止了事件传播，却不知道它会影响到页面中其它的事件处理。 我发现很多情况下，当你遇到问题的时候，你只是解决当下的问题罢了。但是如果你永远不花时间理解问题的本源，你将一次又一次的面对相同的问题。 花一些时间找出为什么，这看上去费时费力，但是我保证它会节省你未来的时间。在完全理解整个系统之后，你就不需要总去猜测和论证了。 学会预见未来的浏览器发展趋势 前后端开发的一个主要区别在于后端代码通常都运行在完全由你掌控的环境下。前端相对来说不那么在你的掌控之中。不同用户的平台或设备是前端永恒的话题，你的代码需要优雅掌控这一切。 我记得自己 2011 年之前曾经阅读某主流 JavaScript 框架的时候看到过下面这样的代码 (简化过的)： var isIE6 = !isIE7 && !isIE8 && !isIE9; 在这个例子中变量 IE6 为了判断 IE 浏览器版本是否是 6 或更低的版本。那么在 IE10 发布时，我们的程序判断还是会出问题。 我理解在真实世界特性检测并不 100% 工作，而且有的时候你不得不依赖有 bug 的特性或根据浏览器特性检测的错误设计白名单。但你为此做的每一件事都非常关键，因为你预见到了不再有 bug 的未来。 对于我们当中的很多人来说，我们今天写的代码都会比我们的工作周期要长。有些我写的代码已经过去 8 年多了还在产品线上运行。这让人很满足又很不安。 阅读规范文档 浏览器有 bug 是很难免的事，但是当同一份代码在两个浏览器渲染出来的效果不一样，人们总会不假思索的推测，那个“广受好评”的浏览器是对的，而“不起眼”的浏览器是错的。但事实并不一定如此，当你的假设出现错误时，你选取的变通办法都会在未来遭遇问题。 一个就近的例子是 flex 元素的默认最小尺寸问题。根据规范的描述，flex 元素初始化的 min-width 和 min-height 的值是 auto (而不是 0)，也就是说它们默认应该收缩到自己内容的最小尺寸。但是在过去长达 8...

前段时间，博友询问我的网站速度为什么那么快？当时我只认为全部功劳得益于主机的强劲，完全没有想到在折腾过程中的一些额外处理，今天突然想起，就轻微分享一个小小技巧吧！ 众所周知，网站加载速度的快慢是提升网站用户体验的重要一环，甚至决定网站的“生死”！那么问题来了，如何让网站加载速度更快，从而提升网站用户体验呢？即简单粗暴又行之有效！ 简而言之，提前把需要加载的资源加载好，就可以轻松解决问题，切入主题：DNS Prefetching！ DNS Prefetching是什么？ DNS Prefetching就是为了加速DNS解析时间，它实现了预解析功能，从而减少后面资源的加载时间。 DNS Prefetching如何用？ 非常简单，在网页头部（head之间）增加rel属性为”dns-prefetch”的link标签，并在href中指定想要预解析的域名。例如： <meta http-equiv="x-dns-prefetch-control" content="on" /><!--可选--> <link rel="dns-prefetch" href="//humicai.cn"> 预加载的网址是我的七牛镜像存储，主要解决的是图片资源加载缓慢问题，其次CSS、JavaScript资源也轻松预加载完成，前后加载对比，速度提升非常明显！ 当然，每个网站的资源加载网址可能不止一个，而是多个，当你的网站资源包含多个网址时，完全可以在网站头部（head之间）增加多个代码段。例如： <meta http-equiv="x-dns-prefetch-control" content="on" /><!--可选--> <link rel="dns-prefetch" href="//humicai.cn"> <link rel="dns-prefetch" href="//app.qlogo.cn"><!--预加载多说头像--> <link rel="dns-prefetch" href="//ds.cdncache.org"><!--预加载多说头像--> 小小技巧，愿有成效，不妨一试，让网站飞起来！ 参考资料： https://developer.mozilla.org/en-US/docs/Web/HTTP/Controlling_DNS_prefetching

很多的库和框架产生和消亡，对于把有限的精力投入到最有价值的事情上是有挑战的。下面是我们的一些关于语言和框架的建议，这些都是我们认为很有意义去学习的。它们都很流行，有活跃的社区，并且有大量的就业机会。前端语言与框架有很多种，你知道2015哪种前端语言是最值得学习的吗？ 1.无所不在的JavaScript 如果你做web的开发，Javascript是你必须知道的，不管你写后台用的何种语言。现在你可以用JS在浏览器、服务器、手机应用甚至是可编程的硬件。ES6 将会提高并让这个语言更加强大。学习Bower 和npm工具是很有必要的，也包括jshint 和 jscs这种代码样式和代码检测。 2.AngularJS AngularJS是一个Google发明的JavaScript框架，它能快速的构建企业级的web应用。快速的需求增长要求程序员有这个框架的使用经验，很多时候，你会看到招聘工作的时候会涉及这个框架的使用。但是别太着急。它将会有一个大的重写，在它的2.0版本发布后再学习是个更好的方式。可以查看学习指南angularjs examples. 3.React React是新的竞争者，但它是可提供复用的web组件。这个库是Facebook开发并实现了非常快的虚拟DOM，并能很简单的接入到现有项目中去。它也有非常活跃的社区来提供开发组件all kinds of components.在我们看来，Reacts是非常有潜力的并值得在2015年关注的。查看我们的学习指南react tutorial. 4.Node.js 用Node.js你可以用JavaScript来实现服务端的应用。它可以很简单的实现后台，像这些框架Express, API endpoints, websocket甚至torrent clients. Node有令人难以置信的活跃的社区超越任何其他一种语言在这一年实现的模块。如果你是个初学者，我们推荐你尝试下NodeSchool. 5.NoSQL databases 既不是关系型也不是SQL查询型的数据库是对今天的web开发者更有价值的，我们相信这样的数据库将会在未来更加的流行。有两个值得关注的是Mongodb and Redis.很容易使用它们中得任意一个比起MySQL和Postgres.但是别傻傻的认为NoSQL数据库就是完美的取代—有的情况，那些经典的关系型数据库还是会让你的开发更简单。 6.Less/Sass/Stylus 有很多人不喜欢CSS.它很容易就达到了1000行的css文件并且不容易被定位和修改。为了解决这些问题，有些语言像Less, Sassand Stylus可以编译成CSS文件，并可以使用变量、宏和其它的方式来提高你的编码。你可以一下午就搞定它们中的一种。 7.令人兴奋的框架 Meteor是一个全新的web应用开发方式，它模糊了前端和后端的边界。它允许你书写实施的应用，并且有迅速成长的社区来提供各种包模块。Hood.ie 是一个小得竞争者，但是提供新颖的方式。它能为你处理后台，所以你可以集中精力来做你应用的前台。 8.令人兴奋的语言 对于一些编程语言迷来说，这又一些东西。Golang, Rust and Elixir增长的势头很强，被用在一些对性能要求很高的情况下。我们不推荐转移你的编程方向到这些语言中，但是你可能会在要求与其它的网站交互时会用到。 9.经典的全栈式框架 尽管那些单页面应用增长迅速，但还是有大量的使用服务端的web应用。Ruby on Rails, Django, Laravel, Play, ASP.NET是这排名靠前的几个框架。花点时间学习任何的MVC框架都会让你获益良多。 语言/平台/框架排行榜 Node.js第一，PHP第二，JavaScript第三。因为Node.js的社区很多，所以这个结果你也不用太意外。如果你知道JavaScript,你已经一只脚踏进了用Node.js来构建Web APP的可能。 AngularJS处于框架的领导地位。大量的公司和企业已经采用Angular,这就要求开发者更多的具备使用这个框架的技能。主要还是因为有Google里最好的工程师支持。