浏览器内核(渲染引擎)介绍|学习笔记

简介: 快速学习浏览器内核(渲染引擎)介绍

开发者学堂课程【Node.js 入门与实战浏览器内核(渲染引擎)介绍】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/588/detail/8250


浏览器内核(渲染引擎)介绍

 

一、浏览器的组成

l 人机交互部分(UI)

l 网络请求部分(Socket)

l JavaScript 引擎部分(解析执行 JavaScript)

l 渲染引擎部分(渲染 HTML、CSS 等).

l 数据存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

第一部分是人机交互部分,就是比如浏览器的刷新、前进、后退、收藏夹,还有一些各种各样的地址、回车等等,这些是可以看到的浏览器界面,这就是人机交互部分无论是什么浏览器都有这个功能,比如火狐、Google、IE等。

第二部分是网络请求部分,思考一下浏览器是不是需要能联网,能上网当打开一个网址的时候浏览器需要向服务器发起一个请求,然后把服务器响应的数据展示出来。所以浏览器一定具有发起网络请求的功能,同时也具有一个接收服务器返回数据的功能。一定具有这两个功能,这个就是网络请求部分——Socket。这个 Socket无论是编程语言在深入学习的时候都会有这个网络功能,那么浏览器也具备这个功能。

JavaScript 引擎部分,浏览器是可以执行一些 js 代码的,是因为浏览器里面有JavaScript 引擎,有一个著名的js引擎:Mozilla

浏览器还有另外一个功能就是渲染网页,浏览器渲染 html、css。并且所写的html、css 是由浏览器渲染引擎来执行的。渲染引擎就是来渲染html和css其实就是解释执行 css和 HTML,这个就是浏览器的渲染引擎。

数据存储部分:比如浏览器可以存储一些 cookie,或者 HTML5里的 LocalStorage、SessionStorage 这些,浏览器具有数据存储能力。

所以一般情况下浏览器大概分为这样五部分:第一人机交互部分;第二网络请求部分;第三执行JavaScript代码的能力,就是js引擎;第四渲染引擎解释执行HTML、CSS;第五就是数据存储部分

 

二、主流渲染引擎

介绍:

1. 渲染引擎又叫排版引擎或浏览器内核

2. 主流的渲染引擎有

l Chrome 浏览器Blink 引擎(WebKit的一个分支)。

l Safari 浏览器MebKit 引擎,windows 版本2008年3

月18日推出正式版,但苹果已于2012年7月25日停止开发windows版的Safani。

l FireFox 浏览器Gecko 引擎。

l Opera 浏览器Blink 引擎(早期版使用Presto引擎)。

l Internet Explorer 浏览器Trident 引擎。

l Microsoft Edge 浏览器EdgeHTML 引擎(Trident的一个分支)。

接下来重点介绍一下主流渲染引擎,也就是上面的第四部分。

渲染引擎又叫排版引擎或浏览器内核 。比如说360双核浏览器双核浏览器就意味着有两个不同的渲染引擎内核,为什么要有两个不同的渲染引擎内核呢?

举个例子:它有一个IE的内核,有一个 Chrome 的内核,就是谷歌的浏览器内核,为什么有两种不同的内核呢?

这个和计算机的双核CPU不一样,计算的双核CPUCPU越多,性能越好。但是浏览器是内核越多,性能越好吗?

浏览器并不是这样的。浏览器提示只需要一个内核就可以了,为什么还要有两个?

原因就是:不知道是否曾用过一些企业内部的一个系统,或企业内部的oa系统,或者说很早以前的网银系统等等,那些系统有时候只能在IE浏览器下使用,在别的浏览器是不能用的

所以如果360浏览器假如有两个内核,一个是IE内核,另一个是别的内核比如火狐内核、Chrome 内核,当你要登录一些企业内,必须要使用IE的时候,就把这个360浏览器切换成IE的内核,这个时候就可以使用一些企业的内网系统。

