【面试 - 页面优化举例】页面跳转卡顿问题解决 - 页面跳转速度优化

目录

  • 为何要优化
  • 如何优化
    • [优化1 - 懒加载](#优化1 - 懒加载)
    • [优化2 - el-tree 子节点默认不展开](#优化2 - el-tree 子节点默认不展开)

为何要优化

页面A跳转到也页面B时,页面出现卡顿情况:

  • 【问题】页面A → 页面B时,页面B进入到了 created 钩子后过了六七秒才进入到 mounted 钩子;
  • 【分析经过】很明显是 页面渲染速度太慢 导致页面卡顿;
  • 【原因】一系列排查后,发现是 el-tree 部门树 数据过多 导致的页面渲染过慢。

如何优化

优化1 - 懒加载

el-tree 数据懒加载,详见 懒加载自定义叶子节点

  • 正常使用 el-tree 组件时使用懒加载没问题
  • 遇到一个很麻烦的问题:
    • 我们的部门树用的公司以 el-tree 为基础封装的部门树组件(会先把部门树数据传到 EleFormTree 组件内,且部门树数据必传),因为还是得传所有的部门树数据,使用懒加载是没有实际效果的,重新写组件有点浪费时间;
    • 偶然间发现 页面B 中部门树是 默认全部展开,如果 不默认展开就不会渲染未展开节点,因此有了 优化2

优化2 - el-tree 子节点默认不展开

el-tree 组件中属性 default-expand-all 设置为 false 默认不展开所有子节点

  • 这样就可以避免数据过多(所有子节点都渲染),导致渲染过慢问题。
  • 子节点展开前/展开后dom展示
相关推荐
徐小夕1 小时前
pxcharts Ultra V2.3更新:多维表一键导出 PDF,渲染兼容性拉满!
vue.js·算法·github
前端Hardy2 小时前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy2 小时前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
青青家的小灰灰2 小时前
从入门到精通:Vue3 ref vs reactive 最佳实践与底层原理
前端·vue.js·面试
OpenTiny社区3 小时前
我的新同事是个AI:支持skill后,它用TinyVue搭项目还挺溜!
前端·vue.js·ai编程
李剑一3 小时前
大屏天气展示太普通?视觉升级!用 Canvas 做动态天气遮罩,雷阵雨效果直接封神
前端·vue.js·canvas
csdn飘逸飘逸3 小时前
Autojs基础-用户界面(ui)
javascript
炫饭第一名3 小时前
速通Canvas指北🦮——图形、文本与样式篇
前端·javascript·程序员
本末倒置1833 小时前
面向 Vue 开发者的 Next.js 快速入门指南
前端·vue.js
进击的尘埃3 小时前
React useEffect 的闭包陷阱与竞态条件:你以为的 cleanup 真的在正确时机执行了吗
javascript