前端知识点之浏览器是如何工作的？

最新推荐文章于 2024-07-23 17:30:00 发布
最新推荐文章于 2024-07-23 17:30:00 发布
阅读量250 收藏
点赞数
分类专栏： 浏览器基本原理 文章标签： http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welkin_qing/article/details/88751801
版权

文章目录

一、首先提两个问题

1. 一个页面从输入URL到页面加载完成，这个过程都发生了什么？

  1. 当发送一个URL 请求，不管这个页面是URL web 页面的URL 还是Web 页面上每个资源的URL ，浏览器都会开启一个线程去处理这个请求，同时在远程DNS 服务器上启动一个DNS查询，使得浏览器获得对应的ip地址
  2. 浏览器和远程服务器通过TCP 三次握手建立一个TCP/IP 连接。（该握手包括一个同步报文，一个同步-应答报文，一个应答报文，这三个报文在浏览器和服务器之间传递）该握手首先由客户端尝试建立通信，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文
  3. 一旦TCP/IP 连接建立，浏览器就会通过该链接向远程服务器发送http 的get 请求。远程服务器找到资源并使用http 响应返回该资源，值为200 的HTTP 响应状态表示一个正确的响应
  4. web 服务器提供该资源服务，客户端开始下载资源

2. 如何把一个URL 变成一个屏幕上显示的网页？

  1. 浏览器首先使用http 协议或者https 协议，向服务器请求页面
  2. 把请求回来的HTML 代码经过解析，构建成DOM 树
  3. 计算dom 树上的css 属性
  4. 最后根据css属性对元素逐个进行渲染，得到内存中的位图（点阵图，是由像素的单个点组成的，这些点可以进行不同的排列和染色构成图样）
  5. 一个可选的步骤是对位图进行合成，这会极大的增加后续绘制的速度
  6. 合成之后，再绘制到界面上

需要知道的是：
从http请求回来开始，这个过程就并非一般想象中的一步做完再做下一步，而是一条流水线

从http请求回来，就产生了流式的数据，后续的DOM 树构建，css计算，渲染，合成，绘制，都是尽可能的流式的处理前一步的产出；即不需要等到上一步完全结束，就直接开始上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。

二、网络通讯

1. HTTP

  • http协议是基于tcp协议出现的，对于tcp协议来说，tcp是一种双向的通讯信道
  • http 在tcp 的基础上，规定了Request-Response 的模式。这个模式决定了通讯必定是由浏览器首先发起的
  • http 协议是纯粹的文本协议，规定了使用tcp 协议来传输文本格式的一个应用层协议
    在这里插入图片描述
  1. 请求部分：第一行被称作 request line，分为三个部分：http method（请求方法），请求路径和请求的协议和版本
GET / HTTP/1.1
Host: time.geekbang.org
  1. 响应部分：第一行被称作response line ，分为三个部分：协议和版本，状态码，状态文本
HTTP/1.1 301 Moved Permanently
Date: Fri, 25 Jan 2019 13:28:12 GMT
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000

<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
  1. 在 request line/response line 之后，是请求头/响应头，这些头由若干行组成，每行是用冒号分割的名称和值
  2. 在头之后，以一个空行（两个换行符）为分割，是请求体/响应体，请求体可能包含文件或者表单数据，响应体则是html 代码

2. HTTP method

  • GET 浏览器通过地址栏访问页面都是get 方法
  • POST 表单提交
  • HEAD 跟get类似，只是返回请求头
  • PUT 添加资源
  • DELETE 删除资源
  • CONNECT 用于https 和websocket
  • OPTION 用于调试，多数线上服务器不支持
  • TRACE用于调试，多数线上服务器不支持

3. HTTP Status code（状态码）和 Status text（状态文本）

response line 的状态码以及所表达的意义

  • 1xx 临时回应，表示客户端请继续（通常情况下，1xx的状态码都会被浏览器 http库直接处理掉了，不会让上层知道）
  • 2xx 请求成功 （网页请求成功的标志）
    • 200 请求成功
  • 3xx 表示请求的目标有变化，希望客户端做进一步处理
    • 301 永久性重定向（实际上，301更接近一种报错，提示客户端下次别来了）
    • 302 临时重定向
    • 304 客户端缓存没有更新（产生这个状态的前提是：客户端本地已经有缓存的版本了，并在请求中告诉了服务端，当服务端发现没有更新的时候，就会返回一个不含body 的304状态）
  • 4xx 客户端请求错误
    • 403 无权限
    • 404 表示请求页面不存在
  • 5xx 服务端错误
    • 500 服务端错误
    • 503 服务端暂时性错误，可以一会再试

