前端性能优化

性能优化

性能优化原则

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

从何入手?

让加载更快

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

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

  • 使用更快的网络:CDN

    让渲染更快

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

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

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

  • 对DOM查询进行缓存

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

  • 节流throttle 防抖debounce

相关推荐
im_AMBER5 分钟前
从面试题看JS变量提升
开发语言·前端·javascript·前端框架
Mintopia10 分钟前
不用学微服务,也能设计不崩的系统:最小可行思路
前端
llf_cloud10 分钟前
Vue2 项目中的全局自动弹窗队列设计
前端·javascript·vue.js
百锦再19 分钟前
使用JavaScript获取和解析页面内容的完整指南
开发语言·前端·javascript·python·flask·fastapi
sakana22 分钟前
如何写一个自己的skill
前端·人工智能
wsdswzj26 分钟前
web前端基础知识
前端
一条小鲨鱼1 小时前
所遇到的响应式问题
前端·vue.js
M ? A1 小时前
你的 Vue 路由,VuReact 会编译成什么样的 React 路由?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
L.Cheng1 小时前
谷歌浏览器如何禁用自动更新_Chrome关闭后台升级程序
前端·chrome
donecoding1 小时前
类型与语法的“直觉对齐”:TS 切入的 Go 语言初体验
前端·typescript·go