网站的高性能架构-WEB前端性能优化

1、浏览器优化：

（1）减少HTTP请求：因为HTTP请求是无状态的请求，每次请求都要重新建立通信链路进行传输数据。而对于服务端，每个HTTP请求都要启一个线程处理，这无非增加了整个系统的开销和网络流量。所以我们可以减少http请求来提升系统的性能，主要可以 合并CSS/JS/图片等静态资源，尽量将这些静态资源合并到一个文件里，减少http请求

（2）浏览器缓存，像CSS/JS/图片等静态资源，这些资源更新频率比较低，所以我们可以 将其缓存到浏览器，这样就可以减少HTTP请求了。可以设置HTTP头中的Cache-Control和expires属性，设置浏览器缓存，缓存时间可以是天，也可以是月。

使用浏览器缓存策略的网站在更新资源时，应该逐量更新的方法，一部分一部分的更新，避免一下全部更新，导致浏览器一下需要重新加载太多静态资源，这样服务器会突然负载骤增，网络堵塞。

（3）启用压缩，在服务端对文件进行压缩，在浏览器端进行文件解压缩，可以有 效减少通信传输的数据量。文本文件的压缩率可达到80%，因为想HTML/CSS/JS文件启用GZIP压缩可达到较好的效果，。但是压缩对浏览器和服务器产生一定的压力，在通信良好，而服务器资源不足的情况要权衡考虑。

（4） CSS放在页面最上面，javascrip放在页面最下面，浏览器会在下载完CSS之后才对整个页面进行渲染，因此最好的做饭是将CSS放在页面最上面，让页面尽快下载CSS。javascrip则相反。浏览器在加载js后立即执行，有可能阻塞整个页面，造成页面显示缓慢。因此js最好放在页面最下面。

(5)减少Cookie传输，一方面是cookie包含在每次的请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据要写入cookie要慎重考虑，尽量减少Cookie中传输的数据量。另一方面对于某些静态资源的访问，如CSS/SCRIPT等，发送Cookie没有任何意义， 可以考虑静态资源用独立域名访问，避免请求静态资源时发送Cookie，减少Cookie传输的次数。

2、CDN加速

CDN的本质是一个缓存，它是部署在网络运营商的机房里，它通过将数据缓存到 离用户最近的网络服务提供商的机房里，而这些运营商又是终端用户的网络服务提供商，所以当用户请求路由 第一跳就达到了CDN服务器，当CDN中存在浏览器请求的资源时，则直接返回给浏览器，这种路径最快，也可以减少服务器的压力。

CDN能够缓存的一般是 静态资源，比如图片、文件、CSS、Script脚本、静态网页等，但是这些资源访问的频率很高，所以将其缓存到CDN上，会极大的提升了网页的请求速度。

3、反向代理

传统代理服务器位于浏览器一侧，代理浏览器HTTP请求发送到互联网上。

反向代理服务器位于网站机房一侧，大力网站WEB服务器HTTP请求。来自互联网的请求访问必须经过代理服务器，相当于在web服务器和可能的网络攻击之间建立了一个屏障。

反向代理服务器还可以通过配置缓存功能加速web请求，当用户第一次访问静态内容的时候，静态内容被缓存到反向代理服务器中，这样以后就可以直接返回了，加速web服务器响应并减轻服务器复旦。有时候也可以将动态内容缓存到反向代理服务器上，但是当内容变更后，要通过通知机制通知反向代理服务器缓存失效。

反向代理服务器也可以实现负载均衡的功能，而通过负载均衡构建的集群可以提高系统总体的处理能力，进而改善整个系统的性能。