摘要：动态映射利用来进行域名解析，在专门的服务器上配置主机到地址的映射。前两者都无效的情况下，向路由器发送查询的请求，或者直接向用户定义的服务地址发送域名解析的请求。
【前端芝士树】从浏览器搜索框输入网址到网页呈现发生了什么？
这个也是在前端面试中问得比较多的一个问题了，文章篇幅有限尽可能关注一些前端开发中不太会遇到的知识点，如果想扩展的话请点击引用文章吧，也欢迎评论，后续会继续补充。0. 大致流程
看图的话更容易记一些，
下面将会基于这几个过程进行描述。
首先需要搞明白的是，域名和ip地址是不同的，域名是为了更方便记忆ip所产生的，ip才是服务器在网络上的真实地址。
IP地址是用来唯一标识互联网上计算机的逻辑地址，让电脑之间可以相互通信，每台连网计算机都依靠IP地址来互相区分，相互联系。IP地址通常指的是网络中的主机，而域名则通常表示一个网站，一个域名可以绑定到多个ip上，多个域名也可以绑定到一个ip上。
为了让域名和地址能够相互转换，就需要对其进行映射，有两种方式：
静态映射 在浏览器端存储一份域名到ip地址的映射表，只供本设备使用。
动态映射 利用DNS来进行域名解析，在专门的DNS服务器上配置主机到IP地址的映射。
DNS（Domain Name System，域名系统），万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。DNS协议运行在UDP协议之上，使用端口号53。DNS可供所有网络上的节点使用。1.1 域名解析 && 浏览器查询ip的过程
浏览器从缓存的映射表中寻找域名对应的记录，如果存在则直接返回IP
缓存中如果没有记录命中，则进行系统调用查询hosts，查找用户定义的IP映射。
前两者都无效的情况下， 向路由器发送DNS查询的请求，或者直接向用户定义的DNS服务地址发送域名解析的请求。
DNS服务器会从根域名服务器开始递归搜索，从.com顶级域名服务器，到baidu的域名服务器。2. 建立TCP连接
TCP/IP协议 / 四层模型 / 三次握手
在 TCP/IP协议组 中包含一系列用于处理数据通信的协议：
TCP (传输控制协议) - 应用程序之间通信
UDP (用户数据包协议) - 应用程序之间的简单通信
IP (网际协议) - 计算机之间的通信
ICMP (因特网消息控制协议) - 针对错误和状态
DHCP (动态主机配置协议) - 针对动态寻址
...
如图所示
TCP / IP 协议组
TCP/IP 意味着 TCP 和 IP 在一起协同工作。
TCP 负责应用软件（比如你的浏览器）和网络软件之间的通信。
IP 负责计算机之间的通信。
TCP 负责将数据分割并装入 IP 包，然后在它们到达的时候重新组合它们。
IP 负责将包发送至接受者。
在这其中需要着重了解一下的就是数据是如何进行处理的、TCP、IP以及TCP和UDP的区别。
数据处理流程 TCP三次握手 TCP与UDP的区别TCP 是面向连接的、可靠的流协议。流就是指不间断的数据结构，当应用程序采用 TCP 发送消息时，虽然可以保证发送的顺序，但还是犹如没有任何间隔的数据流发送给接收端。TCP 为提供可靠性传输，实行“顺序控制”或“重发控制”机制。此外还具备“流控制（流量控制）”、“拥塞控制”、提高网络利用率等众多功能。
UDP 是不具有可靠性的数据报协议。细微的处理它会交给上层的应用去完成。在 UDP 的情况下，虽然可以确保发送消息的大小，却不能保证消息一定会到达。因此，应用有时会根据自己的需要进行重发处理。
TCP 和 UDP 的优缺点无法简单地、绝对地去做比较：TCP 用于在传输层有必要实现可靠传输的情况；而在一方面，UDP 主要用于那些对高速传输和实时性有较高要求的通信或广播通信。TCP 和 UDP 应该根据应用的目的按需使用。
浏览器利用IP直接与网站主机通信。浏览器发出TCP（SYN标志位为1）连接请求，主机返回TCP（SYN，ACK标志位均为1）应答报文，浏览器收到应答报文发现ACK标志位为1，表示连接请求确认。浏览器返回TCP（）确认报文，主机收到确认报文，三次握手，TCP连接建立完成。
3. 服务器响应请求在TCP连接建立完成后，浏览器向主机发起一个HTTP-GET方法报文请求。请求中包含访问的URL，也就是http://www.baidu.com/ ，还有User-Agent用户浏览器操作系统信息，编码等。
3.1 常见的服务器状态码 1** 请求状态100 Continue 继续，一般在发送post请求时，已发送了http、header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2** 响应状态200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
3** 资源状态301 Moved Permanently 永久重定向，请求的网页已永久移动到新位置。
4** 网页状态400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
404 Not Found 找不到如何与 URI 相匹配的资源。
5** 服务器状态500 Internal Server Error 最常见的服务器端错误。
3.2 重定向的作用重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力；重定向也可将多个域名的访问，集中到一个站点；由于baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每个的链接数都会减少从而降低排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提高排名。
4. 浏览器渲染呈现浏览器拿到响应的页面代码，将其解析呈现在用户面前。
中间会涉及到浏览器的渲染步骤、JS引擎、渲染引擎、事件响应等知识点。
后续会继续补充，欢迎收藏和点赞。
参考文章
W3School - TCP/IP 简介
一篇文章带你熟悉 TCP/IP 协议（网络协议篇二）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53042.html
摘要：这是一次失败的面经但是吃一堑才能长一智不是吗字节跳动校招面经前端开发岗一介绍以及项目经历吧啦吧啦此处省略字面试官会从项目经历入手，考察项目中遇到的难题，以及解决方法，强调个人的努力以及在解决过程中扮演的角色是主导还是参与。 这是一次失败的面经……但是吃一堑才能长一智不是吗？ 字节跳动2019校招面经 - 前端开发岗（一） 1. 介绍以及项目经历 吧啦吧啦……此处省略10000字 面试官...
摘要：定义文档资源的名称二域名解析在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是要通过地址。什么是域名解析协议提供通过域名查找地址，或逆向从地址反查域名的服务。 前言 打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！本文首发地址为GitHub博客,写文章不易，请多多支...
摘要：定义文档资源的名称二域名解析在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是要通过地址。什么是域名解析协议提供通过域名查找地址，或逆向从地址反查域名的服务。 前言 打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！本文首发地址为GitHub博客,写文章不易，请多多支...
摘要：浏览器显示及交互背后的原理引子因为笔者爱编程的光头强近期在写一本关于小程序入门的书籍。不基于浏览器背后的运行原理，是很难说清楚虚拟被引入的真正原因和最大好处的。它是浏览器的核心部分。 浏览器显示及交互背后的原理 引子 因为笔者（爱编程的光头强）近期在写一本关于小程序入门的书籍。其中有一章是介绍虚拟DOM的，它是位于Javascript和真正DOM之间的一层缓存层。为什么引入它，为什么它...
摘要：浏览器显示及交互背后的原理引子因为笔者爱编程的光头强近期在写一本关于小程序入门的书籍。不基于浏览器背后的运行原理，是很难说清楚虚拟被引入的真正原因和最大好处的。它是浏览器的核心部分。 浏览器显示及交互背后的原理 引子 因为笔者（爱编程的光头强）近期在写一本关于小程序入门的书籍。其中有一章是介绍虚拟DOM的，它是位于Javascript和真正DOM之间的一层缓存层。为什么引入它，为什么它...
阅读 3577·2021-11-15 11:37
阅读 2955·2021-11-12 10:36
阅读 4344·2021-09-22 15:51
阅读 2359·2021-08-27 16:18
阅读 864·2019-08-30 15:44
阅读 2135·2019-08-30 10:58
阅读 1740·2019-08-29 17:18
阅读 3240·2019-08-28 18:25
