浏览器渲染过程概述

时间:2022-01-11 来源:未知网络 作者:996建站网
  1. 背景介绍

1.1 为什么写这系列文章?

以自己为例,作为一名前端开发者,能够熟练使用各类DSL框架与原生JS,也能够深刻理解工程化和数据驱动等技术栈的优势,但是对于chrome等浏览器渲染原理,却没能一窥究竟;

一个偶然的工作机会(加入快应用),能够有幸了解浏览器与Android等的底层实现过程,同时围绕其中的性能瓶颈做出优化;相信有很多开发者曾如我一般迷茫,所以借此机会,希望能将自己所知分享出来,共同进步;

当然前人也有文章介绍,写这篇文章的理由如下:

  • 参考文章比较过时

之前部分文章仍然沿用RenderObject等词,实际上chrome的持续演进,这些名词随着版本升级已更新(比如:RenderObject改为LayoutObject) ,这类文章的指导性略显过时;

  • 实现架构持续改进

现在blink内核的设计比较复杂,除了渲染模型上的复杂之外,还需要考虑多平台多架构(如:Fusion)的适配能力,需要有文章能够衔接好,尽量让读者融会贯通;

  • 提升原理认识与性能瓶颈

了解实现过程,能够理解代码中的性能瓶颈点,正确指导性能优化之路;更重要的是:了解浏览器潜在的性能提升之处,有助于了解具体某项优化对整体宏观性能的提升价值;

1.2 文章适合哪些读者?

本文适合对浏览器渲染实现感兴趣的初级开发者阅读,希望通过理论介绍能够逐步深入到源代码实现中,加深理解浏览器实现的设计思路与产生BUG原因;

如果您已经熟悉源代码实现和各模块内容,则不必阅读;欢迎指出错误,方便我们改进,让更多开发者受益;

为了加深印象,理解宏观背景,推荐先阅读以下几篇,形成整体感官认识;

  • 图解浏览器的基本工作原理
  • Life of a pixel(需翻墙)
  • udacity课程:浏览器渲染优化
  • devtools官方:关键路径渲染

1.3 文章的特点

本文以chrome浏览器为例,在介绍理论的过程中,会结合对应的devtools工具与chromium项目的源码进行介绍验证;单纯介绍理论印象不够深刻,也难以让人信服,所以希望能够通过源码来佐证原理;

2. 过程概述

本文只讲页面渲染的过程,渲染工作主要发生在Render Process中;

该进程中主要有两个线程:

  • main线程负责渲染大部分工作,JS代码运行在该线程上;
  • impl线程承担DOM事件传递、合成处理等其它工作;

双线程的优势之一在于当JS执行时,能够有效地响应用户操作;

现在chrome浏览器实现是一个多进程的架构,除了针对每个页签的Render Process渲染进程外,还拥有Browser Process主进程;

在渲染进程中,页面的渲染主要分为:Parse HTMLLayoutPaintComposite等的几个阶段,之后还会涉及到Rasterize等过程,其它线程/进程会参与进来;

2.1 示例介绍

这里我们直接使用Google开发者站点的示例代码,如下所示,有静态DOM与内部样式,浏览器要加载如下的HTML内容。

<!doctype html>
<html>
  <head>
    <title>Critical Path</title>

    <style>
      body {
        font-size: 16px;
      }
      p {
        font-weight: bold;
      }
      span {
        color: red;
      }
      p span {
        display: none;
      }
      img {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div>
      <img src="/wp-content/uploads/2021/01/https://www.00996.cn/wp-content/uploads/2022/01/20220111023426-61dcecb2454d4.jpg"/>
    </div>
  </body>
</html>

浏览器渲染过程概述插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序