前端性能优化

性能优化

性能优化原则

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

从何入手?

让加载更快

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

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

  • 使用更快的网络:CDN

    让渲染更快

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

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

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

  • 对DOM查询进行缓存

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

  • 节流throttle 防抖debounce

相关推荐
mldong19 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排20 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby606120 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角21 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!21 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰1 天前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi1 天前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen1 天前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马1 天前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒1 天前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端