非零基础自学前端最后一遍零 Introduction 2 邂逅Web开发 2.4 浏览器和浏览器内核

客官°小女子只卖身不卖艺 2024-03-26 18:27 36阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  零 Introduction
         *  2 邂逅Web开发
         *   *  2.4 浏览器和浏览器内核
             *   *  2.4.1 浏览器的作用
                 *  2.4.2 浏览器的渲染引擎
                 *  2.4.3 不同浏览器的内核

![在这里插入图片描述][dae289c4efff4ec1bdc2885018a96753.png_pic_center]

#### 零 Introduction ####

#### 2 邂逅Web开发 ####

##### 2.4 浏览器和浏览器内核 #####

###### 2.4.1 浏览器的作用 ######

*  我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript。
 *  那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？
    
     *  我们知道是通过浏览器来完成；

![在这里插入图片描述][c886c4d408144281b2fd65f2f7fab984.png_pic_center]

浏览器最核心的部分其实是 “浏览器内核”；

###### 2.4.2 浏览器的渲染引擎 ######

*  浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为“浏览器内核”
    
     *  负责解析网页语法，并渲染（显示）网页
 *  常见的浏览器有很多：

![在这里插入图片描述][89774b6852414ea38ed54fe937a22c07.png_pic_center]

###### 2.4.3 不同浏览器的内核 ######

*  常见的浏览器内核有
    
     *  Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
     *  Gecko（ 壁虎） ：Mozilla Firefox；
     *  Presto（急板乐曲）-> Blink （眨眼）：Opera
     *  Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
     *  Webkit -> Blink ：Google Chrome
    
    ![在这里插入图片描述][1810c5badcee4c0aa9c016cda99449b6.png_pic_center]
 *  不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同。

[dae289c4efff4ec1bdc2885018a96753.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de28932986f446a0a2908023f6cba750.png
[c886c4d408144281b2fd65f2f7fab984.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1ab77bbef994ac7b8e8c1a2ea38593f.png
[89774b6852414ea38ed54fe937a22c07.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0c8a4f10c669461d98010ce9451bcec2.png
[1810c5badcee4c0aa9c016cda99449b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6b0d6bc8b56441dfaf6e5239fb04af68.png