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 = thislet count = 10000for (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 = thislet count = 10000for (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 = thislet count = 10000for (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 = thislet count = 10000this.$nextTick(function() {// DOM 更新了console.log('finished tick5-1 ' + new Date().toString())console.log(document.querySelectorAll('li').length)})setTimeout(me.setTimeout2, 0)},setTimeout2() {let me = thislet count = 10000for (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>
转载于:https://www.cnblogs.com/kelly-sunshine/p/10795083.html
vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制相关推荐
- 深入理解 vue DOM 更新时机
vue3 官方文档中对 DOM 更新时机 的解释是 当你更改响应式状态后,DOM 也会自动更新.然而,你得注意 DOM 的更新并不是同步的.相反,Vue 将缓冲它们直到更新周期的 "下个时机 ...
- 浏览器事件循环机制与Vue nextTick的实现
浏览器事件循环机制 先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve ...
- 10个问题带你全面理解Linux性能优化
10个问题带你全面理解Linux性能优化 • Feiskyhttps://feisky.xyz/posts/2020-06-06-linux-perf/本文整理自极客时间"10个问题带你全面 ...
- mysql优化十:从架构角度全局理解mysql性能优化
从架构角度全局理解mysql性能优化 MySQL性能优化其实是个很大的课题,在优化上存在着一个调优金字塔的说法: 很明显从图上可以看出,越往上走,难度越来越高,收益却是越来越小的.比如硬件和 OS调优 ...
- 对JavaScript事件循环机制的理解
前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多 问题起源于我们的一个页面,下 ...
- Vue底层判断标签的性能优化方法
在vue中,如果写div.span等正常的html标签,vue会解析成传统的html标签,但当写不是这些标签的时候,vue会认为他是一个组件,例如:.是如何做到这种判断的呢,首先自己来实现一个这样的判 ...
- 从架构师角度全局理解Mysql性能优化
MySQL性能优化其实是个很大的课题,在优化上存在着一个调优金字塔的说法: 很明显从图上可以看出,越往上走,难度越来越高,收益却是越来越小的. 所以在进行优化时,首先需要关注和优化的应该是架构,如果架 ...
最新文章
- 为什么不应该重写service方法?
- DBoW2 cmake代码注释
- java中改变字符串编码
- 再来一顿贺岁宴 | 从K-Means到Capsule
- 【感想文】感情经历,是否给你我带来的些许提升?我想,有。
- iOS 时间戳的转换
- java编写斐波那契数列,实战案例
- admin客户管理系统html5模板
- 【AI+餐饮】人工智能进军餐饮:AI 调酒,越喝越有
- 数据仓库ETL(二)基本概念
- IntelliJ Idea中使用Java8新特性lambda表达式
- 吴恩达机器学习作业Python实现(三):多类分类和前馈神经网络
- 若依如何修改数据监控登录账户密码?
- 没有钱的男人和有钱的男人区别在哪里?
- 负载均衡调度算法追溯
- creo外观库_Proe/Creo外观着色与贴图
- java导出excel锁定状态_填报表导出excel后不可写的单元格处于锁定状态
- JSON在线序列化网站
- 0元参会丨第十届数据技术嘉年华精彩抢先速览
- 软件开发人员如何自我学习?
热门文章
- 详解java二叉排序树_java实现二叉排序树
- java web宿舍管理系统源码_JavaWeb宿舍管理系统(附 演示、源码下载地址)
- 适合pythonpandas的软件_11个Python Pandas小技巧让你的工作更高效(附代码实例)
- 第七章节 类的抽象(抽象类)
- 第六章节 多态 (多态的概述)
- Lc101对称二叉树
- Problem L. Graph Theory Homework
- Unity3D之UGUI基础5:Toggle复选框
- python 中的堆栈 用列表实现
- C++ STL bitset类常用函数的使用