面试官:输入URL之后发生了什么?

URL的组成

1.1 DNS解析查询

服务器都是有自己的IP的,但是IP地址很难记,域名相对比较好记,比如www.baidu.com,那么就需要DNS将IP地址和域名做一个映射。

DNS查找顺序
  • 浏览器自身DNS

  • 操作系统DNS

  • 本地hosts文件

  • 向域名服务器发送请求

DNS查找的规则

配置了CDN,DNS会将最终的域名解析权交给CNAME(别名指向)指向的CDN专用DNS服务器。

1.2 TCP三次握手、四次挥手

前面的篇章已经学习!!!

HTTP请求的方法有以下几种:

  1. GET: 用于请求指定资源,服务器将返回相应资源的内容。GET请求通常用于获取数据,不应该对服务器状态产生任何影响,是幂等的。
  2. POST: 用于向服务器提交数据,常用于提交表单或上传文件等操作。POST请求将请求的数据放在请求体中,相比GET请求可以传输更大量的数据。
  3. PUT: 用于向指定资源位置上传新的内容,或者替换原有资源。PUT请求的主要作用是更新资源,通常用于更新特定资源的全部内容。
  4. DELETE: 用于请求服务器删除指定的资源。DELETE请求将请求的URI所标识的资源从服务器上删除,如果删除成功,则返回204(No Content)状态码。
  5. HEAD: 与GET方法类似,但是服务器在响应中只返回首部,不返回实体的主体部分。HEAD请求常用于获取资源的元数据,如资源的大小、类型等,而不需要获取实际内容。
  6. OPTIONS: 用于获取目标资源所支持的通信选项,即查询服务器支持的HTTP请求方法和其他特性。OPTIONS请求常用于跨域请求的预检查,以确定是否可以发送实际的请求。
  7. PATCH: 用于对资源进行部分修改。PATCH请求的语义与PUT请求类似,但是它只对资源的部分进行更新,而不是替换整个资源。
  8. TRACE: 用于测试请求路径中的代理服务器的性能。TRACE请求会在目标服务器接收到请求后,将请求的内容原样返回给客户端,用于诊断和调试。 这些HTTP请求方法提供了丰富的功能,可以满足不同场景下的需求。
预检请求
触发预检请求
  1. 跨域
  2. 自定义请求头

1.3 缓存

强缓存一般缓存一些静态资源,一般是通过后台去配置的。 多次刷新网页,就会触发内存缓存。

思考?如果两种缓存并存,那个优先级高?

在强缓存中,存在两种常见的缓存机制,即Expires和Cache-Control。当这两种缓存机制同时存在时,Cache-Control的优先级更高。这是因为Cache-Control是HTTP/1.1引入的新特性,具有更灵活的控制选项,能够提供更精细的缓存策略。相比之下,Expires是HTTP/1.0的标准,其缓存控制相对简单,只能指定一个绝对的过期时间点,而无法像Cache-Control那样指定相对时间或其他高级选项。因此,当Expires和Cache-Control同时存在时,浏览器会优先遵循Cache-Control的指令来进行缓存控制。

思考?如果两种缓存并存,那个优先级高?

协商缓存中存在两种常见的缓存验证机制,即Last-Modified和ETag。当这两种机制同时存在时,ETag的优先级更高。这是因为ETag是一种更精确的缓存验证方式,它通过对资源内容的哈希值或其他标识符进行计算,来确定资源是否发生了变化。相比之下,Last-Modified只提供了资源的最后修改时间,存在一定的时间粒度问题,并且在某些情况下可能导致缓存不准确。 因此,当浏览器同时收到Last-Modified和ETag时,它会优先使用ETag进行缓存验证,以确保缓存的准确性和可靠性。

1.4 渲染HTML

1.5 解析JS

字节码的作用:做跨平台

V8用的是JIT解析器,也就是即时编译,还有一个解析器是AOT,将代码直接编译成二进制数据。

1.6 CPU

计算机组成原理:

相关推荐
mldong4 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排5 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60615 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角6 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!6 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰7 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi8 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen9 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马9 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒10 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端