Node.js学习02：浏览器工作原理

于 2021-07-21 18:29:01 发布
阅读量253 收藏 1
点赞数
文章标签： 网络 html cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itcast_cn/article/details/118973307
版权

浏览器工作原理

浏览器的组成

  • 人机交互部分（UI）
  • 网络请求部分（Socket）
  • JavaScript引擎部分（解析执行JavaScript）
  • 渲染引擎部分（渲染HTML、CSS等）
  • 数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）

sqlite

主流渲染引擎

介绍

  1. 渲染引擎 又叫 排版引擎 或 浏览器内核。

  2. 主流的 渲染引擎 有

  • Chrome浏览器: Blink引擎（WebKit的一个分支）。
  • Safari浏览器: WebKit引擎，windows版本2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发Windows版的Safari。
  • FireFox浏览器: Gecko引擎。
  • Opera浏览器: Blink引擎(早期版使用Presto引擎）。
  • Internet Explorer浏览器: Trident引擎。
  • Microsoft Edge浏览器: EdgeHTML引擎（Trident的一个分支）。

工作原理

  1. 解析HTML构建Dom树（Document Object Model，文档对象模型），DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。

  2. 构建渲染树，渲染树并不等同于Dom树，因为像head标签 或 display: none这样的元素就没有必要放到渲染树中了，但是它们在Dom树中。

  3. 对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫"layout" 或 "reflow"。

  4. 绘制渲染树，调用操作系统底层API进行绘图操作。

渲染引擎工作原理示意图

渲染引擎工作原理示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fh2vWcoZ-1626863312084)(imgs/flow.png)]

WebKit工作原理（Chrome、Safari、Opera）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xz8Qd1j7-1626863312086)(imgs/webkitflow.png)]

Gecko工作原理（FireFox）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KpOV6890-1626863312089)(imgs/gecko.jpg)]

浏览器的 reflow 或 layout 过程

https://www.youtube.com/watch?v=ZTnIxIA5KGw

打开 Chrome 的 Rendering 功能

第一步：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ts30GTM-1626863312097)(imgs/chrome_rendering1.png)]

第二步：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qd1UnZrF-1626863312098)(imgs/chrome_rendering2.png)]

浏览器访问网站过程

  1. 在浏览器地址栏中输入网址。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9aaszXA-1626863312100)(imgs/taobao_url.png)]

  1. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文。
GET / HTTP/1.1
Host: www.taobao.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: l=Ag0NWp9E8X4hgaGEtIBhOmKxnSOH6kG8; isg=AkZGLTL-Yr9tHDZbgd5bsn4Rlzwg5IphaK-1BzBvMmlEM-ZNmDfacSyDfdgF; thw=cn
  1. 浏览器发起DNS解析请求，将域名转换为IP地址。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gFDUpTD5-1626863312102)(imgs/taobao_ip.png)]

  1. 浏览器将请求报文发送给服务器。
  1. 服务器接收请求报文，并解析。
  1. 服务器处理用户请求，并将处理结果封装成HTTP响应报文。
HTTP/1.1 200 OK
Server: Tengine
Date: Thu, 13 Apr 2017 02:24:25 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Vary: Ali-Detector-Type, X-CIP-PT
Cache-Control: max-age=0, s-maxage=300
Via: cache8.l2cm10-1[172,200-0,C], cache13.l2cm10-1[122,0], cache3.cn206[0,200-0,H], cache6.cn206[0,0]
Age: 293
X-Cache: HIT TCP_MEM_HIT dirn:-2:-2
X-Swift-SaveTime: Thu, 13 Apr 2017 02:19:32 GMT
X-Swift-CacheTime: 300
Timing-Allow-Origin: *
EagleId: 9903e7e514920502659594264e
Strict-Transport-Security: max-age=31536000
Content-Encoding: gzip

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>淘宝网 - 淘！我喜欢</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
</head>
<body>
......
</body>
</html>
  1. 服务器将HTTP响应报文发送给浏览器。
  1. 浏览器接收服务器响应的HTTP报文，并解析。
  1. 浏览器解析 HTML 页面并展示，在解析HTML页面时遇到新的资源需要再次发起请求。
  1. 最终浏览器展示出了页面

