0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

京东云 来源:jf_75140285 作者:jf_75140285 2024-07-01 18:03 次阅读

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

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. 目前浏览器的使用的渲染引擎和解释器总结

浏览器内核 代表浏览器
Trident IE
Webkit Safari、Edge
Blink Chrome
Gecko Firefox
Presto 欧朋
双核 360浏览器、猎豹浏览器、搜狗、遨游、QQ浏览器、百度浏览器、2345浏览器

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. 中国市场占有率排名









五、整体总结一下

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




本文主要参考《浏览器工作原理与实践》

如果各位看官喜欢,留下你的的评论,留下你的赞

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 测试
    +关注

    关注

    8

    文章

    5294

    浏览量

    126621
  • 前端
    +关注

    关注

    1

    文章

    192

    浏览量

    17750
  • 后端
    +关注

    关注

    0

    文章

    31

    浏览量

    2235
收藏 人收藏

    评论

    相关推荐

    讯飞星火浏览器插件全新升级

    时刻陪伴,星火插件让你的浏览器变成真正的生产力工具。
    的头像 发表于 12-25 09:48 96次阅读

    Chrome浏览器优化Android性能,骁龙8至尊版表现突出

    版Chrome浏览器浏览器基准测试Speedometer 2.1中的得分显著提升,整体性能实现了大幅提升。这一改进使得Android设备在浏览
    的头像 发表于 12-13 14:44 208次阅读

    AWTK 最新动态:支持浏览器控件

    导读AWTK浏览器控件,基于webview项目实现,将浏览器嵌入到AWTK应用程序中,让开发者可以方便的集成在线帮助和调用地图等功能。awtk-widget-web-view是基于webview实现的AWTK浏览器控件,使得AW
    的头像 发表于 11-20 01:05 197次阅读
    AWTK 最新动态:支持<b class='flag-5'>浏览器</b>控件

    写一个Chrome浏览器插件

    一、什么是浏览器插件 浏览器插件是依附于浏览器,用来拓展网页能力的程序。插件具有监听浏览器事件、获取和修改网页元素、拦截网络请求、添加快捷菜单等功能。使用
    的头像 发表于 11-18 17:12 313次阅读
    写一个Chrome<b class='flag-5'>浏览器</b>插件

    跨域问题是由浏览器的同源策略造成的

    浏览器
    jf_62215197
    发布于 :2024年08月27日 07:51:42

    要了解下大模型知识

    工作需要,想要了解一下大模型算力建设知识
    发表于 08-20 15:31

    不只是前端后端产品测试需要了解浏览器知识(二)

    继上篇《 不只是前端后端产品测试需要了解
    的头像 发表于 08-12 14:32 340次阅读
    <b class='flag-5'>不只是</b><b class='flag-5'>前端</b>,<b class='flag-5'>后端</b>、<b class='flag-5'>产品</b>和<b class='flag-5'>测试</b><b class='flag-5'>也</b><b class='flag-5'>需要了解</b>的<b class='flag-5'>浏览器</b><b class='flag-5'>知识</b>(二)

    Opera浏览器引领潮流,全球首接端侧AI大模型

    昆仑万维旗下海外平台Opera宣布,其旗舰浏览器Opera One和游戏浏览器Opera GX将正式接入端侧AI大模型,成为全球首个实现这一突破的主流浏览器
    的头像 发表于 06-03 09:18 736次阅读

    Mozilla启动安卓版火狐Firefox浏览器性能调查程序

    来自用户的反馈显示,安卓版 Firefox 浏览器启用遥感测量后,可能会影响网站加载和浏览器启动速度。以 CNN 网站为例,测试数据表明,启用遥感测量后,CPU 加载页面的时间延长了 16.5 秒。
    的头像 发表于 05-31 10:02 496次阅读

    苹果测试版Safari浏览器改进,包括界面优化、内容拦截和智能功能

    工程师可在最新版 Safari 18 的浏览器地址栏中发现新的页面控制菜单开关,该菜单整合了所有旧版和新版的页面控制工具,并提供快速访问入口,其中包括浏览器的新“智能搜索”功能。
    的头像 发表于 05-27 11:21 454次阅读

    谷歌Chrome浏览器短暂模式测试,用户可点击链接运行

    在Canary频道安卓版Chrome浏览器中,用户可启用“允许CCT嵌入者以短暂模式打开CCT”的实验Flag来体验短暂模式。官方解释称,启用该Flag后,安卓版Chrome浏览器中的应用将能进入短暂模式。
    的头像 发表于 04-24 10:49 604次阅读

    Edge浏览器关闭Microsoft Rewards扩展原因揭晓

    据报道,近期德国等地的Microsoft Edge浏览器用户发现,安装或启动Microsoft Rewards扩展后,会出现“右上角扩展被Edge浏览器禁用以保障您的浏览器安全”的提醒窗口。
    的头像 发表于 04-10 09:55 813次阅读

    Mozilla Firefox浏览器推出Text Fragments功能,提升用户体验

    早在2020年,谷歌即在Chrome浏览器中推出了“Scroll to Text Fragments”功能,而Edge、Opera、Brave、Vivaldi以及苹果Safari等基于Chromium的浏览器已支持这一便捷特性
    的头像 发表于 04-08 10:21 618次阅读

    鸿蒙实战开发:【浏览器制作】

    使用[@ohos.systemparameter]接口和[Web组件]展示了一个浏览器的基本功能,展示网页,根据页面历史栈前进回退等。
    的头像 发表于 03-19 17:47 588次阅读
    鸿蒙实战开发:【<b class='flag-5'>浏览器</b>制作】

    微软推出ONNX Runtime Web,利用WebGPU优化浏览器机器学习性能

    作为微软的 JavaScript 库,ONNX Runtime Web 使得网络开发者能在浏览器环境下部署机器学习模型,并提供多种硬件加速的后端支持。
    的头像 发表于 03-05 14:23 1088次阅读