页面渲染原理

渲染流程

1.解析HTML文档

2.生成DOM树

3.生成渲染树。渲染树的节点只包括DOM树种可见节点，除了节点，渲染树含有节点的样式。

4.浏览器根据渲染树绘制页面。

与绘制相关的还有两个概念，回流和重绘

回流：元素的位置、大小或盒模型等改变影响了布局需要重新渲染部分或全部页面。

重绘：元素背景颜色等改变但不影响布局需要重新绘制部分页面。

可见，回流对性能的伤害大于重绘。且回流必然引起重绘。

引起回流的操作举例：

DOM节点增删

display:none

position变化

flow变化

窗户大小变化

字体大小变化

文字内容增删

其他能改变位置、尺寸、边框、边距等属性的操作

引起重绘的操作举例：

背景改变（颜色、图片）

visibility改变

opacity改变

shadow改变

（以上举例是理论上的，未测试）

参考：

高性能WEB开发

web前端优化之refolow

时间： 2024-10-29 19:10:37

页面渲染原理的相关文章

深入学习页面优化之页面渲染原理

拾人牙慧理解并整理之直奔主题,要考虑到页面性能优化,必须得理解浏览器的渲染机制才行. 1.原理渲染引擎在这里就不展开了,可自行搜索解决.下面说说渲染流程,大致是这样的: 浏览器在接收到服务器返回的html页面后, 浏览器开始构建DOM TREE,遇到CSS样式会构建CSS RULER TREE, 遇到javascript会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree,解析完成后, 浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来

你该了解的页面渲染原理与性能优化

首先,你应该了解的就是,浏览器是如何渲染一个页面的. 先看一个大致的流程图它的总体流程是这样的: 1)浏览器解析这三个东西: 解析HTML/XHTML/SVG,生成DOM树(事实上,Webkit有三个C++的类对应这三类文档以用于解析). 解析css文件产生CSS Rule树(css规则树). 解析javascript,通过DOM API和CSSOM API来操作DOM树和CSS Rule树. 2)解析完成后,浏览器会根据DOM树和CSS Rule树来构造渲染树(Rendering Tree)

浏览器渲染页面的原理及流程

我们可能都知道浏览器含有一个渲染引擎,用来渲染窗口所展示的内容.默认情况下,渲染引擎可以显示html.xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,用于显示PDF格式.但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧.这些天研究了一下浏览器的渲染原理,有了些心得,在这里跟大家分享一下. 网页浏览器的排版引擎也被称为页面渲染引擎,它负责取得网页的内容(HTML.XML.图象等等).整理信息(例如加入CSS等),以及计算网页的显示方式然后

高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读. 滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程先看个图从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

【前端性能】高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看

不同内核的浏览器，以及渲染原理

一. "Rendering Engine"渲染引擎,也可以叫做浏览器内核(这个部分要扩展一下,原本的浏览器内核分为渲染引擎和Js引擎,后来Js引擎越来越独立,内核就倾向于只指渲染引擎了),是浏览器最核心的部分,浏览器内核的不同对于网页的语法解释会有不同,所以渲染出来的效果也不同,简单说就是不同的内核决定了浏览器如何显示页面,也是因为这个原因导致了浏览器兼容性问题的出现. 下面是5种浏览器分别采用的不同引擎: - IE内核 Trident- 谷歌内核 WebKit / Blink(由we

【前端性能】高性能滚动 scroll 及页面渲染优化--转发

浏览器渲染原理--reflow

Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都是怎么干活的:1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件:3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件:4.