关于浏览器的渲染，你需要掌握的知识点

最新推荐文章于 2024-07-23 12:35:43 发布

chengxiu3482

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量142

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/u/4050621/blog/3019221

版权

1.前端工程师为什么需要知道浏览器的渲染原理

都应该知道作为frontend，加载性能良好和浏览器的渲染机制联系紧密，所以想要实现性能优化，还是很有必要掌握浏览器的渲染机制的。

2.浏览器渲染整个页面的流程

a.浏览器的解析：

1）浏览器通过请求的url先要域名解析，找到其相应的IP，然后向服务器发送请求，最后浏览器接受到文件，如（Html,css,js,image等等）；

2）接着html文件加载，逐步构建DOM Tree;相应的css样式列表文件也加载，解析以及构建其css rule tree；

3）js脚本文件加载完后，通过dom api和cssom api来操作dom tree和css rule tree。

b.浏览器的渲染：

1)浏览器引擎通过DOM tree 和CSS Rule Tree构建Rending Tree；

2但是需要注意的是，Rendering Tree 并不与 DOM Tree 对应，比如像 <head> 标签内容或带有 display: none; 的元素节点并不包括 Rendering Tree 中 ;

3)接下来就是layout，通过CSS Rule Tree匹配相应的DOM tree进行定位坐标位置和大小，是否换行，以及各种样式属性；

4最后一个是paint，通过调用Native GUI的API 绘制网页画面，完成渲染。

webp

当用户在浏览网页时进行交互或通过js脚本改变页面结构时，以上的部分操作可能就会重复运行，这个过程就是Repaint 或 Reflow。

Repaint重绘：当某元素改变的时候，它没有影响其在页面中的位置，（比如：background-color,border-color,font,visibility等等），浏览器仅仅会应用新的样式重绘该元素。

Reflow回流：当元素改变的时候，会影响文档内容会结构，或元素位置，HTML使用的是流式布局，所以，某元素的几何尺寸发生了变化，那就要重新布局。

两者差别：Reflow 的成本比 Repaint 的成本高得多的多。一个结点的 Reflow 很有可能导致子结点，甚至父点以及同级结点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。

可能产生 Reflow的几种常见行为：

增加、删除、或改变 DOM 节点
增加、删除 ‘class’ 属性值
元素尺寸改变
文本内容改变
浏览器窗口改变大小或拖动
动画效果进行计算和改变 CSS 属性值
伪类激活（:hover）
但是浏览器是聪明的，它不会像上面那样，你每改动一次样式，就 Reflow 或 Repaint 一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次 Reflow ，这又叫异步 reflow 或增量异步 Reflow 。但是有些情况浏览器是不会这么做的，比如：Resize 窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行 Reflow 。
优化浏览器的渲染过程：

1.创建有效的html.css，可以加上指定文档编码，比如<meta charset="utf-8">;

2.css样式写在<head>中，javascript写在<body>末尾；

3.减少css嵌套层级和选择适当的选择器，这里可以参看关于如何提升css选择器性能；

4.不要通过js逐条修改dom，取而代之的是提前定义好css的class进行操作；

5.尽量减少将dom节点属性值防止循环中，者会导致大量读写此属性值。

6.尽可能的为产生动画的 HTML 元素使用 fixed 或 absolute 的 position ，那么修改他们的 CSS 是不会 Reflow 的。

7.未完待续.......

转载于:https://my.oschina.net/u/4050621/blog/3019221

关注