4. HTTP HEAD

http 头可以看做一个键值对。原则上http 也是一种数据，我们可以自由定义 http 头和值

  • 请求头
    在这里插入图片描述
  • 响应头
    在这里插入图片描述

5. HTTP Request Body

http 请求的body 主要用于提交表单场景。（一般情况下，http请求的body 是比较自由的格式，只要浏览器发送的body 服务端认可就可以了）
常见的body格式：

  • application/json
  • application/x-www-form-urlencoded（使用html的form 标签提交时产生的html请求，默认会使用这种格式）
  • multipart/form-data （文件上传）
  • text/xml

三、HTTPS

不管是https 还是http2 ，基本上保持了HTTP 的设计思想，即：使用上的Request-Response 模式

1. HTTPS 的作用

  1. 确定请求目标服务端身份
  2. 保证传输的数据不会被网络中间节点窃听或篡改

2. HTTPS 如何加密

https 是通过首先和服务端建立一条 TLS 加密通道，然后使用加密通道来传输http 的内容

TLS 构建于 tcp 协议之上，实际上是对传输内容做一次加密，所以从传输内容上来看，https 和 http 没有任何区别

四、HTTP2

HTTP2是 HTTP 1.1 的升级版本

1. HTTP2 的改进

  1. 支持服务端推送
    在客户端发送一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题
  2. 支持TCP 连接复用
    使用同一个TCP 连接传输多个http 请求，避免了TCP 连接建立的三次握手开销，和初建TCP 连接时传输窗口小的问题

（本文来自我对极客时间winter的重学前端的知识整理，如有转载请声明，同时有不全可以参考原著）

