前端高频面试--查缺补漏篇

2024-03-04 08:52

本文主要是介绍前端高频面试--查缺补漏篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

什么是进程和线程,有什么区别

进程:进程是程序的一次执行过程,是动态的过程,有自身产生、存在、消亡的过程。

线程:线程由进程创建,是进程的一个实体。一个进程可以拥有多个线程。

举个例子:
一个公司是一个进程,公司里面各个项目组都是一个线程。
再比如,如果吃饭是一个进程,那么夹菜、吃菜、咀嚼、吞咽都是线程。
 


前端网络攻击有哪几种模式以及怎样预防

1. XSS攻击
XSS指跨站脚本攻击,攻击者通过向网站注入恶意代码实现攻击,当用户浏览这个页面时,就会执行这些恶意代码。可能造成泄露用户登陆信息cookie,恶意跳转等。
预防XSS攻击的方法:
1. 对注入的代码启动HTML编码。
2. 过滤非法字符。
3. 设置cookie属性http-only,防止js脚本读取cookie。

2. CSRF攻击
CSRF攻击叫做跨站请求伪造,通过盗用用户的身份信息发起请求。诱导用户跳转到新页面,如果目标站点只使用cookie,并且kookie是允许跨域的,此时就能拿到用户的cookie,来模拟用户进行操作。
预防CSRF攻击的方法:
1. 增加用户与页面交互操作,例如页面增加随机数字验证码。
2. 使用token来认证。
3. 设置cookie规定其他网站不能使用本网站的cookie。

浏览器缓存机制

浏览器缓存分为:强制缓存和协商缓存。

强制缓存:
定义:当浏览器去请求某个文件的时候,服务端就在响应头里面对该文件做了缓存规则配置。
设置:控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires。
Expires:服务器返回该请求结果缓存的到期时间,如果发送请求时客户端的时间小于Expires的值,直接使用缓存结果。
Cache-Control属性:
public:所有内容都缓存
private:默认值,所有内容只有客户端可以缓存
no-cache:客户端缓存内容,是否使用缓存需要协商缓存来决定
no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
max-age=xxx:缓存内容将在xxx秒后失效

协商缓存:
强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存就叫协商缓存。
协商缓存主要还是看ETagLast-Modified,Last-Modified是文件的修改时间;Etag是当前返回资源的唯一标识。

不能被缓存的请求
1. post 请求无法被缓存。(缓存一般会对不更改数据库的数据进行缓存,对于更改数据的数据一般不进行缓存。所以get请求会被缓存,post请求不会进行缓存)
2. http响应头中不包含Last-Modified/ETag,也不包含Cache-Control/Expiress的请求。
3. http信息头明确设置Cache-Control:no-cache 或 Cache-Control:max-age=0时。


http和https基本概念、区别

概念:
http:超文本传输协议,是互联网应用最为广泛的一种网络协议。
https:HTTP的安全版。即HTTP下加入SSL层。

区别:
1. http是明文传输,https是加密传输。
2. http标准端口是80,http是443。
3. https需要证书认证,http不需要。
4. http连接简单,是无状态的;https是可进行加密传输、身份认证的网络协议,比http更加安全。

常见的http请求有哪些

GET:请求从服务器获取特定资源
POST:在服务器上创建一个新的资源
DELETE:从服务器删除特定的资源
PUT:更新服务器上的资源

GET和POST区别:
1. GET参数通过URL传递,POST放在请求体中。
2. GET参数会直接暴露在URL上,不能放敏感信息,POST相对于GET更安全。
3. GET请求在URL中传送的参数是有长度限制的。

HTTP常见状态码

2开头:成功状态码
200请求成功

3开头:重定向状态码
301:永久移动
302:临时移动
304:走缓存(第一次成功状态码为200,第二次F5刷新为304。按Ctrl+F5强制刷新为200)

4开头:客户端错误状态码
400:请求语法报错,或者请求参数有误
401:未授权的请求,无权限访问(身份验证错误)
403:禁止访问
404:找不到资源,一般为路径错误

5开头:服务器错误状态码
500:服务器错误
503:服务不可用


TCP三次握手与四次挥手

TCP三次握手和四次挥手实质是TCP通信的连接断开
三次握手:
第一次:客户端->服务端,发送SYN标志,表示请求建立新连接。
第二次:服务端->客户端,回传SYN和ACK,表示我收到了,并且同意连接。
第三次:客户端->服务端,回传ACK标志,表示我知道你收到了。

四次挥手:
第一次:客户端->服务端,发送FIN标志,表示客户端不再发送数据了。
第二次:服务端->客户端,回传ACK响应确认,服务器进入CLOSE_WAIT状态,在第三次挥手之前数据还是可以从客户端传送到服务端的。
第三次:服务端->客户端,服务端完成数据请求后,向客户端发送FIN标志,表示服务端也不再发送数据了。
第四次:客户端->服务端,回复ACK响应确认,此时客户端处于TIME_WAIT状态,需要经过一段时间确保服务器收到自己的应答报文后,才会进入CLOSED状态。

为什么要三次握手不是两次握手:
是为了确保双方都能够收到对方的请求和应答,建立可靠的连接。如果只有两次握手,那么无法确定客户端和服务器端都已经同意建立连接。
打个比方,约我想约好朋友出来玩,我先发送消息告知:我想和你出来玩。朋友回复:好啊,一起出来玩。我再发送:那我们现在出门吧。如果只发送两次,第二次我能知道她同意出来玩了,但是她并不知道我是否知道她同意出来玩。

为什么握手三次,挥手却要四次:
四次挥手之所以是四次,是因为在TCP中数据的传输是双向的,每一方都需要单独关闭连接,而且可能还存在未传输完的数据段和对方的ACK报文,因此需要四次握手来确保双方的连接被正确关闭。

WebPack是什么,谈谈你对他的理解

webPack可以看做是模块的打包机器:它能分析项目结构,找到浏览器不能直接运行的拓展语言,例如:Scss,TS等,并将其打包为合适的格式以供浏览器使用。

对于不同类型的资源,webPack有对应的模块加载器:loader
CSS:
解析CSS的css-loader、style-loader,
解析less的less-loader,sass的sass-loader,

JS:
解析将 TypeScript 转换成 JavaScript的ts-loader,
解析ES6为ES5的babel-loader,
解析JavaScript 代码规范的eslint-loader

vue:vue-loader

静态资源:url-loader、file-loader、json-loader

如何利用webpack优化前端性能:
1. 压缩代码,删除多余代码。
2. 利用CDN,将静态资源上传到CDN上。
3. 提取公共代码。

WebSocket了解吗

WebSocket是一种客户端和服务端通信的方式。服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话。

由于websocket会断开,需要有断开重连机制,可以使用reconnecting websocket,它是一个websocketd的js库,非常小,压缩后仅有3KB。当websocket断线后会自动帮你重连。使用非常简单,new WebSocket替换成new ReconnectingWebSocket即可。

常用的属性和方法:
readyState:连接的四种状态。1表示连接成功。
onopen:连接成功后的回调函数
send:向服务器发送数据
onmessage:收到服务器数据后的回调函数。
onclose:连接关闭后的回调函数。

var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!");
};ws.onmessage = function(evt) {console.log( "Received Message: " + evt.data);ws.close();
};ws.onclose = function(evt) {console.log("Connection closed.");
};

这篇关于前端高频面试--查缺补漏篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求