JS基础知识（三十二）：浏览器输入url

浏览器输入url

协议头://域名:端口号/路径?查询参数#hash值
protocol://host:port/path?query#fragment

浏览器的主要功能

常见的浏览器： IE、Chrome、FireFox、Opera、Safari

功能：将用户选择的web资源呈现出来，即向服务器请求资源，然后将其显示在浏览器窗口中，资源的格式通常为HTML，也包括pdf，image以及其他格式，用户通过url来请求指定资源的位置

url：统一资源定位符，用来定位互联网上任意资源的位置

浏览器内核：
最初：浏览器内核包括渲染引擎和js引擎，渲染引擎和js引擎的区分不明确
现在：浏览器内核指的是渲染引擎，由于js引擎越来越独立，浏览器内核指渲染引擎（渲染引擎和js引擎的功能划分越来越清晰）

浏览器的主要组件：（参考2011年的博客）

用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

浏览器引擎 - 在用户界面和呈现引擎之间传送指令。

呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，为所有平台提供底层实现。

用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

JavaScript 解释器。用于解析和执行 JavaScript 代码。

数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

浏览器输入url：DNS、网络、渲染、四次挥手

DNS解析

查找IP地址，查找浏览器缓存，查找系统缓存（本地硬盘的 hosts 文件），本地DNS服务器，其他DNS服务器（递归方式查询、迭代方式查询）

网络

TCP连接
三次握手——客户端和服务器都知道自己能够发送和接收消息
三次握手目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误

发送http请求
建立了TCP连接之后，发起一个http请求。一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法。

返回http响应
服务器接受并处理完请求，返回 HTTP 响应，一个响应报文格式基本等同于请求报文，由响应行、响应头、空行、实体组成。

PS：三次握手
TCP协议的一个特点：面向字节流，我们把数据拆分成字节然后进行分段传输

第一次握手：客户端发送建立连接的请求报文段，服务端收到了，这样服务端能够得出客户端的发送和自己的接收是没有问题的。

第二次握手：服务端也发送一个请求报文段，表示自己收到了来自客户端的建立连接请求报文段，同时客户端也收到服务器响应的这个报文段，这样客户端能够得出服务端的发送和自己的接收是没有问题的，但是服务端并不知道客户端的接收有没有问题(只是客户端自己知道)所以还需要第三次握手来告知服务端。

第三次握手：客户端接着发送请求报文段，表示自己收到了服务端的确认信息，然后服务端也正常收到了。自此，握手结束，可以知道双方的发送和接收是正常的。

两次挥手缺点：客户端知道自己和服务器发送接收是正常的，但是服务器不知道客户端的接收状况。第一次客户端请求连接，由于网络滞留，客户端认为请求失效，重新发送，服务器正常响应连接。在某个时间段，第一次发送的连接请求才到达了服务端，如果没有第三次握手确认，那么此时服务端会误认为客户端又发了一个新的连接请求，会再一次响应客户端，客户端收到响应请求，发现这个请求刚刚已经发过了，而且也收到了服务端的响应，就忽略这个请求，但此时的服务端却还一直等待客户端的响应，这样就会造成资源的浪费。

https://juejin.cn/post/6844904194764177416（三次挥手详解）
https://blog.csdn.net/su_bao/article/details/80845246（三次挥手详解）

渲染

加载、解析、渲染：https://blog.csdn.net/wh_xmy/article/details/79567070

在拿到一个html文件之后，自上而下开始执行，遇到需要下载的文件，并行下载，将html解析成dom树，将css解析成css规则树，构造渲染树，布局渲染树、绘制渲染树

将html解析成一个dom树，解析完一部分，渲染一部分，同时能够通过网络下载其他内容

如果遇到script标签，会阻塞页面渲染：https://juejin.cn/post/6844904121099632653

DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

解析html

解析css

图片来源于其他文章：https://segmentfault.com/a/1190000016253407

四次挥手

第一次挥手：客户端发送断开连接请求，告诉服务器，客户端不会发送数据了

第二次挥手：服务器响应客户端发送的请求，发送ACK确认字符到客户端，并关闭消息接收服务

第三次挥手：服务端会将剩余数据发送完毕，然后发送FIN到客户端，告诉客户端服务器不会再发送消息

第四次挥手：客户收到请求后关闭服务并发送ACK，当服务端收到ACK后，验证正常则会关闭所有的服务

https://www.jianshu.com/p/e2fa390ac0c0（为什么不是三次挥手）
https://zhuanlan.zhihu.com/p/78677852（输入url之后）

PS：url中#后面的内容不会被识别到
首先下载html文件，在下载过程中遇到link标签，script标签，image会进行下载（可以说html下载，遇到link，开始下载link，但是此时HTML仍在下载中，浏览器下载文件采用异步下载）
某一个资源的下载后续，浏览器第一次加载资源文件会下载文件，但是下载完成之后，浏览器会将资源文件放进本地缓存，第二次刷新文件的时候，向服务器请求资源会返回304，（If-Modified-Since）
文件加载完成之后，将html文件解析成DOM树，将CSS与DOM树合成渲染树，会进行渲染，（layer知识：相同刷新频率的内容放在一个layer中，可以使用translate3d创建layer）