重学前端-总结：10 、浏览器：一个浏览器是如何工作的？（阶段一）_BraveSoul360的博客-程序员秘密

技术标签： web前端  重学前端  web前端学习  

重学前端-总结：10 、浏览器：一个浏览器是如何工作的？（阶段一）

文章目录

前言

对于前端开发来说，我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么，而不知道它是如何做到的。

浏览器到底是如何工作

过程：url->页面显示处理过程。

  1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
  2. 把请求回来的 HTML 代码经过解析，构建成 DOM 树；
  3. 计算 DOM 树上的 CSS 属性；
  4. 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
  5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
  6. 合成之后，再绘制到界面上。

在这里插入图片描述

HTTP 协议

HTTP 的标准。

HTTP 标注由 IETF 组织制定，跟 HTTP 相关的标准主要有两份：

HTTP 协议是基于 TCP 协议出现的，对 TCP 协议来说，TCP 协议是一条双向的通讯通道，HTTP 在 TCP 的基础上，规定了 Request-Response 的模式。这个模式决定了通讯必定是由浏览器端首先发起的。

实验

使用 telnet 客户端，

telnet time.geekbang.org 80

输入以下字符作为请求：

GET / HTTP/1.1
Host: time.geekbang.org

按下两次回车，收到了服务端的回复：

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>

HTTP 请求的过程

  • 在 TCP 通道中传输的，完全是文本。
  • 请求格式、返回格式安装http协议格式，参考一下描述。
  • 注意请求内容、返回内容格式换行

HTTP 协议格式

根据上面的分析，我们可以知道 HTTP 协议，大概可以划分成如下部分。

在这里插入图片描述

HTTP Method（方法）

方法有以下几种定义：

  • GET
  • POST
  • HEAD
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE

浏览器通过地址栏访问页面都是 GET 方法。表单提交产生 POST 方法。

HEAD 则是跟 GET 类似，只返回请求头，多数由 JavaScript 发起

PUT 和 DELETE 分别表示添加资源和删除资源，但是实际上这只是语义上的一种约定，并没有强约束。

CONNECT 现在多用于 HTTPS 和 WebSocket。

OPTIONS 和 TRACE 一般用于调试，多数线上服务都不支持。

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

接下来我们看看 response line 的状态码和状态文本。常见的状态码有以下几种。

  • 1xx：临时回应，表示客户端请继续。
  • 2xx：请求成功。
    • 200：请求成功。
  • 3xx: 表示请求的目标有变化，希望客户端进一步处理。
    • 301&302：永久性与临时性跳转。
    • 304：跟客户端缓存没有更新。
  • 4xx：客户端请求错误。
    • 403：无权限。
    • 404：表示请求的页面不存在。
    • 418：It’s a teapot. 这是一个彩蛋，来自 ietf 的一个愚人节玩笑。（超文本咖啡壶控制协议）
  • 5xx：服务端请求错误。
    • 500：服务端错误。
    • 503：服务端暂时性错误，可以一会再试。

1xx 系列的状态码是非常陌生的，原因是 1xx 的状态被浏览器 http 库直接处理掉了，不会让上层应用知晓。

2xx 系列的状态最熟悉的就是 200，这通常是网页请求成功的标志，也是大家最喜欢的状态码。

3xx 系列比较复杂，301 和 302 两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上 301 更接近于一种报错，提示客户端下次别来了。

304 又是一个每个前端必知必会的状态，产生这个状态的前提是：客户端本地已经有缓存的版本，并且在 Request 中告诉了服务端，当服务端通过时间或者 tag，发现没有更新的时候，就会返回一个不含 body 的 304 状态。

HTTP Head (HTTP 头)

HTTP 头可以看作一个键值对。原则上，HTTP 头也是一种数据，我们可以自由定义 HTTP 头和值。不过在 HTTP 规范中，规定了一些特殊的 HTTP 头，我们现在就来了解一下它们。

请求头

在这里插入图片描述

响应头

在这里插入图片描述

HTTP Request Body

HTTP 请求的 body 主要用于提交表单场景。实际上，http 请求的 body 是比较自由的，只要浏览器端发送的 body 服务端认可就可以了。一些常见的 body 格式是：

  • application/json
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/xml

我们使用 html 的 form 标签提交产生的 html 请求，默认会产生 application/x-www-form-urlencoded 的数据格式，当有文件上传时，则会使用 multipart/form-data。

HTTPS

在 HTTP 协议的基础上，HTTPS 和 HTTP2 规定了更复杂的内容，但是它基本保持了 HTTP 的设计思想，即：使用上的 Request-Response 模式。

我们首先来了解下 HTTPS。HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。

HTTPS 的标准也是由 RFC 规定的，你可以查看它的详情链接：

https://tools.ietf.org/html/rfc2818

HTTPS 是使用加密通道来传输 HTTP 的内容。但是 HTTPS 首先与服务端建立一条 TLS 加密通道。TLS 构建于 TCP 协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。

HTTP 2

HTTP 2 是 HTTP 1.1 的升级版本，你可以查看它的详情链接。

https://tools.ietf.org/html/rfc7540

HTTP 2.0 最大的改进有两点，一是支持服务端推送，二是支持 TCP 连接复用。

服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。

TCP 连接复用，则使用同一个 TCP 连接来传输多个 HTTP 请求，避免了 TCP 连接建立时的三次握手开销，和初建 TCP 连接时传输窗口小的问题。

