常用方法
压缩源码和图片
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的关注在于让服务器尽快响应请求,以及减少请求对服务器的开销
1、提高服务器的请求处理能力:
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也是采用基于事件的异步非阻塞方式处理请求,所以在处理高并发请求上有天然的优势。
2、高性能网站的关键:缓存
在一个Web站点中,它的数据流从服务器端到浏览器端,哪些地方可以使用缓存来优化:
- 服务器缓存
- 数据库缓存
基本的数据库查询缓存——可以开启MySQL查询缓存来提高速度,并且减少系统压力
MySQL默认不开启查询缓存,但我们可以通过修改MySQL安 装目录中的my.ini来设置查询缓存。设置的时候可以根据实际情况配置缓冲区大小、单个查询的缓冲区大小等。
如果您希望优化MySQL服务器的查询性能 和速度,可以在MySQL配置中增加这两项:
- query_cache_size=SIZE SIZE是指为查询缓存开辟多大的空间。默认是0,也就是禁用查询缓存。
- query_cache_type=OPTION 设置查询缓存的类型,可选的值有以下这三种。
- 0:设置查询缓存的类型,可选的值有以下这三种。
- 1:所有的缓存结果都缓存起来,除非查询命令以SELECT S_NO_CACHE开始。
- 2:只缓存查询命令以SELECT SQL_CACHE开始的查询结果。
——问题是“缓存命中率不高”,所以配置缓存之后第一件事就是查询命中率,如果命中率低,不如不做缓存。数据库查询缓存的一个设计原则:其缓存失效设计是很粗糙的——保证实时性可牺牲命中率??
扩展数据库缓存:memcached
memcached应运而生,它是一个高性能分布式内存对象缓存系统,用于减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而
提高动态、数据库驱动网站的速度。memcached可以与数据库查询缓存配合使用。memcached的设计原则是:时间过期,即只有设定的时间到了才
去更新数据,提高了命中率,但有可能是”不新鲜的“。