线程阻塞

• 什么是线程阻塞?

• 哪些会引起线程阻塞?

• ,阻塞后会引起具体什么后果?

(1).什么是线程阻塞

主线程在遇见JS并执行JS时,主线程会停止解析其他任务,只执行JS,如果JS逻辑过多复杂或者有死循环或者递归 就会造成线程阻塞,css不会引起主线程阻塞.因为主线程不会停止等待,结合手写流程图更容易简单理解

(2.)哪些会引起线程阻塞

从下面流程图明白主线程遇见css不会停止(阻塞),只有JS会阻塞主线程。

(3.) 阻塞后会引起具体什么后果

看完主线程处理JS和css的流程图,已经大致了解JS会阻塞线程。 此时如果写的JS代码有死循环、死递归(或者是运算大量逻辑的普通递归)则就会造成主线程阻塞,从而无法去解析html造成页面白屏、浏览器崩溃,所以有时候在开发中 如果写了一个如下列 例子代码的死循环,而主线程会一直执行JS代码,解析不了html,连页面都无法正常显示.

JS有一个死循环, 主线程一直执行JS导致主线程阻塞解析不了html,所以看见两个div都没显示,从这个例子也看出在html css js都有的情况下会先执行JS代码.

浏览器渲染原理

主线程 ==>

1. 解析html,执行js 解析css,都解析完后，生成Dom树 =>

2. style样式计算,给每个Dom计算出最终样式(比如写的rem/vw/vh等,最终都会转换为px),行成最终Dom树(带有样式) =>

3 . 根据几何信息、宽高生成布局树(渲染树),就是在网页上真正看到的，布局树跟Dom树有差异,(可以以v-if和v-show式例子,v-show给Dom树添加css属性,网页对应节点隐藏 但是打开浏览器调试工具会发现对应Dom还看得见,如果是v-if网页上和浏览器调试工具都看不见，这就是差异点) =>

4 . 浏览器分层(这块我也是了解,我也不是很清楚) =>

5 . 渲染