前端面经-总结篇 http

下面是我在过去12天内，学习关于http的前端面经汇总。现在只是一些很基础的知识，后续还会补充，算是对之前学习的一个总结。

前端面经整理-CSDN博客 我主要参考的题目来源在这里。

本地存储

localstorage（本地存储）和sessionstorage（会话存储）不会自动把数据发送给服务器。cookie会在请求时候携带数据给服务器。

• localstorage本地存信息，浏览器关闭，信息不丢失，长期存储信息。5MB
• sessionstorage仅在当前会话下有效，页面关闭或浏览器关闭，信息丢失，如果两个页面存在信息，可以共享sessionstorage。5MB
• cookie网站为了标识用户信息而存储在本地的数据，在同源的http请求中携带，设置有过期时间。5K

session

session存储在服务器端，用于跟踪用户的会话状态。

过程：用户访问网站的时候，服务器为用户创建一个唯一session，并分配一个session ID ，用户存储在通过cookie存储在本地，以便后续请求可以识别出用户的会话。session是基于cookie的。

• session对比cookie

session存储在服务器。保存的是对象。如果访问多，占用服务器性能。可以访问同一网站的不同路径。用于记录状态时标记具体用户，浏览器关闭，本次session消失。

cookie存储在客户端。保存字符串。保存在本地不占用服务器性能。如果cookie设置了路径参数，同一网站的不同路径的cookie相互隔离，但是有安全问题。用于保存用户的一些信息，设置有过期时间。

token

token是服务器发送给浏览器的唯一标识，用于验证用户身份和权限。每次请求都会携带token。

过程：用户第一次登录，服务器给用户下发唯一token，用户存储在本地，之后每次请求都携带token，浏览器验证token的有效性，有效返回给服务器资源，无效拒绝访问。

作用：身份验证。信息交换（浏览器和服务器传递信息，信息嵌入到token中，通过加密和签名确保安全性）

类型：

JWT是一个紧凑且自包含的JSON对象。用户身份验证。

包含三部分。头部（令牌类型（JWT)和签名算法），负载（实体和其他数据声明，如发行人（jwt的发行人），过期时间），签名（使用密钥对头部和负载通过制定算法生成签名，防止信息被篡改。

• cookie对比token

都是第一次登录时候，服务器发送给客户端的，为无状态的HTTP提供持久性机制。token安全性更高

什么是cookie隔离

将不同网站的cookie存储在不同的存储空间，防止相互干扰。同源的http请求会携带cookie（不管需不需要），cookie隔离就是将不同网站的cookie隔离开，防止互相干扰。

好处：避免cookie冲突，提高安全性（防止跨站脚本攻击），避免跟踪。

隔离方法：我们可以使用httpOnly（防止客户端JavaScript访问），使用不同的子域名和域名 （跨域访问资源，使用不同的子域名和路径来存储cookie。本地存储代替cookie存储不需要跨域的资源。

应用场景：

• 静态资源部署

不使用cookie隔离：静态资源都放在主域名下面，请求静态资源的时候就会把cookie传给服务器，浪费流量

使用cookie隔离：把静态资源防止与主域名不同的子域名下面。cookie有域的限制，所以请求静态资源不会写的主域名下面的cookie，减小了请求头大小，从而降低了请求时间。

• 多应用共存

同一网站不同应用之间cookie隔离和防止隐私泄露。

Cookie有什么字段

Name：cookie的唯一标识符

Value：与Name对应，存储Cookie的信息

Domain：可以访问cookie的域名 （设置顶级域名下的不同子域名之间共享cookie）

Path：可以访问cookie的路径（设置域名下不同路径可以访问)

Expires/Max-Age：超时时间

Size：cookie大小

HttpOnly：cookie只能通过HTTP，JavaScript不能访问

Secure：cookie只能通过HTTPS访问

SameSite：控制跨站点请求是否发送cookie。Strict（同站）Lax（某些跨站可以）None（都可以）