如果要访问外网,比如访问淘宝、百度等这些的时候,再把它切换成 Chrome 的内核,相对来说浏览器速度会快一些,这就是所谓的双核浏览器双核浏览器内核指的就是浏览器的渲染引擎或者排版引擎,就是浏览器执行 HTML、CSS。这是关于内核的介绍

浏览器的渲染引擎只需要了解一下就可以了

首先最常用的 Chrome 浏览器,它所使用的内核是 Blink 引擎Blink 引擎是一WebKit 的引擎分支,这个 Webkit 是一个开源的引擎内核,所以 Blink 就是Webkit 的这么一个引擎分支,分支出一个Blink,也就是基于它又开发了、又扩展或者增删了一些功能,叫做 Blink 引擎,这是谷歌浏览器的主要引擎。

对于 Safari,这是苹果的浏览器名称。它内部使用的就是Webkit引擎,在 Windows版上是不可以安装苹果浏览器的。在2008年3月18的时候,苹果推出了Windows 版的 Safari 浏览器,但是在2012年的时候,停止了Windows版的开发,所以说最新版的苹果 Safari 浏览器是没有Windows版的,Windows版是不能使用的。

然后就是 FireFox 这个 Gecko(壁虎)引擎,这个是我们FireFox内部的使用这么一个浏览器引擎内核,还有大家所熟知的Opera,Opera浏览器用的内核也是和Chrome是一样的,也是Blink引擎,但是在最早的时候它使用的是Presto引擎,后来也改成Blink引擎了。

后就是所熟知的 IE,IE所使用的是 Trident 引擎,最后一个IE版本是IE11这个版本。最新的微软浏览器不叫 IE,是叫 Microsoft Edge,这个浏览器使用的是EdgeHTML 引擎,这个引擎的内核也是 Trident 这个内核的一个分支,所以造成主流的这些浏览器,以及每一个浏览器所使用的内核,这个作为一个了解就可以了。

相关文章
|
2月前
|
存储 前端开发 开发者
|
27天前
|
前端开发 JavaScript
宏任务和微任务在浏览器渲染过程中的执行顺序
宏任务和微任务是浏览器事件循环中的两种任务类型。宏任务包括整体代码块、setTimeout等,微任务有Promise.then、MutationObserver等。每个宏任务执行完毕后,会先执行完所有微任务,再进行下一轮渲染或执行下一个宏任务。
|
27天前
|
JavaScript 前端开发 API
浏览器渲染过程中如何处理异步任务
在浏览器渲染过程中,异步任务通过事件循环机制处理。JS执行时,同步任务在主线程上执行,形成一个执行栈。异步任务则被推入任务队列中,待主线程空闲时按顺序调用,确保页面流畅渲染与响应。
|
2月前
|
缓存 自然语言处理 前端开发
浏览器渲染
【10月更文挑战第28天】浏览器渲染涉及将HTML、CSS和JavaScript代码转换为可视网页,主要步骤包括:解析HTML构建DOM树、解析CSS构建CSSOM树、合并DOM与CSSOM生成渲染树、布局确定元素位置和尺寸、绘制元素到屏幕、合成图层形成最终图像。此过程不断优化以提升性能。
|
2月前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
7月前
|
缓存 JavaScript 前端开发
浏览器渲染:理解页面加载的幕后工作
浏览器渲染:理解页面加载的幕后工作
|
5月前
|
Web App开发 前端开发 JavaScript
认识WebKit浏览器引擎
WebKit是一款开源的浏览器引擎,用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎,可以在多种操作系统上运行,如Windows、macOS、Linux等。
67 2
|
6月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
47 0
|
JavaScript 前端开发 容器
从零开始实现一个玩具版浏览器渲染引擎(三)
从零开始实现一个玩具版浏览器渲染引擎(三)
56 0
|
前端开发 JavaScript
从零开始实现一个玩具版浏览器渲染引擎(二)
从零开始实现一个玩具版浏览器渲染引擎(二)
81 0