阅后感-从 Node 实例推导浏览器的渲染机制

从 Node 实例推导浏览器的渲染机制

这篇文章通过搭建node实例建起本地服务器,然后实验 静态资源在不同顺序/阻塞环境 浏览器的渲染机制,得出以下结论:

  1. 静态资源并不是同时请求的,也不是解析到指定标签的时候才去请求的,浏览器会自行判断;
  2. JS 会阻塞页面的解析和渲染,同时浏览器也存在预解析,遇到阻塞可以继续解析下面的元素;
  3. CSS`不阻塞dom树的构建解析,只会阻塞其后面元素的渲染,不会阻塞其前面元素的渲染;
  4. 图片既不阻塞解析,也不阻塞渲染。

自己也跟着写了以下demo,对于1 2 3点感觉挺新鲜,因为以前一直晓得:当dom树构建时,出现一个js会进行阻塞,要等js加载完毕才能继续;如果js中用到了css,还要等cssom树构建完毕才能继续。原来浏览器存在预解析,遇到阻塞会继续解析下面的元素,也不是到了某个标签才请求,浏览器会自行判断。浏览器的行为可真奇怪呀。