位置: IT常识 - 正文

前端项目性能优化方案有哪些(前端项目性能优势怎么写)

编辑:rootadmin
前端项目性能优化方案有哪些

目录

一、 加载优化(减少http请求数)

二、图片优化

三、使用CDN

四、开启Gzip(代码压缩)

六、减少不必要的Cookie

七、脚本优化

八、前端代码结构的优化

九、SEO优化

一、 加载优化(减少http请求数)

推荐整理分享前端项目性能优化方案有哪些(前端项目性能优势怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端性能衡量指标,前端项目性能优化的常见方法,前端项目性能优势分析,前端项目性能优化,前端项目性能优势分析,前端项目性能优化方案,前端项目性能优化,前端项目性能优化方案,内容如对您有帮助,希望把文章链接给更多的朋友!

常用的减少http请求数有以下几种:

1. 合并图片:当图片较多时,像精灵图,雪碧图可以合并为一张大图,从而减少http请求数。经常变化的图片可能不太合适,变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外,还可以充分利用缓存来提升性能。

2. 合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。

3. 去掉不必要的请求,开发写代码或者系统升级之后残留的无效请求连接。

4. 首屏加载:首屏快速显示可大大的提升用户对页面速度的感知,应尽量针对首屏的快速显示做出相应的优化。

5. 充分利用缓存:来减少向服务器发送的请求数,节省网络资源,所有静态资源都要放在服务器端并设置缓存,并且要尽量使用长缓存。

6.  预加载:大型资源页面可使用Loading,资源加载完成后再显示页面,但是加载时间过长,会造成负体验。

7. 异步加载第三方资源:第三方资源不可控,会影响页面加载,所以要异步加载第三方资源。

二、图片优化

优化方法:

1. 尽可能的使用PNG格式的图片,它相对来说体积较小,可以使用工具压缩,在上线之前最好进行一定的优化。

2. 同时在代码中进行图片的延迟加载,也叫做赖加载。

3. 避免img、iframe等标签的src属性为空:空src会重新加载当前页面,影响速度和效率。

4. 图像尽量避免使用DataURL:DataURL图像没有使用图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

三、使用CDN

CDN:实现把内容从中心媒体服务器分发到边缘服务器的网络体系即内容分发网络,CDN具有更低的网络延迟和丢包率,能够分配负载,节省带宽提高网站的性能,可以使用户就近取得所需内容,解决网络拥挤的状况,提高用户访问网站的响应速度。

如果安全性对你的网站很重要,就不要使用公共的CDN,因为当你远程从CDN请求文件时,你的访问来源信息也被发送过去,一些远程的js文件可能被修改用来搜集你的用户或者系统信息,而当你使用https协议时,能选择的CDN就更加有限。

四、开启Gzip(代码压缩)

Gzip即数据压缩,前端生产环境中将js、css、图片等文件进行压缩,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能。

压缩时间、流程、说明

图片摘自网络,如有侵权,联系删!前端项目性能优化方案有哪些(前端项目性能优势怎么写)

五、样式表和JS文件的优化

1. 头部内联的样式和脚本会阻塞页面的渲染,一般我们会把css样式表文件放到文件的头部使用link引入,这样可以让CSS样式表尽早地完成下载。

2. 对应js脚本文件,一般我们把脚本放在尾部并使用异步方式加载,这样可以尽最大限度的减少样式和脚本对页面的阻塞。  

六、减少不必要的Cookie

Cookie存储在客户端,伴随着HTTP请求在浏览器和服务器之间传递,由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器,从而会影响加载速度,所以尽量减少不必要的Cookie。

七、脚本优化

1.  复杂动画效果,使用绝对定位让其脱离文档流,避免循环DOM元素,用transform:translate 代替 position  left、right...以此来尽量减少回流和重绘。

2.将脚本往后挪,减少对并发下载的影响。

3.缓存.length的值:每次.length计算使用一个变量保存值。

4.尽量使用事件委托:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点,避免批量绑定事件以此来减少内存消耗和DOM操作。

5.尽量使用id选择器:id选择器选择元素是最快的,具有唯一性,灵活性和优先性的优点。

八、前端代码结构的优化

1.设置Viewport:HTML的viewport可加快页面的渲染。

2.减少DOM结点:DOM结点太多会影响页面的渲染。

3.尽量使用css3动画:合理使用requestAnimationFrame动画代替setTimeout。

4.优化高频事件:scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

5.  不滥用WEB字体:WEB字体需要下载、解析、重绘当前页面,尽量减少使用。

6.  文件命名规则须统一且要有意义,同类型文件归类到相同的文件夹中。

九、SEO优化

1.  标题: 标题字数不要太长,一般写核心的关键词和网站主题相关的内容。

2.  描述:描述是整个页面的综合说明,作用和重要性仅次于标题,描述最好能得吸引人一点,带上自己公司的品牌词和电话,并包括目标关键词。

3.  关键词:对关键词进行优化,能够让用户在搜索关键词的时候,能够准确的定位到自己要搜索的内容和网站,能够让网站被更多有需要的人看到。

4.网站代码:网站代码尽量精简,节约百度蜘蛛的时候,这一点针对大型网站特别重要。

以上内容整理于网络,仅供学习使用,侵权联系删!

本文链接地址:https://www.jiuchutong.com/zhishi/299818.html 转载请保留说明!

上一篇:【Vue】初识Vue,Vue简介及Vue Devtools配置(vue入门)

下一篇:Python统计学11——分位数回归(python 统计学包)

  • 一般纳税人的进销项税怎么做分录
  • 未实际处置资产损失税前扣除金额的分录?
  • 村委会什么会计准则
  • 住房公积金发票
  • 公司成立之初做哪些
  • 减免教育费附加和地方教育费附加
  • 减免税额和抵免的区别
  • 个人缴纳印花税减半吗?
  • 经常做无票收入没有通过公户收款会有问题吗
  • 六个点的税率是小规模吗
  • 研发技术服务属于什么费用
  • 开办费计入管理费用后是否要转出
  • 净现值为零时的收益率
  • 汇票贴息入什么科目
  • 酒店应不应该为员工提供澡堂
  • 销售退回 账务处理
  • 个人开利息发票的税率与会计分录
  • 增值税税控系统技术维护费怎么抵扣
  • 安装费发票开具3%税率国税需要备案吗?
  • 企业购进固定资产进项税如何抵扣
  • 退租水电费从押金里扣除
  • 积分兑换现金的软件
  • 合伙企业收到对公转账
  • 固定资产清理税金如何处理
  • 退付手续费怎么操作
  • 累积带薪缺勤金额怎么算
  • 4芯网线插线顺序图
  • win11系统开机密码怎么修改
  • 股东投资款验资后可以转出吗
  • 期间费用包含哪些
  • php如何上传1个g以上的文件
  • php image
  • 拉马克是哪国人
  • 公司借款利息可以用对公户转账吗
  • nginx连接超时时间设置多少
  • 增值税注明的价款是含税还是不含税
  • react脚手架搭建项目
  • php文件上传技术
  • 个体工商户和个人独资企业的区别
  • 职工福利能开专票吗
  • 会计中财务费用为负
  • 预付工程款如何结算
  • 数字黑洞有哪些
  • 一般纳税人申报表电子版
  • 税法中减除和减退的区别
  • 企业投资股权收益如何征税
  • 管理费用月底结转吗
  • 税金及附加怎么算
  • 支付宝已经支付快递费怎么还支付
  • 待处理财产损溢属于什么类科目?
  • 公户的利息收入账务处理咋处理
  • 商标 入账
  • 电梯广告租赁属于什么服务
  • 对公账户转私人账户有限额吗
  • 借款归还时的收据填写
  • 购置固定资产支出怎么算
  • 次年发放的奖金怎么入账
  • delete from 表名 where
  • linux mount命令详解
  • windowsxp打不开网页怎么办
  • Mac如何设置自动锁屏
  • mmc.exe是什么
  • win7系统点击计算机图标未响应
  • win8 应用商店
  • window8任务管理器
  • linux服务器被尝试登录失败
  • win7自带解压缩
  • cocos2dx 3.17
  • jquery实现
  • js文字循环滚动代码
  • Linux bash Shell中的变量类型详解
  • unity 角色
  • 利用html css javascript做一个网页
  • android数据存储与访问方式
  • 安徽国税app
  • 上海电子发票试点
  • 社保批扣和灵活就业批扣有什么区别
  • 酒店行业区分小巨头企业
  • 征管基础平台app
  • 置换买新车划算吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设