不只是前端,后端、产品和测试也需要了解的浏览器知识(一)

目录标题

  • 一、我们为什么要了解浏览器?
    • 1. 对于前端开发者
    • 2. 对于后端开发者
  • 二、浏览器发展概述
    • 1. 宏观发展
    • 2. 微观发展
  • 三、浏览器核心部件
    • 1. 浏览器界面介绍
    • 2. 目前浏览器的使用的渲染引擎和解释器总结
    • 3. 浏览器的解释器
  • 四、各家浏览器目前的市场占比
  • 五、整体总结一下

一、我们为什么要了解浏览器?

1. 对于前端开发者

1)浏览器是用户体验的第一线。我们需要了解浏览器的工作原理,才能有效地设计和实现用户界面,确保良好的用户体验。

2)好的产品需要考虑浏览器兼容性。我们需要了解这些差异,以确保网站或应用在不同的浏览器中都能正常工作,因为不同的浏览器对CSS、JavaScript等的支持程度和实现细节可能有所不同。

3)追求良好的性能需要我们了解浏览器的渲染机制、JavaScript引擎的工作原理,因为他们直接影响到页面的加载速度和运行效率。

4)对用户信息的安全性的考虑需要我们关注浏览器。我们需要了解浏览器的安全特性,如同源策略、内容安全策略等,才能更好地保护用户数据不受XSS、CSRF等攻击。

5)研发过程中需要使用调试工具,浏览器提供的开发者工具,可以帮助我们调试代码、分析性能、检查网络请求等。

2. 对于后端开发者

1)在进行接口设计时,后端开发者需要设计API供前端调用,了解浏览器的工作原理有助于设计更高效、更安全的接口。

2)在前后端分离的架构中,后端提供的是服务端API,前端通过浏览器调用这些API。后端开发者需要了解浏览器的HTTP请求方式、跨域问题等,以确保API的正确实现和调用。

3)在性能监控过程中,后端开发者可能需要关注由于前端代码不优化导致的服务器负载问题,如过多的HTTP请求、大量的数据传输等,这需要一定的浏览器知识来共同解决问题。

4)对于追求全栈开发能力的后端开发者,了解浏览器相关知识是必不可少的,这有助于后端更好地理解整个系统的工作流程,提高跨领域的协作能力。

二、浏览器发展概述

1. 宏观发展

在这里插入图片描述

1)浏览器降生

1990 年,英国计算机工程师蒂姆·伯纳斯·李(Tim Berners-Lee)在瑞士的欧洲核子研究组织(CERN)工作时,开发出首个 Web 服务器与图形化 Web 浏览器。他将这个进入互联网世界的新窗口,称为“WorldWideWeb”(即“万维网”)。

一年后,伯纳斯·李(Berners-Lee)委托 CERN 的数学系学生尼古拉·佩洛(Nicola Pellow)编写了“命令行模式浏览器”,这是一款可在简易计算机终端中使用的浏览器。

2)浏览器涿鹿中原

1.1993年Mosaic浏览器的发布标志着图形界面Web浏览器的诞生。它是由伊利诺伊大学厄巴纳-香槟分校的国家超级计算应用中心(NCSA)开发的。

2.1994年Mosaic的一些原开发者创立了Netscape公司,并推出了Netscape Navigator,它迅速成为最受欢迎的浏览器。

3.1995年微软推出了Internet Explorer(IE),并将其与Windows操作系统捆绑销售,这一策略极大地推动了IE的市场份额。

4.1995-2001年这段时间,Netscape Navigator和Internet Explorer之间的竞争非常激烈。最终,IE凭借与Windows的捆绑优势赢得了这场战争。

5.2003年苹果公司推出了自家的浏览器Safari。

6.2004年Mozilla Foundation发布了Firefox浏览器。它是从Netscape的源代码发展而来的,因其开源性质、安全性和扩展性受到用户喜爱。

7.2008年谷歌发布了Chrome浏览器,以其速度、简洁和创新的多进程架构迅速获得了市场份额。

8.2004-2010年随着Firefox和Chrome的崛起,浏览器市场再次进入竞争激烈的阶段。IE的市场份额开始下滑,Chrome和Firefox成为主要的竞争对手。

9.2014年HTML5标准最终确定,推动了Web技术的进一步发展,各大浏览器厂商都开始支持这一标准。

