前端性能优化

性能优化

性能优化原则

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

从何入手?

让加载更快

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

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

  • 使用更快的网络:CDN

    让渲染更快

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

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

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

  • 对DOM查询进行缓存

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

  • 节流throttle 防抖debounce

相关推荐
顾安r6 小时前
11.14 脚本网页游戏 猜黑红
前端·javascript·游戏·flask·html
码码哈哈0.06 小时前
Vue 3 + Vite 集成 Spring Boot 完整部署指南 - 前后端一体化打包方案
前端·vue.js·spring boot
@菜菜_达6 小时前
interact.js 前端拖拽插件
开发语言·前端·javascript
Baklib梅梅6 小时前
故事叙述的力量:用Baklib创作让内容更具温度与共鸣
前端·ruby on rails·前端框架·ruby
一个假的前端男7 小时前
uniapp 3端轮播
前端·javascript·uni-app
Fantasydg8 小时前
Request Response对象
前端
Wect8 小时前
学习React-DnD:核心组件与Hooks
前端
humors2218 小时前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
菠萝+冰8 小时前
npm中-d -g 和默认安装的区别
前端·npm·node.js
一路向北North9 小时前
网页版预编译SQL转换工具
前端·javascript·sql