前端开发在很多人眼里很简单，很多人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。简单的html，我想稍微学过一点的人，都能写出来，但是，页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。

最近一个朋友说，他们网站访问很卡，页面访问速度很慢，让我看一下是否能够优化，我也尝试着想去做一下网站的整站优化，所有，就先去看了一下他们网站。

yshow的得分数据：

 

dynaTrace 的得分数据：

可以说，两项前端性能测试都不算太过关，从这两个测试里，再看他们网站的代码，发现问题都是一些常规的企业站所存在的普遍问题：

1、代码结构混乱，div和table的交替使用，标签语义化比较差

2、css代码都各自为战，一个页面，一堆css，很多可以公用的css模块没有能够很好的提取出来

3、背景图片没有能够对图片进行合并，导致页面背景图片的请求次数过多

4、css和js统统丢在页头

还有一些js的问题，既然发现了问题，我就着手写代码了。。。其中过程省略一万个字！

真的，连着几个晚上黑灯瞎火熬夜敲代码的日子，怎一个苦字了得。。。不过，敲代码的确很有成就感，尤其是在最终结果出来的时候，本地测试起码能够让两项测试的分数都保持在85分以上，这个还是很强大的，很期待他们网站改版之后的网站访问速度如何。

对网站的图片采用了一些时下流行的图片延迟的加载，瀑布流等效果，感觉不错。

前端的学习，路还很遥远。。。对我来说。。这才是刚开始。。。

谨遵雅虎的十三条军规大部往前走！

1、减少http请求；（背景图能合并拼合的尽量拼合）
2、运用CDN网络；（这个小网站就算了吧）
3、给头部一个过期日期；
4、级服务器采用Gzip压缩；（同样小网站还是也算了吧）
5、把CSS放在页头；
6、把脚本移到底部；
7、禁止CSS表达式写法；（能不用就不用）
8、引用外部的JS和CSS文件；（这个就得关系到网站的架构上的事情了。写在页面上，能加快访问速度，引用外部的，能够被缓存，具体看情况）
9、减少DNS查找；
10、给JS文件瘦身；
11、禁止重定向；
12、删除重复的脚本文件；
13、ETags 配置文件；（不懂。。。）

 

——————————————————————————  分割线  —————————————————————————————————————

改版后网站上线了

dynaTrace分数：83分

 

yshow分数：77分

 

从两个性能测试的分析上来看，cdn上的丢分比较多，诶。。。yshow的分数还是偏低，我是感觉没什么办法了，不过相比之前来说，已经好很多了。。。

 

继续努力。。。