您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

浏览器原理(组成、引擎、渲染机制)

文章目录

  • 一、PC端常用浏览器/概念
    • 1.2软件项目开发二个不同体系
  • 二、浏览器
    • 2.1 内核和js引擎
    • 2.2 浏览器的组成部分
    • 2.3 浏览器如何渲染UI?
    • 2.4 浏览器如何解析CSS选择器?
    • 2.5 DOM树如何创建?

一、PC端常用浏览器/概念

PC端浏览器 :谷歌chrome;IE;火狐;Safari
移动端浏览器:Safari[苹果];chrome[安卓]

1.2软件项目开发二个不同体系

  • B/S brows server [浏览器/服务器] :网站;
  • C/S client server[客户机/服务器] :QQ;大型网络游戏

服务器
1. 存储数据: #mysql oracle sql server mongodb
2. 完成复杂功能: #nodejs php java c#

二、浏览器

2.1 内核和js引擎

浏览器内核[内核在浏览器内部用于渲染和解析html;css模块]
Js引擎:执行网页中的JavaScript程序

浏览器内核(渲染引擎)js引擎
IE(微软旧版)TridentChakra(for JScript)
Edge(微软新版)EdgeHTMLChakra(for JavaScript)
ChromeWebKit (Chrome 27),Blink: WebKit升级(28~)V8
SafariWebKitJavaScriptCore
FirefoxGeckoSpiderMonkey
Node jsV8

2.2 浏览器的组成部分

  1. 用户界面:包括地址栏、前进/后退按钮、书签菜单等。
    除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面

  2. 浏览器引擎:在用户界面和呈现引擎之间传送指令。

  3. 呈现引擎(渲染引擎):负责显示请求的内容。
    如果请求的内容是HTML,它就负责解析HTML和CSS内容,并将解析后的内容显示在屏幕上。

  4. 网络:用于网络调用,比如HTTP请求。
    其接口与平台无关,并为所有平台提供底层实现。

  5. 用户界面后端:用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。

  6. JavaScript解释器。用于解析和执行JavaScript 代码。

  7. 数据存储:持久层,浏览需要在硬盘上保存各种数据,例如 Cookie。
    新的HTML规范(HTMLE5)定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库.

在这里插入图片描述

2.3 浏览器如何渲染UI?

  1. 浏览器获取HTML文件, 解析并生成DOM树
    根据HTML文件中的每个标签生成DOM树内存中对象
    在这里插入图片描述
  2. 解析CSS文件,生成Style Rules树
  3. 合并DOM树和Style Rules树,生成Render(渲染)树
  4. 布局(Layer)阶段,为Render树的每一个节点分配一个应出现的确切坐标
  5. 调用GPU绘制(painter),遍历Render树节点,将元素呈现

在这里插入图片描述

2.4 浏览器如何解析CSS选择器?

浏览器从右往左解析CSS选择器。

DOM树与Style Rules合并成为Render树,实际上要将Style Rules附着到DOM 树上,因此要根据选择器提供的信息对DOM树进行遍历,才能将样式附着到对应的DOM元素上。

示例:

.song_list li span {
  width: 23px;
  height: 17px;
  margin-right: 50px;
}

从右至左匹配:

  1. 先找到所有的最右节点span,对于每一个span,向上寻找节点li
  2. li再向上寻找class = song_list的节点
  3. 最后找到根元素html则结束这个分支的遍历。

从右向左的匹配在第一步就筛选掉了大显的不符合条件的最右节点(叶子节点),故效率更高。

2.5 DOM树如何创建?

1.转码:浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
2.生成Tokens:之后开始parser,浏览器会将HTML字符串解析成Tokens(检查开始结束标签等错误)

3.构建Nodes:Nodes为对象,对Node添加特定的属性,通过指针确定Node的父、子、兄弟关系和所属treeScope
4.生成DOM Tree: 通过node包含的指针确定的关系构建出DOM Tree
在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进