nextTick机制
Vue源码阅读 - 批量异步更新与nextTick原理
额外:window.MessageChannel那些事
今天要看的这个window.MessageChannel
也是浏览器提供的一个异步操作的API。
从MessageChannel
名称上我们就能对其含义知晓个大概。消息通道
-的确,这个接口允许我们创建一个新的消息通道,并通过它的两个messagePort
属性发送数据。
直白的说,这个api会创建一个管道,管道的两端分别代表一个messagePort
,都能够通过portMessage
向对方发送数据,通过onmessage
来接受对方发送过来的数据。
下面用一个简单的例子来加深一下印象:
const ch = new MessageChannel()
const port1 = ch.port1
const port2 = ch.port2port1.onmessage = function(d) {console.log(`port1接收的消息是:${d.data}`)
}port2.onmessage = function(d) {console.log(`port2接收的消息是:${d.data}`)
}// 发送消息
port1.portMessage('port1发送的消息')
port2.portMessage('port2发送的消息')
上面这个简单的例子就是MessageChannel
的大致使用过程了。概括来说就是使用MessageChannel
这个构造函数开创建一个消息管道对象。这个对象实例有两个只读属性port1
和port2
。我们可以通过其postMessage
来发送数据,onmessage
来接收数据。
理解了上面的过程,我们就能把MessageChannel
应用到我们自己的项目中了。
MessageChannel
是可以在Web Worker
中使用的。我们可以利用这个特性在两个web worker
中通信。
- main.js
const w1 = new Worker('./w1.js')
const w2 = new Worker('./w2.js')
const ch = new MessageChannel()w1.postMessage('from outernal', [ch.port1])
w2.postMessage('from outernal', [ch.port2])
w2.onmessage = function(e) {console.log(e.data)
}
- w1.js
onmessage = function(e) {if(e.data === 'from outernal') {setTimeout(function() {e.ports[0].portMessage('向worker2发送的数据')})}
}
- w2.js
onmessage = function(e) {if (e.data === 'from outernal') {e.ports[0].onmessage = function(e) {portMessage(e.data)}}
}
上面就是利用MessageChannel
来实现两个worker
之间的通信的过程。大致流程就是worker1 -> port1 -> port2 -> worker2
另外,利用MessageChannel
我们还可以实现一个比较有意思的事情,比如对象的深拷贝
:
function structuralClone(obj) {return new Promise(resolve => {const {port1, port2} = new MessageChannel()port2.onmessage = ev => resolve(ev.data)port1.postMessage(obj)})
}async function test() {const obj = {a: {b: 1}}const clonedObj = await structuralClone(obj)obj['a']['b'] = 2console.log(clonedObj['a']['b']) // 1
}
另外值得一提的就是,MessageChannel
也是Vue.nextTick
方法实现方法之一。所以,来个彩蛋吧:
function asyncCallByMutationObserver(callback) {const div = document.createElement('div')let count = 0const observer = new MutationObserver(() => {callback && typeof callback === 'function' && callback.call(null)})observer.observe(div, { attributes: true })div.setAttribute('count', ++count);
}function asyncCallByMessageChannel(callback) {const ch = new MessageChannel()ch.port1.onmessage = callbackch.port2.postMessage(1)
}
所以,下面的结果会输出什么???
setTimeout(() => {console.log(1)
}, 0)new Promise((resolve) => {console.log(2)for(let i = 0; i < 100000; i++) {(i === 99999) && resolve()}console.log(3)
}).then(() => {console.log(4)
})console.log(5)asyncCallByMessageChannel(() => {console.log(8)
})asyncCallByMutationObserver(() => {console.log(6)
})console.log(7)//2 3 5 7 4 6 8 1
1. 异步更新
上一篇文章我们在依赖收集原理的响应式化方法 defineReactive
中的 setter
访问器中有派发更新 dep.notify()
方法,这个方法会挨个通知在 dep
的 subs
中收集的订阅自己变动的watchers执行update。一起来看看 update
方法的实现:
// src/core/observer/watcher.js/* Subscriber接口,当依赖发生改变的时候进行回调 */ update() {if (this.computed) {// 一个computed watcher有两种模式:activated lazy(默认)// 只有当它被至少一个订阅者依赖时才置activated,这通常是另一个计算属性或组件的render functionif (this.dep.subs.length === 0) { // 如果没人订阅这个计算属性的变化// lazy时,我们希望它只在必要时执行计算,所以我们只是简单地将观察者标记为dirty// 当计算属性被访问时,实际的计算在this.evaluate()中执行this.dirty = true} else {// activated模式下,我们希望主动执行计算,但只有当值确实发生变化时才通知我们的订阅者this.getAndInvoke(() => {this.dep.notify() // 通知渲染watcher重新渲染,通知依赖自己的所有watcher执行update})}} else if (this.sync) { // 同步this.run()} else {queueWatcher(this) // 异步推送到调度者观察者队列中,下一个tick时调用} }
如果不是 computed watcher
也非 sync
会把调用update的当前watcher推送到调度者队列中,下一个tick时调用,看看 queueWatcher
:
// src/core/observer/scheduler.js/* 将一个观察者对象push进观察者队列,在队列中已经存在相同的id则* 该watcher将被跳过,除非它是在队列正被flush时推送*/ export function queueWatcher (watcher: Watcher) {const id = watcher.idif (has[id] == null) { // 检验id是否存在,已经存在则直接跳过,不存在则标记哈希表has,用于下次检验has[id] = truequeue.push(watcher) // 如果没有正在flush,直接push到队列中if (!waiting) { // 标记是否已传给nextTickwaiting = truenextTick(flushSchedulerQueue)}} }/* 重置调度者状态 */ function resetSchedulerState () {queue.length = 0has = {}waiting = false }
这里使用了一个 has
的哈希map用来检查是否当前watcher的id是否存在,若已存在则跳过,不存在则就push到 queue
队列中并标记哈希表has,用于下次检验,防止重复添加。这就是一个去重的过程,比每次查重都要去queue中找要文明,在渲染的时候就不会重复 patch
相同watcher的变化,这样就算同步修改了一百次视图中用到的data,异步 patch
的时候也只会更新最后一次修改。
这里的 waiting
方法是用来标记 flushSchedulerQueue
是否已经传递给 nextTick
的标记位,如果已经传递则只push到队列中不传递 flushSchedulerQueue
给 nextTick
,等到 resetSchedulerState
重置调度者状态的时候 waiting
会被置回 false
允许 flushSchedulerQueue
被传递给下一个tick的回调,总之保证了 flushSchedulerQueue
回调在一个tick内只允许被传入一次。来看看被传递给 nextTick
的回调 flushSchedulerQueue
做了什么:
// src/core/observer/scheduler.js/* nextTick的回调函数,在下一个tick时flush掉两个队列同时运行watchers */ function flushSchedulerQueue () {flushing = truelet watcher, idqueue.sort((a, b) => a.id - b.id) // 排序for (index = 0; index < queue.length; index++) { // 不要将length进行缓存watcher = queue[index]if (watcher.before) { // 如果watcher有before则执行watcher.before()}id = watcher.idhas[id] = null // 将has的标记删除watcher.run() // 执行watcherif (process.env.NODE_ENV !== 'production' && has[id] != null) { // 在dev环境下检查是否进入死循环circular[id] = (circular[id] || 0) + 1 // 比如user watcher订阅自己的情况if (circular[id] > MAX_UPDATE_COUNT) { // 持续执行了一百次watch代表可能存在死循环warn() // 进入死循环的警告break}}}resetSchedulerState() // 重置调度者状态callActivatedHooks() // 使子组件状态都置成active同时调用activated钩子callUpdatedHooks() // 调用updated钩子 }
在 nextTick
方法中执行 flushSchedulerQueue
方法,这个方法挨个执行 queue
中的watcher的 run
方法。我们看到在首先有个 queue.sort()
方法把队列中的watcher按id从小到大排了个序,这样做可以保证:
- 组件更新的顺序是从父组件到子组件的顺序,因为父组件总是比子组件先创建。
- 一个组件的user watchers(侦听器watcher)比render watcher先运行,因为user watchers往往比render watcher更早创建
- 如果一个组件在父组件watcher运行期间被销毁,它的watcher执行将被跳过
在挨个执行队列中的for循环中,index < queue.length
这里没有将length进行缓存,因为在执行处理现有watcher对象期间,更多的watcher对象可能会被push进queue。
那么数据的修改从model层反映到view的过程:数据更改 -> setter -> Dep -> Watcher -> nextTick -> patch -> 更新视图
2. nextTick原理
2.1 宏任务/微任务
这里就来看看包含着每个watcher执行的方法被作为回调传入 nextTick
之后,nextTick
对这个方法做了什么。不过首先要了解一下浏览器中的 EventLoop
、macro task
、micro task
几个概念,不了解可以参考一下 JS与Node.js中的事件循环 这篇文章,这里就用一张图来表明一下后两者在主线程中的执行关系:
解释一下,当主线程执行完同步任务后:
- 引擎首先从macrotask queue中取出第一个任务,执行完毕后,将microtask queue中的所有任务取出,按顺序全部执行;
- 然后再从macrotask queue中取下一个,执行完毕后,再次将microtask queue中的全部取出;
- 循环往复,直到两个queue中的任务都取完。
浏览器环境中常见的异步任务种类,按照优先级:
macro task
:同步代码、setImmediate
、MessageChannel
、setTimeout/setInterval
micro task
:Promise.then
、MutationObserver
有的文章把 micro task
叫微任务,macro task
叫宏任务,因为这两个单词拼写太像了 -。- ,所以后面的注释多用中文表示~
先来看看源码中对 micro task
与 macro task
的实现: macroTimerFunc
、microTimerFunc
// src/core/util/next-tick.jsconst callbacks = [] // 存放异步执行的回调 let pending = false // 一个标记位,如果已经有timerFunc被推送到任务队列中去则不需要重复推送/* 挨个同步执行callbacks中回调 */ function flushCallbacks() {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0for (let i = 0; i < copies.length; i++) {copies[i]()} }let microTimerFunc // 微任务执行方法 let macroTimerFunc // 宏任务执行方法 let useMacroTask = false // 是否强制为宏任务,默认使用微任务// 宏任务 if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {macroTimerFunc = () => {setImmediate(flushCallbacks)} } else if (typeof MessageChannel !== 'undefined' && (isNative(MessageChannel) ||MessageChannel.toString() === '[object MessageChannelConstructor]' // PhantomJS )) {const channel = new MessageChannel()const port = channel.port2channel.port1.onmessage = flushCallbacksmacroTimerFunc = () => {port.postMessage(1)} } else {macroTimerFunc = () => {setTimeout(flushCallbacks, 0)} }// 微任务 if (typeof Promise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve()microTimerFunc = () => {p.then(flushCallbacks)} } else {microTimerFunc = macroTimerFunc // fallback to macro }
flushCallbacks
这个方法就是挨个同步的去执行callbacks中的回调函数们,callbacks中的回调函数是在调用 nextTick
的时候添加进去的;那么怎么去使用 micro task
与 macro task
去执行 flushCallbacks
呢,这里他们的实现 macroTimerFunc
、microTimerFunc
使用浏览器中宏任务/微任务的API对flushCallbacks
方法进行了一层包装。比如宏任务方法 macroTimerFunc=()=>{ setImmediate(flushCallbacks) }
,这样在触发宏任务执行的时候 macroTimerFunc()
就可以在浏览器中的下一个宏任务loop的时候消费这些保存在callbacks数组中的回调了,微任务同理。同时也可以看出传给 nextTick
的异步回调函数是被压成了一个同步任务在一个tick执行完的,而不是开启多个异步任务。
注意这里有个比较难理解的地方,第一次调用 nextTick
的时候 pending
为false,此时已经push到浏览器event loop中一个宏任务或微任务的task,如果在没有flush掉的情况下继续往callbacks里面添加,那么在执行这个占位queue的时候会执行之后添加的回调,所以 macroTimerFunc
、microTimerFunc
相当于task queue的占位,以后 pending
为true则继续往占位queue里面添加,event loop轮到这个task queue的时候将一并执行。执行 flushCallbacks
时 pending
置false,允许下一轮执行 nextTick
时往event loop占位。
可以看到上面 macroTimerFunc
与 microTimerFunc
进行了在不同浏览器兼容性下的平稳退化,或者说降级策略:
macroTimerFunc
:setImmediate -> MessageChannel -> setTimeout
。首先检测是否原生支持setImmediate
,这个方法只在 IE、Edge 浏览器中原生实现,然后检测是否支持 MessageChannel,如果对MessageChannel
不了解可以参考一下这篇文章,还不支持的话最后使用setTimeout
; 为什么优先使用setImmediate
与MessageChannel
而不直接使用setTimeout
呢,是因为HTML5规定setTimeout执行的最小延时为4ms,而嵌套的timeout表现为10ms,为了尽可能快的让回调执行,没有最小延时限制的前两者显然要优于setTimeout
。microTimerFunc
:Promise.then -> macroTimerFunc
。首先检查是否支持Promise
,如果支持的话通过Promise.then
来调用flushCallbacks
方法,否则退化为macroTimerFunc
; vue2.5之后nextTick
中因为兼容性原因删除了微任务平稳退化的MutationObserver
的方式。
2.2 nextTick实现
最后来看看我们平常用到的 nextTick
方法到底是如何实现的:
// src/core/util/next-tick.jsexport function nextTick(cb?: Function, ctx?: Object) {let _resolvecallbacks.push(() => {if (cb) {try {cb.call(ctx)} catch (e) {handleError(e, ctx, 'nextTick')}} else if (_resolve) {_resolve(ctx)}})if (!pending) {pending = trueif (useMacroTask) {macroTimerFunc()} else {microTimerFunc()}}if (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve})} }/* 强制使用macrotask的方法 */ export function withMacroTask(fn: Function): Function {return fn._withTask || (fn._withTask = function() {useMacroTask = trueconst res = fn.apply(null, arguments)useMacroTask = falsereturn res}) }
nextTick
在这里分为三个部分,我们一起来看一下;
- 首先
nextTick
把传入的cb
回调函数用try-catch
包裹后放在一个匿名函数中推入callbacks数组中,这么做是因为防止单个cb
如果执行错误不至于让整个JS线程挂掉,每个cb
都包裹是防止这些回调函数如果执行错误不会相互影响,比如前一个抛错了后一个仍然可以执行。 - 然后检查
pending
状态,这个跟之前介绍的queueWatcher
中的waiting
是一个意思,它是一个标记位,一开始是false
在进入macroTimerFunc
、microTimerFunc
方法前被置为true
,因此下次调用nextTick
就不会进入macroTimerFunc
、microTimerFunc
方法,这两个方法中会在下一个macro/micro tick
时候flushCallbacks
异步的去执行callbacks队列中收集的任务,而flushCallbacks
方法在执行一开始会把pending
置false
,因此下一次调用nextTick
时候又能开启新一轮的macroTimerFunc
、microTimerFunc
,这样就形成了vue中的event loop
。 - 最后检查是否传入了
cb
,因为nextTick
还支持Promise化的调用:nextTick().then(() => {})
,所以如果没有传入cb
就直接return了一个Promise实例,并且把resolve传递给_resolve,这样后者执行的时候就跳到我们调用的时候传递进then
的方法中。
Vue源码中 next-tick.js
文件还有一段重要的注释,这里就翻译一下:
在vue2.5之前的版本中,nextTick基本上基于
micro task
来实现的,但是在某些情况下micro task
具有太高的优先级,并且可能在连续顺序事件之间(例如#4521,#6690)或者甚至在同一事件的事件冒泡过程中之间触发(#6566)。但是如果全部都改成macro task
,对一些有重绘和动画的场景也会有性能影响,如 issue #6813。vue2.5之后版本提供的解决办法是默认使用micro task
,但在需要时(例如在v-on附加的事件处理程序中)强制使用macro task
。
为什么默认优先使用 micro task
呢,是利用其高优先级的特性,保证队列中的微任务在一次循环全部执行完毕。
强制 macro task
的方法是在绑定 DOM 事件的时候,默认会给回调的 handler 函数调用 withMacroTask
方法做一层包装 handler = withMacroTask(handler)
,它保证整个回调函数执行过程中,遇到数据状态的改变,这些改变都会被推到 macro task
中。以上实现在 src/platforms/web/runtime/modules/events.js 的 add
方法中,可以自己看一看具体代码。
刚好在写这篇文章的时候思否上有人问了个问题 vue 2.4 和2.5 版本的@input事件不一样 ,这个问题的原因也是因为2.5之前版本的DOM事件采用 micro task
,而之后采用 macro task
,解决的途径参考 < Vue.js 升级踩坑小记> 中介绍的几个办法,这里就提供一个在mounted钩子中用 addEventListener
添加原生事件的方法来实现,参见 CodePen。
3. 一个例子
说这么多,不如来个例子,执行参见 CodePen
<div id="app"><span id='name' ref='name'>{{ name }}</span><button @click='change'>change name</button><div id='content'></div> </div> <script>new Vue({el: '#app',data() {return {name: 'SHERlocked93'}},methods: {change() {const $name = this.$refs.namethis.$nextTick(() => console.log('setter前:' + $name.innerHTML))this.name = ' name改喽 'console.log('同步方式:' + this.$refs.name.innerHTML)setTimeout(() => this.console("setTimeout方式:" + this.$refs.name.innerHTML))this.$nextTick(() => console.log('setter后:' + $name.innerHTML))this.$nextTick().then(() => console.log('Promise方式:' + $name.innerHTML))}}}) </script>
执行以下看看结果:
同步方式:SHERlocked93 setter前:SHERlocked93 setter后:name改喽 Promise方式:name改喽 setTimeout方式:name改喽
为什么是这样的结果呢,解释一下:
- 同步方式: 当把data中的name修改之后,此时会触发name的
setter
中的dep.notify
通知依赖本data的render watcher去update
,update
会把flushSchedulerQueue
函数传递给nextTick
,render watcher在flushSchedulerQueue
函数运行时watcher.run
再走diff -> patch
那一套重渲染re-render
视图,这个过程中会重新依赖收集,这个过程是异步的;所以当我们直接修改了name之后打印,这时异步的改动还没有被patch
到视图上,所以获取视图上的DOM元素还是原来的内容。 - setter前: setter前为什么还打印原来的是原来内容呢,是因为
nextTick
在被调用的时候把回调挨个push进callbacks数组,之后执行的时候也是for
循环出来挨个执行,所以是类似于队列这样一个概念,先入先出;在修改name之后,触发把render watcher填入schedulerQueue
队列并把他的执行函数flushSchedulerQueue
传递给nextTick
,此时callbacks队列中已经有了setter前函数
了,因为这个cb
是在setter前函数
之后被push进callbacks队列的,那么先入先出的执行callbacks中回调的时候先执行setter前函数
,这时并未执行render watcher的watcher.run
,所以打印DOM元素仍然是原来的内容。 - setter后: setter后这时已经执行完
flushSchedulerQueue
,这时render watcher已经把改动patch
到视图上,所以此时获取DOM是改过之后的内容。 - Promise方式: 相当于
Promise.then
的方式执行这个函数,此时DOM已经更改。 - setTimeout方式: 最后执行macro task的任务,此时DOM已经更改。
注意,在执行 setter前函数
这个异步任务之前,同步的代码已经执行完毕,异步的任务都还未执行,所有的 $nextTick
函数也执行完毕,所有回调都被push进了callbacks队列中等待执行,所以在setter前函数
执行的时候,此时callbacks队列是这样的:[setter前函数
,flushSchedulerQueue
,setter后函数
,Promise方式函数
],它是一个micro task队列,执行完毕之后执行macro task setTimeout
,所以打印出上面的结果。
另外,如果浏览器的宏任务队列里面有setImmediate
、MessageChannel
、setTimeout/setInterval
各种类型的任务,那么会按照上面的顺序挨个按照添加进event loop中的顺序执行,所以如果浏览器支持MessageChannel
, nextTick
执行的是 macroTimerFunc
,那么如果 macrotask queue 中同时有 nextTick
添加的任务和用户自己添加的 setTimeout
类型的任务,会优先执行 nextTick
中的任务,因为MessageChannel
的优先级比 setTimeout
的高,setImmediate
同理。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- VirtualBox安装Ubuntu 18.04.3LTS
点赞收藏分享文章举报Warrior7发布了13 篇原创文章 获赞 3 访问量 1177私信关注...
2024/4/25 13:09:54 - Pentaho 调用API根据指定路径下载文件
Pentaho官网文档:https://help.pentaho.com/Documentation/8.2/Developer_Center/Embed_Pentaho_Server api : /pentaho/api/repos//generatedContent 这里的格式需要注意一下 代码如下: 工具类: public class HttpUtils {public static OutputStream doPostStream(String …...
2024/4/20 5:14:46 - mac下MAT内存分析工具安装--独立版安装
一、背景 在java程序运行中发生OOM的时候,我们可以使用强大的内存分析工具MAT进行问题跟踪,但由于习惯了使用idea开发,再为了MAT下载个eclipse太麻烦,所以安装MAT独立版。二、安装 下载地址:https://eclipse.org/mat/downloads.php选择自己系统相应的版本下载,下载完得到…...
2024/4/26 21:31:44 - 小白 C++ 入门到大神发疯学习路线
这篇文章实际上是我自己入门过程的总结,一个尽量少废话的C++入门指南。总结完忽然发现像个读书清单😄。 具体总结前,想先回答一个问题——要不要先学C,再学C++? 我作为小白时疑惑过这个问题,在此给后来的小白和当年的自己一个答案。 个人看法是,单就学习C++而言,直接学…...
2024/4/1 15:59:25 - 13点值得注意的谷歌 JavaScript编写风格
对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。 对于编写有效的JavaScript来说,这些并不是硬性的、快速的规则,而只是在源文件中维护一致的、吸引人的样式选择的规则。这…...
2024/4/13 21:48:20 - 解决rabbitMQ和kafka消息丢失问题
目录1数据的丢失问题,可能出现在生产者、MQ、消费者中,咱们从 RabbitMQ 和 Kafka 分别来分析一下吧。解决方案:生产者弄丢了数据生产者将数据发送到 RabbitMQ 的时候,可能数据就在半路给搞丢了,因为网络问题啥的,都有可能。此时可以选择用 RabbitMQ 提供的事务功能,就是…...
2024/4/25 9:24:12 - 身份证校验
偶然看到的身份证校验,复制运行,以作记录:写的太6了package com.automic.swp.controller;/*** @ClassName: IDCartController* @Author: Mr_Dong先生* @Description: 身份证校验* @Date: 2019/12/13 16:07* @Version: 1.0*/import java.text.ParseException; import java.te…...
2024/4/23 3:40:43 - PHP高性能分布式应用服务器框架-SwooleDistributed
选择SD框架助力企业开发今年年底历时2年多的迭代,这是SD框架硕果满满的一年,通过不断的迭代和改进SD框架已经在圈内有良好的口碑,不少新生的框架借鉴了SD的设计思想,SD框架也被不少创业型公司和大型企业使用。SD框架到底是什么技术SD框架全称SwooleDistributed,从名称上看…...
2024/4/18 19:45:36 - 是时候扔掉 Postman 了,试试 IntelliJ IDEA 自带的高能神器!
前言 从postman到IDEA REST Client IDEA REST Client控制台 历史请求记录 构建HTTP请求脚本 环境区分 结果断言 结果值暂存 结语 前言 接口调试是每个软件开发从业者必不可少的一项技能,一个项目的的完成,可能接口测试调试的时间比真正开发写代码的时间还要多,几乎是每个开发…...
2024/4/25 21:22:50 - C语言实现的简单公司职员信息管理系统
项目需求设计要求功能选择可以用菜单来实现,用户根据自己 的选择进入不同的菜单程序不要求将信息保存到文件中,程序开始时职员信息为空,用户需要先增加职员信息,之后才可以实现查找、删除、浏览等功能。职员信息的关键字为职员的职员号,加入时职员号重复的记录不能加入。查…...
2024/4/24 0:07:47 - 给用户赋予操作文件夹的所有权限(最高权限)
sudo chmod -R 777 目录名 说明: -R 是指级联应用到目录里的所有子目录和文件 777 是所有用户都拥有最高权限(可自定权限码)点赞收藏分享文章举报weixin_45140509发布了2 篇原创文章 获赞 0 访问量 57私信关注...
2024/4/26 5:07:23 - Spring session实现单点登陆
Redis+Cookie+Jackson+Filter实现原生的单点登陆,对我们的业务是有入侵的因此,使用Spring Session实现的单点登陆不会对我们的业务进行入侵点赞收藏分享文章举报Richard678发布了229 篇原创文章 获赞 137 访问量 13万+私信关注...
2024/4/24 8:35:28 - Java多线程进阶—— J.U.C之atomic框架:LongAdder
一、LongAdder简介JDK1.8时,java.util.concurrent.atomic包中提供了一个新的原子类:LongAdder。 根据Oracle官方文档的介绍,LongAdder在高并发的场景下会比它的前辈————AtomicLong 具有更好的性能,代价是消耗更多的内存空间:那么,问题来了:为什么要引入LongAdder? …...
2024/4/24 7:30:48 - 【转】linux日常运维工作
Linux的使用环境也日趋成熟,各种开源产品络绎不绝,大有百花齐放的盛景,那么当Linux落地企业,回归工作时,我们还要面对这Linux运维方面的诸多问题,今天我们特意组织一场有关Linux 在企业运用当中交流分享活动。本次活动内容丰富,在此我们进行一下系统的梳理。一 Linux选择…...
2024/4/26 19:56:14 - JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
现实企业级Java开发中,有时候我们会碰到下面这些问题:OutOfMemoryError,内存不足内存泄露线程死锁锁争用(Lock Contention)Java进程消耗CPU过高......这些问题在日常开发中可能被很多人忽视(比如有的人遇到上面的问题只是重启服务器或者调大内存,而不会深究问题根源),…...
2024/4/23 5:36:15 - HTTP请求【UE4】
链接点赞收藏分享文章举报YaoJ1aHao发布了63 篇原创文章 获赞 7 访问量 3981私信关注...
2024/4/20 2:36:35 - Android DiskLruCache完全解析,硬盘缓存的最佳方案
概述记得在很早之前,我有写过一篇文章Android高效加载大图、多图解决方案,有效避免程序OOM,这篇文章是翻译自Android Doc的,其中防止多图OOM的核心解决思路就是使用LruCache技术。但LruCache只是管理了内存中图片的存储与释放,如果图片从内存中被移除的话,那么又需要从网…...
2024/4/23 5:36:26 - audio音频语音提示自动播放特效
点赞收藏分享文章举报billhepeng发布了304 篇原创文章 获赞 3 访问量 51万+他的留言板关注...
2024/4/23 5:36:41 - 1688API开发系列:item_search-按关键字搜索商品API 返回值说明
为了进行电商平台1688的API开发,首先我们需要做下面几件事情。 1)开发者注册一个账号 2)然后为每个淘宝应用注册一个应用程序键(App Key) 。 3)下载1688API的SDK并掌握基本的API基础知识和调用 4)利用SDK接口和对象,传入AppKey或者必要的时候获取并传入SessionKey来进行…...
2024/4/25 15:07:13 - Unable to install libopencv-nonfree-dev in Ubuntu 16.04
原文地址点赞收藏分享文章举报weixin_45874527发布了1 篇原创文章 获赞 0 访问量 6私信关注...
2024/4/24 8:39:32
最新文章
- JVM(Jvm如何管理空间?对象如何存储、管理?)
Jvm如何管理空间(Java运行时数据区域与分配空间的方式) ⭐运行时数据区域 程序计数器 程序计数器(PC),是一块较小的内存空。它可以看作是当前线程所执行的字节码的行号指示器。Java虚拟机的多线程是通过时间片轮转调…...
2024/4/27 3:31:56 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 微信小程序的页面交互2
一、自定义属性 (1)定义: 微信小程序中的自定义属性实际上是由data-前缀加上一个自定义属性名组成。 (2)如何获取自定义属性的值? 用到target或currentTarget对象的dataset属性可以获取数据 ÿ…...
2024/4/25 11:41:25 - 设计模式:组合模式
定义 组合模式(Composite Pattern)是一种结构型设计模式,它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以统一对待单个对象和组合对象。 应用场景 组合模式适用于以下场景: 表达对象的部分-整体层次结构:当你想要表示对象的部分-整…...
2024/4/26 14:14:17 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/26 18:09:39 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/26 20:12:18 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/25 18:39:23 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/25 18:39:22 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/25 18:39:22 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/26 21:56:58 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/25 16:48:44 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/26 16:00:35 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/25 18:39:16 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/26 22:01:59 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/25 18:39:00 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/25 18:38:58 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/25 18:38:57 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57