浏览器interview

rainbowdiary
289 阅读13分钟

状态码

这些都是属于浏览器解析服务器返回响应头状态码的过程。

  • 200 成功
    • 服务器返回200状态码请求头，说明浏览器从网络进程请求回来数据后，可以接着进行下面的操作，把数据转发给渲染进程
  • 204 成功，但是没有实例内容返回
  • 301 Moved Permanently 永久重定向
  • 302 Found 临时重定向

你使用HTTP向服务器发送请求，服务器会返回一个包含301或302状态码的响应头，并把响应头的Location字段中填写上HTTPS的地址，告诉浏览器要重新导航到新地址。 通过重定向的方式将HTTP请求转换为HTTPS请求：

  • 304 Not Modefied 被缓存了
    • 客户端发送了 Get 请求，并被服务器允许，且返回的内容自上次访问没有改变返回 304
    • 强缓存cache-control：max-age=2000；超过2000秒，浏览器像服务器发网络请求，检查If-None-Match:"4f80f-13c-3a1xb12a"的值判断资源是否更新，没有更新则返回304继续使用缓存数据，服务器也不需要返回数据。
  • 400 Bad Request
  • 401 Unauthorized:当请求需要用户验证
  • 403 Forbidden:服务器理解了请求，但是拒绝执行它
  • 404 Not Found: 有的公司返回 404 页面，有的跳转登录页,结合公司业务
  • 405 Method Not Allowed
    • 请求的方法，服务器不允许使用这些方法访问，比如有些服务端禁止使用 PUT DELETE 发送请求
  • 500 Internal Server Error 服务器内部错误
  • 502 Bad Gateway

HTTP有哪些头

根据HTTP发展史来讲： 进入HTTP1.0时代的时候由于浏览器和服务器之间传输的数据类型不仅限于HTML文档，也需要传输，视频，CSS，图片，JavaScript等，所以引入了请求头和响应头。HTTP协议就是浏览器和服务器之间的通信协议。

  • HTTP1.0需要解决的问题？
    • 需要解决请求回来的是什么类型的文件，浏览器才能针对性的作出反应？content-type
    • 数据是经过压缩传输的，所以浏览器需要知道服务器的压缩方法,请求头会有accept-coding:gzip 使用gzip压缩
    • 万维网是全球性的，所以需要知道数据是什么语言传输的,请求头会有accet-language: zh-CN,zh
    • 文件类型很多，文件可能通过不同的编码形式，所以需要知道文件的编码类型，请求头会有accep-Charset: utf-8
    • 请求来源：服务器需要知道是请求从Window还是Mac来的，user-agent
    • Cache机制：减轻服务器压力
    • 状态码：用来浏览器处理错误信息
  • HTTP1.1
    • 改进了TCP连接为长久连接，多个HTTP请求只进行一次TCP连接，在这之前传输的都是小文件，内容也不多，所以发送一次HTTP请求就建立一次TCP连接也不会有太多的消耗。
    • Host：提供服务器的域名地址，支持虚拟机机制，多个域名共用一个IP地址
    • 动态生成的内容的支持：服务器将数据分割成若干数据块，Chunk transfer 机制。content-length
    • Cookie机制，安全机制

image.png image.png

浏览器解析请求头区分是哪些资源：Content-Type

浏览器的网络进程请求回来的数据类型可能是下载类，HTML文件等，那么浏览器是怎么区分他们的？ 答案是请求头里的Content-type，告诉浏览器返回的响应数据是什么类型的。浏览器会根据Content-Type决定如何显示响应体的内容。

Content-Type: text/html就是告诉浏览器是HTML格式。 接下来浏览器会怎么做？

  • 浏览器接收到网络进程响应头数据后，向渲染进程发起消息
  • 渲染进程接收到消息后，会和网络进程建立传输的‘管道’
  • 打不过文档数据传输完成后，渲染进程会返回‘确定提交’的消息给浏览器进程
  • 浏览器进程接收到渲染进程的消息后，会更新浏览器界面的状态，包括安全状态，地址栏的URL，前进后退的历史状态，并更新Web页面 这就是为什么在浏览器地址栏里面输入了一个地址后，之前的页面不会立马消失，而是加载了一会之后再消失。浏览器一个完整的导航流程就走完了，接下来是渲染阶段。

浏览器输入一个url发生了什么？

访问baidu.com

