浏览器渲染流程、css加载阻塞、js加载阻塞

浏览器渲染流程、css加载阻塞、js加载阻塞

  • 浏览器渲染流程
    • load事件与DOMContentLoaded事件
  • js阻塞
  • css阻塞

浏览器渲染流程

在探究阻塞关系之前,先说一下浏览器渲染流程
浏览器渲染流程、css加载阻塞、js加载阻塞_第1张图片

  1. 解析html建立dom树
  2. 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
  3. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
  4. 绘制render树(paint),绘制页面像素信息
  5. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。
  6. 渲染完毕后触发load事件

load事件与DOMContentLoaded事件

当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,譬如如果有async属性的脚本就不一定加载完成

当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片都已经加载完成了。

顺序是:DOMContentLoaded -> load

js阻塞

  1. JS 阻塞 DOM 解析(js脚本中有时获取不到元素)

    加载 js 文件的时会阻塞 dom 的解析、并且阻塞其它资源(如 css,js 或图片资源)的加载

    直到 js 下载、解析、执行完毕后, 才开始继续并行下载其他资源并呈现内容

    将 script 标签放在 body 结束标签之前, 虽然也会阻塞页面的呈现,但不会阻塞资源下载(其他资源已经下载完成了),还可以避免因页面没有加载完成而导致获取元素失败的情况

css阻塞

css 加载不会阻塞 dom 树的解析,不会阻塞其它资源(如图片)的加载,但是css 加载会阻塞 dom 树的渲染,也会阻塞 js 文件的执行

  1. css加载不会阻塞DOM树解析(异步加载时DOM照常构建)

    浏览器是解析DOM生成DOM Tree,结合CSS生成的CSS Tree,最终组成render tree,再渲染页面,两者分别解析不会互相影响,因而不会阻塞DOM解析

  2. css阻塞render树渲染(渲染时需等css加载完毕,因为render树需要css信息)

    如果css加载不阻塞render树渲染的话,那么当css加载完之后,render树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。

  3. css会阻塞js的运行

    如果脚本的内容是获取元素的样式,宽高等CSS控制的属性,浏览器是需要计算的,也就是依赖于CSS,浏览器也无法感知脚本内容到底是什么,为避免样式获取,因而只好等前面所有的样式下载完后,再执行JS

你可能感兴趣的:(JS,css阻塞,js阻塞,浏览器渲染过程)