Chrome rendering Optimization

IntroductionFor most Web developers, the basic Web page model is the DOM model. The page rendering process is often unknown. We only know that it is a process of converting the DOM Representation of the page into an image displayed on the screen. In recent years, modern browsers have used graphics cards to improve page rendering Methods: such improvements are generally called "Hardware acceleration ". When talking about common Web pages (that is, non-Canvas2D or WebGL pages), what does hardware acceleration mean? This article describes the basic model of Web page rendering based on hardware acceleration in Chrome.
 Lengthy notesHere we will discuss WebKit. More specifically, we will discuss WebKit under Chromium. This article involves the implementation details of Chrome, rather than the features of the Web platform. The Web platform and its standards do not specify the implementation details of this layer, so we cannot guarantee that the content in this article can be applied to other browsers, however, an understanding of the internal working mechanism of the browser will be helpful for High-Level Error debugging and Performance Tuning of applications. In addition, I have to think that the entire article is about a core part of the Chrome rendering architecture, but this structure is still changing rapidly. This article attempts to cover only those parts that are unlikely to change, but if I read this article six months later, it may not be the case.
It is very important to understand that there are two different ways of rendering Chrome now: hardware accelerated rendering and early software rendering. Until the time of writing this article, all pages in Chrome in Windows, ChromeOS, and Android are accelerated by hardware. In Mac and Linux, only those pages whose content needs to be combined can be accelerated by hardware (