前端面经-总结篇 http

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

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

本地存储

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

  • localstorage本地存信息,浏览器关闭,信息不丢失,长期存储信息。5MB
  • sessionstorage仅在当前会话下有效,页面关闭或浏览器关闭,信息丢失,如果两个页面存在信息,可以共享sessionstorage5MB
  • 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)等存储在本地(localstoragesessionstoragecookie),表明已经登录,并设置超时时间。

前端性能优化的方法

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

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

网络请求优化,善用缓存,不重复加载相同资源,减少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节点及样式信息。
    • 布局。根据渲染树,浏览器计算每个节点的几何属性,大小位置等。
    • 绘制。将布局好的节点绘制到屏幕上。浏览器可能将页面分成多个层(固定元素,动画元素),最后合并不同层。
    • 在构建CSSOMDOM的时候,JavaScript会介入。遇到script时候,DOM会暂停,直至脚本执行完成。JavaScript可以修改和DOMCSSOM。JavaScript执行会阻塞页面渲染,实际上我们使用asyncdefer属性,异步加载,避免阻塞页面渲染。

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

  • 断开连接:四次挥手

css加载会造成阻塞吗?

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

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

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

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

JavaScript可以操作修改cssdom,如果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里,服务器在接收到后也会做比对,如果相同则命中协商缓存。

懒加载和预加载?

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

常用端口号

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 )
  • 会话层:建立管理和终止会话
  • 表示层:确保数据在不同系统之间的正确表示和传输。数据的翻译、加密和解密等工作
  • 应用层:提供了人机交互的窗口。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

功能篇:SpringBoot 实现静态、动态定时任务,本地动态定时任务调度

在Spring Boot中实现静态和动态定时任务可以通过使用Scheduled注解来配置静态的调度任务,以及通过编程方式创建动态的调度任务。下面我将分别介绍这两种方式。 ### 静态定时任务 对于静态定时任务,你可以直接在方法上使用Scheduled注解,并指定…

服务器ubuntu重装系统后将原来的用户进行关联

服务器ubuntu重装系统后将原来的用户数据进行关联 关联用户到已存在目录 sudo useradd user_name -m -s /bin/bash -d /home***/name添加sudo权限 vim /etc/sudoers# 文件末尾添加 user_name ALL(ALL:ALL) ALL更改拥有者 sudo chown -R user_name:user_name /home***/na…

数据地图怎么做?推荐这款数据可视化地图生成器

在数字化与信息化高速发展的今天,企业迎来了前所未有的发展机遇,规模迅速扩张,市场版图不断延伸。然而,伴随着这种快速的发展,一个不容忽视的问题逐渐浮出水面——如何精准高效地掌握分布在各地的分公司、业务点乃至整…

鸿蒙项目云捐助第九讲鸿蒙App应用的捐助详情页功能实现

鸿蒙项目云捐助第九讲鸿蒙App应用的捐助详情页功能实现 这里接下来继续实现捐助详情页的布局页面,也就是当用户进入到分类页面后,点击分类的每一个商品就进入到捐助商品的详情页,这里的布局可以从下面的模板演化而来。 下面根据这个模板来进…

docker mysql挂载

在提供的 docker run 命令中,已经挂载了三个卷到 MySQL 容器中:日志目录、数据目录和配置目录。然而,还没有挂载一个包含 cube_admin.sql 文件的目录。要将 SQL 文件放入容器中并在 MySQL 中执行它,可以按照以下步骤操作&#xff…

【数学】矩阵的逆与伪逆 EEGLAB

文章目录 前言matlab代码作用EEGLAB 中的代码总结参考文献 前言 在 EEGLAB 的使用中,运行程序时出现了矩阵接近奇异值,或者缩放错误。结果可能不准确。RCOND 1.873732e-20 的 bug,调查 EEGLAB 后发现是 raw 数据的问题。 matlab代码 A_1 …

【蓝凌表单】JSP组件常用语法整理

JSP组件常用语法整理 必填非必填写法//必填 $("[name=extendDataFormInfo.value(fd_344677482769e2)]").attr("validate","requiredvalue"); //非必填 $(

Redis 数据备份与恢复

Redis 数据备份与恢复 1. 引言 Redis 作为一款高性能的键值数据库,被广泛应用于各种场景,如缓存、消息队列等。由于其重要性,对 Redis 数据进行定期备份是保证数据安全的关键措施。本文将详细介绍 Redis 数据的备份与恢复方法,确保在数据丢失或系统故障时能够迅速恢复。 …

