hi~久等了我的小伙伴们，

今天为大家带来的是前端优化！

关注卓象程序员头条号，更多干货抢先看！

优化完后端和数据库之后，我们紧接着要做的就是针对输出的页面优化你的前端页面和资源文件，主要包括对图片、JS和样式文件的优化。

减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

使用CDN

网站上静态资源即css、js全都使用cdn分发，图片亦然。

避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为 它们的值。所以要避免犯这样的疏忽。

为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

把JS放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。

避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

将CSS和JS放在外部文件中

目的是缓存文件，可以参考上述原则。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。

我们建议采用下列网页性能测试工具进行检测和分析，会给出相关的优化建议：

PageSpeed 谷歌开发的工具

网站管理员和网络开发人员可以使用PageSpeed来评估他们网页的性能，并获得有关如何改进性能的建议。

Yslow

可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow 23条优化规则，这23条，就够我们使用。

关注卓象程序员头条号，定期发布技术文章