前端面试 拓展题(杂乱一些)

Sparkle丶
230 阅读29分钟

1、 Vue与Angular以及React的区别

▍Angular

框架比较成熟完整，过于庞大，上手难；

指令以ng-xxx开头； 由谷歌开发和维护；

版本1比较适合PC端开发，版本2在往移动端靠；

不支持低版本浏览器； 内置指令和自定义指令；

内置过滤器和自定义过滤器； 支持双向数据绑定；

▍Vue

它是一个轻量级框架，其核心库只关注视图层，简单小巧、易学易上手；

指令以v-xxx开头； 个人维护项目； 适合于移动端开发； 不支持低版本浏览器；

内置指令和自定义指令； 内置过滤器和自定义过滤器； 支持双向数据绑定；

使用DOM模板。中心思想：一切都是组件，组件实例之间可以嵌套； 核心库不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载； 基于依赖追踪的观察系统，并且异步队列更新。

▍React

依赖虚拟DOM； 采用特殊的JSX语法； 中心思想：一切都是组件，组件实例之间可以嵌套； 核心库不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。

3、vue2对比vue3

最大的区别就是： Vue2使用 选项类型API（Options API） 对比Vue3 合成型API（Composition API）

双向数据绑定原理发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：

可直接监听数组类型的数据变

监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升

可直接实现对象属性的新增/删除

默认使用懒加载

在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。

3.0新加入了TypeScript以及PWA支持

生命周期有了一定的区别

Vue2--------------vue3

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。

activated -> onActivated 组件卸载完成后执行的函数

deactivated -> onDeactivated

4、git命令

  1. git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)

  2. git status 查看文件状态

  3. git add 文件列表 追踪文件

  4. git commit -m 提交信息 向仓库中提交代码

  5. git log 查看提交记录

1.分支明细

（1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。

（2）开发分支（develop）：作为开发的分支，基于 master 分支创建。

（3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建

2.分支命令

（1）git branch 查看分支

（2）git branch 分支名称 创建分支

（3）git checkout 分支名称 切换分支

（4）git merge 来源分支 合并分支 (备注：必须在master分支上才能合并develop分支)

（5）git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除）

3.暂时保存更改

（1）存储临时改动：git stash

（2）恢复改动：git stash pop

更加详细请看git常用命令

git怎么解决多人冲突？：

是当前修改是左箭头方向，传入的是右箭头的方向，中间用等于号分割，等号上边是当前修改，下边是传入的修改。

两人同时提交可能会出现冲突，解决办法是手动修改冲突

5、前端有哪些页面优化方法?

  • 减少 HTTP请求数
  • 从设计实现层面简化页面
  • 合理设置 HTTP缓存
  • 资源合并与压缩
  • 合并 CSS图片，减少请求数的又一个好办法。
  • 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
  • 多图片网页使用图片懒加载。
  • 在js中尽量减少闭包的使用
  • 尽量合并css和js文件
  • 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
  • 减少对DOM的操作
  • 在JS中避免“嵌套循环”和 “死循环”
  • 尽可能使用事件委托（事件代理）来处理事件绑定的操作
  • 浏览器缓存
  • 防抖、节流
  • 资源懒加载、预加载
  • 开启Nginx gzip压缩

三个方面来说明前端性能优化

一： webapck优化与开启gzip压缩

1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件 其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'

2.文件采用按需加载等等

3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句： accept-encoding:gzip

4.图片优化，采用svg图片或者字体图标

5.浏览器缓存机制，它又分为强缓存和协商缓存

二：本地存储——从 Cookie 到 Web Storage、IndexedDB

说明一下SessionStorage和localStorage还有cookie的区别和优缺点 (最后一条)

三：代码优化

1.事件代理

2.事件的节流和防抖

3.页面的回流和重绘

4.EventLoop事件循环机制

5.代码优化等等

node，网络

1、什么是axios

基于promise的http库，可以用在浏览器和node.js，支持promiseAPI，客户端支持防御xsrf

口喷axios封装

首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。

http.js文件用来封装我们的axios basUrl Tiemout，

