本人一直从事的是服务端开发工作，写前端貌似有点跑题，不过自己初中也就是2000年左右的时候，引领我进入计算机大门的也的确是前端，后来也做过不少的前端工作。于是，就想着从自己的角度写点前端这些年的发展。但毕竟不是专业所长，有所纰漏在所难免。

正文

第一代

还记得2000年左右的时候，那时的四大门户：新浪、搜狐、网易、中华网（是的，那时候还没腾讯啥事）。我第一次访问这些网站的时候就被震撼到了，一直很奇怪这是怎么写出来的。恰巧，初中开了一个计算机课，老师当时在给我们讲微软的frontpage，拖着拖着就能出来一个网页。幼稚的我恍然大悟:原来用这东西就能拖出来个新浪网啊。学会了拖网页，学校里家庭条件比较好、接触电脑比较早的同学还把自己的网页传到了网上的免费空间（网易的yeah.net免费空间），然后就俨然成了公众人物。毕竟，那个时候在我们那个小城市，家里有电脑的少，能上网的更少，能有自己的网站还能通过网络访问的则少之又少了。当然，开始大家拖出来的网页都是静态页面（这里的静态指的是静止不动），然后有些人发现加上一段代码，网页上就能有各种类似动画的效果。比如: 标题动态改变、鼠标后跟着一串文字、状态栏滚动字幕等等。frontpage已经不能满足这些了，这时候一款更加NB的软件出现在了我的眼前-dreamweaver。这款软件我后来一直用到了大学本科毕业，当然，从开始的完全依赖dw来拖页面，到后来把它当成了一个写代码的IDE。说起来，那个时候没有那么多前端框架，写个页面就是html+css+js。页面布局用table，然后table里面嵌套table，控制样式一般也使用html tag。现在想想也是醉了，还记得当时还有个原则是最外面的table宽度要设置为960px，100%，居中。这算是我接触前端的第一个时代吧，那个时候国内貌似也就ie浏览器，兼容性的问题根本不存在，技术体系相对来说也比较简单。总体概括来说：

• table布局网页主体
• 使用各种html标签控制样式，比如b、i、strong、br等
• 使用原生js实现动态效果

第二代

后来，业界兴起了div+css的概念。说白了就是内容和样式要分开，div组织内容，css控制样式。与此同时，js技术也飞速发展中。jquery横空出世，成为了前端开发必不可少的一个框架。大家也在乐此不彼的收集着各种各样的jquery插件。那时候觉得jquery真是太好用了，觉得会写jquery插件的人好nb。除此之外，extjs也成为了开发web必不可少的框架，不知多少管理系统都长的一模一样。。。最让我记忆尤甚的是浏览器的兼容性问题，firefox、chrome、safari这些浏览器一下全火了起来，然后兼容性问题就成为了令广大前端开发者最头疼的一件事情，尤其是万恶的ie6。当时在做一个英国的项目的时候，甲方的boss竟然细致到1px都要度量的份上，于是无数个夜晚，我就在那里调整像素，还是要调整在多个浏览器下的像素。不知是幸运还是不幸的我也由此接触到了n多浏览器兼容的问题，记得最深的一个就是ie6的1px问题。对于这些兼容性问题，自己当时总结了一下，基本上使用css reset初始化所有样式，然后使用css hack针对不同浏览器做兼容，其他的针对具体问题具体分析。同样的，js里也存在兼容性的问题，一个典型的就是解析json字符串，有些浏览器里是默认有JSON的方法的，但有些浏览器却没有，只能使用eval来做。这方面，jquery则做了很好的兼容。其实，到了这个时候，整个前端已经乱了，尤其因为微软的自我，ie给大家带来了数不清的麻烦。针对这种情况，W3C适时的提出了新的标准，以求统一浏览器的渲染，也推出了es想统一一下前端脚本语言。不过，由于某些原因，ie6在很长一段时间都曾是国内前端开发者的梦靥，其他兼容性问题也一直成为了遗留问题。此外，随着前端样式和脚本变得越来越多、越来越复杂，页面的性能优化变得被人重视起来，雅虎前端优化35条原则、CSSSprites这些技术应运而生。这算是我经历的第二代前端。由于浏览器的多种多样，这一代的前端开发者真的挺苦逼的。总体概括如下：

• 布局使用Div
• 样式控制使用Css
• Dom操作使用jQuery
• ExtJs类似的前端组件框架开始兴起
• 以Chrome、Firefox为代表的各种浏览器的崛起
• 前端的性能优化: 资源缓存、雅虎前端35条优化原则、CSSSprites、iframe使用的优缺点

