前端性能优化（更新中...）

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

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

1. Sprite 中水平排列图片，垂直排列会增长文件大小

2. Sprite 中把颜色较近的组合在一块儿能够下降颜色数，理想情况是低于256色以便适用PNG8格式

3. 不要在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 ） 遵照盒模型规则

其次还有：

1. 按需加载，把统计、分享等 js 在页面 onload 后再进行加载，能够提升访问速度；

2. 优化 cookie ，减小 cookie 体积；

3. 避免 <img> 的 src 为空；

4. 尽可能避免设置图片大小，屡次重设图片大小会引起图片的屡次重绘，影响性能；

5. 合理使用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代码来执行。