登陆后，如何得知已登录？

前端把服务器返回的认证信息（cookie/token/sessionID）等存储在本地（localstorage，sessionstorage，cookie），表明已经登录，并设置超时时间。

前端性能优化的方法

浏览器渲染机制，减少使用重绘重排。

事件处理程序，使用事件委托。

网络请求优化，善用缓存，不重复加载相同资源，减少HTTP请求。

静态资源使用内容分发网络

CDN

内容分发网络是一种分布式网络，通过在网络各处部署节点服务器加快用户访问应用的速度。

特点：

• 分布式部署，CDN会在指定范围内设置多个节点服务器，自动选择离用户最近的节点提供资源，减少网络延迟，提高访问速度。
• 负载均衡，根据网络流量和服务器负载，智能将用户请求分配到合适的节点，避免单点过载，提高网络的可靠性和稳定性。
• 缓存机制，CDN使用缓存机制存储和提供资源。当用户首次请求资源时，CDN会把资源缓存到离用户最近的节点服务器，当用户再次请求相同资源时，CDN直接从缓存中读取，不需要再次请求服务器，提高内容访问速度。
• 成本优化，减少对源服务器带宽和存储要求，降低运营成本。

DNS

DNS的作用就是域名转化为对应的IP地址。一个域名往往对应多个DNS地址。

流程：用户在浏览器输入域名，浏览器先在本地DNS服务器的缓存中查找，查询根DNS服务器，查询顶级域DNS服务器，查询顶级域DNS服务器

浏览器输入url后发生了什么

• DNS解析：域名解析成IP地址

• TCP连接：三次握手

• 发生HTTP请求

• 服务器处理请求并返回响应

• 浏览器接受响应并渲染页面

  • 解析HTML，生成DOM树。树状结构，包含网页的结构和内容。
  • 解析CSS，生成CSSOM树。样式信息。
  • DOM树和CSSOM树合并结合，生存渲染树。包含可见的DOM节点及样式信息。
  • 布局。根据渲染树，浏览器计算每个节点的几何属性，大小位置等。
  • 绘制。将布局好的节点绘制到屏幕上。浏览器可能将页面分成多个层（固定元素，动画元素），最后合并不同层。
  • 在构建CSSOM和DOM的时候，JavaScript会介入。遇到script时候，DOM会暂停，直至脚本执行完成。JavaScript可以修改和DOM和CSSOM。JavaScript执行会阻塞页面渲染，实际上我们使用async或defer属性，异步加载，避免阻塞页面渲染。

  性能优化：减少重绘重排（减少使用引起重绘的css属性），优化资源加载（懒加载和异步加载延迟非关键资源加载），使用浏览器缓存和CDN，减少DOM节点数量（长列表使用虚拟化技术）

• 断开连接：四次挥手

css加载会造成阻塞吗？

• CSS不会阻塞DOM解析，但会阻塞DOM渲染。

