浏览器将html代码渲染成页面流程简单介绍

简介:

无论网站是动态的,还是静态,最终返回客户端的都是HTML代码。

这些HTML代码会经过浏览器的处理,最终将各种各样的页面展现在用户面前。

下面介绍一下浏览器对HTML代码的渲染流程。

一.浏览器解析:

(1).DOM:

DOM对象是浏览器解析HTML脚本生成的,最终输出一个树状结构的对象。

(2).CSSOM:

CSSOM对象是浏览器解析CSS脚本生成的,最终也是输出类似DOM的树状结构。

(3).RenderTree:

DOM与CSSOM 融合成一棵RenderTree(渲染树),随后计算每个可见元素的布局,并输出给绘制过程,在屏幕上渲染像素。优化这里的每一步对实现最佳渲染性能至关重要。

构建的过程如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/212713gbc691v901ri309r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


二.布局:

有了渲染树,就进入布局阶段。根据渲染树种确定的每个DOM元素的样式规则,浏览器就能具体计算每个DOM元素最终在屏幕上显示的大小位置,宽高等等几何属性。由于文档流中的布局是相对的,因此每个元素的布局发生变化,会联动引发其他元素的布局变化。

三.绘制:

绘制就是在已确定了几何属性的元素上填充像素,比如绘制文字,颜色,图像,边框,阴影等等可视元素。

这期间会产生多个图层。

合并渲染层:

到这里,浏览器的渲染过程就接近尾声。每个图层绘制完,浏览器会将其按照合理的顺序合并到同一图层,并显示在浏览器上。

四.工具:

借助ChromeDevTools等工具,我们能深入了解浏览器处理的整个过程。

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/212814mazwb5kv9wv7en4f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}




原文发布时间为:2017-4-9

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:浏览器将html代码渲染成页面流程简单介绍

相关文章
|
16天前
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
13天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
25 0
|
2天前
网站维护更新简易单页404页html代码
一个简约风格的单页html页面,可用于网站维护中或更新网站时挂个首页使用,如果不喜欢现在的颜色请F12修改设置既可。
6 1
网站维护更新简易单页404页html代码
|
9天前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
25 0
自定义密码访问跳转页面HTML源码
|
16天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
30 4
|
16天前
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
|
16天前
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
|
16天前
HTML+CSS 登录页面(记得收藏)
HTML+CSS 登录页面(记得收藏)
|
16天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
33 1
|
16天前
|
移动开发 前端开发 JavaScript
大气实用的HTML5/CSS3个人中心页面(含源码)
大气实用的HTML5/CSS3个人中心页面(含源码)

热门文章

最新文章

下一篇
DDNS