浏览器打开一个tab会开启多个进程，最基础的就是4个进程

  1. 浏览器主进程：负责界面显示，用户交互，子进程管理，同时提供存储功能。
  2. 渲染进程：核心是将网络请求回来的HTML，CSS和JS转换为用户可以交互的网页，排版引擎Blink和JS引擎V8都是运行在该进程中。出于安全考虑，渲染进程是运行在沙箱模式下。
  3. 网络进程：负责网络资源的加载，
  4. GPU进程：实现3D CSS效果
  5. 多个插件的进程：主要负责插件的运行，因为插件容易崩溃，所以需要通过进程来隔离，以保证插件不会给浏览器和页面造成影响
  6. Storage Service进程
  7. 标签页子进程

为什么一个浏览器tab页需要开启多个进程

  • 因为一个浏览器tab至少需要一个主进程，一个网络进程，一个渲染进程，一个GPU进程，共4个。打开的页面有运行插件则还需要一个插件进程。所以浏览器更多的像是一个操作系统。
  • 进程之间相互隔离，共享主进程数据。
  • 一个进程就像是操作系统给程序开辟了一个内存，用来存放代码，运行数据，和一个执行任务的主线程。线程是依附于进程的，如果一个进程里的一个线程出错都会导致整个进程崩溃。如果浏览器使用使用单进程，则一个tab崩溃都会导致整个浏览器崩溃。

先找浏览器缓存

如果本地缓存有，则不会使用网络进程进行数据的请求

  • 浏览器缓存有：DNS缓存和页面资源缓存 因为浏览器的缓存，在发起HTTP请求之前，会先查找浏览器的缓存，是否有资源有的话就结束请求。 为什么第一次访问页面会很慢，第二次会很快就是这个原因。 浏览器会解析http请求头，如果请求头中有cache-control：max-age 2000字段，就会查找本地是否有缓存，如果有则不会进行网络请求。如果超过了2000，服务器
  • 强缓存 强缓存cache-control：max-age=2000；超过2000秒，浏览器像服务器发网络请求，检查If-None-Match:"4f80f-13c-3a1xb12a"的值判断资源是否更新，没有更新则返回304继续使用缓存数据，服务器也不需要返回数据
  • 协商缓存 etag/if-None-Match

DNS域名解析到baidu.com的ip地址：

  • 1.览器客户端看本地hosts文件和缓存中是否有IP地址，有则直接返回给浏览器客户端，2.没有则发送请求给本地域名解析服务器寻找baidu.com的ip地址，浏览器客户端使用递归的方式向本地域名服务器请求baidu.com的IP地址 3.本地域名服务器接着代替浏览器客户端独自用迭代的方式向根域名(.)请求com.顶级域名服务器的IP地址 4.本地域名服务器接着向顶级域名(.com)请求baidu.com.的地址，顶级域名会把baidu.com.的IP地址返回给本地域名服务器。5.本地域名服务器将baidu.com域名的IP地址返回给客户端浏览器。
  • 模拟DNS域名解析的过程：使用nslookup set type=ns .来模拟这个过程
  • 本地dns地址：114.114.114.114（国内114DNS） 8.8.8.8（Google DNS）

CDN就近分发源站的资源

如果配置了CDN，4.本地域名服务器在请求com的域名服务器时，com域名服务器会把CDN的CNAME的IP地址返回给本地域名服务器，CDN的服务器会通过调度系统将就近的CDNIP地址返回给本地域名服务器。本地域名服务器将CDN的IP地址返回给浏览器客户端。浏览器客户端发送TCP请求给就近的CDN IP地址对应的服务器。如果就近的CDN服务器有资源则直接返回给浏览器客户端，没有就会回源请求原站。

