一张图搞定--浏览器输入URL后发生了什么

soWhat
158 阅读2分钟 
graph TD
输入url --> 浏览器查找缓存 --> 浏览器DNS --> 系统缓存 --> 路由器缓存DNS --> 运营商DNS缓存

Tips:
浏览器缓存涉及到强缓存和协商缓存, let's get it

<!--html头部meta标签中-->
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" /> 

image.png cache-control 可设置值

  • no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
  • no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
  • public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
  • private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
graph TD
上述都没找到或者缓存已过期 --> DNS解析查找域名对应的IP地址 --> 进行三次握手

sequenceDiagram
Client->>Server: Hi?
Server-->>Client: Hello!
Client-)Server: I will send you something!

握手完成，开始发送请求报文

sequenceDiagram
Client->>Server: 请求，发送HTTP协议内容
Server-->>Server: 接受/处理请求
Server-->>Client: 响应报文

拿到对应的Html文件后，开始渲染界面

image.png 用语言描述就是：

  1. html 被html解析器解析成DOM TREE
  2. CSS 被 css 解析器解析成 style tree
  3. 把dom tree 和style tree结合生成一棵render tree，此过程为渲染
  4. 生成布局flow，在浏览器中画出所有节点
  5. 把渲染树绘制到页面上，展示出来

在渲染过程中，遇到放于head中的css/js会阻塞，先去继续请求回来继续渲染

遇到script、img、video、audio等标签，浏览器会继续发送请求，获取对应的资源

Tips: 什么是重绘和重排？

  • 重绘repaint：某些元素的外观被改变，例如修改：color，border-style，visibility，background，text-decoration，outline，border-radius，box-shadow
  • 重排reflow：重排也叫回流，重新生成布局，重新排列元素，如：改变元素的位置和尺寸大小（同时会影响到其他元素的位置也要重新计算，引起性能消耗）。
  • 重绘不一定导致重排，但重排一定会导致重绘。
ps: 更详细的内容后续将会在另一篇中补充说明

浏览器关闭前，会进行四次挥手

sequenceDiagram
Client->>Server: I've done, please close the link.
Server-->>Client: Hold on , I still have something to send!
Server-->>Client: Ok, I'm done too!
Client-)Server: OK，I close it!

浏览器等不到Server回应就会关闭链接

avatar
文章
阅读
粉丝