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

目录

  • 为何要优化
  • 如何优化
    • [优化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展示
相关推荐
穷人小水滴9 小时前
使用 epub 在手机快乐阅读
javascript·deno·科幻
爱学习的程序媛11 小时前
《深入浅出Node.js》核心知识点梳理
javascript·node.js
华仔啊11 小时前
Vue3 如何实现图片懒加载?其实一个 Intersection Observer 就搞定了
前端·vue.js
Robet12 小时前
TS和JS成员变量修饰符
javascript·typescript
方法重载12 小时前
前端性能优化之“代码分割与懒加载”)
javascript
我叫张小白。12 小时前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788612 小时前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
科普瑞传感仪器13 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F87513 小时前
SpringMVC 请求参数接收
前端·javascript·算法
TechMasterPlus13 小时前
VScode如何调试javascript文件
javascript·ide·vscode