web性能优化

经常使用方法

压缩源码和图片
　　JavaScript文件源代码：能够采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片能够根据具体质量来压缩为50%到70%，PNG可 以使用一些开源压缩软件来压缩，好比24色变成8色、去掉一些PNG格式信息等。
　　选择合适的图片格式：若是图片颜色数较多就使用JPG格式，若是图片颜色数较少就使用PNG格式，若是可以经过服务器端判断浏览器支持WebP，那么就使用WebP格式和 SVG格式。
合并静态资源
　　包括CSS、JavaScript和小图片，减小HTTP请求。
开启服务器端的Gzip压缩
　　这对文本资源很是有效，对图片资源则没那么大的压缩比率。
使用CDN 或者一些公开库使用第三方提供的静态资源地址
　　好比jQuery、normalize.css。一方面增长并发下载量，另外一方面可以和其余网站共享缓存。
延长静态资源缓存时间

　　频繁访问网站的访客就可以更快地访问。不过，这里要经过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

CSS引用放在页面头部，JavaScript引用放在页面底部

　　这样就不会阻塞页面渲染，让页面出现长时间的空白。

前端工程师的性能优化

基本优化方法是：

• 尽可能减小同一域下的HTTP请求数
• 以及尽可能减小每个资源的体积

　　浏览器经常限定了对同一域名发起的并发链接数的上限。E6/7和Firefox2的设计规则是，同时只能对一个域名发起两个并发链接。新版浏览器广泛上限设定为4至8个。

　 　把静态资源放在非主域名下，这种作法除了能够增长浏览器并发，还有一个好处是，减小HTTP请求中携带的没必要要的cookie数据。cookie是某些 网站为了辨别用户身份而储存在用户浏览器中的数据。cookie的做用域是整个域名，也就是说若是某个cookie存放在google.com域名下，那 么对于google.com域名下的全部HTTP请求头都会带上cookie数据。

　　若是Google把全部的资源都放在google.com下，那么全部资源的请求都会带上cookie数据。对于静态资源来讲，这是毫无必要的，由于这对带宽和连接速度都形成了影响。
　 　前端工程师常常作的优化是合并同一域名下的资源，好比把多个CSS合并为一个CSS，或者将图片组合为CSS贴图，还有一些优化建议是省掉没必要要的 HTTP请求，好比内嵌小型CSS、内嵌小型JavaScript、设置缓存，以及减小重定向。这些作法虽然各不相同，可是若是了解HTTP请求的过程， 就知道这些优化方法的最终目的都是最大化利用有限的请求数。
　　一个基础题目是“经常使用的图片格式有哪些，它们的使用场景是什么”。对图片的敏感性反映出工程师对带宽和速度的不懈追求。比较大的文本资源，必须开启gzip压缩。
对于一个CSS资源的请求耗时（两个细节）：
　　这个CSS资源请求的体积是36.4KB（这是gzip压缩过的体积），解压缩以后，CSS内容其实是263KB，能够算出压缩后体积是原来的13.8%。
　　整个链接的创建花费了30%的时间，发出请求到等待收到第一个字节回复花费了20%的时间，下载CSS资源的内容花费了50%的时间。

后台工程师的性能优化

　　对于HTTP的关注在于让服务器尽快响应请求，以及减小请求对服务器的开销
　　一、提升服务器的请求处理能力: Apache 经过模块化的设计来适应各类环境，其中一个模块叫作多处理模块（MPM），专门用来处理多请求的状况。Apache安装在不一样系统上的时候会调用不一样的默 认MPM，咱们不用关心具体的细节，只须要了解Unix上默认的MPM是prefork。为了优化，咱们能够改为worker模式。
　　 prefork和worker模式的最大区别就是：prefork 的一个进程维持一个链接，而worker的一个线程维持一个链接。因此prefork更稳定但内存消耗也更大，worker没有那么稳定，由于不少链接的 线程共享一个进程，当一个线程崩溃的时候，整个进程和全部线程一块儿死掉。可是worker的内存使用要比prefork低得多，因此很适合用在高HTTP 请求的服务器上。

Apache和Nginx：
　　在高链接并发的状况 下，Nginx是Apache服务器不错的替代品或者补充：一方面是Nginx更加轻量级，占用更少的资源和内存；另外一方面是Nginx 处理请求是异步非阻塞的，而Apache 则是阻塞型的，在高并发下Nginx 能保持低资源、低消耗和高性能。——因为Apache和Nginx各有所长，因此常常的搭配是Nginx处理前端并发，Apache处理后台请求。新秀 Node.js也是采用基于事件的异步非阻塞方式处理请求，因此在处理高并发请求上有自然的优点。
　　二、高性能网站的关键：缓存
　　在一个Web站点中，它的数据流从服务器端到浏览器端，哪些地方可使用缓存来优化：

• 服务器缓存
• 数据库缓存

　　基本的数据库查询缓存——能够开启MySQL查询缓存来提升速度，而且减小系统压力

　　MySQL默认不开启查询缓存，但咱们能够经过修改MySQL安 装目录中的my.ini来设置查询缓存。设置的时候能够根据实际状况配置缓冲区大小、单个查询的缓冲区大小等。

若是您但愿优化MySQL服务器的查询性能 和速度，能够在MySQL配置中增长这两项:

1. query_cache_size=SIZE SIZE是指为查询缓存开辟多大的空间。默认是0，也就是禁用查询缓存。
2. query_cache_type=OPTION 设置查询缓存的类型，可选的值有如下这三种。
   • 0：设置查询缓存的类型，可选的值有如下这三种。
   • 1：全部的缓存结果都缓存起来，除非查询命令以SELECT S_NO_CACHE开始。
   • 2：只缓存查询命令以SELECT SQL_CACHE开始的查询结果。

——问题是“缓存命中率不高”，因此配置缓存以后第一件事就是查询命中率，若是命中率低，不如不作缓存。数据库查询缓存的一个设计原则：其缓存失效设计是很粗糙的——保证明时性可牺牲命中率??

　　扩展数据库缓存：memcached　 　memcached应运而生，它是一个高性能分布式内存对象缓存系统，用于减轻数据库负载。它经过在内存中缓存数据和对象来减小读取数据库的次数，从而 提升动态、数据库驱动网站的速度。memcached能够与数据库查询缓存配合使用。memcached的设计原则是：时间过时，即只有设定的时间到了才 去更新数据，提升了命中率，但有多是”不新鲜的“。