• Angular6 组件树结构优化


    本片博客主要是记录实际项目开发中使用Angular6框架,遇到的一个问题。

    现象:

      Angular6框架写的前端web网页,在实际部署运行过程中遇到了一种现象,引入懒加载以后,加载登录面速度很快,但是登录成功以后,页面切换到首页面组件这个过程却很慢,总是登录页面显示登录成功以后,停留好长时间页面才会切换到首页面。

    现象分析:

      加载登录页面花费了一段时间开销,登录成功以后,页面切换到首页面,加载首页面又需要花费一段时间开销。加载首页module模块时候,花费的时间开销远大于登录组件的时间开销,所以呈现了现在的现象。

    解决策略:

      出于易用性的考虑,调整组件树结构,详情图1 和图2:

            

                              图1(原组件树结构)

              

                                  图2 (调整后的组件树结构)

    说明:

      将组件树调整以后,首先加载homeModule,加载仪表盘组件,仪表盘组件设置一个登陆拦截,判断是否已经登录,已登录,正常加载仪表盘组件,未登录,加载登录组件。其实时间花销并没有缩短,只是将加载首页的时间花销融汇到了首次加载页面的时间花销里面,缺点是首页面加载时间开销变大,首页面显示时间边长。

  • 相关阅读:
    apicloud教程
    apicloud教程3 (转载)
    apicloud教程2 (转载)
    apicloud教程1 (转载)
    API CLOUD 快捷键
    JS IIFE写法
    php事件驱动
    JQuery实践--Why JQuery
    Jquery实践--精读开篇
    python 实践--新闻聚合
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/10483215.html
Copyright © 2020-2023  润新知