logo头像

求知若渴,虚心若愚

浏览器 - 浏览器渲染引擎 - 浏览器渲染引擎工作原理

渲染过程和渲染引擎

  • 渲染引擎工作原理

  • javascript会阻塞dom的解析
    • 当解析过程中遇到script标签的时候,便会停止解析过程,转而去处理脚本
    • 如果脚本是内联的,浏览器会先去执行这段内联的脚本
    • 如果是外链的,那么先会去加载脚本,然后执行。在处理完脚本之后,浏览器便继续解析HTML文档。
  • 现代的浏览器都使用了猜测预加载
    • 为了减缓渲染被阻塞的情况,当解析被阻塞的时候,浏览器会有一个轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描,查找那些将来可能能够用到的资源文件的url,在渲染器使用它们之前将其下载下来。

TIP
我们为什么一再强调将css放在头部,将js文件放在尾部

  1. 是因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不会影响前面的页面的渲染
  2. 现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。
  3. 也就是说浏览器能够渲染不完整的dom树和cssom,尽快的减少白屏的时间。假如我们将js放在header,js将阻塞解析dom,dom的内容会影响到First Paint,导致First Paint延后。所以说我们会将js放在后面,以减少First Paint的时间,但是不会减少DOMContentLoaded被触发的时间。

  4. 老版本的浏览器:

    1. Dom树完全生成好后页面才能渲染出来
    2. 浏览器又必须读完全部HTML才能生成完整的Dom树
    3. script标签不放在body底部也一样,因为dom树的生成需要整个文档解析完毕
    4. 但是这样会阻塞线程,现代浏览器基本不是这个流程了
支付宝打赏 微信打赏

赞赏是对我们的肯定!