vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一、定义[nextTick、事件循环]
二、实例理解nextTick的使用,并给出在页面渲染上的优化巧用
<template>
<div>
<ul>
<li v-for="item in list1">{{item}}</li>
</ul>
<ul>
<li v-for="item in list2">{{item}}</li>
</ul>
<ol>
<li v-for="item in list3">{{item}}</li>
</ol>
<ol>
<li v-for="item in list4">{{item}}</li>
</ol>
<ol>
<li v-for="item in list5">{{item}}</li>
</ol>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
list1: [],
list2: [],
list3: [],
list4: [],
list5: []
}
},
created() {
this.composeList12()
this.composeList34()
this.composeList5()
this.$nextTick(function() {
// DOM 更新了
console.log('finished test ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
},
methods: {
composeList12() {
let me = this
let count = 10000 for (let i = 0; i < count; i++) {
Vue.set(me.list1, i, 'I am a 测试信息~~啦啦啦' + i)
}
console.log('finished list1 ' + new Date().toString()) for (let i = 0; i < count; i++) {
Vue.set(me.list2, i, 'I am a 测试信息~~啦啦啦' + i)
}
console.log('finished list2 ' + new Date().toString()) this.$nextTick(function() {
// DOM 更新了
console.log('finished tick1&2 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
},
composeList34() {
let me = this
let count = 10000 for (let i = 0; i < count; i++) {
Vue.set(me.list3, i, 'I am a 测试信息~~啦啦啦' + i)
}
console.log('finished list3 ' + new Date().toString()) this.$nextTick(function() {
// DOM 更新了
console.log('finished tick3 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
}) setTimeout(me.setTimeout1, 0)
},
setTimeout1() {
let me = this
let count = 10000 for (let i = 0; i < count; i++) {
Vue.set(me.list4, i, 'I am a 测试信息~~啦啦啦' + i)
}
console.log('finished list4 ' + new Date().toString()) me.$nextTick(function() {
// DOM 更新了
console.log('finished tick4 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
},
composeList5() {
let me = this
let count = 10000 this.$nextTick(function() {
// DOM 更新了
console.log('finished tick5-1 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
}) setTimeout(me.setTimeout2, 0)
},
setTimeout2() {
let me = this
let count = 10000 for (let i = 0; i < count; i++) {
Vue.set(me.list5, i, 'I am a 测试信息~~啦啦啦' + i)
}
console.log('finished list5 ' + new Date().toString()) me.$nextTick(function() {
// DOM 更新了
console.log('finished tick5 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
}
}
}
</script>

vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制的更多相关文章
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- 对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- vue nexttick的理解和使用场景
应用场景 需要在视图更新之后,基于新的视图进行操作 文档说明 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM nextTick原理 1.异步说明 V ...
- JS性能优化——DOM编程
浏览器中的DOM 天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...
- Android性能优化之Listview(ViewHolder重用机制)
相信大家在很多时候都会用到ListView这个控件,因为确实是用的很多很多,但是有木有遇到过当数据很多很多的时候,往下滑ListView时有时候会卡顿,这就需要我们来优化它了. ListView优化主 ...
- JavaScript性能优化 DOM编程
最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...
- MySQL性能优化(七·上)-- 锁机制 之 表锁
前言 数据库的锁主要用来保证数据的一致性的.MyISAM存储引擎只支持表锁,InnoDB存储引擎既支持行锁,也支持表锁,但默认情况下是采用行锁. 一.锁分类 1.按照对数据操作的类型分:读锁,写锁 读 ...
随机推荐
- centos7怎能开机设置文本界面
rm -f /etc/systemd/system/default.target 设置命令行级别方法:ln -sf /lib/systemd/system/runlevel3.target /etc/ ...
- CDH4.1.2 集群安装配置详细过程
http://wenku.baidu.com/link?url=Wu43MFbzKH8hu7AgGfajmOr0WpRMX_gJlMDUs6pSrBK2LOJWIMpfWZa7IW-BSPko1yGl ...
- datetime.date(2014, 4, 25) is not JSON serializable
# 背景 接口期望返回json格式数据,但数据存储在mysql中,先将mysql的数据转为dict,然后将dict转为json格式,然后就报这个错误了的,原因就是时间格式转换问题 # 解决方法 1. ...
- 推荐两款国人开发的html前段框架
1.http://www.h-ui.net/ H-ui前端框架官方网站 2.http://www.builive.com/ BUI是基于JQuery的富客户端UI框架
- CF834D The Bakery
题目链接:戳我 题意:将一个长度为n的序列分为k段,使得总价值最大.一段区间的价值表示为区间内不同数字的个数 \(n<=35000,k<=50\) 开始想的转移方程是这个样子的--\(dp ...
- SHOI2013 扇形面积并
题目链接:戳我 补一张图 我们尝试把圆上的扇形转化成直线上的矩形--我们维护[1,2*m]的区间,那么每个能产生贡献的子区间的长度*第K大的半径的平方的总和就是answer了. 怎么转化呢?左端点为a ...
- php留言系统(9)
1.参照之前的(mvc框架总结)将整体框架定下来之后,那么请求默认参数将变为: //默认请求首页: //P=front //C=fIndex //A=show 1.1 找到控制器fIndexC ...
- js滚动距离
滚动距离 onclick="$('html,body').animate({scrollTop:$('.J_user_evaluate').offset().top-110},500)&qu ...
- vector类型介绍
一.vector类型简介 标准库:集合或动态数组,我们可以放若干对象放在里面. vector他能把其他对象装进来,也被称为容器 #include <iostream> #include & ...
- spark 广播变量
Spark广播变量 使用广播变量来优化,广播变量的原理是: 在每一个Executor中保存一份全局变量,task在执行的时候需要使用和这一份变量就可以,极大的减少了Executor的内存开销. Exe ...