前端必读：浏览器工作原理

2024-05-16 03:02:22

图1：浏览器主要组件

一．渲染主流程（The main flow）

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

　　Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

1.解析与DOM树构建

　　DOM（DOM是文档对象模型的缩写）和标签基本是一一对应的关系，例如，如下的标签：

<html>
<body>
<p>
Hello DOM
</p>
<div><img src=”example.png” /></div>
</body>
</html>

　　将会被转换为下面的DOM树：

2.渲染树构建（Render tree）

暂时没有看懂

3.布局

当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow。

4.绘制

绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上

转载于:https://www.cnblogs.com/laislabonita/p/8709757.html

前端必读：浏览器工作原理相关推荐

javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核
javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...
《深入理解Android》一2.1　浏览器工作原理概述
本节书摘来自华章出版社<深入理解Android>一书中的第2章,第2.1节,作者孟德国王耀龙周金利黎欢,更多章节内容可以访问云栖社区"华章计算机"公众号查看 2. ...
＜＜浏览器工作原理与实践＞＞读书笔记
1. 进程和线程的区别概念: 进程:操作系统进行资源分配和调度的基本单位:程序的运行实例:(在我们启动一个程序的时候,操作系统会为该程序创建一块内存空间,用来存放代码,运行数据,和执行任务的主线程, ...
浏览器工作原理探究详解
浏览器工作原理探究标签: 浏览器工作原理 / web性能优化引言最近对web的性能优化比较感兴趣,而前端代码主要在浏览器工作的.如果对浏览器的工作原理了解清楚,可以为web性能优化提供方向以及理 ...
浏览器工作原理：从 URL 输入到页面展现到底发生了什么？
转载自简书:https://www.jianshu.com/p/d616d887953a,仅做记录分享,侵删对浏览器原理有过了解的一定不会陌生这篇神文<How Browsers Work> ...
了解浏览器工作原理-初步
作者:zccst 同样,先感谢同事们的技术分享,使我开始关注浏览器工作原理.(其实很早就想关注,但由于各种各样的原因一直拖延着) 先留一个链接,慢慢攒着浏览器的工作原理:新式网络浏览器幕后揭秘(转) ...
【技术干货】浏览器工作原理和常见WEB攻击（下）
本文作者:上海驻云开发总监陈昂上篇给大家带来的是关于浏览器基本工作原理的总结和介绍,这篇文章重点给大家说明有哪些常见WEB攻击. 常见WEB攻击互联网是个面向全世界的开放平台,越是开放的东西漏洞 ...
浏览器工作原理与实践学习笔记
浏览器工作原理与实践参考来源: 极客时间-李兵专栏李兵简介: 08年,在 Chromium 和 IE 发布了一款双核浏览器:太阳花,国内第一款双核浏览器 ,支持chrome并兼容IE,日活达到了2 ...
现代浏览器工作原理（一）
现代浏览器工作原理(一) http://chuquan.me/2018/01/21/browser-architecture-overview/ 转载于:https://www.cnblogs.com ...
《浏览器工作原理与实践》学习笔记
浏览器原理前言本文是学习李兵老师的<浏览器工作原理与实践>过程中记录笔记,详细链接见文末进程vs线程进程:一个应用程序的运行实例就是一个进程,详细来说就是:启动一个应用程序的时候, ...

最新文章

热门文章