前端性能优化

今天网站上线自己搜集总结了一些前端的优化1.精灵图

多个图片拼成一个图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置（毕竟流量 都是钱啊）

2.css选择器优化

3. js改变样式直接操作类名

4. js直接操作dom节点

5.正则匹配选择器6.js获取元素优化

7.内存溢出

一般在递归运行时，会产生内存溢出，造成在运行递归时性能大幅度下降，在运行结束后内存

会被系统回收，所以在运行递归时需要用对象将值保存，在每次递归运算时检测，如果存在则直接返

回，不存在则添加，这样就可以解决递归的很大性能。

8.对Ajax用GET请求

POST请求是通过先发送HTTP请求头，再发送数据来实现的，GET而是没有请求头的，但是需要注 意：GET大小限制约4K，POST则没有限制；但POST的安全性要比GET的安全性高。

9.延迟加载图片

在页面发起请求时，请求量过大，可以使图片进行懒加载，当页面滚到到图片的位置时，再 进行加载图片。

10 减少http请求次数

使用图片地图

使用CSS Sprites

合并JS和CSS文件

避免内部无效的链接

合理设置 HTTP缓存 恰当的缓存设置可以大大的减少 HTTP请求

浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢

11 减少DNS查询次数

DNS 是域名系统 (Domain Name System) 的缩写 DNS查询也消耗响应时间

通过使用Keep-Alive和较少的域名来减少DNS查找

12 缓存Ajax Ajax可以帮助我们异步的下载网页内容.我们还是要注意尽量应用以下规则提高ajax的响应速度

添加Expires 或 Cache-Control报文头使回复可以被客户端缓存

压缩回复内容

减少dns查询

精简javascript

避免跳转

配置Etags

确保Ajax请求遵守性能知道,必要时候应具备长久的expires头

13 减少DOM元素数量

DOM操作应该是脚本中最耗性能的一类操作

通过在浏览器中的一条简单命令就可以算出使用了多少标签， document.getElementsByTagName('*').length

14 Gzip压缩传输文件

15 减少Cookie大小

16 移动客户端

保持单个内容小于25KB

这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精

简文件工具要用上了。

17 使用CDN缓存