浏览器的渲染过程

标签: 浏览器的渲染过程 重排Reflow 重绘Repaint
2人阅读 评论(0) 收藏 举报
分类:

浏览器的渲染过程:

  1. 浏览器将HTML解析成一个DOM Tree;
  2. 将CSS解析成一个CSSOM(CSS Object Model)树;
  3. 合成渲染树:将DOM 树和CSSOM 树合成成一个Rendering Tree渲染树;
  4. 有了渲染树,浏览器已经知道了文档HTML中有哪些节点和各个节点的CSS样式及他们之间的从属关系,接下来就是Layout计算出各个节点在屏幕中的位置。
  5. 最后就是绘制了。

重排Reflow:

    Dom结构中各个元素都有自己的盒子(模型),这些都需要浏览器根据css样式来进行计算并根据计算的结果将元素放置到它该放的位置上,这个位置称为Reflow。

    哪些操作会触发Reflow:

        1.增加、删除、修改DOM节点都会触发重排和重绘;

        2.移动DOM的位置;

        3.修改元素的样式;

        4.修改网页的默认字体。

重绘Repaint:

    当盒子的位置、大小、颜色及其他属性确定下来后,浏览器会按照这些特性将这些元素绘制出来,这个过程称为Repaint。

什么操作会触发重绘:

    无论是Dom改动还是CSS改动,只要改变了当前的显示就会触发重绘。

    如何尽量少的重绘:尽量将多次Dom操作改为一次操作

        

    

查看评论

三维游戏引擎开发-渲染

介绍移动设备,介绍一款游戏引擎具备的要素,并依次进行开发实现,采用标准C++语言进行开发,需要有扎实的C++基础
  • 2015年04月12日 20:28

浏览器加载、解析、渲染的过程

浏览器的加载、解析、渲染过程; css和js代码的几个最佳实践; js阻塞
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016-07-24 17:05:31
  • 24318

浏览器渲染HTML页面的过程

友情链接:http://www.tuicool.com/articles/vmu2Uvn浏览器渲染过程 浏览器接收到html代码,即自上而下解析:构建DOM树+构建CSSOM =>渲染树(解析——构建...
  • NewFishCoder
  • NewFishCoder
  • 2017-03-19 21:46:16
  • 2230

HTML页面渲染过程——在浏览器中敲入URL到完整渲染出来,经历的过程解析

浏览器与服务器的交互浏览器的主要功能是将用户选择的web资源呈现出来,它从服务器请求资源,并将得到的资源(HTML,PDF,image等等)显示在浏览器窗口。那么从用户敲入URL到完整渲染出来,经历了...
  • jiangawait
  • jiangawait
  • 2017-02-27 16:58:46
  • 1668

浏览器渲染页面的步骤

浏览器的渲染页面时,表示网站资源已经请求成功。 渲染时,大致的流程如下: (解析html以构建dom树->构建render树->布局render树->绘制render树) 具体的流程如下: 1...
  • longholidays
  • longholidays
  • 2017-03-14 20:26:44
  • 1931

前端面试-浏览器渲染机制

在开发WEB应用整一个流程中,用户体验通常都会被提及,而网站的性能,又是与用户体验直接挂钩,因此可以在项目需求规格文档中经常看到项目对性能的需求。 WEB性能优化常见的入手点包括以下几点: 1、 ...
  • a767536305
  • a767536305
  • 2016-02-01 17:39:57
  • 3819

浏览器对页面的渲染过程

在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排,需要 付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?...
  • joeyon
  • joeyon
  • 2014-08-16 09:48:55
  • 1168

浏览器渲染流程分析与总结

我们写了那么多的页面,大家都知道编写HTML是页面的结构,CSS是控制样式,那么浏览器它到底是怎么工作的呢?怎样把你所写的HTML和CSS代码在页面中呈现出来的呢?带着这个疑问我们探讨下去。...
  • sunyuan_software
  • sunyuan_software
  • 2016-02-01 15:59:26
  • 983

浏览器解析渲染页面过程

转自:https://segmentfault.com/a/1190000006879700在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了,浏览器是如何把页面呈现在屏幕上的呢?不同...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017-07-15 08:32:52
  • 319

浅析浏览器渲染页面过程

1.解析HTML文件,创建DOM树 自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。 2.解析CSS 优先级:浏览器默认设置 特定级:...
  • yuhk231
  • yuhk231
  • 2016-12-12 12:06:33
  • 1956
    个人资料
    持之以恒
    等级:
    访问量: 1426
    积分: 302
    排名: 25万+
    文章存档