web性能优化

一、 减少Http请求

1、图片

  使用CSS  Sprites技术

  Base64图片潜入网页data:URL

2、CSS/JavaScript

  使用代码压缩技术，减小文件体积。

3、字体

  选择轻量级字体图标库。

4、Flash

  推荐使用CSS3动画处理(考虑兼容问题)

5、资源懒加载

  代用户真正浏览到相关资源时，再加载。

 

二、代码位置优化

 

1、CSS样式放在顶部

2、JavaScript代码放尾部

 

三、代码/页面压缩

 

1、Gzip

2、JSMin

3、YUI Compressor

 

四、CSS代码优化

 

1、尽量避免使用 @import 命令

2、避免使用 CSS Expressions

3、避免使用 Filter

4、CSS 缩写

5、CSS Selectors

6、尽量减少规则数量

7、尽量避免使用 后代 选择器

8、利用 CSS 的继承机制

9、可以使用jsmin

 

五、JavaScript代码优化

 

1、从dom节点中删除不必要的节点

2、单个dom节点操作

  appendChild()或者Jquery的append()， append不会影响到其他的节点

3、批量操作dom

  使用 innerHTML开销更小,速度更快,同时也更加内存安全

  一定不要在循环中使用 innerHTML += 的方式添加,这样反而会使速度减慢，而是应该中间用 array缓存 起来,循环结束后调用 xx.innerHTML =array.join(‘’);或者至少保存到   string 中再插到 innerHTML

4、创建  Dom 节点

  在执行完 createElement代码之后,应该马上append到dom树中

5、删除 Dom 节点

  删除 dom节点之前,一定要删除注册在该节点上的事件，否则将会产生无法回收的内存。

  removeChild无法有效地释放 dom节点  

6、监听动态元素事件

  Dom 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理。把事件注册上提到父节点上,这 样就不需要为每个子节点注册事件监听

 

六、图片优化

 

1、减少图片数

2、降低图像质量

3、使用恰当的格式

  JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑 截屏上。

  GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、 按钮、表情等等。当然，gif 的一个重要的应用是动画图片。就像用 Lunapic 制 作的倒映图片。

  PNG：PNG 格式能提供透明背景，是一种专为网页展示而发明的图片格 式。一般用于需要背景透明显示或对图像质量要求较高的网页上。对于一些背景 和小图标来说兼容的                 PNG8格式图片是不错的选择。