网站性能优化

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

一、页面级优化

1. 减少 HTTP请求数

      每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫 长” 而复杂的过程。资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器  需要分批进行请求，因此会增加用户的等待时间，

    (1). 从设计实现层面简化页面　　

          保持页面简洁、减少资源的使用时最直接的。如果不是这样，你的页面需要华丽的皮肤，则继续阅读下面的内容。　

    (2). 合理设置 HTTP缓存　　

         缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据 (如图 1.1)，当 第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不 过 被缓存资源的请求服务器是 304响应，只有 Header没有Body ，可以节省带宽 )。例如，很少变化的图片资源可以直接通过 HTTPHeader中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

    (3). 资源合并与压缩　　

         如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。　(4). CSS Sprites

         合并 CSS图片，减少请求数的又一个好办法。　　

    (5). Inline Images

         使用 data:URL scheme的方式将图片嵌入到页面或 CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积， 

     而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。

    (6). Lazy Load Images

        这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。

2、将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

     异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)

3、Lazy LoadJavascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）

4、将 CSS放在 HEAD中

     如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

5、异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

6、减少不必要的 HTTP跳转

7、避免重复的资源请求

一、代码级优化

  1、JS

         (1). DOM

         DOM操作应该是脚本中最耗性能的一类操作，如果脚本中包含了大量的 DOM操作则需要注意以下几点：

              A、HTML Collection（HTML收集器，返回的是一个数组内容信息）

                   当你需要遍历 HTMLCollection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属  性、成员保存到局部变量后再使用局部变量。

              B、Reflow & Repaint

                    下列操作会触发reflow:

                       a、插入、删除或者更新页面（文档树）中的节点。

                       b、修改页面的内容，例如在input标签中输入内容。

                       c、移动节点。

                       d、页面中的动画效果。

                       e、获取节点的尺寸，例如获取节点的offsetHeight，或者使用getComputedStyle函数获取节点尺寸。

                        f、改变节点样式。

                       g、改变节点的className属性。

                       h、增加或者删除样式表文件。

                        i、window的resize。

                        j、滚动滚动条，即scroll。

         （2）慎用 with

                      with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查 找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。

因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。

          (3). 避免使用 eval和 Function

                   每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。　　

                  eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。　　

Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。此外，使用 eval和 Function也不利于Javascript压缩工具执行压缩。

          （4）减少作用域链查找

                     前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

                    此外，要减少作用域链查找还应该减少闭包的使用。

             (5). 数据访问　　

                    Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：　　

                     a. 对任何对象属性的访问超过 1次　　

                      b. 对任何数组成员的访问次数超过 1次　　

                     另外，还应当尽可能的减少对对象以及数组深度查找。

             (6). 字符串拼接　

                       在Javascript中使用"+"号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。

2、CSS选择符

       浏览器对选择符的解析是从右往左进行的。

3、Image压缩