前端性能优化

性能优化

性能优化原则

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

从何入手?

让加载更快

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

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

  • 使用更快的网络:CDN

    让渲染更快

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

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

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

  • 对DOM查询进行缓存

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

  • 节流throttle 防抖debounce

相关推荐
我是伪码农1 小时前
Vue 1.23
前端·javascript·vue.js
毕设源码-郭学长6 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n7 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
ヤ鬧鬧o.8 小时前
多彩背景切换演示
前端·css·html·html5
lethelyh8 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒8 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海8 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大9 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
一起养小猫9 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多9 小时前
Vux store实例的模块化管理
前端