关于JS页面阻塞的实验

问题1:如果遇到JS阻塞,那么它的阻塞是指阻塞DOM建立,还是阻塞显示(渲染),如果是阻塞DOM建立,那么是全部DOM都阻塞还是部分阻塞?

[DEMO]

现象:先出现红色,3秒后出现蓝色。

结论:说明JS只是阻塞JS脚本下面的DOM。

问题2:如果这个JS阻塞不是因为外链下载消耗的阻塞,而是<script>内部js的计算运行造成的阻塞,那么<script>上面的DOM会被渲染吗?

[DEMO]

现象:红色蓝色一起出现。

结论:说明JS脚本的阻塞如果是[网络原因],就会部分阻塞,如果是[运行原因],就会全部阻塞。

JavaScript的事件机制

事件流JavaScript 的事件是以一种流的形式存在的,一个事件会有多个元素同时响应。有时候这不是我们想要的,我们只需要某个特定的元素响应我们的绑定事件就可以了。事件分类捕获型事件(非IE)、冒泡型事件(所有浏览器都支持)
捕获型事件是自上而下的,而冒泡型事件是自下而上的。下面我用一个图来直观表示:

继续阅读