前端基础知识——浏览器篇(一)

47 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第14天,点击查看活动详情

前言

之前因为参加码上掘金编程活动,得到了掘金月度会员和借阅卡,因此可以白嫖一门课程(ps: 感谢掘金平台)。看到上面的课程感觉都不是太容易学习的样子,担心一个月学不完,所以找了一个相对容易的CSS课程学习,学习该课程首先需要学习浏览器的知识,感觉自己以前都没怎么好好学习过相关知识,今天来好好学习总结下。

基本介绍

浏览器是用来检索、展示以及传递Web信息资源(网页、图片、视频或者任何在Web上所呈现的内容),处理用户交互操作的应用程序。

浏览器的主要功能是展示用户选择的web资源,通过向服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括其他格式(PDF、image、video等)。

现在的浏览器主要有:ChromeSafariFirefoxEdge等,下图是StatCounter网站统计的浏览器全球市场份额柱形图 image.png

主要模块

浏览器一般由以下七个部分组成:

  • 用户界面(User Interface): 包括地址栏、菜单栏、标签栏、状态栏等(除了页面窗口【显示当前访问的网页内容】的浏览器窗口各部分)。

    名称说明
    地址栏输入网页地址,浏览器通过识别地址信息,正确连接用户要访问的内容
    菜单栏浏览器的所有操作与设置功能的选项,如“文件” “编辑” “查看” “收藏夹”等
    标签栏一个或多个窗口(标签页),窗口内容互不干扰,独立运行
    状态栏显示当前操作与网页下载的进度情况
  • 浏览器引擎(Browser engine): 用来查询及操作渲染引擎的接口,在用户界面和页面窗口呈现渲染之间传送指令。

  • 渲染引擎(Rendering engine): 俗称浏览器内核,用来解析网页语法(HTML与CSS),并渲染成可视化的页面。

    不同的浏览器使用的内核不一样,不同内核对网页语法的解析也有不同

    浏览器渲染引擎(内核)
    ChromeBlink
    SafariWebkit
    FirefoxGecko
    EdgeBlink
  • 网络(Networking): 用来完成网络调用、资源下载,如http请求

  • UI后端(UI Backend ): 用来绘制基本的浏览器窗口内控件,如输入框、按钮等。浏览器不同,绘制的视觉效果也不同,但功能都是一样的

  • JS解释器(JavaScript Interpreter): 用来读取网页中的 JavaScript代码,对其处理后运行

    浏览器本身并不会执行JS代码,而是通过内置JS引擎(解释器) 来执行JS 代码。JS引擎执行代码时逐行解释每一句源码( 转换为机器语言 ),然后由计算机去执行

  • 数据存储(Date Persistence ): 浏览器保存类似cookie、安全证书、localStorage等各种数据在硬盘中,相当于浏览器内数据库

image.png