从BaiduWorld历年的官网看web前端发展

百度世界（BaiduWorld）

http://baiduworld.baidu.com/

为什么拿百度说事，因为百度世界自2006~2014年的每个年度的官网都保存的很好，让我们得以回顾更早时候百度世界的官网是啥样。通过回顾以前的网站模样，就可以侧面看出web前端技术这几年的发展历程了。

2006

http://baiduworld.baidu.com/2006/index.html

2007

http://baiduworld.baidu.com/2007/index.html

2008

http://baiduworld.baidu.com/2008/index.html

2009

http://baiduworld.baidu.com/2009/index.html

20010

http://baiduworld.baidu.com/2010/index.html

2011

http://baiduworld.baidu.com/2011/index.html

2012

http://baiduworld.baidu.com/2012/index.html

2013

http://baiduworld.baidu.com/2013/index.html

2014

http://baiduworld.baidu.com/

一一列举了每个年度的官网地址，可以看出2014年也就是最近一年的官网基于html5文档申明规范，并在头部最显眼的地方做了一个js画线的动画 效果（flash已经逐渐淡出视野，动画大部分用js来实现，因为可以兼容移动设备）。出于职业的原因，首先就想到的是html5的canvas或者 svg画图，但是看源代码不是，不过也是js实现的，大概原理是这样的：

定义一个外围层

html

<div class="divWrapper"></div>

css

.divWrapper{

   width:100px; height:100px; overflow:hidden;

}

在添加一个线条层之后是这样

html

<div class="divWrapper">

    <div class="divLine'></div>

</div>

css

...

.divLine{ 

   border:#ccc solid 1px;  border-radius:100px; width:100px; height:100px;

}

js通过改变divWrapper的宽度，使其宽度由0逐渐变为100px，这个时候，就可以看到线条逐渐出来，就有画画的感觉了，用到jQuery的animate函数很容易实现。

BaiduWorld2013 则还是传统的html文档申明规范，很沉长的一段申明，这个时候html5已经出来但为兴起。用到了时间轴(timeline)。

....

2006年则...

没有js交互，唯一一处交互都是用flash实现，在当时flash很流行，列表用了table，在当时table是主流布局方式，后来才有的div+css..

so.. 前端技术真的更新迭代的很快，以前的web前端真的很容易，现在很不容易，单单会div/css或者html5/css3都无法满足市场需要，还需要会js完成大量的交互，jquery，nodejs等框架的使用，所以现在web前端的工作越来越难做，这就要求我们前端工程师不断的专研专研...