大型分布式网站的思考（二）：Web前端性能优化

一般来说web前端是指网站业务逻辑之前的部分，比如：浏览器加载、网站视图模型、图片服务、CDN服务等等。web前端优化主要从如下三个方面入手：

浏览器访问优化

减少http请求

http协议是一个无状态的，每次请求都需要建立通信链路进行传输，在服务器端，一般每个请求都会分配一个线程去处理。

减少http请求的主要手段是合并CSS、合并js、合并图片。

使用浏览器缓存

css、js、Logo、图标等静态资源文件更新频率较低，可以将这些文件缓存在浏览器中。

在更新js等文件的时候，一般不是将文件内容更新，而是生成一个新的文件，然后更新html的引用。

更新静态资源的时候，也是要逐量更新，以避免用户浏览器的大量缓存失效，造成服务器负载增加、网络堵塞。

启用压缩

在服务器对文件压缩，然后在浏览器端解压缩，可以减少通信传输的数据量。

CSS放在页面最上面，js放在页面最下面

浏览器会在下载完全部CSS之后才对整个页面进行渲染，而浏览器是在加载js之后就立即执行，有可能会阻塞整个页面。因此最好的做法就是把CSS放在最上面，js放在最下面。但是如果是页面解析的时候就用到js，也是要相应的js放在上面。

减少cookie传输

cookie会包含在每次请求和响应中，太大的cookie会影响数据传输，需要慎重考虑哪些数据写入cookie中。

对于某些静态资源的访问，如css和js等，发送cookie没意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie。

CDN加速

CDN（content distribute network，内容分发网络）的本质仍然是一个缓存。将缓存放在离用户最近的地方，使得用户可以以最快的速度获取数据。

CDN缓存的一般是静态资源，如图片、文件、CSS、js、静态网页等。

反向代理

反向代理服务器位于网站中心机房的一侧，代理网站web服务器接收http请求。

反向代理可以在一定程度上保护网站安全，来自互联网的访问请求必须经过代理服务器，相当于在web服务器和攻击之间加了一个屏障。

反向代理也可以通过配置缓存，静态资源被缓存在反向代理服务器，当用户访问时，可以从反向代理服务器上返回。有些网站也会将部分动态内容缓存在代理服务器上，通过内部通知机制，更新缓存。

反向代理也可以实现负载均衡的功能。

写在最后

可以发现，在web前端性能优化的时候，提到最多的就是缓存。

网站性能优化第一定律：优先考虑使用缓存！