api.js用来统一管理我们的接口url,

在request.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。

接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

2、Node是什么

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。

浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境

Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境

3、模块化的意义

一句话：降低软件的复杂性。使其可控，可维护，可扩展。

一个功能就是一个模板，多个模板可以组成完整应用，抽离一个模板不会影响其他功能的运行

4、网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。

客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。

服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

5、为什么要用node

简单强大，轻量可扩展。

简单体现在node使用的是javascript,json来进行编码，强大体现在非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问，轻量体现在node本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

6、node中的异步和同步怎么理解?

node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的．

7、什么是npm？Npm的使用场景？

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。

使用场景：

a. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

b. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

c. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

8、get与post请求有什么区别

get是从服务器上获取数据，post是向服务器传送数据。

POST比GET安全，因为数据在地址栏上不可见。

get方式提交的数据最多只能有1024字节，而post则没有此限制。

GET使用URL或Cookie传参。而POST将数据放在request BODY中。

GET与POST都有自己的语义，不能随便混用。

JSONP原理

jsonp在前端具体来说就是创建一个script，设置类型为javascript，拼接一个callback=callback的参数，添加一个window.callback的全局回调。服务端收到请求后，手动获取callback的值并将要响应的数据拼接在callback的调用中:res.send(callback+'('+ data +')')

web安全及防护

1.XSS攻击原理(跨站脚本攻击)：

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

XSS避免方式：

url参数使用encodeURIComponent方法转义

尽量不是有InnerHtml插入HTML内容

使用特殊符号、标签转义符。

2.CSRF攻击（跨站请求伪造）：

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

利用token前后端验证每一次请求进行防御：

访问页面就生成token，保存到session，并且前端将token放进header或者追加到请求地址最后面。后端拿到header或者请求中的token后比对session与herder或者请求中的token是否一致，一致测是同一次请求。有效的防止了，攻击者不从规定页面请求接口进行篡改利用。

CSRF避免方式：

添加验证码

使用token

服务端给用户生成一个token，加密后传递给用户

用户在提交请求时，需要携带这个token

服务端验证token是否正确

3.SQL注入攻击

就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。

解决：表单输入时通过正则表达式将一些特殊字符进行转换

4、DDoS攻击

DDoS又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。

解决：

限制单IP请求频率。

防火墙等防护设置禁止ICMP包等

检查特权端口的开放

使用基于token的登录流程

  1. 客户端使用用户名跟密码请求登录

  2. 服务端收到请求，去验证用户名与密码

  3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

  4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

  5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

  6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

状态码

常见http状态码分类：

100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求，但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
400Bad Request客户端请求的语法错误，服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留，将来使用
403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
500Internal Server Error服务器内部错误，无法完成请求
501Not Implemented服务器不支持请求的功能，无法完成请求
502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的
1xx Informational（信息状态码）      接受请求正在处理
2xx Success（成功状态码）            请求正常处理完毕
3xx Redirection（重定向状态码）      需要附加操作已完成请求
4xx Client Error（客户端错误状态码）  服务器无法处理请求
5xx Server Error（服务器错误状态码）  服务器处理请求出错

浏览器从输入url到渲染页面，发生了什么？

1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

3、DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。

4、获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。

5、TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。

6、HTTPS握手： 如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。

7、返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

8、页面渲染： 浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。

9、TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

TCP UDP 区别（高频）

1.TCP向上层提供面向连接的可靠服务 ，UDP向上层提供无连接不可靠服务。 2.虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为 3.对数据准确性要求高，速度可以相对较慢的，可以选用TCP 区别 UDP TCP 是否连接 无连接 面向连接 是否可靠 不可靠传输，不使用流量控制和拥塞控制 可靠传输，使用流量控制和拥塞控制 连接对象个数 支持一对一，一对多，多对一和多对多交互通信 只能是一对一通信 传输方式 面向报文 面向字节流 首部开销 首部开销小，仅8字节 首部最小20字节，最大60字节 适用场景 适用于实时应用（IP电话、视频会议、直播等） 适用于要求可靠传输的应用，例如文件传输

