WEB优化

前端优化

1，合并css，将a.css，b.css合并到一个c.css，同理也可以合并js

2，压缩css,js，采用node等工具压缩css,js

3，合并请求，在nginx上安装mod_concat模块，这样可以把多个css，js通过一个请求获取

<link href="/style/??css1.css,css2.css,css3.css" type="text/css" rel="stylesheet"/>
<script src="/js/??js1.js,js2.js,js3.js,js4.js" type="text/javascript"></script>

4， 样式表放在顶部、脚本文件放在底部

5，图片

• css sprites：将多张图片合并成一幅单独的图片，适用css的backgroud-position属性，将html元素的背景图片放到sprites图片中的期望位置上。
• 内联图片：通过适用data:URL模式可以在页面中包含图片而无需任何额外的请求。
• IconFont：图标字体，用字体代替图片的技术，使用IconFont之前，首先要确定所选择的字体库是否收费。

6， 启用缓存：服务器配置设置缓存

• expires/If-Modified-Since：浏览器缓存中保存了一个文件的副本，但需要向服务器询问此副本是否可用。 If-Modified-Since是浏览器将最后修改时间发送给服务器，服务器相应头中Last-Modified进行对比；若If- Modified-Since <= Last-Modified 则浏览器读取本地副本。此时响应状态为304 Not Modified, 并不在发送响应体。
  
• expires：虽然使用条件GET和304响应能够节省时间，但浏览器跟服务器端仍然要发送一次请求进行确认。通过明确设置副本的过期时间可 以避免条件GET。当浏览器发现响应头中的expires时，会将过期时间和文件一起保存到缓存中去。在过期之前一直从缓存中读取。expires头使用 一个特定的时间来指定缓存的有效期，他要求浏览器与服务器时间完全一致。而且一旦过期，服务器端配置中需要重新设顶一个过期时间。
  
• Etag：是服务器用于检查浏览器缓存有效性的一种机制。ETag在HTTP1.1中引入，ETag是唯一标识了一个组件的一个特 定版本的字符串。唯一的格式约束是这个字符串必须使用双引号。如果浏览器要验证一个组件是否有效他会使用If-None-Match将etag字符串传送 给服务器。如果ETag是匹配的，服务器端会返回304.（如果实体数据需要根据User-Agent或Accept-Language来改变 时，ETag提供了更高的灵活性）。对于使用服务器集群的网站来说，从一台服务器到另一台服务器，ETag通常是无法匹配的。这是ETag的问题。而且即 便同时使用If-Modified-Since和If-None-Match也并不能达到预期效果。解决方法总是有的：自定义Etag格式

7， 减少下载量：服务器配置设置开启gzip压缩

8， 使用CDN，图片，css，html等静态资源CDN化，减少直接对服务器的访问压力

服务端优化

1，使用PHP-FPM

2，服务器配置开启OpCache

3，优化算法逻辑

4，使用redis缓存（部分非动态接口可以CDN化）

5，负载均衡，服务器集群

6，图片服务器分离

7，数据库优化

• SQL优化
• 读写分离
• 水平分割，垂直分割
• 数据库集群