10.2015年微软发布了新的浏览器Edge,以取代老旧的IE浏览器。Edge最初使用了自家的EdgeHTML渲染引擎,后来转而使用Chromium的Blink引擎。

3)小结一下

浏览器的发展是一个持续的过程,厂商之间的竞争也在推动着技术的进步。随着互联网技术的不断演进,我们可以预期浏览器将继续在速度、安全性、用户体验和功能性上进行创新;随着智能手机和平板电脑的普及,移动浏览器的重要性日益增加,Safari在iOS设备上占据主导地位,而Chrome在Android设备上成为主流。

2. 微观发展

1)单进程架构

顾名思义,单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里,这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。其实早在 2007 年之前,市面上浏览器都是单进程的。单进程浏览器的架构如下图所示:

在这里插入图片描述

如此多的功能模块运行在一个进程里,是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。原因如下:

(1)不稳定
早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能,但是插件是最容易出问题的模块,并且还运行在浏览器进程之中,所以一个插件的意外崩溃会引起整个浏览器的崩溃。除了插件之外,渲染引擎模块也是不稳定的,通常一些复杂的 JavaScript 代码就有可能引起渲染引擎模块的崩溃。和插件一样,渲染引擎的崩溃也会导致整个浏览器的崩溃。
(2)不流畅
从上面的“单进程浏览器架构示意图”可以看出,所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的,这就意味着同一时刻只能有一个模块可以执行。

function test() {while(true) {console.log('test')}
}

如果让这个脚本运行在一个单进程浏览器的页面里,它会独占整个线程,导致其他运行在该线程中的模块就没有机会被执行。因为浏览器中所有的页面都运行在该线程中,所以这些页面都没有机会去执行任务,这样就会导致整个浏览器失去响应,变卡顿。

(3)不安全
插件可以使用 C/C++ 等代码编写,通过插件可以获取到操作系统的任意资源,当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑。如果是个恶意插件,那么它就可以释放病毒、窃取你的账号密码,引发安全性问题。

页面脚本,它可以通过浏览器的漏洞来获取系统权限,这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情,同样也会引发安全问题。

2)多进程架构

(1)2008 年 Chrome 发布时的进程架构
在这里插入图片描述
(2)现在的多进程架构

在这里插入图片描述

  1. 浏览器进程。主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。
  2. 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中,默认情况下,Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑,渲染进程都是运行在沙箱模式下。
  3. GPU 进程。其实,Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。
  4. 网络进程。主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,直至最近才独立出来,成为一个单独的进程。
  5. 插件进程。主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

三、浏览器核心部件

1. 浏览器界面介绍

在这里插入图片描述

1)用户界面主要是浏览器除了网页显示范围以外的部分,包括地址栏、书签、前进、后退按钮、历史记录等用户可操作的部分

2)浏览器引擎是用于在用户界面和渲染引擎之间传送指令或者在客户端本地缓存中读写数据,它是各个部分之间相互通信的核心

3)渲染引擎主要是负责解析DOM和CSS规则,浏览器内核主要指的就是渲染引擎和JavaScript引擎

4)网络模块是负责发送网络请求和下载网络资源

5)JavaScript引擎用于解释和执行JavaScript代码,如V8

6)UI后端用于绘制基本的浏览器控件

7)数据持久化存储是通过浏览器引擎提供的API进行调用

2. 目前浏览器的使用的渲染引擎和解释器总结

浏览器内核代表浏览器
TridentIE
WebkitSafari、Edge (早期版本)
BlinkChrome
GeckoFirefox
Presto欧朋
双核360浏览器、猎豹浏览器、搜狗浏览器、遨游浏览器、QQ浏览器、百度浏览器、2345浏览器

说明

  • Trident: 主要用于Internet Explorer(IE)。
  • Webkit: 最初由苹果公司开发,主要用于Safari。微软Edge在早期版本也使用了Webkit内核。
  • Blink: 基于Webkit的一个分支,由Google开发,主要用于Chrome。
  • Gecko: 由Mozilla基金会开发,主要用于Firefox。
  • Presto: 由Opera Software开发,主要用于欧朋浏览器。
  • 双核: 一些国内浏览器采用双核模式,通常包含一个高速内核(如Blink)和一个兼容内核(如Trident),以确保更好的网页兼容性和性能。

3. 浏览器的解释器

