小猿圈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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下面介绍一个开源的OCR引擎Tesseract2。值得庆幸的是虽然是开源的但是它的识别率较高,并不比其他引擎差劲。网上介绍Tessnet2也是当时时间排名第三的识别引擎,只是后来慢慢不维护了,目前是G

下面介绍一个开源的OCR引擎Tesseract2。值得庆幸的是虽然是开源的但是它的识别率较高,并不比其他引擎差劲。网上介绍Tessnet2也是当时时间排名第三的识别引擎,只是后来慢慢不维护了,目前是Google在维护,大家都知道Google 在搞电子…

js 更改json的 key

let t data.map(item > {return{fee: item[费用],companyName1: item.companyName,remark1: item.remark,beginTime1: item.beginTime,endTime1: item.endTime}})console.log(t) 源地址:https://www.cnblogs.com/Marydon20170307/p/8676611.html转载于:https:/…

1.4版本上线(第八次会议)

在小组成员连夜赶工的奋斗下,终于在昨天深夜成功实现了UI界面功能 至此,我们的系统终于真正可实用而不是局限在命令行进行互动了 由于python嵌入数据库功能实现难度较大,迫于时间的局限性,我们选择了用json文件与txt文件进行替代&…

分UV教程

第一步 首先,打开一个练习场景“空中预警机1.max”(这事小弟平时的练习做的不好献丑了)。(图01) 图01 第二步 这里我们拿机翼来举例子,隐藏除机翼意外的其他模型。(图02) 图02 第三步…

k8s系列--- dashboard认证及分级授权

http://blog.itpub.net/28916011/viewspace-2215214/ 因版本不一样,略有改动 Dashboard官方地址: https://github.com/kubernetes/dashboard dashbord是作为一个pod来运行,需要serviceaccount账号来登录。 先给dashboad创建一个专用的认证信息…

JAVA项目开发

16年java软件开发经验,全职项目开发,项目可签合同、开普票和专票。 主要承接项目: 1、网站开发项目 自主开发千帆CMS动态发布系统,基于java/springboot2/jpa/easyui开发,简单易用,后台与前端分离&#xff0…

3dmax基本操作

1、基本操作平移视图(你所说的移动):CTRLP,或者用,滚轮。按住鼠标滚轮不放拖动,就行了。旋转: ALT滚轮。按住ALT键不放,利用滚轮的移动(滚轮也要按着不放&#xff09…

padding影响整个div的实际宽度

padding影响整个div的实际宽度 1.不让padding影响整个div的实际宽度 所以要设置css属性: box-sizing:box-sizingposted on 2019-01-25 16:58 玉貔貅 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/yupixiu/p/10320564.html

unity3d 任务头上的血条

人物的名称与血条的绘制方法很简单,但是我们需要解决的问题是如何在3D世界中寻找合适的坐标。因为3D世界中的人物是会移动的,它是在3D世界中移动,并不是在2D平面中移动,但是我们需要将3D的人物坐标换算成2D平面中的坐标&#xff0…

如何在C#中使用Win32和其他库之三

具有内嵌字符数组的结构 某些函数接受具有内嵌字符数组的结构。例如,GetTimeZoneInformation() 函数接受指向以下结构的指针: typedef struct _TIME_ZONE_INFORMATION { LONG Bias; WCHAR StandardName[ 32 ]; SYSTEMTIME Standa…

unity3d 预制体

首先要说明一下什么是预制体? 在Unity3D里面我们叫它Prefab;我们也可以这样理解:当制作好了游戏组件(场景中的任意一个gameobject ),我们希望将它制作成一个组件模版,用于批量的套用工作,例如说…

Python小数据池,代码块

今日内容一些小的干货 一. id is 二. 代码块三. 小数据池四. 总结python小数据池,代码块的最详细、深入剖析 一. id is 二. 代码块三. 小数据池四. 总结一,id,is, 在Python中,id是什么?id是内存地址…

【Wax】使用Wax (framework方式,XCode 4.6)

前情提示:【Wax】使用Wax (非framework方式,XCode 4.6) 这次,将以framework的方式来使用Wax 那么,让我们开始吧!!! 准备工作: 下载wax.framework:…

unity3d 简单动画

1,动画系统配置 创建游戏对象并添加Animation组件,然后将动画文件拖入组件。 进入动画文件的Debug属性面板 选中Legacy属性 选中游戏对象,打开Animation编辑窗口 添加动画变化属性 需改关键帧的属性值 配置完成后运行即可得到动画效果 2&…

人月神话阅读笔记(二)

今天对人月神话的正文部分进行了阅读,从人月神话这一部分中了解到缺乏合理的时间进度控制是造成滞后的主要原因,比其他任何事情影响的和还大,书中也对造成这种这种普遍灾难的原因进行了并进行了详细列举。 首先,我们对估算技术缺乏…

3dmax导出到unity3d下分割动画

1、在3dmax 导出时候,要导出FBX文件,同时包含动画,骨骼,皮肤等内容 2、把FBX文件导入到Unity3d后会默认有一个超长的大动画,就是一个整体的动画,如图Take001,这个时候要分割哪部分是跑&#xf…

华硕首款平板电脑周五开售

新浪科技讯北京时间3月21日晚间消息,华硕周一宣布,将于本周开售首款平板电脑EeePadTransformer。本周五,台湾地区用户将可以率先预定这款平板电脑,随后还将在全球其他国家和地区推出,悠语yoryu化妆品玻尿酸水润弹力面膜120ml补水保…

(2)页面标签解析

<!--规定文档类型的指令&#xff1a;html,以h5的语法来书写html文件--><!DOCTYPE html><!--页面根标签&#xff0c;什么是根标签&#xff0c;就是一个页面空间可以理解成全局&#xff0c;所有内容都在这个页面空间内--><!--langen就是定义页面的默认语言&…

Unity3d之AssetBundle打包与读取

一、创建Assetbundle 在unity3d开发的游戏中&#xff0c;无论模型&#xff0c;音频&#xff0c;还是图片等&#xff0c;我们都做成Prefab&#xff0c;然后打包成Assetbundle&#xff0c;方便我们后面的使用&#xff0c;来达到资源的更新。 一个Assetbundle可以打包一个模型&…

Android代码抄袭Java曝猛料 新证据出现

Oracle最初告Android代码里侵犯了他们旗下Java知识产权的时候,大多数不明真相的围观群众都是站在Google这一边的,毕竟Oracle蛮横不讲理惯了嘛. 但是,这次我们还真是当了不明真相的围观群众了,美国专利博 ... Oracle最初告Android代码里侵犯了他们旗下Java知识产权的时候,大多数…