其中，对于资源缓存一般包括以下两种解决方案：

• 对比服务器协商缓存(服务器返回304)，推荐使用超长时间的本地缓存(Response加入头cache-control/expires)。
• 文件的路径名包含文件摘要信息达到非覆盖发布以及资源缓存更新。

第三代

经历了两代前端，其实自己后面就没怎么关注过这一块了，顶多就是留意一下业界的新闻，技术体系也基本就停留在了第二代上。最近由于某些原因，需要带一下公司的前端团队，就恶补了一下最新的前端知识，发现自己还真的有点out了。发展到现在，前端工程师真正成为了一个举足轻重的职位。以前由于只有pc端的前端开发，很多人瞧不上前端，觉得前端不过就是做个表单验证，做个小动画，没啥技术含量。而现在由于移动互联网的兴起，移动前端开发成了越来越重要的一部分。与此同时，“富前端”的概念也提了出来，就是让web程序的体验和本地程序体验尽可能一致，于是对前端开发者的要求也就变得越来越高。html5也适时的席卷了整个生态圈，如果说几年前h5还只是个噱头，那么现在h5在移动页面以及移动app混合开发中则已经举足轻重了。与此同时，多种终端的出现，也相应催生了“响应式”页面设计，意思就是能让你的页面根据不同的终端自动适配，能够极大地优化用户体验。而nodejs的出现，则让“全栈工程师”这个名词盛行起来，发展到现在也逐步证明并实现了前后端分离的可行性。此外，页面语义化、页面性能调优、前端工程化、前端模块化、css预处理、js预处理、liveload等也成为了前端领域越来越火的研究方向，相应的诞生了很多新兴框架、技术。总体概括如下：

• CSS预处理器使得大家可以使用普通的编程思维来编写css: Sass、Less。这个技术还是很实用的，毕竟css的编写方式还是非常不灵活的
• JS预处理器：Coffescript、Typescript。这个技术我感觉是提供给不熟悉js编程的人活着是不喜欢js语法的人提供的。Google之前推出的gwt也貌似是为了这个目的。
• Liveload技术可以自动侦测代码改变刷新浏览器
• “富前端”，技术以AngularJs为代表，也带来了MVVM的概念: module view viewModule
• 前端模块化，以RequireJs和SeaJs为代表，前者是预执行，后者是懒执行
• ReactJs引入的虚拟dom和组件化开发以及React Native统一三端的开发。其中React的高性能dom操作值得研究
• 手机、平板网页等多种终端催生响应式页面
• 客户端混合开发，其中技术以Phonegap为代表
• 前段工程：自动化构建工具以Grunt、Gulp为代表，当然gulp是比较先进的。
• 对比之前的Div布局，页面语义化理念的提出
• CSS3带来的n多新特性
• ES6标准落地，带来了新的feature:async/await、decorator、fetch等

此外，随着大数据的日益火热，数据可视化技术也成为了前端一个很重要的部分。尤其是大数据的可视化。这方面，国内的echarts做的还不错，虽然也被不少人吐槽。

关于前端技术体系，详细的内容可以阅读这篇文章：http://blog.csdn.net/borishuai/article/details/8676573。

结语

不管前端怎么变，其核心只有一个：视图呈现。所有的前端技术都是围绕着这一点进行的。只不过有的是从速度上，有的是从交互上，有的则从开发效率上。

说到前端，不得不说一下前端工程师。在最近公司的招聘中，发现前端工程师是一个相对难招的职业，尤其是好的前端工程师，一方面是由于之前大家对前端的轻视所致，另一方面也有前端技术更新迭代太快的原因。那么如何定义一个好的前端工程师呢？除了研发职位普遍具有的一些共性之外，以下几点，我觉得是前端的特质：

• 有一定的审美观: 很难想象一个没有审美观的人开发出来的页面是如何让人觉得赏心悦目的。
• 耐心、细致：有时候前端显示的问题，真的需要一点又一点慢慢地找出来的，尤其是css方面。
• 有一定的产品思维：很多情况下，前端算是和用户直接打交道的（和客户端类似，开发出的东西是直接面向用户的）。因此，具有一定的产品思维，才能让你更好的优化视图、交互，做到更好的用户体验。

最后，打个广告^_^。中华万年历，携2亿用户急需优秀的人才加入，七险一金、待遇优厚。各种职位虚位以待。http://www.lagou.com/gongsi/j1826.html