Http和Https区别（高频）

1.HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头

2.HTTP 是不安全的，而 HTTPS 是安全的

3.HTTP 标准端口是80 ，而 HTTPS 的标准端口是443

4.在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层

5.HTTP 无法加密，而HTTPS 对传输的数据进行加密，证的网络协议，安全性高于HTTP协议。

6.HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书，一般免费证书少，因而需要一定费用。

GET和POST区别（高频）

1.GET在浏览器回退不会再次请求，POST会再次提交请求

2.GET请求会被浏览器主动缓存，POST不会，要手动设置

3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会

4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制

5.GET参数通过URL传递，POST放在Request body中

6.GET参数暴露在地址栏不安全，POST放在报文内部更安全

7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作

8.GET产生一个TCP数据包；POST产生两个TCP数据包

Ge和post的选择：

1.私密性的信息请求使用post（如注册、登陆）。

2.查询信息使用get。

Cookie和Session有什么区别？

1.cookie数据存放在客户端上（用户的浏览器上），session数据存放在服务器上；

2.cookie不是很安全，cookie可以伪造，session相对安全一些，考虑到安全性，应当使用session；
所以可以得出如果存放的数据是很重要的，需要注意安全问题的，比如用户登录信息，那需要存放在session里。其他不是很重要的信息，则可以存放在cookie里。

3.session会服务器上保存一段时间，这个会产生一个问题——当用户访问增多，会占用你服务器的资源，从而影响性能。如果考虑到减轻服务器压力，需要考虑性能方面，那应当使用cookie；

4.单个cookie在客户端的限制是4KB，每个站点在客户端存放的cookie不能超过4KB。

三次握手和四次挥手(高频)（之后再补充一次）

TCP三次握手：

第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认

第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即syn+ACK包

第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手

为什么握手要三次？

为了确保双方的收发功能都是正常的。

四次挥手：

第一次：浏览器发送完数据后，发送fin请求断开连接

第二次：服务器发送ack到客户端，确认客户端的断开请求

第三次：服务器请求断开fin的请求

第四次：客户端确认服务器的断开ack

http1.0、http1.1、http2.0的区别

一、HTTP1.0 HTTP 1.1主要区别

1.1 长链接

HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。

HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的,有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用个长连接来发多个请求。

1.2 节约带宽

HTTP 1.1支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接受到100，才开始把请求body发送到服务器。

这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。

另外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可。这是支持文件断点续传的基础\

1.3HOST域

现在可以web server例如tomat，设置虚拟站点是非常常见的，也即是说，web server上的多个虚拟站点可以共享同一个ip和端口。

HTTP1.0是没有host域的，HTTP1.1才支持这个参数。

二、 HTTP 1.1、HTTP2.0主要区别

2.1 多路复用

HTTP2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。 当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。 TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。

2.2  数据压缩

HTTP1.1不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。

2.3 服务器推送

当我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。

服务器端推送的这些资源其实存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。

服务端推送过来的资源，会统一放在一个网络与http缓存之间的一个地方，在这里可以理解为“本地”。当客户端把index.html解析完以后，会向本地请求这个资源。由于资源已经本地化，所以这个请求的速度非常快，这也是服务端推送性能优势的体现之一。

http如何实现缓存

强缓存==>Expires(过期时间)/Cache-Control(no-cache)(优先级高) 协商缓存 ==>Last-Modified/Etag(优先级高)Etag适用于经常改变的小文件 Last-Modefied适用于不怎么经常改变的大文件

强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

能不能说一说浏览器的本地存储？各自优劣如何？

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。

共同点: 都是保存在浏览器端、且同源的

不同点：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

存储大小限制也不同，

cookie数据不能超过4K，sessionStorage和localStorage可以达到5M

sessionStorage：仅在当前浏览器窗口关闭之前有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

作用域不同

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在

cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

TCP的拥塞控制（慢启动与快恢复）？

www.cnblogs.com/losbyday/p/…

DNS的查询过程？

www.cnblogs.com/losbyday/p/…

avatar
文章
阅读
粉丝