如何进行web前端性能优化
排查一个网站的性能瓶颈和排查一个程序的性能瓶颈的手法基本相同,检查请求处理的各个环节日志,分析哪个环节相应时间不合理、超过预期;然后检查监控数据,分析影响性能的主要因素是内存、磁盘、网络还是CPU,是代码问题还是架构设计不合理,或者系统资源确实不足。
根据网站分层结构,性能优化可以分为Web前端性能优化、应用服务器性能优化、存储服务器性能优化类。
咱们先讲讲Web前端性能优化,一般来说web前端指的是网站业务逻辑之前的部分,包括浏览器加载、网站视图模型、图片服务、CDN服务等,主要的优化手段有优化浏览器访问、使用反向代理,CDN等。
浏览器访问优化主要通过减少HTTP请求,使用浏览器缓存,启用压缩,css放在页面较上面、JavaScript放在页面较下面,减少cookie传输等五种手段。
HTTP协议是无状态的应用层协议,意味着每次HTTP请求都需要建立通信链路、进行数据传输,而在服务器端,每个HTTP都需要启动独立的线程去处理。。这些通信和服务的开销都很昂贵,减少HTTP请求的数目可有效提高访问性能。
减少HTTP的主要手段有合并css、合并JavaScript、合并图片。将浏览器一次访问需要的JavaScript、css合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过css偏移响应鼠标点击操作,构造不同的URL。

对一个网站而言,css、JavaScript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件油几乎是每次HTTP请求都需要的,可以将这一类的文件缓存在浏览器中。
在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。文件的压缩率可达到80%以上。
浏览器会在下载完全部css之后才对整个页面进行渲染,因此较好的做法是件css放在页面较上面,让浏览器尽快下载css。JavaScript则相反,浏览器在加载JavaScript之后立即执行,有可能会阻塞真个页面,造成页面显示缓慢。
一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考略。
CDN的本质仍然是一个缓存,而且将数据缓存在离用户较近的地方,使用户以较度获取数据,即所谓网络访问跳。
传统代理服务器为数浏览器一侧,代理浏览器将HTTP请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器就收HTTP请求。
和传统大礼服务器可以保护浏览器安全一样,反向代理服务器也具有保护网站安全的作用,来自互联网的访问请求必须经过代理服务器,相当于在web服务和可能的网络攻击之间建立了一个屏障。
除了安全功能,代理服务器也可以通过配置缓存功能加速web请求。当用户次访问静态内容的时候,静态内容就被缓存在反向代理服务器上,这样当其他用户访问访问该静态内容的时候,就可以直接从反向代理服务器返回。