前端性能优化

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元素绑定事件,使用事件委托,不要直接绑定

 

posted @ 2020-02-29 11:05  XLLANG  阅读(122)  评论(0编辑  收藏  举报