当我们浏览网页时不用知道具体的过程，我们就可以看到漂亮的网页，这对于我们来说是透明的。但是如果我想从事前端开发类型的工作时，就需求对整个过程有一个详细的了解。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据。但是其具体的网站前端页面估计也有很多人都不知道或者不清楚吧。网站建设公司青锋建站在这里跟大家分享一下网站前端页面加载过程，帮助大家更好的了解网站建设及开发。
网站前端页面整体过程
1.解析HTML，构建DOM树（这里遇到外链，此时会发起请求）
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则，生成render树
4.布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5.绘制render树（paint），绘制页面像素信息
6.浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上。这一点在网站开发中十分重要。
网站前端DOM对象生成与渲染
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渲染到屏幕的实际像素。
以上就是青锋建站的网站开发工程师为大家带来的关于浏览器渲染的相关介绍，希望大家能够喜欢，如果大家对这些内容还有想要了解的可以给青锋建站的工程师留言。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/page_load.html