音视频入门基础:MPEG2-TS专题(17)——FFmpeg源码中,解析TS program map section的实现

一、引言 由《音视频入门基础:MPEG2-TS专题(16)——PMT简介》可以知道,PMT表(Program map table)由一个或多个段(Transport stream program map section,简称TS program map sectio…

华为HarmonyOS NEXT 原生应用开发:鸿蒙中组件的组件状态管理、组件通信 组件状态管理小案例(好友录)!

文章目录 组件状态管理一、State装饰器1. State装饰器的特点2. State装饰器的使用 二、Prop装饰器(父子单向通信)1. Prop装饰器的特点2. Prop装饰器的使用示例 三、Link装饰器(父子双向通信)1. Link装饰器的特点3. Link使用示例 四…

Pytorch | 对比Pytorch中的十种优化器:基于CIFAR10上的ResNet分类器

Pytorch | 对比Pytorch中的十种优化器:基于CIFAR10上的ResNet分类器 CIFAR10数据集ResNet提出背景网络结构特点工作原理优势 代码实现分析utils.pymain.py导入必要的库设备选择与数据预处理定义加载训练集和测试集主函数部分训练部分测试部分 结果10种优化器对应的训…

Linux系统操作03|chmod、vim

上文: Linux系统操作02|基本命令-CSDN博客 目录 六、chmod:给文件设置权限 1、字母法 2、数字法(用的最多) 七、vim:代码编写和文本编辑 1、启动和退出 1️⃣启动 2️⃣退出 2、vim基本操作 六、chmod&#x…

【漏洞复现】eking管理易Html5Upload接口存在任意文件上传漏洞

🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 【漏洞复现】eking管理易Html5Upload接口存在任意文件上传漏洞 一、漏洞概述1.1漏洞简介1.2组件描述1.3漏洞描述二、漏洞复现2.1 应用协议2.2 环境搭建2.3 漏洞复现三、…

徐州数字孪生工业互联网可视化技术,赋能新型工业化智能制造工厂

#徐州数字孪生工业互联网#在当下智能制造的热潮之下,徐州作为中国制造业的重要基地,正积极拥抱数字化转型,通过数字孪生工业互联网可视化技术,赋能新型工业化智能制造工厂,引领制造业向更高效、更智能、更绿色的方向发…

C# 探险之旅:第二十四节 - 类型class基础,一场“类”似的奇妙冒险

嘿,勇敢的探险家们!欢迎来到C#王国的“类”似奇妙冒险!今天,我们要深入探索一个神秘而强大的领域——class(类)。想象一下,class就像C#世界里的一块魔法土地,每块土地上都能孕育出独…

解决MyBatis在 Oracle 中使用 IN 语句不能超过 1000 问题

在 Oracle 数据库中,IN 语句常用于查询某个字段是否属于一组特定的值。对于大多数开发者而言,IN 是一种简单直观的查询方式,能够提升开发效率,避免过多的 OR 语句。然而,许多人在使用 IN 语句时可能遇到一个问题&#…

(五)机器学习 - 数据分布

数据分布(Data Distribution)是指数据在不同值或值区间内的分布情况,它描述了数据点在整个数据集中是如何分散或集中的。数据分布可以通过多种方式来分析和表示,包括图形和数值方法。 常见的数据分布特征和描述数据分布的方法&…

C# 探险之旅:第二十三节 - 字符(char):字符小精灵的独舞

嘿,探险家们!欢迎再次踏上C#王国的奇妙旅程。这一节里,我们要深入探索一个非常基础但又极其重要的角色——字符(char)。想象一下,你正在参加一场由单个字母和数字组成的精灵舞会,每个精灵都代表着一个独特的字符。让我…

【JAVA】Java项目实战—分布式微服务项目:分布式文件存储系统

Java分布式微服务项目:分布式文件存储系统 一、背景介绍 随着互联网的快速发展和用户数据量的激增,软件开发中,传统的单体应用架构逐渐无法满足高并发、高可用和可扩展的需求。微服务架构应运而生,它将一个大型应用拆分为多个小…

苹果电脑可以安装windows操作系统吗?Mac OS X/OS X/macOS傻傻分不清?macOS系统的Java支持?什么是macOS的五大API法王?

苹果电脑可以安装windows操作系统吗? 先抛开虚拟机安装,苹果电脑可以安装Windows操作系统。苹果公司提供了一个名为Boot Camp的软件,它允许用户在Mac电脑上安装Windows操作系统。通过Boot Camp,用户可以在启动电脑时选择是要进入macOS还是Wi…