小猿圈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除了负载均衡功能，它也可以通过配置缓存功能来加速请求响应速度，当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上，这样其他用户的请求就能直接从反向代理服务器直接获取返回，这样也就直到了静态资源缓存的作用。

以上是小猿圈web前端讲师对于网站性能优化方案的介绍，大家学到了吗？当然大家可以在学习过程中加一点自己工作的经验，估计会有更好的优化方案，希望大家能做出更酷的页面。

转载于:https://juejin.im/post/5d09dcec6fb9a07ec27ba798

小猿圈web前端之网站性能优化方案相关推荐

th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
小猿圈web前端之jQuery抽奖系统
你有没有想过有一天可以成为千万富翁呢?你是通过自己的努力和奋斗还是其他手段获得的呢?前端程序员是通过jQuery获得的,他自己写了一个抽奖系统,下面就小猿圈前端讲师分享给大家. 效果图: <!D ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
web前端三大主流框架_小猿圈web前端之前端的主流框架都有哪些？
社会在不断发展,互联网更新换代也是飞速,web框架也是经历一代又一代的革新,那么当今时代什么框架是前端的主流框架呢?小猿圈web前端讲师查了一些资料,整理出当今时代比较流行的三种框架,下面说一下这三种 ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...

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

小猿圈web前端之网站性能优化方案相关推荐

最新文章

热门文章