前端性能优化

性能优化

性能优化原则

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

从何入手?

让加载更快

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

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

  • 使用更快的网络:CDN

    让渲染更快

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

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

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

  • 对DOM查询进行缓存

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

  • 节流throttle 防抖debounce

相关推荐
hai3152475431 天前
九章编程法 · 字典引擎【0/1拓扑步进 · 矩阵压缩·终极封版】
人工智能·数学建模·性能优化·动态规划·代码复审·傅立叶分析·极限编程
2301_815645381 天前
react
前端·react.js
FirstFrost --sy1 天前
基于高并发服务器的web小游戏测试
服务器·前端·javascript·c++·python·集成测试
youyu-youyu1 天前
oss阿里云图片链接url高清图片设置为缩略图 vue 减少加载体积流量
前端·javascript·vue.js·阿里云·云计算
独隅1 天前
前端工程化在Chrome插件开发中的具体实践完全指南
前端·chrome
sbjdhjd1 天前
Tomcat(下) 集群高可用实战:反向代理・负载均衡・分布式 Session
运维·前端·云原生·开源·tomcat·负载均衡·memcached
低保和光头哪个先来1 天前
聊聊 CSS 编译和 scoped 实现
前端·css·vue.js
object not found1 天前
Node.js fs 常用 API 整理:node:fs/promises、node:fs、fs 到底怎么用
开发语言·前端·javascript
LiuJun2Son1 天前
Angular 快速入门:服务和依赖注入
前端·javascript·angular.js
kidding7231 天前
BMI 健康测量仪工具类小程序
前端·微信小程序·小程序