石家庄网站开发关于浏览器渲染过程讲解-行业知识-石家庄网站建设_石家庄做网站_石家庄网站开发_做网站建设专业品牌-尚武科技

尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
石家庄网站开发关于浏览器渲染过程讲解

  今天尚武科技的网站开发工程师为您带来啊关于在浏览器渲染过程中的常见问题及相关解决方案,帮助大家更好的了解网站建设及开发。
  
  我们可能都知道浏览器含有一个渲染引擎,用来渲染窗口所展示的内容。默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理,有了些心得,在这里跟大家分享一下,这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。
  
  1.解析HTML,构建DOM树(这里遇到外链,此时会发起请求)
  
  2.解析CSS,生成CSS规则树
  
  3.合并DOM树和CSS规则,生成render树
  
  4.布局render树(Layout/reflow),负责各元素尺寸、位置的计算
  
  5.绘制render树(paint),绘制页面像素信息
  
  6.浏览器会将各层的信息发送给GPU,GPU将各层合成(composite),显示在屏幕上。这一点在网站开发中十分重要。
  
  1.构建DOM树
  
  无论是DOM还是CSSOM,都是要经过 Bytes→characters→tokens→nodes→objectmodel这个过程。
  
  DOM树构建过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
  
  2.构建CSSOM树
  
  上述也提到了CSSOM的构建过程,也是树的结构,在最终计算各个节点的样式时,浏览器都会先从该节点的普遍属性(比如body里设置的全局样式)开始,再去应用该节点的具体属性。还有要注意的是,每个浏览器都有自己默认的样式表,因此很多时候这棵CSSOM树只是对这张默认样式表的部分替换。
  
  3.生成render树
  
  DOM树和CSSOM树合并生成render树
  
  简单描述这个过程:
  
  DOM树从根节点开始遍历可见节点,这里之所以强调了“可见”,是因为如果遇到设置了类似 display:none;的不可见节点,在render过程中是会被跳过的(但 visibility:hidden;opacity:0这种仍旧占据空间的节点不会被跳过render),保存各个节点的样式信息及其余节点的从属关系。
  
  4.Layout 布局
  
  有了各个节点的样式信息和属性,但不知道各个节点的确切位置和大小,所以要通过布局将样式信息和属性转换为实际可视窗口的相对大小和位置。
  
  5.Paint 绘制
  
  对于网站建设而言,Paint 绘制可以说是会给人一种万事俱备的感觉,最后只要将确定好位置大小的各节点,通过GPU渲染到屏幕的实际像素。
  
  以上就是尚武科技的网站开发工程师为大家带来的关于浏览器渲染的相关介绍,希望大家能够喜欢,如果大家对这些内容还有想要了解的可以给尚武科技的工程师留言,也可以关注尚武科技的官方公众号,里边会有更多的相关内容解决您的问题。



上一篇:在石家庄做网站中,如何做好图文排版             下一篇:石家庄网站开发关于CSS和JS的那些事儿

标签:石家庄网站开发 石家庄建设 浏览器渲染过程
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   尚武科技售前专员  尚武科技技术专员  尚武科技美工专员  尚武科技售后专员  
Copyright © 2008-2018 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved