小猿圈web前端之网站性能优化方案

如今前端不只要能作出一个网站页面，还要把这个页面作的炫酷，那须要很大程度的优化，那么怎么优化才更好呢？小猿圈总结了一下本身优化的方案，感兴趣的朋友能够看一下。

通常网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发状况下，对前端web优化也是很是重要的。

下面说说几种常见的优化措施。

一、HTML CSS JS位置

通常须要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。由于页面须要加载为CSS才进行渲染，而JS若是不是在页面加载以前就要执行就要放到页面最底部，以避免在页面展现以前因JS过多加载而影响页面渲染速度。

二、引用文件位置

有一些插件须要引用到远程的图片、CSS、JS、图标等，若是远程的资源链接网速不佳，如国外的某些资源，会形成网页阻塞，一样也会形成页面展现问题，尽可能能把引用远程的资源能本地化。

三、减小后台请求

每一个请求都是耗费资源影响系统性能的，因此，能减小后台请求就减小。如，尽可能的将同一个资源（图片、JS、CSS等）合并成一个文件，页面只要请求一次便可，这样就节省了不少http链接的开销及往返的时间损耗。

另一方面，若是是关于抽奖、摇一摇、秒杀等功能，能够限制发日后台的频率，如前端操做10次才日后端发一次请求，这样从前端就作到了后台的流量控制，把流量控制到访问的最外层是最好的，尽可能不要让请求落到底层。

四、压缩传输

http压缩能够对纯文本能够压缩至原内容的40%, 从而节省了60%的数据传输，GZIP是一种经常使用的压缩编码。所以，对文本类型的资源如CSS、JS、HTML启用GZIP压缩加速http传输速度。

五、减小cookie传输

cookie会包含在每次请求和响应中，若是cookie过多会影响http响应速度，因此高并发状况下尽可能控制cookie的传输量，nginx对cookie传输默认是作了限制的。另外，像CSS、JS、图片等静态资源能够启用单独域名，禁用cookie对静态资源的传输，这样就能大大提升效率。

六、浏览器缓存

高并发状况下，能够将一些不怎么变更的东西缓存到浏览器cache中，或者一些活动内容能够提早将内容在客户端缓存起来，以避免活动开始大量请求涌入服务器。

七、CDN

以前的文章有讲过CDN的概念，它就是一个静态内容分发网络，本质就是静态资源的缓存，能够将静态资源放到CDN上，这样，用户就能离本身最近的地方获取到资源，大大提升了用户访问速度。

八、反向代理

经常使用的反向代理nginx除了负载均衡功能，它也能够经过配置缓存功能来加速请求响应速度，当用户第一次访问的时候静态资源就能够被缓存到反向代理服务器上，这样其余用户的请求就能直接从反向代理服务器直接获取返回，这样也就直到了静态资源缓存的做用。

以上是小猿圈web前端讲师对于网站性能优化方案的介绍，你们学到了吗？固然你们能够在学习过程当中加一点本身工做的经验，估计会有更好的优化方案，但愿你们能作出更酷的页面。