大型网站架构——性能优化之前端优化

大型网站架构——性能优化之前端优化

这一系列文章会用来记录《大型网站技术架构》的总结，相当于是一个读书笔记。最近读了这本书，给我最大的感受就是它差不多是一个“面试提纲”，串联起了许多以往在面经中经常见到的知识点及需要掌握的技术，也终于粗浅地理解了为什么企业需要我们掌握这些知识，它们在网站架构中可以用来做些什么。
跳过前面的介绍，我们从优化开始。根据网站分层架构，网站的性能优化可分为：

• Web前端性能优化
• 应用服务器性能优化
• 存储服务器性能优化

三个大类。

前端除了我们熟悉的浏览器加载、图片服务之外，还有CDN也算作前端。CDN是什么呢？它是内容分发网络（Content Distribute Network），本质就是一个缓存服务器（缓存在大型网站性能方面起着非常重要的作用，总之什么性能提升都可以靠缓存，用就对了），部署在网络运营商的机房，所谓的“网络访问第一跳”，可以让用户以最快的速度获取数据。

前端性能优化的手段主要有：

1. 浏览器访问优化

这里面包括：减少http请求、使用浏览器缓存、启用压缩、调整CSS和JavaScript的顺序、减少Cookie传输。

首先http协议是无状态的应用层协议，即每次http请求都需要建立一次通信链路，进行数据传输，服务器端也需要一个独立的线程去处理。所以减少http请求的数目可以有效提高访问性能。主要手段有：合并css、合并js、合并图片。

浏览器缓存也是比较熟悉的了，就是缓存一些静态资源，如logo、css、js文件等。可通过设置http头中cache-control和expires的属性实现。在更新静态资源时，也应该采用批量更新，比如需要更新10个图标文件，不是一次全部更新，而是一个一个逐渐更新，避免用户浏览器突然性的大规模缓存失效，造成服务器负载骤增的情况。

启用压缩：即在服务器端对文件进行压缩，在浏览器端对文件解压缩。gzip压缩或可达到较好的效果。但压缩可能对服务器和浏览器产生一定的压力，因而需要权衡考虑。

css放在页面最上面，js放在页面最下面：这是由于浏览器会在下载完所有的css之后才对整个页面进行渲染，但会在加载js之后立即执行。所以应该让浏览器尽快下载css而缓步执行js，当然页面解析需要用到的js另当别论。

减少cookie传输：这个比较简单，就此略过。

2. CDN加速

就是利用CDN缓存静态资源，如图片、文件、CSS、Script脚本、静态网页等等。

3. 反向代理

传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上。而反向代理服务器位于网站机房一侧，代理网站WEB服务器接收http请求。（也就是大名鼎鼎的nginx的作用）
反向代理服务器具有保护服务器安全的作用，相当于一层缓冲吧，在web服务器和网络攻击之间建立了一个屏障。同时，也可以在代理服务器上配置缓存功能（又是缓存），加速web请求。此外，代理服务器还可以实现负载均衡功能。