浏览器渲染页面的流程

浏览器渲染流程如下图所示:

渲染的流程如下:

1. 解析HTML文件,创建 DOM 树

  (自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。)

2. 解析CSS文件,构建 CSSOM Tree(CSS规则树)

   优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3. 将CSS与DOM合并,构建渲染树(Render Tree)
4. reflow(重排):根据Render tree进行节点信息计算(Layout)
5. repaint(重绘):根据计算好的信息绘制整个页面(Painting)
理论上,每一次的dom更改或者css几何属性更改,都会引起一次浏览器的重排/重绘过程,而如果是css的非几何属性更改,则只会引起重绘过程。所以说重排一定会引起重绘,而重绘不一定会引起重排

  JS也参与DOM 树的构建,浏览器会先执行js再开始构建渲染树。所以说:JS脚本会阻塞Render tree的构建,阻塞了页面的渲染
我们可以在把script脚本放于body后面,来解决上面的问题。

重排也叫回流:实际上,reflow的字面意思也是回流,之所以有的叫做重排,也许是因为更符合中国人的思维。标准文档之所以叫做回流(Reflow),是因为浏览器渲染是基于“流式布局”的模型,流实际就使我们常说的文档流,当dom或者css几何属性发生改变的时候,文档流会受到波动联动的去更改。

重绘repaint:就是当页面中元素样式的改变并不影响它在文档流中的位置时,例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。

常见引起浏览器绘制过程的属性:

重排一定会引起重绘,而重绘不一定会引起重排  那如何减少重排  如下:

1.避免设置大量的style属性  style属性改变结点样式,每设置一次会触发一次reflow重排(回流)  最好使用class属性

2.position属性 最好是设为absoulte或fixe  不会影响其他布局;

3.动画实现的速度的如果太慢 以1个像素为单位移动这样最平滑 大量消耗CPU,以3个像素为单位移动则会好很多

4.不要使用table布局,因为table中某个元素旦触发了reflow,那么整个table的元素都会触发reflow。

原文地址:https://www.cnblogs.com/yang1997/p/12104932.html

时间: 2024-10-04 00:19:43

浏览器渲染页面的流程的相关文章

浏览器渲染页面多的流程(参考网上有关资料整理)

浏览器渲染页面也就表示我们网上的资源已经请求成功 首先我们要明确浏览器渲染页面大致分为这几个步骤 1.浏览器解析html文档从而使构建成dom文档树=>2.构建render树=>3.布局render树=>4.绘制render树 1.浏览器会将html文档解析成一个dom文档树,dom树构建的过程是一个深度遍历的过程,只有当当前节点的所有子节点都构建好了以后,才会去构建当前节点的下一个兄弟节点.Dom树的构建过程为:将字节转换成字符,确定tokens,将tokens转换成节点,然后构建do

浏览器渲染的工作流程和图片加载与渲染规则

1 浏览器渲染的工作流程 浏览器的工作原理.以Webkit引擎的工作流程为例,浏览器加载一个HTML页面后进行如下操作 解析HTML[遇到<img>标签加载图片] -> 构建DOM树 加载样式 -> 解析样式[遇到背景图片链接不加载] -> 构建样式规则树 加载javascript -> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树[加载渲染树上的背景图片] 计算元素位置进行布局 绘制[开始渲染图片] 2 图片加载与渲染规则  页面中不是所有的&l

浏览器渲染页面和加载页面机制

为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始: 1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4. 并且在下载后进行解析,解析过程中,停止页面所有往下

浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

(1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与回流? OK,兴致来了,我们就先从 浏览器解析 URL 看起,先来看看当用户输入 URL,到浏览器呈现给用户页面,经历了以下过程: 版本 A: 用户输入 URL 地址. 对 URL 地址进行 DNS 域名解析. 建立 TCP 连接(三次握手). 浏览器发起 HTTP 请求报文. 服务器返回 HTTP

浏览器渲染页面原理(看到一个网站写的不错 收录的,一起学习)

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

浏览器渲染页面原理

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

chrome和Firefox浏览器渲染页面的不同

一直很好奇chrome和firefox这两大浏览器的页面渲染有什么不同,今天自己写了些html代码来做了下检验. 先做html编码,代码如下: <!DOCTYPE html><html>    <head>        <title>测试浏览器渲染</title>        <meta charset="UTF-8">        <meta name="viewport" con

浏览器渲染页面的探讨

我们都知道,网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面,执行一大片js代码也会迟滞页面的渲染.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载:或者,我们在页面中插入某段执行起来很耗时的js代码,那么浏览器渲染页面的过程就会被阻塞,直到JS文件下载并执行完后才继续.由此可见,前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 先来看看,为什么会发生渲染阻塞? 例如:有如下的html文件

网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染页面的过程就会被阻塞2秒,直到该JS文件下载并执行完后才继续. 前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 1.JavaScript为何会阻塞? <!doctype html> <html> <head> <script type