在面试中,有人问我一个问题,浏览器中的选项卡最多可以分配多少内存。你怎么知道?
const blockContainerNode = document.querySelector('.block-container');
const inputNode = document.querySelector('.input');
const btnStartNode = document.querySelector('.btn-start');
const btnEndNode = document.querySelector('.btn-end');
btnStartNode.addEventListener('click', () => {
const inputValue = Number(inputNode.value);
if (!isNaN(inputValue) && inputValue > 0) {
startAnimation(blockContainerNode, inputValue);
}
});
btnEndNode.addEventListener('click', () => {
blockContainerNode.textContent = '';
});
function startAnimation(blockContainerNode, quantityBlocks) {
const blockNodes = new Array(quantityBlocks).fill(0).map((item, i) => {
const divNode = document.createElement('div');
divNode.classList.add('block');
divNode.textContent = i;
divNode.style.setProperty('--index', i);
return divNode;
});
document.body.style.setProperty('--maxIndex', quantityBlocks);
blockContainerNode.textContent = '';
blockContainerNode.append(...blockNodes);
}
.block-container {
--maxIndex: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 40px;
}
.block {
--index: 0;
display: flex;
justify-content: center;
align-items: center;
animation: anime 2s calc(var(--index) * -0.5s) infinite linear alternate-reverse;
}
@keyframes anime {
0% {
transform: rotate(0deg) scale(1) skew(60deg, 80deg);
}
100% {
transform: rotate(360deg) scale(3);
}
}
<input class="input" type="number" value="1000" placeholder="Количество блоков">
<button class="btn-start" type="button">Начать анимацию</button>
<button class="btn-end" type="button">Удалить</button>
<div class="block-container">
</div>
根据 Chrome x64 中网站js9.si.edu的信息,每个标签的限制为 4Gb。
我冒昧地建议这种限制是由于 chrome 为每个选项卡创建了一个新进程。如果有人补充答案并解释为什么 4Gb,我会很高兴。