浏览器和HTTP面试题收集

vino0908
85 阅读9分钟

1. 浏览器输入url之后获取到页面的整个流程是怎样的

  1. 首先浏览器会依次查看自身的缓存，系统的缓存以及路由器的缓存当中是否有当前url的数据，如果有则使用缓存的数据。
  2. 如果缓存里面都没有，那么就会发送http请求，在这个过程中会经历DNS域名解析的环节，DNS会根据你输入的域名来查找到最适合的IP地，从而去访问服务器。
  3. 找到服务器之后，开始建立TCP连接，这个过程中会经历三次握手和四次挥手的过程，当握手成功之后，浏览器开始像服务器发送HTTP请求报文，服务器返回给浏览器响应报文。数据传输完成后，进行四次挥手，表示这一次的TCP连接完成。
  4. 浏览器接收到响应报文之后，进行浏览器页面的渲染，生成DOM树，CSS树，最终合成生成页面

2. 缓存

1. DNS缓存

用户访问baidu.com的时候，首先去询问浏览器，浏览器则会去询问操作系统(windows)，操作系统去询问服务商，最终服务商会把baidu.com的IP地址返回给操作系统，操作系统会对其进行缓存，然后浏览器也知道了IP地址，并对其进行缓存。

2. http的缓存

关键词：cache-control

百度服务器返回给你一个index.html,其余的文件则通过CDN进行返回，在返回的响应头上面会加上cache-control 的响应头。告诉浏览器缓存的最大有效时间。

cache-control:max-age=2592000

一般我们将cache-control这种缓存叫做强缓存。cache-control有三个关键字段分别是

public/private

max-age =3600

must-revalidate
  • public表示的是公开内容，因此代表着中间的所有的代理都可以对文件进行缓存。
  • private 表示只有服务器和使用的浏览器可以进去缓存
  • max-age 表示缓存的有效时长
  • must-revalidate 表示对于过期的缓存进行重新校验。

重新校验 又叫做 内容协商或者弱缓存。内容协商的主要工作就是，协商缓存过期之后还能否继续重用，判断的依据就是响应头里面的etag字段。内容协商分为以下几个步骤：

etag: "5e687a39-6ce"
  • 当缓存过期之后，会发送一个协商请求，与一般请求不同的是协商请求会带有上一次响应的etag字段信息。
  • 服务器通过etag和上次请求进行对比，如果发现etag没有变，则表示可以沿用之前的缓存，同时返回给浏览器状态304，并且返回一个空的响应内容。浏览器通过状态码知道了可以沿用上次的缓存，于是去沿用上次的内容。
  • 当服务器匹配不上etag，就表示不能沿用上次的缓存，于是返回状态码200以及最新的内容给到浏览器。

expire：过期时间这个会依赖于PC端设置的时间

last-modifed：时间点。时间做对比是无法保一秒中两次发送请求的是否过期

3. 禁止缓存

  • 服务器端： cache-control: max-age=0,must-revalidate 等价于 cache-control: no-cache，no-store
  • 浏览器端：
    • 每次发送请求的时候在url后面添加一个时间戳，这样就会是一新的请求不会走缓存。
    • 在请求头header上面添加cache-control

3. 什么是DNS

DNS指的是域名解析系统，主要功能就是将域名解析成电脑可以理解的IP地址，解析的过程就叫做DNS域名解析。域名解析系统不是一个给人用的应用，而是给应用用的应用，他提供的服务是域名到IP地址的转换。

  • 采用分层化的命名方式，为了解决重名的问题。
  • 采用分布式的数据库来解析
  • 采用UDP的传输方式，这样不需要频繁的握手请求。

1. 分层化的命名

  • 根域名（全球一共有十几个.）
  • 顶级域名（.com, .edu, .cn）
  • 二级域名(.com.cn , .edu.cn)
  • ...

通过分层化的命名，将域名拆成一棵倒过来的树，命名的管理就是域名管理了自己下面的子域名。

2. 域名到IP地址的转换

分布式解决域名的解析。

DNS域名解析的过程，首先会查询本地是否有已经解析过的记录，也就是DNS的缓存。

  1. 客户端发出一次查询请求
  2. 首先询问浏览器是否有缓存，有就直接返回
  3. 浏览器发现找不到就会去操作系统的host文件去查询是否有，有就直接返回
  4. 操作系统找不到就会去询问本地DNS服务器缓存，有就直接返回
  5. 本地DNS服务器缓存中没有，就会去询问本地DNS服务器

上述的过程，叫做 递归查询。 这种查询有个问题，就是本地DNS服务器得存储大量得映射关系才能满足主机得需求，很明显这不太现实也不合理。于是本地DNS服务器在查询不到得情况下就会进行 迭代查询。具体操作是如下情况：

  1. 本地DNS服务器找不到之后，首先会去询问根域名服务器
  2. 如果根域名服务器知道结果就会返回。如果不知道，他会返回一个锦囊（其实就是告诉本地应该去哪个顶级域名找找看）给到本地DNS服务器。
  3. 本地DNS服务器在得到锦囊之后呢，就会顺着线索去询问该顶级域名服务器。
  4. 同理如果顶级域名不清楚，那么会返回权威域名服务器得地址给到本地DNS服务器，最终找到对应得IP地址。

