@justrand

感谢！

@Danswerme

嘘，可能会摸出奇怪的东西。

@zouzou0208

感谢支持~，有帮助就太好了，开心~。(ﾉ´▽｀)ﾉ♪

@mathzhaoliang

刚才看的时候就有点疑问，为什么要在 SVG 里写 canvas，直接在 html 里写不是更好，后面想到 SVG 的一大优势就是矢量图方便增删使用。看了大佬的数学仙境，只能说，大佬牛批，已加入 Star 里收藏吃灰。

@liyang5945

谢谢支持~。ヾ(ﾟ∀ﾟゞ)

@mathzhaoliang

每次觉得自己行了，就会有大佬给我上一课，这个特效也太酷了。

我个人的刷题经验是开始零启动，然后按套路刷。

比如今天刷链表，我会先找 easy 难度的链表(或者 easy 难度的其他题)，找到一个翻转链表，翻转链表我马上能想到是用新的内存空间，迭代一遍把值保存，然后生成一个翻转的新的链表。这样能跑通吗，肯定是 AC，AC 之后今天就算启动了，接下来可以继续优化成不用额外空间的，也可以再做其他题，然后重复这个过程....

求田问舍 ，怕应羞见，刘郎才气。

@Alander

emm，感觉我有说明= =，我简化一下：

innerHTML 并非触发渲染的条件，执行完整个循环才是，包裹你写的阻塞在内的所有代码都属于渲染前执行的任务。

参考下这个： https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

说下自己的理解，里面提到第 11 步是更新渲染，11 之后还有两步，一个是执行浏览器空闲回调(requestsIdleCallback)一个是 worker 的回调。

11 步之前是执行 JS，JS 主线程就一个线程，UI 渲染会等待 JS 执行，所以你这个阻塞也阻塞了渲染，

```
const div = document.querySelector('#root')
div.innerHTML = '1'
const now = performance.now()
console.log(div.innerHTML);
```
执行到这里如果没有后续代码，浏览器会尝试执行微任务栈，然后执行 UI 渲染，此时就会渲染 1 。

但要注意 innerHTML 实时改变了 DOM，但不是触发渲染的条件，改变 DOM != 渲染，走完这个循环才是执行渲染的条件。

```
while (performance.now() - now < 100) {
console.log(now)
}
console.log(div.innerHTML);
div.innerHTML = '2'
console.log(div.innerHTML);
```

加上下面这些，只是多阻塞了主线程一会，此时走完前面的 1-10，去执行 UI 渲染，而是不断执行 console.log(now)，之后执行到了:

```
div.innerHTML = '2'
console.log(div.innerHTML);
```
执行渲染时的 innerHTML 已经是 2，所以渲染出来 2 了。

一般可以用 setTimeout+Promise，这样不会阻塞 UI 渲染，只会阻塞后续代码执行：

```
function sleep(times) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, times)
})
}
```

```
async function draw() {
const div = document.querySelector('#root')
div.innerHTML = '1'
//const now = performance.now()
//console.log(div.innerHTML);
//while (performance.now() - now < 100) {
// console.log(now)
//}
await sleep(100)
console.log(div.innerHTML);
div.innerHTML = '2'
console.log(div.innerHTML);
}

draw()
```

相关扩展可以了解一下 Vue 的$nextTick，曾经某一个版本把它从微任务改到了宏任务，此时用$nextTick 改变 DOM 的 Style 会出现抖动(因为 宏-> 微 -> UI 渲染 -> 宏 2)，本来任务应该在 UI 渲染前结果成了 UI 渲染后。

分子。

我的经验是....不要造假，一个谎言需要用另一个谎言来弥补。

@lin0zero

脚本小子，嘘。

https://tanronggui.xyz/t/772689#reply29

之前因为这里面的内容研究了一下实现，发现有两种实现方式：

1. 通过重写 toString(或者其他只有控制台才会调用的方法)，console.log 不打开控制台不会 console.log ，console.log 一个函数(或者其他什么东西)的时候会调用 toString 方法，重写这个 toString 即可判断是否打开了 F12 。

2. 记录时间戳，之后写一个 debugger，在记录一个时间戳，两个时间戳相减，debugger 会造成第二个时间戳记录时间远大于预期(比如 50ms)，这时就可以判断打开了 F12 。

@JayFang1993
@thulof
@lzuntalented

大佬们，已撩(☆▽☆)。

@LiubaiQ
= =...遁地我也开过（悄悄说）。

@NitroS
(☆▽☆)

@Lemeng

哎嘿= =....