1)Rhino,由Mozilla基金会管理,开放源代码,完全以Java编写。

2)SpiderMonkey,第一款JavaScript引擎,早期用于Netscape Navigator,现时用于Mozilla Firefox。

3)JavaSV8,开放源代码,由Google丹麦开发,是Google Chrome的一部分。

4)criptCore,开放源代码,用于Safari。

5)Chakra (JScript引擎),用于Internet Explorer11。

6)Chakra (JavaScript引擎),用于Microsoft Edge。

7)KJS,KDE的ECMAScript/JavaScript引擎,最初由哈里·波顿开发,用于KDE项目的Konqueror网页浏览器中。

四、各家浏览器目前的市场占比

1.全球市场占有率
在这里插入图片描述

2.中国市场占有率排名

在这里插入图片描述

五、整体总结一下

本篇文章主要介绍一下作为研发了解浏览器的必要性, 以及浏览器的基本情况和整体的发展。在考虑产品定位时(开发出一款什么样的目标产品),我们需要对浏览器有一定的了解,整篇文章对研发和产品皆有一定的参考意义。

本文主要参考《浏览器工作原理与实践》 如果各位看官喜欢,留下你的的评论,留下你的赞👍🏻后续可以对浏览器深入分享
最后欢迎大家交流学习,共同成长


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们处理,核实后本网站将在24小时内删除侵权内容。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/55307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

索尼MDR-M1:超宽频的音频盛宴,打造沉浸式音乐体验

在音乐的世界里,每一次技术的突破都意味着全新的听觉体验。 索尼,作为音频技术的先锋,再次以其最新力作——MDR-M1封闭式监听耳机,引领了音乐界的新潮流。 这款耳机以其超宽频播放和卓越的隔音性能,为音乐爱好者和专…

tornado

Tornado通过使用非阻塞网络I/O,可以扩展到数以万计的开放链接,非常适合 长时间轮询,WebSockets和其他需要与每个用户建立长期连接的应用程序。 特点 注重性能优越,速度快解决高并发异步非阻塞websockets 长连接内嵌了HTTP服务器…

04 B-树

目录 常见的搜索结构B-树概念B-树的插入分析B-树的插入实现B树和B*树B-树的应用 1. 常见的搜索结构 种类数据格式时间复杂度顺序查找无要求O(N)二分查找有序O( l o g 2 N log_2N log2​N)二分搜索树无要求O(N)二叉平衡树无要求O( l o g 2 N log_2N log2​N)哈希无要求O(1) 以…

IO模型介绍

一、理解IO 网络通信的本质就是进程间通信,进程间通信本质就是IO TCP中的IO接口:read / write / send / recv,本质都是:等 拷贝 所以IO的本质就是:等 拷贝 那么如何高效的IO? 减少“等”在单位时间的…

CORDIC算法笔记整理

CORDIC算法有两种模式,分别为旋转模式和向量模式。而在数字硬件实现混频处理时,CORDIC算法是比较好的方法,使用的是CORDIC的旋转模式,只需通过移位操作和加法就可以实现频谱搬移的乘法操作。 1 CORDIC算法理解 1.1 单次旋转 对…

SpringCloud学习记录|day1

学习材料 2024最新SpringCloud微服务开发与实战,java黑马商城项目微服务实战开发(涵盖MybatisPlus、Docker、MQ、ES、Redis高级等) 学redis讲到微服务就停了,nginx也是。 所以嘛,我终于来到微服务了。 复习MyBatisP…

CMU 10423 Generative AI:lec14(Vision Language Model:CLIP、VQ-VAE)

