前端性能优化

Dax

2021-08-13

2177 1 0

前端性能优化

1、减少资源的请求次数和大小

压缩合并 js 和 css 文件,减少 http 请求次数和请求资源的大小;在项目中使用 webpack glup 等打包编译工具

2、尽量使用字体图标或者 svg 图标代替传统的 png(jpg)图

渲染更快,减少代码体积,且放大不会出现变形等

3、使用图片懒加载

目的是减少页面第一次加载的 http 请求次数,实现思路: 首次加载页面不去发送 http 请求,放置占位图;页面加载完成后,当页面滑到可视区域时,再去请求加载图片资源

4、可以用 css 实现的效果,不要用 js 代码实现; 可以用原生 js 实现的逻辑,尽量不要引入第三方框架

5、雪碧图的使用

将众多小的图片资源绘制到一张大图上,通过设置图片的 position,将小图展现到页面上(background-position)

6、减少对 cookie 的使用,控制存储大小,客户端和服务器通信时,cookie 也会相互传输

7、代码优化:

1) 减少 js 中闭包的使用,闭包所在的上下文不会被清理

2)减少 DOM 的操作,浏览器里 DOM 操作很昂贵,注意减少 DOM的重绘和回流(重排)

3)js 中避免嵌套循环和死循环

4)避免循环给dom元素绑定事件,使用事件委托,不要直接绑定

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java将前端的json数组字符串转换为列表

记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang

聊聊前端性能优化

为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉

前端性能优化

为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