8条关于Web前台性能的优化建议

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

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

1、HTML CSS JS位置

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

2、引用文件位置

有少量插件需要引用到远程的图片、CSS、JS、图标等，假如远程的资源连接网速不佳，如国外的某些资源，会造成网页阻塞，同样也会造成页面展现问题，尽量能把引用远程的资源能本地化。

3、减少后端请求

每个请求都是耗费资源影响系统性能的，所以，能减少后端请求就减少。如，尽量的将同一个资源（图片、JS、CSS等）合并成一个文件，页面只需请求一次就可，这样就节省了很多http连接的开销及往返的时间损耗。

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

4、压缩传输

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

5、减少cookie传输

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

6、浏览器缓存

高并发情况下，可以将少量不怎样变动的东西缓存到浏览器cache中，或者者少量活动内容可以提前将内容在用户端缓存起来，以免活动开始大量请求涌入服务器。

7、CDN

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

8、反向代理商

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

我大概列了这些，其实还有很多优化手段，大家有更好的建议的话，可以在下方留言。

自己是从事了五年的前台工程师，不少人私下问我，2019年前台该怎样学，方法有没有？自己整理了一份2019最全面前台学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，有想学习web前台的，或者是转行，或者是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，这是我的前台开发qun，【四八四】【七五七】【七六零】，对于学习web前台有任何疑问（学习方法，学习效率，如何就业）都可以问我，最后可以点一波关注哟！