前端性能优化概述

Posted Qianliwind

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化概述相关的知识,希望对你有一定的参考价值。

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标签

若有收获,就点个赞吧

以上是关于前端性能优化概述的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化——概述

前端性能优化

前端性能优化概述

前端性能优化概述

前端性能优化概述

常见前端性能优化的35种方法总结