在浏览器页面按F12, 在控制台上输入以下代码:
for(;;){}
可以看出,页面出现了卡死状态(所有按钮、超链接都无法点击),但滚动条可以正常滚动,请问这是为什么?
好多新手不了解浏览器工作原理,就无法回答这个问题。
渲染主线程是单线程的,上面的死循环霸占了这个线程,因此其它需要在主线程处理的事件都没有执行的机会。
但滚动并不在渲染主线程上执行,而是在合成线程上执行(因为浏览器的优化策略,滚动不会触发reflow,直接放在合成线程上,以提升性能)。这样,主线程的卡死不会影响合成线程的运行,所以页面可以正常滚动。
网友评论