Note:
其实很多优化涉及更下层的协议。IP 层的分包情况，和物理层的建连时间是需要被考虑的。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunfeng482/article/details/87905228

智能推荐

Flutter 初识 MediaQuery_我的大小姐的博客-程序员秘密

当信息发生变化，例如屏幕旋转等时，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息MediaQuery.removePadding() 删除内边距MediaQuery.removeViewInsets() 删除视图内边距viewInsets 为键盘弹出时等遮挡屏幕边距，其中 viewInsets.bottom 为键盘高度；systemGestureInsets 为手势边距，如 Android Q 之后添加的向左滑动关

嵌入式入门级学习——国产平台T3开发板测试教程（1）_Tronlong创龙的博客-程序员秘密_国产嵌入式开发

本文主要为嵌入式入门开发者的接口、网口等板卡基础快速测试，当初级学习的开发者拿到板卡，如何在最快时间内，测试这个板卡的基础性能、功能是正常的，就让我们下面看看。该篇文章主要提供基于创龙科技TLT3-EVM评估板的硬件资源测试方法。无特殊说明情况下，默认使用USB TO UART0作为调试串口，使用Linux系统启动卡（Micro SD方式）启动系统，通过路由器与PC机进行网络连接。Linux系统启动卡对应的设备节点为mmcblk1，eMMC对应的设备节点为mmcblk0。本指导文档适用开发环境：

使用vue-pdf预览合同的pdf文件时，不显示签章_小小白号的博客-程序员秘密_vue-pdf不显示盖章

预览pdf不显示合同上的盖章和签字：1. 在node_modules文件夹中搜索pdf.worker.js文件2. 注释掉_this.setFlages(_util.AnnotationFlag.HIDDEN); 在31690行

Maven项目Module互相调用找不到Jar包(即使已经打包和添加依赖)的解决方案_米菲尔Miffeel的博客-程序员秘密

1.在被依赖的模块的pom.xml文件中添加以下内容：&lt;build&gt; &lt;plugins&gt; &lt;plugin&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifa...

EXT学习总结_#菜鸟架构师文标#的博客-程序员秘密

ext概述：    ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！E

Opengl鼠标交互函数glutMouseFunc()函数介绍_量化橙同学的博客-程序员秘密_glutmousefunc

检测鼠标单击要想在OpenGL中处理鼠标事件非常的方便，GLUT已经为我们的注册好了函数，只要我们提供一个方法。使用函数glutMouseFunc,就可以帮我们注册我们的函数，这样当发生鼠标事件时就会自动调用我们的方法。函数的原型是：void glutMouseFunc(void(*func)(int button,int state,int x,int y));参数：fu

随便推点

Web.xml中Context-param的作用_程序员阿亮的博客-程序员秘密

1.启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: 和2.紧接着,容器创建一个ServletContext(上下文),这个WEB项目所有部分都将共享这个上下文.3.容器将转化为键值对,并交给ServletContext.4.容器创建中的类实例,即创建监听.5.在监听中会有contextInitialized(ServletCo

pandas的Excel文件读写（一）——组件要求与文件读取_dsy0221的博客-程序员秘密_pandas.read_excel的返回值

一、组件要求实现pandas的Excel文件读写，除了安装pandas外，还需要安装下列组件：（1）xlrd：从指定的xls格式文件中读取数据（2）xlwt：写入数据到指定的xls格式文件（3）openpyxl：支持xlsx格式文件的读写上述组件在Windows上的常用安装方法是在命令行中输入以下命令：pip install ****其中****即代表上述组件（库）的名字xlrd，xlwt，openpyxl。此外，如果安装了Anaconda等打包了各种扩展库的Python，

ios 资源_Capacity_bo的博客-程序员秘密

http://github.ibireme.com/github/list/ios/#

something about bootcmd and bootargs_field42zhw的博客-程序员秘密

http://www.cnblogs.com/cornflower/archive/2010/03/27/1698279.htmlbootcmd:bootcmd是自动启动时默认执行的一些命令，可以在当前环境中定义各种不同配置，不同环境的参数设置，然后设置bootcmd为经常使用的参数。bootargs:bootargs是环境变量中的重中之重，甚至可以说整

迁移学习笔记3: TCA, Finetune, 与Triplet Network(元学习)_lagoon_lala的博客-程序员秘密

MotivationTCA, Finetune, Triplet NetworkTCAFinetuneTriplet Network方法对比总结迁移学习基于特征的迁移学习方法 (Feature based)基于模型的迁移学习方法 (Model based)元学习(multi-task)元学习（Meta Learning）与迁移学习（Transfer Learning）的区别联系元学习特点元学习种类

基于SkyWalking实现对k8s集群中微服务的链路追踪分析_最美dee时光的博客-程序员秘密_k8s链路追踪

基于SkyWalking实现对k8s集群中微服务的链路追踪分析背景需求：SkyWalking介绍：实现方式：step1：制作SkyWalking Agent镜像1、准备文件：2、编写skywalking agent的dockerfile文件3、构建镜像step2：编写java服务接入skywalking agent的yamlstep3：执行yaml文件step4：效果图背景需求：由于我司之前的服务都是部署在ECS中，对于java微服务的实时链路分析是基于skytwalking agent来做监控的，但是

推荐文章

热门文章

相关标签