正经文章的地方

从输入URL到页面加载发生了什么

NorviNS

参考文档：从输入URL到页面加载发生了什么

一、DNS解析

  1. 本地是否有缓存？有→直接取用对应ip，否→进入查询解析
  2. 根域名服务器 → 顶级域名com服务器 → 本地域名服务器（com. → google.com. → www.google.com ）

DNS优化：1. DNS缓存： 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存
2. CDN负载均衡

二、TCP连接

https比http多一层SSL/TLS加密，所以更安全。
参考文档：图解SSL/TLS协议

SSL加密5次握手：
1. Client → Server：Client给出协议版本号、客户端生成的随机数（ Client random）、客户端支持的加密方法
2. Server → Client：Server确认加密方法，并给出数字证书、以及一个服务器生成的随机数
（ Server random）
3. Client → Server：Client确认数字证书有效，生成一个新随机数对话秘钥（ Premaster secret ），并用数字证书里的公钥加密这个随机数，然后发给Server
4. Server → Client：Server拿到加密数字后，用自己的私钥解密Client发送的随机数
5. Server & Client：根据客户端随机数（ Client random） 、服务端随机数（ Server random） 、对话秘钥（ Premaster secret ） 生成对话的SessionKey，并为之后的对话内容进行加密

三、发送HTTP请求（通常意义上泛指的请求，不单指HTTP一种）

HTTP请求包含请求行、请求报头、请求正文。

请求行格式： Method Request-URL HTTP-Version CRLF (e.g. GET index.html HTTP/1.1);
请求报头Headers可能包含的内容: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent;
请求正文：一般是json格式的内容。

四、服务器处理请求并返回HTTP报文

HTTP响应包含状态码、响应报头、响应报文。

状态码：200-成功，301-永久性转移，302-暂时性转移，403-无权限，404 not found，415不支持的媒体类型，500 server error，502 Bad Gateway;
响应报头：Server，Connection等；
响应报文：内容。

五、浏览器解析渲染页面

  1. 解析HTML文件构建DOM树
  2. 解析CSS文件构建渲染树
  3. 布局渲染树并绘制（reflow：重排-定位盒模型，repaint：重绘-绘制内容）
  4. 从上到下加载各种资源，异步资源如图片、媒体等等，都会重复前几步进行加载
  5. JS会中断渲染使其挂载，所以会阻塞后续资源的加载
  6. CSS可能会影响JS内容的执行，一般放在JS前面先加载

六、连接结束

附：优化Web

  1. 合理使用缓存
  2. 合理使用CDN
  3. 减少重排重绘