news 2026/8/11 13:01:54

浏览器相关知识

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
浏览器相关知识

一、浏览器的诞生

1990年底,蒂姆·伯纳斯-李(Tim Berners-Lee)发明了世界上第一个网页浏览器,起初就叫“WorldWideWeb”(后改名Nexus),运行在NeXT电脑系统上。1991年:他同时创建了 HTML(超文本标记语言),最初约含18个元素,并写出了第一个网页。
1994年,哈肯·维姆·莱(Håkon Wium Lie)首次提出CSS构想,后与正在开发“Argo”浏览器的伯特·波斯(Bert Bos)联手。1996年12月:CSS Level 1 正式成为W3C推荐标准
1995年,网景(Netscape)公司工程师布兰登·艾奇(Brendan Eich) 用约10天设计了JavaScript(最初代号Mocha/LiveScript),同年12月,正式定名为JavaScript(为营销借Java热度),并部署在Netscape Navigator 2.0浏览器中。

二、浏览器有什么用?

浏览器对于网页来说,本质上是一个极其复杂的容器或虚拟机。它向下屏蔽了底层操作系统的差异(Windows、Mac、Linux),向上为前端代码提供了一套标准化的 API。
具体来说,它承担了网络加载(获取资源)、代码编译执行(HTML/CSS/JS解析与渲染)、异步调度(Event Loop 多线程管理)以及交互存储(事件响应与数据持久化)四大核心功能。具体职能如下:

2.1 职能一 资源加载器

1)**发起网络请求:**输入网址后,浏览器通过网络进程发起HTTP/HTTPS请求,把index.html、app.js、style.css、图片等资源从服务器拖回来。
2)DNS解析:把域名(如www.baidu.com)翻译成IP地址,方便找到服务器。浏览器会先查自己的DNS缓存,如果没命中,就调用操作系统的解析器去查系统缓存和hosts文件;如果还没找到,操作系统会向本地DNS服务器(通常是ISP提供的)发起递归查询,最终从根DNS、顶级域名服务器、权威DNS服务器一路查下来拿到IP
3)HTTP缓存管理:自动管理强缓存(Cache-Control)和协商缓存(ETag),让你第二次打开网页时快如闪电。

2.2 职能二 代码解析器与执行器

这是浏览器最核心的“加工”功能,把拿回来的文本变成可见的页面。
1)HTML解析器(构造DOM树):把纯文本的html标签,解析成浏览器能理解的内存树状结构(DOM树)。
2)CSS解析器(构造CSSOM树):解析css代码,形成样式规则树。
3)JS引擎(执行JS):执行script标签里的代码
4)渲染引擎(合成与绘制):把DOM树和CSSOM树结合成渲染树,计算每个盒子的位置(Layout/Reflow),最后绘制成像素(Paint)并合成图层(Composite)显示在屏幕上

2.3 职能三多线程与异步任务管理器

JS本身是单线程的,但浏览器提供了强大的宿主环境API,处理耗时的任务,这就是Event Loop的来源。
1)定时器线程:管理setTimeout、setInterval,时间到了把回调扔进宏任务队列。
2)**事件监听线程:**管理addEventListener绑定的鼠标点击、键盘输入等事件。
3)**HTTP请求线程:**XMLHttpRequest或fetch发起的网络请求,由浏览器底层C++线程池去下载,下载完了把then回调扔进微任务队列。
4)**Web Workers:**允许开“子线程”去做复杂的计算,不阻塞主页面。

2.4 职能四:用户交互与存储系统

1)**事件分发机制:**当用户点击鼠标,浏览器会计算这个点击落在哪个DOM元素上,然后触发该元素绑定的点击事件监听器。
2)**本地存储:**提供localStorage(永久存)、se

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/11 13:01:53

Rust宏编程:声明宏与过程宏对比及DSL开发实践

1. Rust宏编程系统概述 Rust语言中的宏系统是其最强大的特性之一,它允许开发者在编译时进行代码生成和转换。与C/C的简单文本替换宏不同,Rust的宏系统更加类型安全且功能强大。Rust宏主要分为两大类:声明宏(Declarative Macros)和过程宏(Proc…

作者头像 李华
网站建设 2026/8/11 13:00:21

LangGraph路由翻车实录:Agent把紧急工单发给了离线模型,我的三层质检防线

LangGraph路由翻车实录:Agent把紧急工单发给了离线模型,我的三层质检防线 LangGraph路由事故复盘:从致命配置到高可用架构的演进之路 事件背景与影响评估 2026年5月15日14:37,灰度上线第3天,运维大屏突然弹出一级告警--客户紧急工单超时2小时未响应。当时数据显示: 工单响应…

作者头像 李华
网站建设 2026/8/11 12:59:47

幻兽帕鲁存档转换终极指南:如何轻松解密游戏数据

幻兽帕鲁存档转换终极指南:如何轻松解密游戏数据 【免费下载链接】palworld-save-tools Tools for converting Palworld .sav files to JSON and back 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-save-tools 你是否曾对《幻兽帕鲁》的存档文件感…

作者头像 李华
网站建设 2026/8/11 12:59:43

分布式每日一学 — Day 4:分布式事务(2PC / 3PC / Saga / TCC)

🎓 分布式每日一学 — Day 4:分布式事务(2PC / 3PC / Saga / TCC)前 3 天我们打的是「副本一致性」这条线:CAP 告诉我们 P 没得选,Raft/Paxos 告诉我们"怎么让一组机器对同一份数据达成一致"。 今…

作者头像 李华
网站建设 2026/8/11 12:58:39

Java教学互动系统开发指南:SSM框架实战与毕业设计要点

1. 项目背景与核心价值 这个Java教学互动系统项目是典型的计算机专业毕业设计选题,也是目前教育信息化领域的热门开发方向。去年帮学弟评审毕业设计时,我发现超过30%的计算机相关专业学生都会选择教学管理系统这类课题。这类项目之所以受欢迎&#xff0c…

作者头像 李华
网站建设 2026/8/11 12:57:26

2026社交辅助机器人医疗康复场景应用:智能机器人推动全球医疗服务模式升级

随着全球人口老龄化加速、慢性疾病负担持续增加以及医疗服务需求不断升级,传统医疗模式正面临人力资源不足、康复效率有限以及个性化服务能力不足等挑战。社交辅助机器人作为融合人工智能、人机交互、机器人控制及医疗康复技术的新兴设备,正在成为智慧医…

作者头像 李华