前端性能优化

性能优化

性能优化原则

  1. 多使用内存、缓存或其他方法
  2. 减少CPU计算量,减少网络加载耗时
  3. 空间换时间(适用于所有编程的性能优化)

从何入手?

让加载更快

  • 减少代码体积:压缩代码

  • 减少访问次数:合并代码、SSR服务端渲染、缓存

  • 使用更快的网络:CDN

    让渲染更快

  • CSS放在HEAD,JS放到body最后面

  • 尽早开始执行js,使用ContentLoaded触发

  • 懒加载(图片懒加载、上滑加载更多)

  • 对DOM查询进行缓存

  • 频繁DOM操作合并到一起进行插入DOM结构

  • 节流throttle 防抖debounce

相关推荐
小六路8 分钟前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
比老马还六17 分钟前
Blockly文件积木开发
前端
Nayana25 分钟前
Element-Plus源码分析--form组件
前端
Bellafu66626 分钟前
selenium对每种前端控件的操作,python举例
前端·python·selenium
littleboyck1 小时前
VSCode 全自动调试Vue/React项目
前端·visual studio code
洛小豆1 小时前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树2 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist2 小时前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
CoLiuRs2 小时前
异步任务使用场景与实践
微服务·性能优化·golang
IT_陈寒2 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端