文章目录 1 概述2 CLIP (Used in GPT-V)3 VQ-VAE (Used in Gemini)**VQ-VAE 详细笔记****VQ-VAE 的模块组成与数据流** **1. 输入数据****2. 编码器(Encoder)****2.1 编码器的作用****2.2 数据流与维度变化****2.3 编码器输出** **3. 量化器(…

IP 数据包分包组包

为什么要分包 由于数据链路层MTU的限制,对于较⼤的IP数据包要进⾏分包. 什么是MTU MTU相当于发快递时对包裹尺⼨的限制.这个限制是不同的数据链路对应的物理层,产⽣的限制. • 以太⽹帧中的数据⻓度规定最⼩46字节,最⼤1500字节,ARP数据包的⻓度不够46字节,要在后⾯补填 充…

云栖实录 | 开源大数据全面升级:Native 核心引擎、Serverless 化、湖仓架构引领云上大数据发展

本文根据2024云栖大会实录整理而成,演讲信息如下: 演讲人: 王 峰 | 阿里云智能集团研究员、开源大数据平台负责人 李 钰|阿里云智能集团资深技术专家 范 振|阿里云智能集团高级技术专家 李劲松|阿里云…

MongoDB聚合操作及索引底层原理

目录 链接:https://note.youdao.com/ynoteshare/index.html?id=50fdb657a9b06950fa255a82555b44a6&type=note&_time=1727951783296 本节课的内容: 聚合操作: 聚合管道操作: ​编辑 $match 进行文档筛选 ​编辑 将筛选和投影结合使用: ​编辑 多条件匹配: …

【AI】AIOT简介

随着技术的快速发展,人工智能AI和物联网IoT已经成为当今最热门的技术领域。AIOT是人工智能和物联网的结合,使物联网设备更加智能化,能够进行自主决策和学习的技术。 通过物联网产生、收集来自不同维度的、海量的数据存储于云端、边缘端&#…

数据治理006-数据标准的管理

元数据的分类和标准有哪些? 一、元数据的分类 元数据可以根据其描述的对象和属性不同,被分为不同的类型。以下是几种常见的元数据分类方法: 基于数据的类型:根据数据的类型,元数据可以被分为结构化元数据、非结构化元…

SQL连接Python

对于运营部门的Yoyo来说,她想要知道夜曲优选的订单都来自哪些省份,每个省份的总订单数以及总订单金额分别是多少。 这时小鹿就会通过SQL对连接的数据库进行查询,再将结果传递给Python处理,并帮助Yoyo生成可视化图表。 我们先来快…

拆解维修飞科剃须刀

原因 用了好几年的剃须刀,经过一次更换电池。后来上面的盖帽松动,无法合盖,经过把弹片矫正后修复。最近一次”大力出奇迹“的操作直接断送了这个老伤员最后的可能性。最终只能花了将近十块大洋买了一套盖着和中间座。简单更换了一下。 记录…

目前最好用的爬虫软件是那个?

作为一名数据工程师,三天两头要采集数据,用过十几种爬虫软件,也用过Python爬虫库,还是建议新手使用现成的软件比较方便。 这里推荐3款不错的自动化爬虫工具,八爪鱼、亮数据、Web Scraper 1. 八爪鱼爬虫 八爪鱼爬虫是一…

Linux:深入理解冯诺依曼结构与操作系统

目录 1. 冯诺依曼体系结构 1.1 结构分析 1.2 存储结构分布图 2. 操作系统 2.1 概念 2.2 如何管理 2.3 什么是系统调用和库函数 1. 冯诺依曼体系结构 1.1 结构分析 不管是何种计算机,如个人笔记本电脑,服务器,都是遵循冯诺依曼结构。…

可视化图表与源代码显示配置项及页面的动态调整功能分析

可视化图表与源代码显示配置项及页面的动态调整功能分析 文章目录 可视化图表与源代码显示配置项及页面的动态调整功能分析1.分析图表源代码2.分析源代码显示功能**完整代码参考:** 3.分析源代码显示及动态调整**完整代码参考:** 4.分析代码编辑器及运行…

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务(Log Tank Service,简称 LTS),用于收集来自主机和云服务的日志数据,通过海量日志数据的分析与处理,可以将云服务和应用程序的可用性和性能最大化,为您提供实时、…

基于SSM的爱心慈善公益网站的设计与实现

文未可获取一份本项目的java源码和数据库参考。 选题意义 随着经济的不断进步,发展各种进行公益事业的渠道不断的出现,作为一个礼仪之邦,中华民族一直秉承先人的团结与友善精神,对社会和他人给予帮助关怀。但中国的公益事业相对…

【AIGC】2022-CVPR-利用潜在扩散模型进行高分辨率图像合成

2022-CVPR-High-Resolution Image Synthesis with Latent Diffusion Models 利用潜在扩散模型进行高分辨率图像合成摘要1. 引言2. 相关工作3. 方法3.1. 感知图像压缩3.2. 潜在扩散模型3.3. 调节机制 4. 实验4.1. 关于感知压缩权衡4.2. 利用潜在扩散生成图像4.3. 条件潜在扩散4.…