DOM和CSSOM并行建构，所以CSS加载不会阻塞DOM解析。但是渲染树 (Render Tree）依赖于CSSOM和DOM，需要等两者加载完毕完成响应构建，才开始渲染，所以CSS阻塞DOM渲染。

• CSS不会阻塞js文件下载，但会阻塞js执行。

js文件和css文件下载是并行的，所以css不会阻塞js文件下载。css文件有时候很大，js需要等待，为什么js执行要等css，因为如果js是获取元素样式，那么就需要依赖css，样式表在js执行执行前加载完毕，所以css会阻塞js执行。

JavaScript可以操作修改css和dom，如果JavaScript修改元素的同时渲染页面，那么渲染前后元素数据可能不一致，所以浏览器设置GUI渲染线程和JavaScript互斥。

为什么js会阻塞页面加载？

过程：js加载或执行都会阻塞DOM树，只有js执行完，DOM树才会继续解析，没有DOM树，浏览器就无法渲染。当js很大时候，可以看的页面长时间空白。

原因：js会操作修改节点，会影响DOM树，如果先生成DOM树，js修改节点，浏览器需要重新解析生成DOM树，性能差，所以需要js执行完再执行DOM解析。

了解浏览器缓存机制

浏览器缓存就是把已经请求过的资源存储起来，当下次需要该资源的时候，浏览器会根据缓存机制决定是直接使用缓存的资源还是向服务器发送请求。

作用：降低服务器压力

强制缓存 > 协商缓存

• 强制缓存，资源设置过期时间，客户端每次请求资源都会查看是否过期，如果过期就向服务器发送请求。
  • Expires 过期时间，如果在过期时间内再次加载该资源，则命中强缓存。
  • Cache-Control 属性有no-cache/max-age=xxx多长时间超时
  • 两者作用差不多，区别就是Expires是http1.0的产物，Cache-Control是http1.1的产物，两者共存时，Cache-Control优先级高。
• 协商缓存，再次请求该资源，会发送请求，包含一些验证信息（Etag/If-None-Match），服务器根据信息判断是否需要返回新的资源或者告诉客户端直接使用本地缓存。
  • Etag上一次加载资源时，该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。发送请求时候携带，和服务器资源Etag对比，相同，没有修改，命中协商缓存。
  • Last-Modified 最后一次更改资源的时间。发送请求时，放到request header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。

懒加载和预加载？

• 预加载：提前加载资源，当用户需要的时候可以直接从本地缓存中获取渲染
• 懒加载：需要被显示或者使用，系统才才会去加载所需资源。
  • 延迟加载，使用setTimeOut或setInterval进行加载延迟
  • 条件加载，符合某些条件，进行加载。
  • 可视区加载，仅加载用户看到的区域。由滚动条实现，在距用户一段距离才加载。
• 对比：懒加载减轻服务器负载，减少初识加载时间。预加载增加初识加载时间。

常用端口号

HTTP（超文本传输协议）80 提供网页内容传输

HTTPS（加密的超文本传输协议）443 提供加密网页内容传输

FTP（文件传输协议）21 用于文件上传和下载

SSH（安全外壳协议）22 用于安全访问远程服务器

TELNET（远程登录协议）23 远程登录管理服务器

SMTP（简单邮件传输协议）25 发送电子邮件

POP3 （邮局协议版本3） 110 接受电子邮件

IMAP（Internet邮件访问协议）143 接受电子邮件，但比POP3功能多

Mysql 3396 用于Mysql数据库的访问与管理

Tomcat 8080 用于运行java web应用程序

DNS （域名系统）53 用于域名解析服务器

DHCP（动态主机配置协议）67/68 用于自动配置网络设备的IP地址

SNMP（简单网络管理协议）161 用于网络设备的监控和管理

OSI七层模型

• 物理层：传输比特流
  • 设备：中继器，网线，集线器
• 数据链路层：MAC地址寻址以及将比特组分装成帧，实现点对点传输
  • 设备：网桥，交换机
  • 在概念上分成两个子层：逻辑链路控制子层LLC和媒体访问控制子层MAC。
• 网络层：用于实现跨网段通信。选择最佳路径，将数据包从源地址传输到目的地址。
  • 设备：路由器（网络层中继系统），网关（网络层以上的中继系统）
• 传输层：提供端到端的可靠传输和差错校验
  • TCP 传输控制协议：面向连接的，数据传输的单位是报文段，提供可靠的交付
  • UDP 用户控制协议：它是无连接的，数据传输的单位是用户数据报，它不能保证提供可靠的交付
  • SCTP 流控制传输协议 Stream Control Transmission Protocol )
• 会话层：建立管理和终止会话
• 表示层：确保数据在不同系统之间的正确表示和传输。数据的翻译、加密和解密等工作
• 应用层：提供了人机交互的窗口。