4. 讲一下三次握手

建立TCP连接时，服务器和客户端会经历三次握手

  1. 浏览器向服务器发送TCP数据： SYN(seq=x)
  2. 服务器向浏览器发送TCP数据： ACK(seq = x+1),SYN(seq=y)
  3. 浏览器向服务器发送TCP数据： ACK(seq = y+1)

三次握手得目的，是为了确定服务端和客户端双方都具备收/发消息得能力。

5. 讲一下四次挥手

在关闭TCP连接时，服务器和客户端会经历四次挥手

  1. 浏览器向服务器发送TCP数据：FIN(req=x)
  2. 服务器向浏览器发送TCP数据： ACK(req=x+1)
  3. 服务器向浏览器发送TCP数据: FIN(req=y)
  4. 浏览器向服务器发送TCP数据： ACK(req=y+1)

第二和第三步分开执行得原因： 在这两步之间很可能还有数据在发送，所以不能提前发送FIN

6. get请求与post请求有什么区别

幂等性

  • 一般来说：GET请求是读，POST请求是写，
  • 因此get请求具有幂等性，post请求不具有幂等性
  • 浏览器打开网页会发送get请求，想要用post请求打开网页需要借助form表单
  • get请求打开得页面刷新是无害得。post得刷新则需要确认
  • get请求得结果可以被缓存，post不被缓存

请求参数

  • 一般来说，GET请求参数放在url上面，POST 请求参数放在body上面。
  • GET 比 POST 更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。（牵强）
  • GET 请求参数放在 url 里是有长度限制的，而 POST 放在 body 里没有长度限制。（牵强。长度的限制是浏览器的设定）

TCP packet

  • GET 产生一个 TCP 数据包；POST 产生两个或以上 TCP 数据包。（牵强）

所以上述的答案看人下菜啦。根据相关技术规格文档，GET和POST最大的区别就是语义的区别

7. HTTP与HTTPS有什么区别

HTTPS = HTTP + SSL/TLS(安全层)

  • HTTP是明文传输的，不安全；HTTPS是加密传输，非常安全
  • HTTP是80端口，HTTPS是443端口
  • HTTP较快，HTTPS较慢
  • HTTPS需要证书

8. HTTP1.1与HTTP2.0有哪些区别

  • HTTP2使用了二进制传输，而且将head和body分成帧来传输，HTTP1.1是字符串来传输
  • HTTP2支持多路复用，HTTP1.1不支持
  • HTTP2可以压缩header
  • HTTP2支持服务器推送

9. 讲讲同源策略和跨域

同源策略

如果两个URL的协议，端口和域名完全一致，那么就说这两个URL 是同源的。同源策略是一个重要的安全策略。

优缺点

  • 优点： 保护了用户的隐私，保障了网络安全
  • 缺点： 会导致跨域，很多时候前端需要访问另一个域名的的后端接口，但这会被浏览器阻止

解决跨域

  1. 设置CORS,在响应头中添加Access-Control-Allow-Origin:
  2. JSONP,利用script标签的可跨域性，向站点发送GET请求。站点的后端改造JS文件的内容，将数据传入回调函数当中。
  3. Nginx 设置代理，nodejs设置代理

JSONP 的缺点： 没用用户认证，只支持GET请求

10. Session、Cookie、LocalStorage、SessionStorage 的区别

  • Cookie VS LocalStorage
    • cookie会被发送到服务器，localstorage不会
    • cookie最大只有4k,localstorage 甚至可以达到10M
  • LocalStorage VS SessionStorage
    • localStorage 一般不会自动过期
    • sessionStorage 在关闭会话的时候过期
  • Cookie VS SessionStorage
    • cookie存在浏览器文件里面，session存在服务器里面
    • session是基于cookie实现的，具体做法就是将sessionId存在cookie里面

11. 浏览器的渲染原理

HTML 解析与 JS 阻塞

HTML 的解析过程如下：

  • 下载 HTML
  • 解析 HTML 构建一个 DOM 树
  • 下载 css
  • 解析 css 构建一个 CSS 树
  • 在解析 JavaScript 过程中会阻塞 HTML 的解析 jpxi.png

下载/执行 js 为何会阻塞 HTML 的解析

  • 执行 JS 的情况： 在执行 JS 的时候可能会修改 DOM 树
  • 下载 JS 的情况： 浏览器只有看到了 JS 请求的时候才会去下载 JS，下载之后就会去执行 JS

async 和 defer 的区别

<script async></script>
<script defer></script>

defer

defer.png

async

async.png

defer 会在 domReady 事件之前完成 JS 的执行，而 async 的 JS 执行取决于 JS 是否下载完成。async 适用于不操作 dom 的 js 文件，一般使用比较少。

JS 的执行被 CSS 阻塞

cssDefenseJS.png

CSS 的下载和解析会阻塞 JS 的执行，因为 JS 的执行可能需要读取 CSS 的结果。(比如获取 div 的高度)

页面渲染

DOM 树和 CSS 树会合成一个渲染树

xrr.png

  • reflow 重新布局 (比如改变高度，宽度)
  • repaint 重新绘制 (left 改成 transform，transform 只会重绘)
avatar
文章
阅读
粉丝