一、Web网站调优

1、最小化http请求

一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

针对于减少HTTP请求数量，可以从以下几个方面进行优化：①内联图片；②CSS Sprites；③合并css和js文件（使用压缩工具，如YUI compressor，Gulp，Webpack）；④图片映射；⑤图片惰性加载（lazyload）。

2、压缩

①压缩图片：

1）缩小图片分辨率；

2）改变图片格式；

3）降低图片保存质量。

推荐使用TinyPNG

②压缩CSS和JS：

去除不必要的空白符、格式符、注释（即对代码进行格式化）。

推荐使用YUI compressor，Gulp，Webpack

③Gzip压缩响应包：

在现在的HTTP协议中，通常会使用gzip来压力HTTP响应包，从HTTP / 1.1开始，Web客户端通过HTTP请求中的Accept-Encoding标头指示对压缩的支持。

Accept-Encoding：gzip，deflate

如果服务器接受到的语法中包括这个头，就会使用客户端列出来的方法中的一种来压缩响应，Web服务器通过响应中的Content-Encoding头来通知Web客户端。

Content-Encoding：gzip

3、外置JavaScript和CSS，将css放在顶部，将js放在底部

内联JavaScript和CSS的优点如下：

1）有效减少 HTTP 请求次数，提升前端页面性能，缓解服务器压力；

2）浏览器加载完CSS才能渲染页面，因此可以防止CSS文件无法读取而造成页面裸奔的现象。

内联JavaScript和CSS的缺点如下：

1）可维护性差，每天如果有需要修改内容，必须对很多页面进行修改；

2）内联JavaScript和CSS在每次页面加载的都必须重新加载；

3）协同开发的能力差，不方便多名开者同步工作。

外联JavaScript和CSS的优点如下：

1）如果JavaScript和CSS被多个页面调用时，这样只要修改一个文件就可以，提高可维护性；

2）分离HTML、CSS和Javascript，提高js和css的复用性；

3）外置Javascript文件可以被浏览器缓存。

外联JavaScript和CSS的缺点如下：

1）外置的方式增加了HTTP的请求数；（通过缓存来解决）

2）浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

5、移除重复脚本

如果一个页面中有两次使用到同一个JavaScript文件，那这将对页面性能产生很大的影响。导致一个脚本的重复又两个主要因素：团队大小和脚本数量。开发一个网站需要极大数量的资源，不同的团队需要构建一个大型web的不同部分，当团队整合和沟通工作没有做足，则容易出现重复脚本的情况。当然脚本数量也是重要的一环，脚本数量越多越容易出现重复脚本的情况。

重复的脚本通常有两个方面影响页面性能：一是增加了不必要的HTTP请求；二是JavaScript执行所花费的时间。

6、避免重定向

重定向：用户请求的页面被转移到了别的地方，浏览器向服务请请求一个页面，服务器告诉浏览器请求的页面已经被转移到另外一个页面，并告知另一个页面地址，浏览器就再发送请求到重定向的地址。这样会增加服务器和浏览器之间的往返次数，影响网站性能。

重定向

重定向状态码有：301：永久重定向；302：临时重定向。304：not modified 并不是真的重定向，它是用来告诉浏览器get请求的文件在缓存中，避免重新下载。

如果一个页面中有两次使用到同一个JavaScript文件，那这将对页面性能产生很大的影响。导致一个脚本的重复又两个主要因素：团队大小和脚本数量。开发一个网站需要极大数量的资源，不同的团队需要构建一个大型web的不同部分，当团队整合和沟通工作没有做足，则容易出现重复脚本的情况。当然脚本数量也是重要的一环，脚本数量越多越容易出现重复脚本的情况。

重复的脚本通常有两个方面影响页面性能：一是增加了不必要的HTTP请求；二是JavaScript执行所花费的时间。

7、CDN内容分发网络

虽然用户平均的带宽每年都在增长，但是随着系统用户特性不同，用户与Web服务器的距离也在不断的拉长，而用户与Web服务器间距离长短会影响到页面响应时间。网站最初通常将所有的服务器放在同一个地方，当用户群增加时，公司就必须面服务器放置地点不再合适的问题，有必要在多个地理位置不同的服务器上部署内容。

如果Web服务器离用户更近，则HTTP请求的响应时间将会缩短，与其重新设计应用程序，不如将应用程序Web服务器分散开，这样不仅能达到响应时间大幅减少的目的，还更容易实现，所以我们研究了一种新的技术即内容分布网络CDN（Content Delivery Network）。

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。--《百度百科》

注意点：

实时性问题，在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。

8、减少DNS查询

DNS解析是存在开销的，通常浏览器查找一个指定主机名的IP地址，需要花费20到120ms，在DNS解析完成之前，浏览器不能从主机名那里下载任何东西。

在DNS解析过程中，减少唯一主机名的数量也呆以缩短DNS解析时间，如果客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。但是减少唯一主机名的数量有可能减少页面中发生的并行下载量。减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这在减少DNS查找和允许高度并行下载之间取得了很好的折衷。

参考：

1. https://kuaibao.qq.com/s/20180815A0B1HW00?refer=spider

2. http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.htm