浏览器
常见的浏览器内核有哪些
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等
浏览器内核
主要分成两部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
浏览器中输入网址
1.http协议或https协议
2.url的组成：详解url的组成
http
1. HTTP 请求报文结构
- 首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
- 首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
- 请求头和消息实体之间有一个CRLF分隔
- 根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1 Host: www.w3.org Connection: keep-alive Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 Referer: https://www.google.com.hk/ Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 Cookie: authorstyle=yes If-None-Match: "2cc8-3e3073913b100" If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT name=qiu&age=25
2. HTTP 响应报文结构
- 首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
- 首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
- 响应头部和响应实体之间用一个CRLF空行分隔
- 最后是一个可能的消息实体 响应报文例子如下：
HTTP/1.1 200 OK Date: Tue, 08 Jul 2014 05:28:43 GMT Server: Apache/2 Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT # 最后修改时间，用于协商缓存 ETag: "40d7-3e3073913b100" # 文件hash，用于协商缓存 Accept-Ranges: bytes Content-Length: 16599 Cache-Control: max-age=21600 # 强缓存（浏览器端）最大过期时间 Expires: Tue, 08 Jul 2014 11:28:43 GMT # 强缓存（浏览器端）过期时间 P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml" Content-Type: text/html; charset=iso-8859-1 {"name": "qiu", "age": 25}
3. HTTP常见状态码及其含义
- 1XX：信息状态码
- 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
- 2XX：成功状态码
- 200 OK 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求，但尚未处理
- 3XX：重定向
- 301 Moved Permanently 请求的网页已永久移动到新位置。
- 302 Found 临时性重定向。
- 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
- 304 Not Modified 自从上次请求后，请求的网页未修改过。
- 4XX：客户端错误
- 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
- 401 Unauthorized 请求未授权。
- 403 Forbidden 禁止访问。
- 404 Not Found 找不到如何与 URI 相匹配的资源。
- 5XX: 服务器错误
- 500 Internal Server Error 最常见的服务器端错误。
- 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
通过网络去访问url
1. 网络七层协议（OSI模型）
OSI是一个定义良好的协议规范集，并有许多可选部分完成类似的任务。它定义了开放系统的层次结构、层次之间的相互关系以及各层所包括的可能的任务，作为一个框架来协调和组织各层所提供的服务。
OSI参考模型并没有提供一个可以实现的方法，而是描述了一些概念，用来协调进程间通信标准的制定。即OSI参考模型并不是一个标准，而是一个在制定标准时所使用的概念性框架。
- 第7层 应用层
应用层（Application Layer）提供为应用软件而设计的接口，以设置与另一应用软件之间的通信。例如：HTTP、HTTPS、FTP、Telnet、SSH、SMTP、POP3等。
- 第6层 表示层
表示层（Presentation Layer）把数据转换为能与接收者的系统格式兼容并适合传输的格式。
- 第5层 会话层
会话层（Session Layer）负责在数据传输中设置和维护计算机网络中两台计算机之间的通信连接。
- 第4层 传输层
传输层（Transport Layer）把传输表头（TH）加至数据以形成数据包。传输表头包含了所使用的协议等发送信息。例如:传输控制协议（TCP）等。
- 第3层 网络层
网络层（Network Layer）决定数据的路径选择和转寄，将网络表头（NH）加至数据包，以形成分组。网络表头包含了网络资料。例如:互联网协议（IP）等。
- 第2层 数据链路层
数据链路层（Data Link Layer）负责网络寻址、错误侦测和改错。当表头和表尾被加至数据包时，会形成信息框（Data Frame）。数据链表头（DLH）是包含了物理地址和错误侦测及改错的方法。数据链表尾（DLT）是一串指示数据包末端的字符串。例如以太网、无线局域网（Wi-Fi）和通用分组无线服务（GPRS）等。
分为两个子层：逻辑链路控制（logical link control，LLC）子层和介质访问控制（Media access control，MAC）子层。
- 第1层 物理层
物理层（Physical Layer）在局部局域网上发送数据帧（Data Frame），它负责管理电脑通信设备和网络媒体之间的互通。包括了针脚、电压、线缆规范、集线器、中继器、网卡、主机接口卡等。
2. TCP 协议三次握手
- 客户端通过
SYN报文段发送连接请求，确定服务端是否开启端口准备连接。状态设置为SYN_SEND; - 服务器如果有开着的端口并且决定接受连接，就会返回一个
SYN+ACK报文段给客户端，状态设置为SYN_RECV； - 客户端收到服务器的
SYN+ACK报文段，向服务器发送ACK报文段表示确认。此时客户端和服务器都设置为ESTABLISHED状态。连接建立，可以开始数据传输了。
翻译成大白话就是： 客户端：你能接收到我的消息吗？ 服务端：可以的，那你能接收到我的回复吗？ 客户端：可以，那我们开始聊正事吧。
为什么是3次？：避免历史连接，确认客户端发来的请求是这次通信的人 为什么不是4次？：3次够了第四次浪费
3. TCP 协议四次挥手
- 为什么不是两次？
- 两次情况客户端说完结束就立马断开不再接收，无法确认服务端是否接收到断开消息，但且服务端可能还有消息未发送完。
- 为什么不是三次？
- 3次情况服务端接收到断开消息，向客户端发送确认接受消息，客户端未给最后确认断开的回复
通过DNS解析域名的实际IP地址
发送至 DNS 服务器并获得域名对应的 WEB 服务器的 ip 地址。
DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址，如果没有就向OS系统的 DNS 缓存中寻找，如果没有就是路由器的 DNS 缓存， 如果没有就是 ISP 的DNS 缓存中寻找。 所以，缓存的寻找过程就是： 浏览器 -> 系统 -> 路由器 -> ISP。 如果在某一个缓存中找到的话，就直接跳到下一步。 如果都没有找到的话，就会向 ISP 或者公共的域名解析服务发起 DNS 查找请求。这个查找的过程还是一个递归查询的过程。
检查浏览器是否有缓存
通过Cache-Control和Expires来检查是否命中强缓存，命中则直接取本地磁盘的html（状态码为200 from disk(or memory) cache，内存or磁盘）
如果没有命中强缓存，则会向服务器发起请求（先进行下一步的TCP连接），服务器通过Etag和Last-Modify来与服务器确认返回的响应是否被更改（协商缓存），若无更改则返回状态码（304 Not Modified）,浏览器取本地缓存；
若强缓存和协商缓存都没有命中则返回请求结果。
与 WEB 服务器建立 TCP 连接
TCP 协议通过三次握手建立连接。
- 客户端通过
SYN报文段发送连接请求，确定服务端是否开启端口准备连接。状态设置为SYN_SEND; - 服务器如果有开着的端口并且决定接受连接，就会返回一个
SYN+ACK报文段给客户端，状态设置为SYN_RECV； - 客户端收到服务器的
SYN+ACK报文段，向服务器发送ACK报文段表示确认。此时客户端和服务器都设置为ESTABLISHED状态。连接建立，可以开始数据传输了。
翻译成大白话就是：
- 客户端：你能接收到我的消息吗？
- 服务端：可以的，那你能接收到我的回复吗？
- 客户端：可以，那我们开始聊正事吧。
为什么是3次？：避免历史连接，确认客户端发来的请求是这次通信的人。
为什么不是4次？：3次够了第四次浪费
若协议是https则会做加密
HTTPS = HTTP + 加密 + 认证 + 完整性保护
- 要先申请CA证书，并安装在服务器上（一个文件，配置nginx支持监听443端口开启ssl并设置证书路径）
- 浏览器发送请求；
- 网站从浏览器发过来的加密规则中选一组自身也支持的加密算法和hash算法，并向浏览器发送带有公钥的证书，当然证书还包含了很多信息，如网站地址、证书的颁发机构、过期时间等。
- 浏览器解析证书。
- 验证证书的合法性。如颁发机构是否合法、证书中的网站地址是否与访问的地址一致，若不合法，则浏览器提示证书不受信任，若合法，浏览器会显示一个小锁头。
- 若合法，或用户接受了不合法的证书，浏览器会生成一串随机数的密码（即密钥），并用证书中提供的公钥加密。
- 使用约定好的hash计算握手消息，并使用生成的随机数（即密钥）对消息进行加密，最后将之前生成的所有消息一并发送给网站服务器。
- 网站服务器解析消息。用已有的私钥将密钥解密出来，然后用密钥解密发过来的握手消息，并验证是否跟浏览器传过来的一致。然后再用密钥加密一段握手消息，发送给浏览器。
- 浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据，为后续真正数据的传输做一次测试。
下图表示https加密通信的过程：
浏览器发送请求获取页面html
浏览器向 WEB 服务器的 ip 地址发送相应的 http get 请求页面html。
通常的请求行是: 请求的方式（get或post） + 请求的资源的位置（url） + HTTP/[版本号](HTTP/1.1)
发起http请求的过程主要是组装http报文并将报文发向指定地址的过程。
http协议的具体信息可以参考：HTTP介绍教程
服务器响应html
这里的服务器可能是server或者是cdn
注：cdn - 内容分发网络，可用来加快传输速度，主要用来存储静态文件，例如前端的html、css、js、图片文件等。具体请参考：CDN概念基本介绍
服务器上可能会通过nginx等设置静态资源代理，将url对应的html等静态资源返回。
nginx是常用的反向代理服务器，介绍请见：Nginx 入门指南
如果网站是博客或者其他需要seo友好的页面，就需要做服务端渲染，这时服务器会根据模版和数据渲染好html文件返回给前端。
常见的服务端渲染方案有：ejs、art-template、等模版语法，也有基于vue、react等框架的服务端渲染框架nuxt.js及next.js等。
浏览器解析 HTML
- 浏览器下载 HTML 数据，将html文档解析成为一个个
标签，这些标签组成了树状结构 - 如果解析到
style标签则开始解析css，如果解析到link标签则先异步下载，完成后解析css。 - 如果遇到
script标签，判断是行内写法则直接解析执行，如果是src引入则同步下载脚本文件，下载完成立即执行，注意这里下载过程是阻塞的，其他流程都会等下载完成后执行。
浏览器解析HTML文档过程内容较多，详情请看:
浏览器渲染页面
浏览器渲染页面的过程主要是解析html文档组成标签节点树，解析css形成样式规则树，标签节点树和样式规则树共同组成渲染树，浏览器最终显示渲染树形成页面。
- 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。（更具体的解析HTML过程看上一篇博客：点击打开链接）
- 将CSS解析成 CSS Rule Tree（css规则树） 。
- 解析完成后，浏览器引擎会根据DOM树和CSS规则树来构造 Render Tree。注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
- 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步进行layout，进入布局处理阶段，即计算出每个节点在屏幕中的位置。
- 再下一步就是绘制，即遍历RenderTree，并使用用户界面后端层绘制每个节点。根据计算好的信息绘制整个页面。
浏览器解析执行js脚本
这个过程中可能会有dom操作、ajax发起的http网络请求等。
浏览器发起网络请求
web-socket、ajax等，这个过程通常是为了获取数据
服务器响应ajax请求
- ajax请求在到达真正的server之前，可能还会经过网关全线校验、消息队列或nginx等负载均衡处理
- 到达server后，后端会解析http请求报文，得到url、请求参数、http头、cookie等等信息
- 登录校验、权限校验（cookie校验、jwt权限校验等）
- 可能会查询数据库，进行常用的CRUD（增删改查）等操作
- 返回响应数据
浏览器处理事件循环等异步逻辑。
setTimeout、setInterval、Promise等宏任务、微任务队列