今天网站上线自己搜集总结了一些前端的优化
1.精灵图
多个图片拼成一个图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置（毕竟流量
都是钱啊）
-
Sprite 中水平排列图片，垂直排列会增加文件大小
-
Sprite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式
-
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素
2 css优化
（1 ）css 命名 、书写规范；（好的代码看上去就很整齐 很有条理性这样方便日后的维护和管理）
（2） 少用滤镜，少用hack，多使用继承属性。
（3 ） 不要在ID选择器和class选择器前 使用标签名 例如：div.box { color: #f00; }; 直接 可以
用类名， .box { color:#f00;} 这样浏览器找到这个class后 就不用再匹配是否存在div标签.从而
提高了渲染效率 借助相关继承关系
（4 ） 尽量少的去使用后代选择器，降低选择器的权重值 后代选择器的开销是最高的，尽量将选择器
的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
（5 ）不滥用浮动 虽然浮动本科避免 但不可否认很多css bug是由于浮动而引起。
（6 ） 值为0时不需要任何单位
（7 ） 遵守盒模型规则
其次还有：
-
按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；
-
优化 cookie ，减少 cookie 体积；
-
避免 <img> 的 src 为空；
-
尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；
-
合理使用display属性：
a.display:inline后不应该再使用width、height、margin、padding以及float
b.display:inline-block后不应该再使用float
c.display:block后不应该再使用vertical-align
d.display:table-*后不应该再使用margin或者float
3. js改变样式直接操作类名
事件委托
将多个节点上的事件放到其父节点（经典案例：将 li 上的事件绑定到 ul 上）。
4. js直接操作dom节点
当操作节点时尽量将节点添加在元素的后面，如果插入到节点的前面时，会使插入节点之后的节点都引起回流，而插入到后面时只需要被插入的节点回流一次就可以了。
使用innerHTML的方式代替用appendChild; 因为innerHTML开销更小,速度更快,同时也更加内存安全.用 createElement方式创建一个dom节点,有一个很重要的细节: 在执行完createElement代码之后,应该马 上append到dom树中; 否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存 的灾 难.删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存.
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请求越多,总体下载速度越慢
删除重复的JS和CSS 重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题
缓存控制
请求头里，可以发送 If-Modified-Since 以及 If-None-Match 等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，告诉浏览器使用缓存，避免重新下载资源。Pragma 和 Cache-Control 等 也 能控制缓存。如告诉服务端不要缓存等。
发送请求时，cookies 也在请求之中。因此，cookies 也可以作为减少请求的优化对象。如，根据同源限制策略，可以使用多个域名加载资源，如加载静态资源，就不会发送多余的 cookies；同时，合理设置 cookies 的路径和域名，如在子站避免不必要的来自父站的 cookies。
11 减少DNS查询次数
DNS 是域名系统 (Domain Name System) 的缩写 DNS查询也消耗响应时间
通过使用Keep-Alive和较少的域名来减少DNS查找
12 缓存Ajax
“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。 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缓存
所有网站都会用到第三方资源，对于第三方资源，如果选择让自己的服务器提供，那么对于小型站点，本就不大的带宽相当一部分还要被公共资源占用，无形之中压缩了服务器带宽，如果把这部分资源让第三方 cdn 提供，那么对于网站加载速度会有不小的提升。
博主选用的是 bootstrap 中文站提供的 cdn 静态库 ，不少国内 cdn 静态库，可以说 bootstrap 家的还是很良心的，更新及时，资源现在也很丰富，基本用的三方资源都能在上面找到，于是接下来就是搜索静态资源 ＋ 替换静态资源：
<script src="/s/js/jquery.min.js"></script>
改为
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
一般网站 90% 的流量都用于静态资源的加载，除了用免费 cdn 加载第三方资源，还可以自己申请云空间储存自己的静态资源，进一步减小服务器的开销，让服务器只专注于提供数据或者网页渲染服务。
18 避免404
有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的
404响应内容中找到可能有用的部分当作JavaScript代码来执行。