网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

前端浏览器渲染的5大步骤分别是什么-创新互联

小编给大家分享一下前端浏览器渲染的5大步骤分别是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司是一家业务范围包括IDC托管业务,虚拟空间、主机租用、主机托管,四川、重庆、广东电信服务器租用,成都天府联通服务器托管,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。

前端浏览器渲染的5大步骤分别是什么

浏览器渲染一共有五步

  • 处理 HTML 并构建 DOM 树

  • 处理 CSS构建 CSSOM 树

  • 将 DOM 与 CSSOM 合并成一个渲染树

  • 根据渲染树来布局,计算每个节点的位置

  • 调用 GPU 绘制,合成图层,显示在屏幕上

第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染

重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大

重绘(Repaint)

重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘。

常见的引起重绘的属性:

color
border-style
visibility
background
text-decoration
outline
box-shadow

回流(Reflow)

回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流

常见引起回流属性和方法:

添加或者删除可见的DOM元素;
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化,比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

回流影响的范围

全局范围:从根节点html开始对整个渲染树进行重新布局。
局部范围:对渲染树的某部分或某一个渲染对象进行重新布局

以上是“前端浏览器渲染的5大步骤分别是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!


网站标题:前端浏览器渲染的5大步骤分别是什么-创新互联
转载注明:http://bjjierui.cn/article/giioh.html

其他资讯