面试-浏览器HTTP协议相关

Charlotte412
271 阅读18分钟

1.从输入URL到呈现页面过程

  1. 浏览器解析URL，区分协议，host地址，路径path。
  2. 接着DNS域名解析，用于将用户提供的主机名解析为ip地址。
  3. 建立TCP/IP连接，这里涉及到TCP三次握手：客户端发送一个syn报文，设置发送序号为X，客户端进入SYN_SENT状态，等待服务器回应。然后服务端收到syn报文后，发送syn+ack报文并发送序号Y,确认序号X+1给客户端。最后，客户端收到服务器的syn+ack包，向服务器发送确认包ack(ack=Y+1），发送完毕，完成三次握手。
  4. 进行http报文请求与响应
  5. 浏览器解析文档资源并进行渲染：先将文本文档（html、SVG、XHTML）解析生成DOM tree，CSS解析生成CSSOM tree(css规则树)，执行js脚本(js操作DOM API和CSSOM API)生成DOM tree和CSSOM tree。然后浏览器将DOM tree和CSSOM tree合并成Render tree,开始渲染页面。

2.垃圾回收机制

基本概念

JS具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。原理是找出那些不再继续使用的变量，然后释放其占用的内存。垃圾收集器会按照固定的时间间隔，周期性执行这一操作。

垃圾收集策略：==标记清除==和==引用计数==

3.重绘与回流

回流(reflow):当浏览器中的部分或全部元素的尺寸、位置、结构或某属性发生变化时，浏览器重新渲染部分或全部文档的过程称为回流。

导致回流的操作：

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小等等）
  • 元素字体大小变化
  • 添加或者删除可见的DOM元素
  • 激活CSS伪类（例如：:hover）
  • 查询某些属性或调用某些方法

一些常用且会导致回流的属性和方法：

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

重绘(repaint)：当页面元素样式改变并不影响它在文档流中的位置时(color、background-color、visibility等)，浏览器会将新的样式赋予元素并重新绘制它，称为重绘。

4.http协议

http是超文本传输协议，通俗来讲，HTTP就是在计算机之间传输文字、图片、音频、视频等超文本数据的约定规范。HTTP一般是明文传输，很容易被攻击者窃取重要信息。鉴于此，HTTPS应运而生。

HTTP协议主要有三个版本HTTP1.0、HTTP1.1、HTTP/2。

  1. HTTP1.0和HTTP1.1最主要的区别就是==HTTP1.1默认是持久化连接==。HTTP1.0默认是短连接，每次与服务器交互，都需要新开一个连接。HTTP协议是基于TCP的，每次连接都需要经过三次握手，四次挥手。会消耗非常多的资源。默认持久化连接可以建立一次连接，多次请求均使用这个连接完成（如果阻塞，还是会新开TCP连接）。
  2. HTTP 1.1增加host字段
  3. HTTP 1.1中引入了Chunked transfer-coding，范围请求，实现断点续传(实际上就是利用HTTP消息头使用分块传输编码，将实体主体分块传输)
  4. HTTP 1.1管线化(pipelining)理论，客户端可以同时发出多个HTTP请求，而不用一个个等待响应之后再请求(只是理论，默认是关闭的)。HTTP Pipelining其实是把多个HTTP请求放到一个TCP连接中一一发送，而在发送过程中不需要等待服务器对前一个请求的响应；只不过，==客户端还是要按照发送请求的顺序来接收响应==！
  1. HTTP2解决了阻塞问题，==多路复用==，允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息
  2. HTTP2所有性能增强的核心在于新的==二进制分帧层==(不再以文本格式来传输了)，它定义了如何封装http消息并在客户端与服务器之间传输。
  3. HTTP2连接上传输的每个帧都关联到一个“流”。流是一个独立的，双向的帧序列可以通过一个HTTP2的连接在服务端与客户端之间不断的交换数据。
  4. HTTP2还有其他的重要改动，头部压缩、服务器推送、针对传输中的流进行控制、流优先级（Stream Priority）它被用来告诉对端哪个流更重要

5.https协议

（1）. 为什么使用https协议？

http协议本身是明文传输，没有经过任何安全处理。在传输的过程中容易被中间者(网络节点，例如：wifi热点、路由器、缓存服务器等)劫持、篡改、冒充等风险。https协议内容加密、身份认证、数据完整（防止内容篡改）

（2）. 什么是https?

HTTPS与HTTP最大的不同点在于HTTPS是以安全为目标的HTTP通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS在HTTP的基础上增加了SSL层。

（3）. https原理

  1. 客户端发送一个https请求,服务器会用CA证书进行处理（一套数字证书），其实是一对公钥和私钥。返回公钥给客户端。
  2. 客户端用TLS解析证书，验证公钥证书的有效性。如果发现异常，则会弹出一个警告框。没有问题就生成一个随机数，然后用证书加密。发送给服务器。
  3. 服务器收到请求，用私钥解密得到随机数，然后用随机数对响应数据加密，发送给客户端。
  4. 最后客户端收到响应数据后，用之前生成密钥解密服务器返回的信息，得到真正的响应内容。

6.HTTP2

见 4.http协议

7.HTTP状态码

  • 2XX 成功
  1. 200 OK，表示从客户端发来的请求在服务器端被正确处理
  2. 204 No content，表示请求成功，但响应报文不含实体的主体部分
  3. 206 Partial Content，进行范围请求
  • 3XX 重定向
  1. 301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
  2. 302 found，临时性重定向，表示资源临时被分配了新的 URL
  3. 303 see other，表示由于请求对应的资源存在着另一个 URI，应使用GET方法定向获取请求的资源。
  4. 304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
  5. 307 temporary redirect，临时重定向，和302含义相同
  • 4XX 客户端错误
  1. 400 bad request，请求报文存在语法错误
  2. 401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
  3. 403 forbidden，表示对请求资源的访问被服务器拒绝
  4. 404 not found，表示在服务器上没有找到请求的资源
  • 5XX 服务器错误
  1. 500 internal sever error，表示服务器端在执行请求时发生了错误
  2. 503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

8.强缓存、协商缓存、CDN缓存

强缓存

强缓存就是浏览器根据http response header中的信息(Expires、Cache-Control)判断是否应用强缓存，若使用则从浏览器缓存中获取资源。

  • Expires是http1.0的规范，以绝对时间设置值（Expires:Mon,18 Oct 2066 23:59:59 GMT），缓存失效时间
  • Cache-Control是http1.1的规范，max-age采用相对时间，例如Cache-Control:max-age=3600，代表着资源的有效期是 3600 秒。除了max-age还有其他设置值，no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。no-store：禁止使用缓存，每一次都要重新请求数据。public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。

协商缓存

协商缓存就是当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。

  • Last-Modified（值为资源最后更新时间，随服务器response返回）
  • If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）
  • ETag（表示资源内容的唯一标识，随服务器response返回）
  • If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）

CDN缓存

CDN全称Content Delivery Network,即内容分发网络。其目的是通过现有的网络增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近获取所需的资源，提高用户的访问网站的速度。相关技术原理：

  1. 负载均衡技术：就是将网络流量尽可能的均匀分配到几个能完成相同任务的服务器或网络节点上，由此避免部分网络节点过载。提高网络流量和网络整体性能。在cdn中，负载均衡分为服务器负载均衡和服务器整体负载均衡。服务器负载均衡是指能够在性能不同的服务器之间进行任务分配，既能保证性能差的服务器不成为系统的瓶颈，又能保证性能高的服务器的资源得到充分利用。服务器整体负载均衡根据地理位置分配内容和服务，通过使用多站点内容和服务来提高容错性和可用性，防止因本地网或区域网络中断、断电或自然灾害而导致的故障
  2. 动态内容分发与复制技术：利用内容分发与复制技术，将占网站主体的大部分静态网页、图像和流媒体数据分发复制到各地的加速节点上。
  3. 缓存技术：Web缓存服务通过几种方式来改善用户的响应时间，如代理缓存服务、透明代理缓存服务、使用重定向服务的透明代理缓存服务等。通过Web缓存服务，用户访问网页时可以将广域网的流量降至最低。

9.三次握手与四次挥手

为了保障每个连接提供有保证和有序的字节传递,使用了Sequence Number (序列号)和 Acknowledgment Number (确认序列号)，即seq和ack。标志位SYN - 创建一个连接、FIN - 终结一个连接、ACK - 确认接收到的数据

三次握手

  1. 客户端(处于SYN_SEND状态)SYN=1,seq=x发送至服务端(处于LISTEN状态)
  2. 服务端(处于SYN_REVD状态)SYN=1,ACK=1,seq=y,ack=x+1发送至客户端(处于SYN_SEND状态)
  3. 客户端(处于ESTABLISHED状态)ACK=1,seq=x+1,ack=y+1发送至服务端(处于ESTABLISHED状态)

四次挥手

  1. 客户端(处于FIN_WAIT1状态)FIN=1,seq=x发送至服务端
  2. 服务端(处于CLOSE_WAIT状态)ACK=1,seq=y,ack=x+1发送至客户端(处于FIN_WAIT2状态)
  3. 服务端(处于LAST_ACK状态)FIN=1,ACK=1,seq=w,ack=x+1发送至客户端(处于FIN_WAIT2状态)
  4. 客户端(处于TIME_WAIT状态)ACK=1,seq=x+1,ack=w+1发送至服务端(处于CLOSED状态)
  5. 经过时间等待计时器设置的时间2MSL后，客户端才进入CLOSED状态(用来重发可能丢失的ACK报文)

面试官，不要再问我三次握手和四次挥手

10.get、post请求

  1. get请求参数数据在URL上是可见的，post请求参数不显示在url上的。
  2. get请求长度是有限制的，POST请求无长度限制（由浏览器和Web服务器决定的）
  3. post请求相对于get请求更安全（因为请求参数不在链接上）

11.跨域（JSONP/CORS）

同源策略：协议、域名、端口号一致就是同源，非同源域下的脚本不能访问另一个域下的资源，是浏览器一种安全策略。

页面与iframe或是页面与页面之间的跨域方法：

  1. document.domain,将document.domain设置成相同的域，只适用于不同子域的框架间的交互且document.domain设置成自身或更高一级的父域，且主域必须相同。
// 比如有一个页面，它的地址是http://www.damonare.cn/a.html，在这个页面里面有一个iframe，它的src是http://damonare.cn/b.html

<iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'damonare.cn';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>
  1. HTML5的postMessage方法跨域,postMessage使用方法，otherWindow.postMessage(message, targetOrigin)，otherWindow是目标窗口（要给哪个window发送消息，iframe的contentWindow属性、执行window.open返回的窗口对象），message是要发送的消息（string或object）,targetOrigin是限定消息接收范围。
//damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面

//A页面，使用postMessage向B页面发送消息
window.onload = function() {
    let targetOrigin = "https://www.google.com"; 
    let otherWindow = window.open(targetOrigin);  
    otherWindow.postMessage('hello world!', targetOrigin);  
};

//B页面，使用message事件接收消息
let onmessage = function (event) {  
  let data = event.data;// 从其他window中传递的消息 
  let origin = event.origin;// 调用postMessage时消息发送方的窗口的origin
  let source = event.source;// 对发送消息的窗口对象的引用
  if(origin === "https://www.baidu.com"){  
    console.log(data);//hello world!  
  }  
};  
window.addEventListener('message', onmessage, false);

向服务器请求数据的跨域方法：

  1. jsonp,其原理是通过script标签请求资源没有同源策略的限制，可以实现跨域请求。使用jsonp发送的请求后要带上callback函数，服务器端返回的数据将作为此函数的参数，返给浏览器，script标签收到响应立即执行此函数，拿到服务器的响应数据。代码实现见面试题-手写代码篇。
  2. CORS(跨域资源共享)，其原理使用自定义的HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。浏览器发送请求时，添加Origin头部信息（包含请求页面的源信息，协议、域名和端 口），服务端设置repsonse header中的Access-Control-Allow-Origin为可以访问的源信息。

如何携带cookie进行跨域请求

CORS实现跨域请求，且客户端请求时添加withCredentials=true(是XHR对象的属性)，服务端设置Access-Control-Allow-Credentials=true的响应头信息。

12.浏览器存储（cookie、localStorage、sessionStorage）

  • Cookie

Cookie的作用并非是本地存储，而是维持状态。因为http协议是无状态的，http协议自身不对请求和响应之间的通信状态进行保存。就是说上一次的请求做了什么，服务器是不知道的，如果下一次的请求需要之前的数据，还需要加入到请求体中，再发送请求。cookie主要是为了解决这个问题。cookie存储的数据每条不超过4k,同一个域名下存储条数也是有限制的。

Cookie的生成方式：

  1. 服务端在response header中添加set-cookie
  2. 客户端可以使用document.cookie进行读写操作，写操作每次只能存储一条，读操作读取全部cookie。
  • localStorage

localStorage保存的数据长期存在，每个域名下存储空间大概在5M左右，当存储内存满了，再进行存储操作会抛出异常。

localStorage的操作：

localStorage.setItem(key,value); //设置操作
localStorage.getItem(key); //读取操作
localStorage.removeItem(key); //删除操作
localStorage.clear(); //移除所有
  • sessionStorage

sessionStorage是会话级别的存储，当窗口关闭，数据被清除。存储大小与localStorage相似。API操作与localStorage相同。

cookie、localStorage、sessionStorage之间区别：

  • 相同点：都是保存在浏览器端，且都遵循同源策略。
  • 不同点：存储的数据的生命周期与作用域不同。localStorage只要是同源都可以操作数据，sessionStorage必须是同源且在同一个窗口内才可以共享数据。localStorage存储的数据不会过期，sessionStorage存储的数据随着会话的结束而被释放。
  • IndexedDB

IndexedDB 是一个运行在浏览器上的非关系型数据库，没有存储上限的（一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。用于客户端存储大量结构化数据。

IndexedDB的特点：

  1. 异步：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作。与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现
  2. 支持事务：一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况
  3. 同源限制：受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库
  4. 储存空间大：IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限
  5. 支持二进制储存: IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

IndexedDB的操作(不是完整版操作)：

let newIndexDb = null;
let request=window.indexedDB.open('testDB');//建立打开IndexedDB
//请求失败的回调函数
request.onerror=function (e){
    console.log('open indexdb error')
}
//请求成功的回调函数
request.onsuccess=function (e){
    newIndexDb = e.target.result;
    console.log(newIndexDb)//IDBDatabase对象,就是IndexedDB对象
}
newIndexDb.close(); //关闭IndexedDB
window.indexedDB.deleteDatabase(newIndexDb); //删除IndexedDB

13.网络安全

https见上文5.https协议。

XSS攻击

XSS，即Cross Site Script,跨站脚本攻击。攻击者在网站上注入恶意的客户端代码（ JavaScript），通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

  • 反射型: 攻击者诱使用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站
  • 存储型（持久型）: 把用户输入的数据"存储"在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意JavaScript代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码
  • 基于DOM:过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击

防御XSS攻击:

  1. HttpOnly 防止劫取 Cookie
  2. 用户的输入检查,一般是检查用户输入的数据中是否包含<，>等特殊字符，如果存在，则对特殊字符进行过滤或编码，这种方式也称为 XSS Filter
  3. 服务端的输出检查,除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击

CSRF攻击

CSRF，即Cross Site Request Forgery,跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。这种攻击无法从返回的结果中得到任何东西，他所能做的就是给服务器发送请求，以执行请求中所描述的命令，在服务器端直接改变数据的值，而非窃取服务器中的数据

防御CSRF攻击:

  1. 验证码：一些操作加上验证码认证，会强制用户必须与应用进行交互，才能完成最终请求
  2. Referer Check：在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。通过 Referer Check，可以检查请求是否来自合法的"源"。
  3. Token 验证：在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求

14.http预请求(options)

w3c规范要求，对复杂请求，浏览器必须先使用options发起一个预检请求，从而获知服务器是否允许该跨域请求，服务器确认以后才能发起实际的HTTP请求，否则停止第二次正式请求。

OPTIONS请求方法的主要用途有两个：

  1. 获取服务器支持的HTTP请求方法
  2. 用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个options请求头，用以判断实际发送的请求是否安全

Websocket(有精力看一下)

WebWorker(有精力看一下)

avatar
文章
阅读
粉丝