HTTP请求报文和响应报文格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEz73qe1-1626863312102)(imgs/HTTPMsgStructure2.png)]

DNS 解析过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0lg85OZ6-1626863312105)(imgs/DNS.gif)]

windows 下 hosts 文件位置

C:\Windows\System32\drivers\etc\hosts

DOM 解析

参考代码:

<html>
  <body>
    <p>Hello World</p>
    <div> <img src="example.png" alt="example"/></div>
  </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUmGHvkf-1626863312105)(imgs/dom.png)]

Webkit CSS 解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yjZQebkp-1626863312106)(imgs/css_parser.png)]

How Browsers work - 浏览器是如何工作的

How Browsers work
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

黑马程序员官方
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
自学前端需要达到什么水平才能去找工作？来看看这套前端学习路线图
11-26 2万+
自学前端需要达到什么水平？当然是水平越高，越容易找到工作。在竞争这么激烈的2020年，就需要更加的努力，充实自己，让自己不被代替！看了好多的回答，大家都是再说学到什么水平能找到工作，我就来分享干货吧！祝看到这篇干货的小伙伴，工作步步高升！黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）第一阶段：HTML5+css配套学习视频：前端小白零基础入门HTML5+CSS3完整视频：http://yun.itheima.co.
博客
软件测试全套教程，2020年全新软件测试学习路线图
05-04 1万+
2020年全新的软件测试学习路线图来袭，零基础入行入职必备学习教程，高质量免费资源在线学习！还在等什么，想学习软件测试的小伙伴，快来点击进入学习状态吧！一、基础入门课程亮点1. 熟悉计算机相关概念。2. 掌握基础的测试理论。3. 熟练掌握HTML常用标签input。4. 掌握使用CSS选择器。配套学习视频：软件测试基础入门之HTML基础​软件测试基础入门......
博客
Java多线程编程，来看这篇就够了！全新Java多线程教程！
06-25 6869
对于Java程序员来讲，Spring全家桶几乎可以搞定一切，Spring全家桶便是精妙的招式，多线程就是内功心法很重要的一块，线上出现性能问题，多线程更是不可回避的问题。因此多线程基础知识对于高级程序员的重要性不必言语！很多公司在面试高级程序员时候，多线程相关知识也必定是考核的标准之一。那我们为什么要学习多线程呢？掌握Java多线程可以：应对面试、优化之路、深入理解。应对面试在面试中，求职...
博客
QT教程，QT从入门到实战教程完整版
06-17 7万+
Qt是一个跨平台开发框架，可以使用C++和Qml开发，同时它又不仅仅只是开发框架，它也是一种技术策略，可以让你快速、高效地设计、开发、部署和维护软件，同时在所有设备上提供无缝的用户体验。因而，对于C/C++工程师而言，QT是必须要学习的一个跨平台开发框架，今天分享一个QT教程！课程亮点1，知识体系完备，内容精炼2，脉络清晰，讲解过程把握知识主线。3，结合工作实践及分析应用，培养...
博客
软件测试人员应该如何介绍自己测试过的项目
05-09 4万+
测试人员在找工作的过程中，通常有一个问题是很难绕开的。就是要如何向别人介绍自己之前做过的项目。下面我们就这个问题简单的做一些分析。要解决这个问题，大体上可以分为如下几个步骤：1、对项目进行基本介绍2、说明自己负责测试的模块3、针对部分模块展开进行说明一. 对项目进行基本介绍以下就以一个简单的项目进行介绍说明：最近测试的Tpshop项目是一个B/S架构的Web项...
博客
软件测试全套教程，软件测试自学线路图
07-09 19万+
软件测试：软件测试是为了发现程序中的错误而执行程序的过程。通俗的说，软件测试需要在发布软件之前，尽可能的找软件的错误，尽量避免在发布之后给用户带来不好的体验，并要满足用户使用的需求。现在市面上这么多软件，每个软件背后都有软件测试工程师的功劳，这也造就了软件测试行业前景非常好，今天我就分享一下自学线路图，及全套教程！软件测试学习线路图点击查看大图第一阶段：该...
博客
Python入门教程完整版（懂中文就能学会）
09-28 18万+
今天本宝宝给大家带来了干货，Python入门教程完整版，完整版啊！完整版！言归正传，我来给大家介绍一下这套教程，希望每个小伙伴都沉迷学习，无法自拔！本套教程学习时间15天1-3天内容：为Linux基础命令4-13天内容：为Python基础教程14-15 天内容：为飞机大战项目演练第一阶段（1-3天）：该阶段首先通过介绍不同领域的三种操作系统，操作系统的发展简史以及...
博客
Java学习路线图，全套Java基础视频教程
09-07 23万+
深知广大爱好Java的人学习是多么困难，没视频没资源，上网花钱还老被骗。为此我呕心沥血整理了这套Java教程，不管你是不懂电脑的小白，还是已经步入开发的大牛，这套路线路你都值得拥有，小白看上面的视频可以成功学会Java并且顺利工作，大神看了上面的资源肯定会谆谆乐道，教程的宗旨就是分享，专业，便利，让喜爱Java的人，都能平等的学习。首先建立好开发环境非常重要，工欲善其事，必先利其器。做任何开发.........
博客
Python入门，Python爬虫基础知识
06-19 344
网络爬虫（Web Crawler 或 Spider）是一种在互联网上自动获取信息的程序。它根据设定的规则，从互联网上下载网页、图片、视频等内容，并提取有用信息进行处理。简而言之，网络爬虫就像是在互联网上自动“爬行”的程序，从一个或多个初始网页开始，读取网页内容，找到其中的链接，再通过这些链接找到下一个网页，如此循环，直到抓取完所有目标网页。网络爬虫的应用非常广泛，如搜索引擎的网页抓取、数据挖掘、网站监测等。例如，搜索引擎通过爬虫技术抓取网页信息，建立索引数据库，以便用户进行关键词搜索时能快速找到相关信息。
博客
Java入门，深入理解Java平台及其关键特性
06-19 426
Java的标志性特点是“一次编写，到处运行”（Write once, run anywhere）。通过字节码和Java虚拟机（JVM），Java可以在不同的操作系统和硬件上运行，这种跨平台的抽象屏蔽了底层的细节，使得Java程序具备了很强的可移植性。
博客
5分钟上手Python爬虫，轻松掌握爬虫技巧
06-17 699
本文的重点在于引导读者初步掌握爬虫技术。入门并不难，但在实际操作中可能会遇到一些困难，比如有些网站不允许直接访问，需要登录或进行人机验证等。因此，建议先从爬取一些新闻资讯类的网站开始，因为这样相对容易。涉及用户支付等敏感信息的网站就不那么容易获取了。因此，在入门阶段，不要选择太复杂的网站，先尝试简单的爬取。一旦理解了基本原理，遇到问题时可以考虑添加组件或使用第三方库来解决。# 初始化彩色输出init()# 定义颜色# 打印初始信息。
博客
Java面试重点知识体系解析及高效复习指南
06-12 318
Java 后端的知识体系非常庞大，在准备面试时，需要优先抓住重点进行复习。
博客
鸿蒙开发培训，5分钟学会鸿蒙开发语言关键知识点
06-11 757
ArkTS 是 HarmonyOS 的主要开发语言。它在 TypeScript 的基础上进行了优化和扩展，保留了 TypeScript 的优点，同时屏蔽了其缺点，并与 ArkUI 框架一起构建了鸿蒙应用。本文将介绍 ArkTS 的相关内容。基于上述需求，ArkTS 强制使用静态类型。这意味着在 ArkTS 中，声明变量、函数参数和返回值时必须指定类型，并在编译时进行严格的类型检查。
博客
深入理解三大经典算法：快速排序、动态规划背包问题和Dijkstra算法
06-06 304
很多业务场景需要算法，成熟的算法可以提高效率，减少不必要出现的问题，规避风险！今天给大家总结了3个在实现业务场景中使用到的算法，分享给你。
博客
Java学习：Java中的常见数据结构以及其示例代码
06-05 234
这些示例代码展示了如何使用Java中的一些常见数据结构。你可以根据具体需求进行修改和扩展，以适应不同的应用场景。了解和熟练使用这些数据结构，将帮助你编写出更高效、可维护的代码。在Java编程中，了解和掌握常见的数据结构是至关重要的。
博客
掌握Java的80%：面向对象与并发编程
06-04 620
Java作为一种广泛使用的编程语言，其强大之处在于其面向对象的特性和对并发编程的卓越支持。作为一名程序员，深刻理解Java的面向对象概念、集合框架、多线程与并发编程，以及Java虚拟机（JVM）的基础知识，对于编写高效、可维护的代码至关重要。本文将引导你快速掌握这些核心概念。
博客
鸿蒙星河版笔记来袭！字符串、类型转换、运算符等
05-31 569
需要装饰器装饰，改变会引起 UI 的渲染刷新 （必须设置 类型 和 初始值）作用：把两个或多个字符串，拼成一个字符串。算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等。但如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。作用：监听（感知）用户 点击行为，进行对应操作。赋值运算符：对变量进行 赋值 的运算符，如：=作用：用来 判断比较 两个数据 大小，返回一个。注意：加法两端只要有字符串，就是拼接。优势：更适合于 多个变量 的字符串拼接。1. 提取状态：数量、原价、现价。
博客
2024年Q1程序员薪酬报告出炉！搞AI的远超同行？
05-30 582
除了对比各个地区之间的薪酬差异，Levels.fyi指出：专攻AI的软件工程师与不专攻AI的软件工程师之间，在收入上也存在明显差异。通过下方数据可以看到，到了资深工程师级别后，Cruise给AI工程师的薪水高达68万美元，而非AI工程师只能拿到49.5万美元。根据麦肯锡公司此前发布的报告，到2030年中国AI人才需求扩大到600万人，是2022年的6倍，而供给却只有200万人，通过这一排名可见，AI工程师在全世界都是高薪职位的领头羊，中国AI工程师的薪资相当可观！
博客
鸿蒙星河版笔记来袭！京东、美团等综合案例
05-30 787
特点：层叠操作更简洁，编码效率高。（绝对定位的优势是更灵活）特点：层叠操作更简洁，编码效率高。（绝对定位得优势是更灵活）整体结构：层叠布局 Stack （底部导航 + 主体）层叠布局具有较强的组件层叠能力。wrap 属性：Flex 是单行布局还是多行布局。{ x: 水平偏移量, y: 垂直偏移量 }参数：取值为整数数字，取值越大，显示层级越高。2. 局部：先图片、再Row（图 + 文本）图片组件 + 文本修饰（播放、评论、时长）3. 细节：VIP（定位、圆角）① 上面图片区域（层叠布局）
博客
鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例
05-29 781
属性：.justifyContent(枚举FlexAlign) (Row 组件的 justifyContent 属性效果相似)属性：.backgroundImage(背景图地址, 背景图平铺方式-枚举ImageRepeat)宽高默认单位 → vp：虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致 （推荐）作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角。作用：在组件内添加间距，拉开内容与组件之间的距离。作用：在组件外添加间距，拉开两个组件之间的距离。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值