请求到了服务器的IP地址，浏览器客户向服务器发送数据包进行TCP连接

  • 互联网中的数据是通过数据包传输的，网络中传输的数据包容易丢失和出错，TCP连接就是为了确保数据传输完整性。
    • IP地址能够将数据包传输到指定的服务器
    • UDP负责把数据包传输到服务器指定的应用
    • TCP的头信息保证了一大块数据传输过程的完整性，因为它具有重传机制和数据包排序的功能，它的连接有三个阶段，建立连接，数据传输，断开连接
      • 建立连接：三次握手发送数据包
      • 数据传输：接收端发送确定信息给发送端，接收端没有发送则表示数据包丢失，发送端触发重传机制
      • 断开连接：四次挥手，双方确认断开连接
  • Chrome有一个机制：同一个域名TCP的并发连接数是6个。超过6个连接，其他连接就会进入排队等待的状态，TCP连接一般使用keep-alive连接方式，一个TCP连接可以发送多个HTTP请求，这样可以减少TCP连接的时间。
  • 重传机制和数据包排序的功能 TCP的头包含源端口号，目标端口号，还提供了用于排序的序列号，以便接收端通过序列号把乱序的数据包重排。如果只传输单个数据包，TCP和UDP的流程差不多，不同的地方在于TCP头部信息保证了一大块数据传输的完整性。TCP连接的过程就是为了保证重传机制和数据包排序的功能。
  • TCP的连接就是为了HTTP的请求。所以HTTP的协议是基于TCP连接之上的。

image.png 发送完一个HTTP请求后，TCP会保持连接，这样可以在同一个连接中发送多个HTTP请求，减少了连接时间。 image.png

浏览器客户端建立TCP连接后，客户端向服务器发送HTTP请求

请求回HTML、JS、图片等资源

  • http和https的区别 浏览器客户端建立TCP连接后，会发送HTTP或者HTTPS请求，一般请求回来的是HTML文件。 就是在应用层和传输层加了一层安全层，确保数据是加密传输，保证了数据传输的安全性。只有拿着对应的钥匙才能查看。

浏览器网络进程将HTTP请求回来请求头和数据转发给浏览器主进程

浏览器主进程发消息给渲染进程，渲染进程和网络进行数据传输管道

浏览器主进程在接收到渲染进程提交数据传输完毕的消息后

  • 会更新浏览器界面状态：安全状态（HTTPS证书等）、地址栏的URL、前进后退的历史状态、并更新Web的页面

渲染进程提交数据传输完毕的消息后进行页面的渲染

我们编写好的HTML、CSS、JavaScript进过浏览器的就会显示出漂亮的页面。这些文件经过浏览器的渲染模块后被转化为屏幕的像素点。由于渲染模块过于复杂，所以渲染模块会被划分为多个子模块，输入的HTML进过这些子模块后最后输出像素，这个流程就是渲染流水线。 渲染流水线是：将HTML解析为浏览器可识别的DOM树，将DOM树的每个节点附上计算好的CSS属性值，计算带有CSS的DOM节点的位置和大小生成布局树。

页面生成完毕

浏览器的渲染流水线总结：每一步都有输入输出

  1. 渲染进程将HTML内容转化为可读懂的DOM 树
  2. 渲染引擎将CSS样式表转化为可读懂的styleSheets，计算出DOM树节点的样式
  3. 创建布局树，根据盒子模型计算出DOM树节点的布局信息，存放在computed
  4. 对布局树进行分层，创建图层树
  5. 为每个图层生成绘制列表，并将其提交给渲染进程的合成线程
  6. 合成线程将图层分成图块，并在栅栏化线程池中将图块转化为位图
  7. 合成线程发送绘制图块命令DrawQuad给浏览器进程
  8. 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

页面生成完毕后，渲染进程给浏览器主进程发消息，浏览器主进程接收到消息后，会停止加载中的图标

总结：

  • 服务器可以通过响应头控制浏览器的行为，如跳转，网络数据类型的判断
  • Chrome默认采用一个标签对应一个渲染进程，到那会死如果两个页面是同一个站点，这两个标签就会使用同一个渲染进程
  • 浏览器的导航过程涵盖了从用户发起请求，到渲染进程接收文档的所有阶段

跨域

  1. 修改浏览器客户端的跨域策略，也就是浏览器的安全模式
  2. jsonp 怎么做的，原理是什么
  • 只能发送get请求
  • 前端通过方法名称传递给后端，后端调用方法
  • 需要和后端约定
  1. cors，后端在请求头配置cors策略；nginx
  2. nginx反向代理，或webpack

浏览器如何保存登录态

cookie

  1. 用户输入用户名和密码请求接口
  2. 服务器在响应头set-Cookie中返回uid=123
  3. 浏览器解析set-Cookie存入cookie中，下次请求在请求头Cookie中加上，服务端判断登陆状态

浏览器会在cookie中种入tokon，下次请求头带上cookie信息

sessionid

token

cookie、sessionStorage、LocalStorage区别

储存时间，大小，HTTP请求有关

avatar
文章
阅读
粉丝