前端性能优化概述

1.减少请求数量


图片处理 Base64
将图片的内容以Base64格式内嵌到HTML中,可以减少http的请求数量,但是编码之后的大小比图片大了
使用字体图标代替图标
避免使用空的src和href
不要使用css@import


2.减小资源大小


html压缩
html代码压缩就是压缩在文本文件中有意义,但在html中不显示的字符,包括空格,制表符
css压缩
css压缩包括无效代码删除与css语义合并
js压缩与混乱
js压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护
图片压缩


3.优化网络连接


使用CDN
CDN是内容分发网络,它能够实时根据网络流量和各个节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上,其目的是使用户可以就近的取得所需的内容,解决网络拥挤的状况,提高网站的响应速度
使用DNS预解析


4.优化资源加载


资源加载位置
通过优化资源加载位置,更改资源加载时机,使尽可能快得展示出页面内容,尽可能快得使用功能可用
1.css文件放在head中,先外链,后本页
2.js文件放在body底部,先外链,后本页
3.处理页面、处理页面布局的js文件放在head中,如 babel=polyfill.js文件,flexible.js文件
4.body中尽量不写style标签和script标签

若有收获,就点个赞吧

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值