The process of Web page generation and its impact on performance of "The Road of Front end"

11: The process of Web page generation and its impact on performance the process of page generation

The Web page generation process can be roughly divided into five steps

1. HTML代码转化为DOM2. CSS代码转化成CSSOM（CSS Object Model）3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成5. 将布局绘制（paint）在屏幕上

In these five steps, the first step to the third part is very fast 第四步和第五步很耗时 .

Rearrange and redraw

When a page is generated, it is rendered at least once. What we need to focus on is the behavior that will cause the page to be re-rendered during user access:

· 修改DOM· 修改样式表· 用户事件（例如鼠标悬停，页面滚动，输入框输入文字等）

Re-rendering, involving 重排 and重绘

Reflow (reflow)

That is, rebuilding the layout will inevitably result in redrawing, such as changing the position of the element, triggering reflow and redrawing.

Redraw (repaint)

That is, it is important to note that, 重绘不一定需要重排 for example, changing the color of an element will only trigger redrawing, without triggering a reflow.

Impact on performance

Reflow and redraw are triggered continuously, which is unavoidable, but they are very resource-intensive and are the root cause of poor Web page performance.

Improve Web page performance, that is 要降低重排和重绘的频率和成本，尽量少触发重新渲染 .

Most browsers pass 队列化修改 and 批量显示 optimize the re-typesetting process. However, some operations force a refresh and require that all planned changes be applied immediately.

This information complements the DOM operational best practices

Refresh Rate

Each frame of a Web page animation is a re-rendered, less than 24帧 the animation per second, and the human eye can feel the pause. General web animations, 需要达到每秒30帧到60帧的频率，才能比较流畅 .

Most displays are refreshed in a way that, 60Hz in order to be consistent with the system and conserve power, the browser automatically refreshes the animation at this frequency. So, if the page can be 60 frames per second, it will be synchronized with the monitor refresh, to achieve the best visual effect. This means that 60 re-renders within a second cannot be exceeded for each re-render 16.66ms .

Refresh Rate

FPS (frame per second), i.e. how many times a second can be re-rendered

Timeline Panel for developer tools

FPS Detection via JS code

This time we took the website I wrote last year on the Vuejs Chinese community. Give it a try.

Vuejs Chinese Community

Open the console to execute the following code:

// 返回是否 有 requestAnimationFrame 方法  1000ms 会执行 60 次var rAF = function () {    return (        window.requestAnimationFrame ||        window.webkitRequestAnimationFrame ||        function (callback) {            window.setTimeout(callback, 1000 / 60);        }    );}();var frame = 0;var allFrameCount = 0;var lastTime = Date.now();var lastFameTime = Date.now();  var loop = function () {    var now = Date.now();    var fs = (now - lastFameTime);    var fps = Math.round(1000 / fs);      lastFameTime = now;    // 不置 0，在动画的开头及结尾记录此值的差值算出 FPS    allFrameCount++;    frame++;      if (now > 1000 + lastTime) {        var fps = Math.round((frame * 1000) / (now - lastTime));        console.log(`${new Date()} 1S内 FPS：`, fps);        frame = 0;        lastTime = now;    };      rAF(loop);}loop();

Then we see the following display:

Mon Aug 13 2018 20:14:44 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:45 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:46 GMT+0800 (中国标准时间) 1S内 FPS： 55Mon Aug 13 2018 20:14:47 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:48 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:49 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:50 GMT+0800 (中国标准时间) 1S内 FPS： 58Mon Aug 13 2018 20:14:51 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:52 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:53 GMT+0800 (中国标准时间) 1S内 FPS： 60Mon Aug 13 2018 20:14:54 GMT+0800 (中国标准时间) 1S内 FPS： 56Mon Aug 13 2018 20:14:55 GMT+0800 (中国标准时间) 1S内 FPS： 59

Just a good screen refresh rate is about a few fps, very smooth.

Written in the last

Now that the three frameworks of Vue, Recat and Angular are prevalent today, the most primitive browsers do what they do when they render the Web page, perhaps we have forgotten something.

This article is just to make a basic memory, how the Web page is rendered, under the three framework, the advent of virtual DOM, for the page load what advantages?

What do I do when I rearrange and redraw? Where are the performance bottlenecks of page rendering often occurring? How can we reduce these performance-consuming operations?

These questions are an explanation of what the document is doing here.

GitHub Address: (Welcome star, welcome recommendation:)

The process of Web page generation and its impact on performance