如何以角度查找页面加载时间?

时间:2018-04-20 05:45:54

标签: angular angular-ui-router

这是在angular2 +中找到页面加载时间的正确方法吗? 我不这么认为,这只是路由更改之间的时间差异。我们如何将页面DOM内容加载时间添加到它。??

this.router.events.subscribe((val) => {
    const navigationComplete = val instanceof NavigationEnd;
    const navigationStart = val instanceof NavigationStart;
    if(navigationStart){
        this.navigationStartTime = (new Date).getTime();
    }
    if (navigationComplete) {
        this.currentPage = this.router.url; // Current page route
        this.currentLocation = (this.platformLocation as any).location.href; // Current page url
        let endTime = (new Date).getTime();
        this.pageLoadTime = Number(endTime) - Number(this.navigationStartTime); // Page load time
    }
});

3 个答案:

答案 0 :(得分:0)

你绝对可以使用chrome dev工具分析性能,如@AurA所述
您可以在上述所有脚本中单独初始化

<script type="text/javascript">
    var timerStart = Date.now();
</script>

并在主要组件中

ngAfterViewInit(){
   console.log("Time until reaching run phase: ", Date.now() - $window.timerStart);
}

没有经过测试。但应该跑。

答案 1 :(得分:0)

您可以使用NavigationStartngAfterViewInit来跟踪确切的加载时间。

答案 2 :(得分:-1)

您可以在ng-init函数

中使用简单的JavaScript代码
var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
    console.log('Page load time is '+ loadTime);