vue.js渲染时间磋该怎么处理

JavaScript012

vue.js渲染时间磋该怎么处理,第1张

vue.js渲染时间磋该怎么处理

使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。

要达到这个目的，需要为当前的app自定义directive:

app.directive('onFinishRenderFilters', function ($timeout) {

return {

restrict: 'A',

link: function(scope, element, attr) {

if (scope.$last === true) {

$timeout(function() {

scope.$emit('ngRepeatFinished')

})

}

}

}

})

然后，在需要监控的地方，加上该directive:

<tr ng-repeat="user in users" on-finish-render-filters>

<td>{{user.Id}}</td>

<td>{{user.Name}}</td>

<td>{{user.Salary}}</td>

</tr>

最后，补充上需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {

//下面是在table render完成后执行的js

var table = $("#leaderBoard").dataTable({

bJQueryUI: true,

"sScrollX": '100%',

})

})

console.time方法与console.timeEnd方法

当需要统计一段代码的执行时间时，可以使用 console.time 方法与 console.timeEnd 方法。

其中 console.time 方法用于标记开始时间，console.timeEnd 方法用于标记结束时间，并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。这两个方法的使用方法如下所示。

console.time(label)  

console.timeEnd(label) 

这两个方法均使用一个参数，参数值可以为任何【字符串】，但是这两个方法所使用的参数字符串必须相同，才能正确地统计出开始时间与结束时间之间所经过的毫秒数。

vue通过调用函数知道页面最后渲染完成的时间。根据查询相关信息显示在页面加载一个数据列表完成之后，页面自动滚动定位到中间某个列表元素，需要在列表数据渲染完成，计算列表高度，再控制定位到指定行，通常vuejs提供的mounted函数，表示挂载到实例上去之后调用该钩子，回显结果是页面最后渲染完成的时间。Vue是一套用于构建用户界面的渐进JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。