交互原理:HTML是部署在服务器上的文本文件,浏览器向服务器发送请求,服务器 作出响应给浏览器返回一个HTML,浏览器执行HTML,从而显示内容。
了解 HTML 和 CSS 的渲染原理从以下几方面入手:
html各种渲染都是从浏览器开始的,分为浏览器解析和浏览器渲染两大步骤
一、浏览器解析
1、浏览器通过请求的 URL 进行域名解析,向服务器发起请求,接收文件(HTML、CSS、JS、Images等等)。
2、HTML 文件加载后,开始构建 DOM Tree
3、CSS 样式文件加载后,开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来 *** 作 DOM Tree 和 CSS Rule Tree
二、浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并不与 DOM Tree 对应,比如像 <head>标签内容或带有 display: none的元素节点并不包括在 Rendering Tree 中 。
3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小,是否换行,以及 position、overflow、z-index 等等属性,这个过程称为 Flow 或 Layout 。
4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。
渲染原理示意图:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)