Welkin_qing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
中高级前端面试宝典之浏览器篇
学骑扫把的小女巫
03-03 1300
总结了各个大厂的中高级前端面试题，然后进行分门别类整理，将知识点划成一整块一整块的，便于理解记忆和查询
vue项目前端知识点整理【收藏】
10-17
在Vue项目中，前端开发涉及许多知识点。以下是一些关键概念和技巧的详细说明： 1. **路由管理**：Vue Router 是Vue.js官方的路由库，它允许我们在应用中定义和管理不同页面间的导航。在`beforeEach`导航守卫中，...
WEB前端底层知识--浏览器是如何工作的（转）
weixin_33939380的博客
01-08 155
　　概述      对于一直从事B/S架构（B/S也是一种C/S架构，只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已）WEB领域的开发人员来说，浏览器 Browser再熟悉不过了。不管你是JAVA流还是微软流抑或PHP流，WEB开发新流派。不论你的服务器端采用哪种业务架构，ORACLE数据库还是 MSSQL，站在用户的角度思考，这个才是他们直接能接触到的，前端的用户体验给了用户直...
WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
wpnhwq2013的专栏
04-04 657
WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析  　　浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧，我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到了CSS的相关知识。从MVC
WEB前端底层知识--浏览器是如何工作的
weixin_30550271的博客
07-16 86
WEB前端底层知识--浏览器是如何工作的 https://www.cnblogs.com/liuyu7177/archive/2013/04/24/3039598.html 转载于:https://www.cnblogs.com/iamspecialone/p/11195298.html
WEB前端底层知识--浏览器是如何工作的(1)
哲少
04-07 2163
概述      对于一直从事B/S架构（B/S也是一种C/S架构，只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已）WEB领域的开发人员来说，浏览器Browser再熟悉不过了。不管你是JAVA流还是微软流抑或PHP流，WEB开发新流派。不论你的服务器端采用哪种业务架构，ORACLE数据库还是MSSQL，站在用户的角度思考，这个才是他们直接能接触到的，前端的用户体验给了用户直观的印象
浏览器的工作原理
tuhuolong的专栏
09-07 3086
浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工 作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。 本文将基
前端知识点之浏览器原理
PrototypeOne的博客
04-05 4406
文章摘自https://juejin.cn/post/6916157109906341902/ 浏览器安全 XSS攻击 概念 **XSS攻击是一种跨站脚本攻击。是一种代码注入攻击。**攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。 XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。 攻击者的常见的攻击方式 获取页面的数据，如DOM、cookie、localStorage；
前端应该掌握的浏览器知识
ling_111的博客
02-07 786
一、浏览器的主要功能 浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您想要访问的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。 二、浏览器的主要结构 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 H
前端需要了解的浏览器缓存知识
铁锤妹妹的博客
10-16 1825
作为一个前端开发者，每天都在和浏览器打交道，对于浏览器缓存，相信都不会陌生，同时它也是我们日常开发中存在的一个非常重要的优化手段，无论在节省带宽、提高加载和渲染速度、减少网络阻塞，以及提高用户体验上，都有重要的作用。
2023年web前端开发知识点总结.doc
11-07
Web 前端开发知识点总结 Web 前端开发是指使用 HTML、CSS、JavaScript 等技术来构建网站或应用程序的用户界面和用户体验的过程。以下是 2023 年 Web 前端开发知识点总结： HTML 知识点总结 HTML（HyperText ...
2023年web前端开发知识点总结.docx
11-07
"2023年web前端开发知识点总结" HTML知识点总结： 1. HTML基本结构：HTML文档的基本结构包括文档类型声明、HTML元素、head元素和body元素。 2. HTML元素：HTML元素分为块级元素和内联元素两种，常见的块级元素有h1...
前端面试题之浏览器Browser相关题集.zip
06-21
在前端开发领域，浏览器是开发者们最常打交道的平台之一，因此对浏览器的理解深度往往直接影响到项目的性能优化和用户体验。本题集主要聚焦于浏览器相关的面试题，旨在帮助面试者和学习者深入理解浏览器的工作原理...
前端知识点梳理 web前端
05-09
以下是对"前端知识点梳理 web前端"这一主题的详细解析： 一、HTML（超文本标记语言） HTML是构成网页的基础，用于定义页面结构。它由一系列标签组成，如`<head>`、`<body>`、`<h1>`、`<p>`、`<a>`等，这些标签描述...
HTTP 协议浅析
最新发布
yimeixiaolangzai的博客
07-23 1147
HTTP 是一种无状态的、基于请求和响应模式的应用层协议。无状态意味着每次请求都是独立的，不依赖于前后的请求。客户端（通常是浏览器）发起请求，服务器处理请求并返回响应。
05 HTTP & Tomcat & Servlet
weixin_62504976的博客
07-22 1162
HTTP概念HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则数据传输的规则指的是请求数据和响应数据需要按照指定的格式进行传输如果想知道具体的格式，可以打开浏览器，点击F12打开开发者工具，点击Network来查看某一次请求的请求数据和响数据具体的格式内容在浏览器中如果看不到上述内容，需要清除浏览器的浏览数据。chrome浏览器可以使用ctrl+shift+Del进行清除所以学习HTTP主要就是学习请求和响应数据的具体格式内容。
网络访问(Socket/WebSocket/HTTP)
Cary_cacb的博客
07-23 829
HarmonyOS为用户提供了网络连接功能，具体由网络管理模块负责。通过该模块，用户可以进行Socket网络通滚、WebSocket连接、HTTP数据请求等网络通信服务。需要注意的是，在使用网络管理模块提供的网络数据通信服务之前，用户需要根据具体的使用情况，向系统获取相应的使用权限。
JDK HttpClient - Java 11 可用的 JDK 内置的 HTTP 客户端
成富的专栏
07-22 1103
在 Java 应用的开发中，发送 HTTP 请求是一个常见的需求。应用在开发时，通常会使用流行的开源第三方库作为 HTTP 客户端，如 Apache HttpClient 或 OkHttp 等。这里介绍的是 JDK 自带的 HttpClient 实现，Java 11 可用。说到这里，还在用 Java 8 的朋友不用着急划走，Java 8 的下一个 LTS 版本就是 Java 11 了，没准什么时候...
如何使用Python的http.server模块（或Flask/Django的简化版本）实现一个简单的HTTP服务器，能够处理GET和POST请求
2402_85246552的博客
07-23 435
对于更复杂的HTTP服务器需求，如处理路由、模板渲染、数据库交互等，你可能会选择使用Flask或Django这样的Web框架。以下是Flask和Django的简化示例，用于处理GET和POST请求。请注意，Django的视图函数通常需要与URLconf（URL配置）相结合才能工作，而且Django项目需要更复杂的设置和初始化步骤。模块本身并不直接支持POST请求的解析，你需要自己手动解析POST数据。每种方法都有其适用的场景和优势，你可以根据自己的需求选择最适合的工具。来解析简单的URL编码的表单数据。
前端技术需要掌握哪些知识点？
03-13
作为一个 AI，我认为前端技术需要掌握 HTML、CSS、JavaScript 等基础知识，同时需要了解常用的前端框架...此外，还需要了解浏览器的工作原理和优化技巧，以及一些常用的前端工具和技术，如 Webpack、Babel、ESLint 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值