关于前端性能优化,你能想到几点,越多越好?

一、javascript/css/html:

  1. 使用简洁精炼的语句可以更好的利用编译器优化,例如使用箭头函数;
  2. 合理的使用迭代器,遍历数据使用for循环有更小的消耗;
  3. 使用async/await 去执行一个异步操作;
  4. 及时清理不使用的定时器,不存在的dom引用,不再使用的全局变量和闭包等;
  5. 尽可能使用新的语法进行开发,例如es6+;
  6. 谨慎使用eval等消耗大的语句;
  7. 选择器不宜嵌套过深,最多不要超过三层,慎用标签选择器;
  8. 合理设计dom结构,多使用语义化的标签。
  9. 合并对css和dom的操作,减少回流重绘,合理利用GPU;
  10. script标签放在body,没有依赖关系的脚本可以添加async属性,使用defer属性进行兼容回退;

二、框架:

  1. 合理使用生命周期钩子函数和框架特性;
  2. React中的useMemo/useCallback对子组件的缓存作用,Vue中<keep-alive/>等组件;
  3. 提高组件化和代码复用的可能性;
  4. 多使用不可变数据,合理设计数据模型;

三、网络:

  1. 使用更快的http2协议进行传输;
  2. 利用CDN加速资源的下载;
  3. 开启gzip压缩;
  4. 使用更小的图片资源;
  5. 减少重定向的次数;
  6. a标签不要使用空的href属性;
  7. 利用好浏览器缓存;

四、工程化构建:

不同的打包工具具有不同的优化方式和特点,具体可以到官网查看,主要从以下方面入手:

  1. TreeShaking;
  2. CodeSplit;

五、其他:

  1. 使用懒加载、滚动加载、分页加载、虚拟列表等;
  2. 使用预加载pre-dns,pre-fetch等;

欢迎各位大佬留言补充

#是时候巩固基础了##写文章打卡聚集地#
全部评论
m了一会学学
点赞 回复 分享
发布于 2023-03-10 16:30 甘肃
感谢分享,学习一下
点赞 回复 分享
发布于 2023-03-10 16:30 广东

相关推荐

我知道自己这个念头不好,但是真的很羡慕😭大家的父母长辈都能帮到自己吗?
大飞的诡术妖姬:父母都是普通打工人,身体也不好,能供我读到本科毕业很不容易,毕业以后帮衬心里会有罪恶感。虽然可能会错过很多风景,但还是想活的心安理得。
点赞 评论 收藏
分享
05-12 17:00
门头沟学院 Java
king122:你的项目描述至少要分点呀,要实习的话,你的描述可以使用什么技术,实现了什么难点,达成了哪些数字指标,这个数字指标尽量是真实的,这样面试应该会多很多,就这样自己包装一下,包装不好可以找我,我有几个大厂最近做过的实习项目也可以包装一下
点赞 评论 收藏
分享
评论
6
37
分享

创作者周榜

更多
牛客网
牛客企业服务