媒介
快乐是什么？快乐就是…呃快乐就是…快乐就是我更了八股文下篇 ^皿^
一、欣赏器
1.从输入 URL 到页面展示的过程描述
- URL剖析：提取出协议、主机名、端口号、路径等信息。
- DNS剖析：欣赏器会向DNS服务器发起查询，获取主机名对应的IP地址。
- 创建TCP连接：欣赏器通过获取到的IP地址和端口号与服务器创建TCP连接
- 发送HTTP哀求：创建TCP连接后，欣赏器向服务器发送HTTP哀求。哀求中包含了哀求方法、哀求头大概的哀求体、以及其他相关信息。
- 服务器处置惩罚哀求
- 服务器返回响应：服务器处置惩罚完哀求后，会返回一个HTTP响应给欣赏器。响应包罗状态码、响应头、响应体等信息。
- 欣赏器吸收响应并处置惩罚：吸收到HTTP响应后会根据响应的内容范例进行处置惩罚。
- 构建渲染树：欣赏器将剖析得到的DOM树和CSS样式表归并，构建渲染树
- 布局和绘制
- 加载附属资源
- 页面展示完成
2.跨域问题
欣赏器的同源策略
同源策略要求两个页面具有雷同的协议、主机名和端口号，否则就会出现跨域问题。跨域是欣赏器行为
办理办法：
- CORS
CORS是一种机制，答应服务器在响应中设置一些头部信息，以授权一个域的Web应用访问另一个域的资源。服务器开启跨域共享
- JSONP
利用script标签不存在跨域限制,只支持GET哀求,不安全
JSONP实现跨域哀求的原理就是动态创建script标签，利用“src”不受同源策略约束的性质来实现跨域获取数据。
- nginx代理
在同源的服务器端设置一个代理，吸收跨域哀求并转发到目标服务器，然后再将响应返回给客户端。如许客户端只与同源服务器通信，克制了跨域问题。详细办理方式如下：
代理详细实现
3.什么是历程和线程?区别是什么?
历程(Progres) 是计算机中正在运行的程序的实例.历程之间有独立的内存,代码和数据,开销大.
线程(Thread) 是历程的子任务，一个历程可以包含多个线程,线程之间共享雷同的代码和数据,但拥有独立的执行栈和寄存器集合.开销小,速率快.
区别:
- 都可以并发执行,历程是独立的,线程依靠历程
- 历程之间独立,线程共享所属历程的资源
- 开销大小不同
4.欣赏器都有哪些历程?
- 主历程: 负责管理欣赏器的团体运行，包罗界面显示、用户交互、资源分配等
- 渲染历程: 每个标签页通常都会有一个独立的渲染历程，负责处置惩罚该标签页的 HTML、CSS、JavaScript 等内容的渲染和执行
- 插件历程: 负责运行欣赏器插件，如Flash Player、PDF阅读器等
- GPU历程: 负责处置惩罚欣赏器中与图形相关的任务，如3D渲染、硬件加快等
- 网络历程: 负责处置惩罚网络哀求和响应，包罗下载网页内容、发送 AJAX 哀求等
- 扩展历程: 如果欣赏器支持扩展(如 Chrome 的扩展)，则大概会为每个扩展创建一个独立的历程
5.常见欣赏器的内核
Chrome: Blink内核,以前是webkit内核
FireFox: FireFox内核
safari: webkit内核
360,猎豹: Chromium
6.欣赏器的渲染优化
- js尽量放在body的最后面
- 尽量利用异步加载js资源,如许不会阻塞DOM剖析,如async,defer
- css样式少就利用内嵌样式
- 用link导入外部css文件,不利用@import因为会阻塞渲染
- 克制频繁操作样式和DOM
- 利用transform替代动画
7.LocalStorage,SessionStorage,cookie的区别
LocalStorageSessionStoragecookie存储容量体积大体积较大,存储在内存里4kb作用域同源页面可访问创建该数据的页面和在同一欣赏器标签页或窗口中打开的页面可见雷同域名下的所有页面都是可访问生命周期永世,除非手动删除会话竣事后扫除会话竣事后可扫除,也可设置逾期时间 cookie只存在于哀求头,sessionStorage相对于cookie更安全
8.变乱流的三个阶段
捕获阶段 目标阶段 冒泡阶段
- 捕获阶段: 变乱从最外层节点逐级向下传播到目标节点上.
- 目标阶段: 变乱到达目标节点,出发目标节点的变乱处置惩罚函数.
- 冒泡阶段: 变乱从目标节点开始,逐级向上传播,直到到达最外层节点.
9.对于变乱委托的理解
利用欣赏器变乱冒泡机制。
变乱在冒泡的过程中会传到父节点，并且父节点可以通过变乱对象获取到目标节点，可以吧子节点的监听函数定义在父节点上，由父节点的监听函数同一处置惩罚多个子元素的变乱
10.对于欣赏器变乱循环的理解
变乱循环是一种机制，它会不断的轮询任务队列，并将队列中的任务依此执行。
javaScript的任务分为两种：
- 同步任务：在主线程上排队执行的任务，只有一个任务执行完毕，才能执行下一个任务，
- 异步任务：不进入主线程，而是放在任务队列中，如有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到执行栈然后主线程执行调用栈的任务。
因为js是单线程，在执行代码的时候将所有函数压入执行栈中。
同步任务会按照后进先出的原则以此执行。碰到异步任务时，将其放入任务队列中。当前执行栈里变乱执行完毕后，就会从任务队列中取出对应异步任务的回调函数放入执行栈中继续执行。
任务队列中的任务分为宏任务和微任务，当执行栈清空后，会先查抄任务队列中是否有微任务，如果有就按照先进先出的原则，压入执行栈中执行。
微任务中产生了新的微任务不会推迟到下一个循环中，而是在当前循环中继续执行。 当执行这一轮的微任务完毕后，开启下一轮循环，执行任务队列中的宏任务。
一次 Eventloop 循环会处置惩罚一个宏任务和所有这次循环中产生的微任务。
执行顺序:
- 执行宏任务中的同步代码，碰到宏任务或微任务，分别放入对应的任务队列，等待执行。
- 当所有同步任务执行完毕后，执行栈为空，首先执行微任务队列中的任务
- 微任务执行完毕后，查抄这次执行中是否产生新的微任务，如果存在，重复执行步调，直到微任务执行完毕。
- 开始下一轮Event Loop，执行宏任务中的代码
11.什么是回流和重绘?如何克制?
回流（Reflow）：当 DOM 布局中的部分发生变化，欣赏器需要更新页面布局。这个重新计算和重新布局的过程就称为回流。
重绘（Repaint）：当 DOM 布局中某元素的样式发生变化，但不影响其布局时，欣赏器会重新绘制这个元素，使其呈现新的样式。
淘汰方法:
- 利用 CSS3 动画取代 JavaScript 动画
- 利用 transform 和 opacity 进行动画：transform 和 opacity 属性的改变不会引起回流，只会引起重绘
- 利用文档片断进行 DOM 操作：在对 DOM 进行大量操作时，可以先将要操作的 DOM 元素添加到文档片断中，然后再同一将文档片断添加到 DOM 中，如许可以淘汰回流次数。
- 克制频繁获取布局信息：频繁获取布局信息（如 offsetTop、offsetLeft、offsetWidth、offsetHeight 等）会导致欣赏器强制进行回流
- 利用 CSS3 动画属性 will-change：将会发生动画的元素的 will-change 属性设置为 transform 或 opacity，可以告诉欣赏器该元素将会发生变化，从而优化渲染过程。
- 克制在循环中直接操作样式：在循环中频繁修改元素的样式会导致大量的回流和重绘，可以先将需要修改的样式保存在一个变量中，循环竣事后再一次性应用到元素上。
12.对于Node.js的变乱循环的理解
node.js 的变乱循环是其异步非阻塞 I/O 模型的焦点。变乱循环是一个持续运行的循环，负责监听变乱并触发相应的回调函数。下面是 Node.js 变乱循环的根本原理：
变乱循环阶段（Event Loop Phases）：
- Timers 阶段：处置惩罚定时器的回调函数（setTimeout() 和 setInterval()）。
- I/O callbacks 阶段：处置惩罚一些系统级别的操作，比如 TCP 错误、哀求和响应等。
- Idle、Prepare 阶段：这两个阶段临时没有被Node.js利用。
- Poll 阶段：执行 I/O 操作，如网络哀求、文件 I/O 等。在这个阶段，Node.js 会查抄是否有新的 I/O 变乱需要处置惩罚，如果没有，则会等待新的变乱到来。
- Check 阶段：执行 setImmediate() 注册的回调函数。
- Close callbacks 阶段：执行关闭变乱（如 socket 关闭）的回调函数。
变乱队列（Event Queue）：
- 在每个变乱循环阶段，都有一个对应的变乱队列，用于存储在当前阶段产生的变乱和回调函数。
- 当变乱循环进入某个阶段时，会查抄该阶段的变乱队列是否为空，如果不为空，则会依次执行队列中的回调函数。
执行顺序：
- 在每个变乱循环阶段，变乱循环会按照固定的顺序依次执行对应阶段的回调函数。
- 在某个阶段的回调函数执行完毕后，会查抄是否有微任务（例如 Promise 的回调函数），如- 果有，则会立刻执行微任务队列中的所有任务。
- 当某个阶段的所有回调函数和微任务都执行完毕后，变乱循环会继续执行下一个阶段，直到所有阶段都执行完毕，然后重新开始下一轮变乱循环。
二、网络
1.HTTP 各版本及区别
HTTP协议全称HyperText Transfer Protocol，中文名超文本传输协议。是互联网上应用最为广泛的一种网络协议
点击就送⬇
HTTP 各个版本之间的区别
2.TCP的三次握手、四次挥手
TCP：一种面向连接的、可靠的、基于字节流的传输层协议
三次握手：为了保证客户端和服务器端的可靠连接，TCP创建连接时必须要进行三次会话，也叫TCP三次握手，进行三次握手的目标是为了确认双方的吸收能力和发送能力是否正常。
（红字忽略，我方便记住任意标的）
第一次握手 TCP客户历程也是先创建传输控制块TCB，然后向服务器发出连接哀求报文，这是报文首部中的同部位SYN=1，同时选择一个初始序列号 seq=x ，此时，TCP客户端历程进入了SYN-SENT同步已发送状态
第二次握手 TCP服务器收到哀求报文后，如果同意连接，则会向客户端发出确认报文。确认报文中应该 ACK=1，SYN=1，确认号是ack=x+1，同时也要为自己初始化一个序列号 seq=y，此时，TCP服务器历程进入了 SYN-RCVD 同步收到状态
第三次握手 TCP客户端收到确认后，还要向服务器给出确认。确认报文的ACK=1，ack=y+1，自己的序列号seq=x+1，此时，TCP连接创建，客户端进入ESTABLISHED已创建连接状态 触发三次握手
四次挥手：
3.TCP和UDP的区别？
TCP（传输控制协议）和UDP（用户数据报协议）是两种主要的传输层协议，用于在计算机网络中传输数据
区别TCPUDP连接面向连接。在传输数据之前需要先创建连接，进行数据传输，最后释放连接无连接。不创建连接，直接数据传输可靠性数据可靠且有顺序数据不保证可靠温顺序，大概出现数据丢失庞杂传输效率较低较高适用场景对数据传输可靠性要求较高的应用场景，如网页欣赏、文件传输、电子邮件等对传输延迟要求较低、及时性要求较高的应用场景，如在线游戏、及时视频、语音通话等。 4.HTTP常见状态码及其寄义
1xx（信息性状态码）：表示哀求已被担当，继续处置惩罚。
100 Continue：服务器已收到哀求的部分内容，客户端可以继续发送剩余的哀求。
101 Switching Protocols：服务器已司理解了客户端的哀求，并将切换到另一个协议。
2xx（成功状态码）：表示哀求已成功被服务器吸收、理解、并担当处置惩罚。
200 OK：哀求成功。一样平常用于GET和POST哀求。
201 Created：哀求已经被实现，并且创建了新的资源。
204 No Content：服务器成功处置惩罚了哀求，但不需要返回任何实体内容。
3xx（重定向状态码）：表示需要客户端进一步的操作才能完成哀求。
301 Moved Permanently：哀求的资源已被永世移动到新的URL。
302 Found：哀求的资源临时从不同的URL响应。
304 Not Modified：客户端发送附带条件的哀求时，服务器端答应哀求访问资源，但因发生哀求满意条件的情况下，返回资源未被修改的304状态码。
4xx（客户端错误状态码）：表示客户端发生了错误，导致服务器无法处置惩罚哀求。
400 Bad Request：服务器无法理解客户端发送的哀求，大概是语法错误或者无效哀求。
401 Unauthorized：哀求需要用户认证。
403 Forbidden：服务器拒绝了客户端的哀求。
404 Not Found：服务器无法找到哀求的资源。
5xx（服务器错误状态码）：表示服务器在处置惩罚哀求时发生了错误。
500 Internal Server Error：服务器内部错误，导致无法完成哀求。
502 Bad Gateway：服务器作为网关或代理，从上游服务器吸收到无效的响应。
503 Service Unavailable：服务器当前无法处置惩罚哀求，大概是临时的维护或过载状态。
5.鉴权
鉴权（Authentication）是指验证用户身份的过程。
鉴权通常是通过用户提供的根据（如用户名和密码、证书、生物特征等）来进行验证的。鉴权是信息安全中的一个重要环节
常见的鉴权方式：
- 基于密码的鉴权：用户通过提供用户名和密码来验证身份。
- 基于令牌的鉴权：用户需要提供一个令牌（Token），通常是由服务器颁发给用户的一串特定字符串。令牌可以是持续性的，也可以是一次性的。系统通过验证令牌的有用性来鉴权。
- 基于证书的鉴权：用户需要提供数字证书，证实其身份的正当性。通常用于安全传输层（SSL/TLS）中的客户端身份验证。
- 基于生物特征的鉴权：系统通过用户的生物特征（如指纹、虹膜、面部辨认等）来验证。
- 基于多因素认证（MFA）：用户需要同时提供多个不同范例的根据来进行身份验证，如密码联合手机短信验证码、指纹联合密码等。
三、安全
1.常见的安全性问题？怎么办理？
1.1XSS(Cross Site Scripting)【重要】
通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，利用户加载并执行攻击者恶意制造的网页程序。
攻击成功后会获取到很高的权限，获取到私密网页内容，session，cookie等内容
关键是找出 参数未过滤的输出函数
办理办法：
- 输入验证和过滤：对用户输入的数据进行验证和过滤，确保用户提交的数据符合预期的格式和内容。
- 利用HTTP头中的安全标志：设置HTTP头中的X-XSS-Protection和Content-Security-Policy（CSP）等安全标志，可以资助欣赏器检测和克制XSS攻击
- 利用HTTPOnly标记：对于存储用户会话标识的cookie，利用HTTPOnly标记可以防止通过JavaScript访问这些cookie，从而淘汰XSS攻击的威胁。
- 用户不要点击可疑链接，开发人员服从安全编码实践。
1.2 CSRF【重要】
跨站哀求伪造（CSRF）是一种网络攻击，攻击者通过利用用户在另一个网站已经登录的身份，向目标网站发送恶意哀求，实现对目标网站的操作，如发帖、转账等
办理办法:
- 同源策略：利用欣赏器的同源策略，限制网页在发送哀求时只能与同源（协议、域名、端口都雷同）的网站进行交互
- CSRF令牌：为每个用户的会话生成唯一的CSRF令牌，并将该令牌嵌入到表单中或者作为哀求的参数之一发送给服务器。服务器在吸收到哀求时验证CSRF令牌的有用性，如果令牌不匹配则拒绝哀求。
- 同步哀求和异步哀求：对于需要修改服务器状态的哀求（如POST哀求），利用同步哀求，并联合CSRF令牌进行验证；对于不需要修改服务器状态的哀求（如GET哀求），可以利用异步哀求，因为CSRF攻击通常不会通过异步哀求实施。
- 双重确认：对于敏感操作，可以采用双重确认的方式，比如在用户提交敏感操作前，再次要求用户输入密码或者进行其他验证。
- 利用安全Cookie：对于跨站哀求伪造攻击中大概被利用的cookie，应当利用安全cookie（Secure Cookie）和HTTPOnly标记，确保cookie只在安全的HTTPS连接中传输，并且无法被JavaScript访问。
1.3 其他攻击
- SQL注入攻击
SQL注入即是指web应用程序对用户输入数据的正当性没有判定或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的末端上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现诱骗数据库服务器执行非授权的恣意查询，从而进一步得到相应的数据信息。
办理办法: 分级管理,参数传值,漏洞扫描,多层验证,数据库信息加密
- OS下令注入攻击
类似于上述的SQL注入,OS 注入攻击是指程序提供了直接执行Shell下令的函数的场景，比如在构造OS下令时利用了外部输入的数据，如果没有对外部输入中大概影响OS下令的特殊元素进行过滤，或是过滤不充分，就有受到OS下令注入攻击的风险。
办理办法: 白名单校验,利用execFile/spawn
- DDOS攻击
- 点击劫持
点击劫持（click jacking1），也被称为UI-覆盖攻击，顾名思义，和点击变乱有关，利用用户的点击操作，来完成非用户本意的操作。这种攻击利用了HTML中<iframe>标签的透明属性。
虽然你点击的是你正在访问的页面，但其实上面覆盖了一层恶意攻击者精心构建的一个透明页面。
办理方法: js中克制内嵌,X-FRAME-OPTIONS 防止内嵌,NoScript 扩展等
- HTTP哀求劫持
HTTP劫持是在利用者与其目标网络服务所创建的专用数据通道中，监视特定数据信息，提示当满意设定的条件时，就会在正常的数据流中插入精心计划的网络数据报文，目标是让用户端程序表明“错误”的数据，并以弹出新窗口的情势在利用者界面展示宣传性广告或者直接显示某网站的内容。
办理办法: 利用https,加密代理
四、其他
除了以上这些,还要复习学习以下内容:
- 工程化:页面性能优化和webpack优化
- 框架:面试官通常会根据简历上写的来问,我只写了Vue的,肯定不够用的,还有React,Angular等等。
- TypeScript:这个和Vue3联合还是比较常用的吧,也险些是现在所必备的一项技能,小厂大概希望你熟练利用ts进行开发,大厂大概希望你能利用 ts 开发一些 ts 的周边工具。
- 项目描述:一套公式
项目配景->项目目标->开发过程中的脚色->开发过程中碰到的困难->碰到这些困难如何办理->项目完成后取得的成果
- 算法:网上找一些常见的题目进行练习,整理一些经验,牢记勿闷头刷困难.
五、祝大家面试成功,一路生花
欢迎指正 ^皿^
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
