web性能优化4大方向

性能优化1：原来罪魁祸首的是http请求数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

1.捆绑文件

现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。

2.CSS Sprites

就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。主要涉及到的css知识是background-position。来看一个京东网站的案例：

3.Image Maps

也是将多幅图拼在一起，然后通过坐标来控制显示导航。主要使用到map标签，具体教程，网上一搜就有。

4.Inline images

通过编码的字符串将图片内嵌到网页文本中。

多一份资源就多一个http请求，以上的方法对于资源多的网站来说事十分有用的，这技能一定要get到!

性能优化2：不能忽视的DOM元素

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。

想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，document.getElementsByTagName('*').length

多少算是多了呢?雅虎在写这篇文章的时候号称主页只有700多元素，但现在接近多了一倍。我们的网页至少别比雅虎还多吧...

所以html结构尽可能的简洁，符合w3c的规范，一来可以优化加载性能，二来更符合seo的优化。这个需要经验的积累，需要新手们大量的去练习实践。

性能优化:3：避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。

尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。

浏览器如此实现也是根据RFC 3986 - Uniform Resource Identifiers标准，空的src被定义为当前页面。

所以注意我们的网页中是否存在这样的代码

straight HTML 
<img src="">

JavaScript 
var img = new Image(); 
img.src = ""; 

这是很简单缺很实用的技能，很多新手会忽略。大家要谨记，养成良好的编程习惯。

性能优化篇4：千万别使用CSS表达式

CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

如果想达到类似的效果我们可以通过简单的JavaScript做到。

每天进步一小点，量变带来质变，大家好好学习!