前端部分面试题

已于 2022-08-09 10:04:23 修改
阅读量181 收藏
点赞数
分类专栏： HTML5 前端 文章标签： javascript
于 2021-08-27 10:36:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QB_yin/article/details/119946599
版权

基本数据类型：Number、String、Boolean、Null、symobal、undefined、object -->栈
引用类型：object、function -->堆
判断方式：

  1. Typeof
  2. 数据 instanceof 数据类型–>true or false
  3. 数据.constructor === 数据类型 -->true or false
  4. object.prototype.toString().call()

Typeof null：返回类型错误，返回object
Typeof String、Number、symbol、Boolean、object：function Typeof undefined：undefined

[ ]==null -> false
Null == undefined ->true
Null：存在但是未定义 undefined：未定义

Var：变量声明提升 let：函数内部 const：常量，不可更改

ES6新特性：

  1. const、let
  2. 模板字面量
  3. 解构赋值
  4. 对象字面量简写 ->在对象中的名字和内容一样，可以省略
  5. 展开运算符（…数组）
  6. 箭头函数
  7. 类–>super、extends

Webpack构建：
entry（入口）：进入文件
Output：path（输出文件地址）、filename（输出文件名格式）
Module:rules(loader，插件plugins)

Tcp为什么三次握手：防止失效的连接请求报文段被服务端接收，从而产生错误。

三次握手：
第一次握手客户端：标志位SYN=1,表示建立请求，序号SEQ=X，x为所传送数据的第一个字节的序号
第二次握手服务器端：标志位SYN=1,ACK=1,序号SEQ=Y，确认号ack=x+1，表示收到了客户端传过来的x字节数据
第三次握手客户端：标志位ACK=1,序号SEQ=x+1，确认好ack=y+1

四次挥手：
第一次：客户端（主动断开连接）发送数据包给服务器，其中标志位FIN=1，序号位seq=u，并停止发送数据；
第二次：服务器收到数据包后，由于还需传输数据，无法立即关闭连接，先返回一个标志位ACK=1，序号seq=v，确认号ack=u+1的数据包；
第三次：服务器准备好断开连接后，返回一个数据包，其中标志位FIN=1，标志位ACK=1，序号seq=w，确认号ack=u+1；
第四次：客户端收到数据包后，返回一个标志位ACK=1，序号seq=u+1，确认号ack=w+1的数据包。

302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
304：当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了index.html的最后修改时间，浏览器会把index.html内容，以及最后响应时间缓存下来。当用户第二次请求index.html时，在请求中包含一个名为If-Modified-Since请求头，它的值就是第一次请求时服务器通过Last-Modified响应头发送给浏览器的值，即index.html最后的修改时间，If-Modified-Since请求头就是在告诉服务器，我这里浏览器缓存的index.html最后修改时间是这个，您看看现在的index.html最后修改时间是不是这个，如果还是，那么您就不用再响应这个index.html内容了，我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值，与index.html的当前最后修改时间比对，如果相同，服务器会发响应码304，表示index.html与浏览器上次缓存的相同，无需再次发送(节省传输成本)，浏览器可以显示自己的缓存页面，如果比对不同，那么说明index.html已经做了修改，服务器会响应200。

Arguments：

  1. arguments和function对象是分不开的
  2. Arguments对象不能显式创建
  3. Arguments对象只有函数开始时才可用
  4. 虽然arguments不是一个数组，但是访问单个参数的方式和访问数组的方式相同
  5. Arguments.callee是函数的映射
  6. 传递多个参数时可以直接用arguments

V-if和v-show：

  1. v-show都会编译，初始值为false，只是将display设为none v-if初始值为false，就不会编译了
  2. v-show只编译一次，后面就是控制css。v-if不停的销毁和创建，v-show性能更好

输入URL到页面渲染的过程：

一、用户输入URL

  1. 输入为搜索内容：地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索内容的关键字的URL
  2. 输入的是请求URL：地址栏会根据规则，给这段内容加上协议，合成为完整的URL
  3. 浏览器进程通过进程间通信（IPC）将URL请求发送给网络进程

二、URL请求过程

  1. 网络进程收到URL请求后检查本地是否缓存该请求资源，如果有将该资源返回给浏览器进程（浏览器缓存策略：强制缓存和协商缓存）
  2. 准备IP地址和端口：进行DNS解析时先查找缓存，没有在DNS服务器解析，顺序为：浏览器缓存–>本地缓存–>hosts文件–>路由器缓存–>ISP DNS缓存–>DNS递归查询
  3. 等待TCP队列：浏览器会为每个域名最多维护6个TCP连接，如果发起请求，6个TCP连接都处于忙碌状态，这个请求就会处于排队状态，解决方案：域名分片技术（将一个站点的资源放在多个CDN域名下面）或者升级为HTTP2就没有6个TCP连接的限制。
  4. 通过三次握手建立TCP连接，构建并发送HTTP请求信息，服务器端处理请求
  5. 客户端处理请求，首先检查服务器响应报文的状态码，如果为301或302表示服务器已更换域名需要重定向，这时网络进程会从响应头的location字段里读取重定向的地址，然后发起新的HTTP或HTTPS请求，回到第二步；如果时200，就检查Content-Type字段，值为text/html说明是HTML文件，是application/octet-stream说明是文件下载。
  6. 请求结束，四次挥手断开连接，准备渲染：浏览器进程检查当前URL是否与之前打开了渲染进程的页面的根目录，如果相同，则恢复原来的进程，不同就开启新的渲染进程，提交文档

三、渲染阶段

  1. 构建DOM树
  2. 构建CSSOM
  3. 存在一个阻塞问题，需要先等CSS文件下载完成并生成SCCOM，再执行Javascript脚本，继续构建DOM，阻塞会导致解析白屏
  4. 样式计算，创建布局树，对布局树进行分成，生成分层树，图层绘制，切分图块，栅格化
  5. 合成：所有图块都被栅格化，合成线程会将他们合成为一张图片
  6. 显示：接收合成线程发过来的DrawQuad命令，将页面内容绘制到内存中，在将内存显示到屏幕上

阻塞解决方法：
A：移除js和css文件下载，通过内联js、内联CSS
B：减少文件大小，如通过webpack移除不必要的注释，压缩js文件
C：将不进行DOM操作或CSS样式修改的js标记sync或defer异步引入
D：使用媒体查询属性：将大的CSS文件拆分成多个不同用途的CSS，只有在需要的时候才加载

Vue组件间通信：

  1. 父组件向子组件传值：props
  2. 子组件向父组件传值：$emit(“方法名”，传递的值)，父组件v-on绑定方法获取值
  3. 事件总线触发事件：
	$emit和$on
	Event.$emit(事件名，数据)
	Event.$on(事件名，data=>{ } )
  1. Vuex：全局创建state存放数据，使用Mutationx修改state中的数据
    Components（）{ getters（）{ } }
    Action由$store.dispatch(名称，数据)触发由commit触发mutation条用，
    间接更新state$attr / $listeners：跨级通信
  2. Prvide / inject：一起使用

Vue生命周期：

  1. beforeCreate：data未初始化，无法访问metheds，data，computed上的方法和数据
  2. Created：data可获取，$el为undefined
  3. boforeMount：此时还没有生成到html页面上，data可获取，$el为虚拟
  4. Mounted：挂载完成，模板的html渲染到了html页面中，此时可以做ajax操作，mounted只会执行一次，data可获取，$el为真实
  5. boforeUpdate：在数据被更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步更改状态，不会触发附加的重渲染过程
  6. Updated：数据更改导致虚拟DOM重新渲染和打补丁调用，调用时，组件DOM已经更新完成，所以可执行依赖于DOM的操作
  7. boforeDestory
  8. Destoryed

Vue-router：

一、关于route、routes、router

  1. route，它是一条路由，单数；Home按钮–>home内容，About按钮–>about内容
  2. routes，它是一组路由，形成一个数组；[ { home按钮–>home内容 }，{ about按钮–>about内容 } ]
  3. router是一个机制，相当于一个管理者来管理路由
  4. 客户端中的路由，实际上是dom元素的显示和隐藏，基于Hash模式或者mode：history

二、实现页面跳转

  1. this.$router.push(“路由地址”)
  2. router-link中的to

三、参数传递

  1. 用name传递参数，用$router.name接收
  2. 用router-link中的to传参，使用params，如
	router-link :to="{ 
		name:'xxx',
	    params : { username: 'xxx',id: 'xxx' } 
    }"
  1. 用url传参

四、子路由配置

  • 加入children：[ { path: ’/home/home1’ , name: ‘Home1’, component: Home1
    }, { path: ’/home/home2’ , name: ‘Home2’, component: Home2 } ]

五、vue-router路由跳转

this.$router.go(-1)：后退，回到上一次浏览页面
this.$router.replace（‘/home’）：指定跳转的地址
this.$router.replace（{name：‘home’}）：指定跳转路由的名字
this.$router.push（‘/home’）：指定跳转的地址（push）
this.$router.push（{name：‘home’}）：指定跳转路由的名字（push）

六、404页面设置
{ path：’ * ’ ,component: 404页面名称 }

  • 重绘和重排： 重绘不一定重排，但是重排一定会重绘
  • 重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
  • 重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会是渲染树中受到影响的部分失效，并重新构造渲染树

1、添加、删除可见的DOM
2、元素的位置改变
3、元素的尺寸改变，包括外边距、内边距、边框厚度、宽高
4、页面渲染初始化
5、浏览器窗口尺寸变化

避免方法：

  1. 不要一条一条的修改DOM样式
  2. 不要把DOM节点的属性放在一个循环中当成循环里的变量
  3. 为动画的HTML元件适用fixed或absolute，修改其样式不会重排

关键渲染路径：

  • 创建DOM树
  • 创建CSSOM树
  • 执行js脚本
  • 生成渲染树
  • 生成布局
  • 绘制

稳定排序算法：

  • 何为稳定：能保证前两个相等的数在排序前和排序后他们的顺序都不变
  • 稳定算法：基数排序、冒泡排序（O(n2)）、直接插入排序、折半插入排序、归并排序
    不稳定算法：快速排序（O(nlogn)）、堆排序、希尔排序、直接选择排序

跨域：

  • 原因：主域不同、子域不同、端口好号不同、协议不同

解决方法：

  1. jsonp：动态创建script标签，请求一个带参数网址实现跨域通信（只能实现给请求）
  2. document.domain+iframe：要求主域名相同
  3. window.name+iframe
  4. Location.hash+iframe
  5. postMessage
  6. CORS：在头信息中添加一个Origin字段或者Access-Control-Allow-Origin:*;
  7. Websocket协议跨域
  8. Node代理跨域
  9. Nginx代理跨域

Http协议：

  • http协议是基于TCP/IP协议的应用层协议，基于请求-响应的模式
  • http是一种不保存，无状态协议
  • http是一种无连接协议：限制每次只处理一个请求
  • http协议请求方式：get、post、put、delete、patch、head、option、trace
  • PUT：向指定资源位置上传其最新内容
  • DELETE：请求服务器删除Request-URL所标识的资源
  • http请求头内容：
  • Host：请求的地址域名和端口，不包括协议
  • Connection：连接类型，持续连接
  • Accept：浏览器支持的请求类型
  • Accept-Encoding：浏览器能处理的压缩代码
  • Accept-Language：浏览器当前设置语言

优化：

  • 懒加载：优先加哉可视区域
  • Vue项目的打包，是把html、css、js打包以及图片压缩，打包时把css和js文件分成了几部分，就不会导致一个文件过大
  • 项目模块化，建立多个文件夹，每个文件夹包含相同类型的文件，用户加载页面时调用相应文件以及和它相关联的文件，不用全部加载

OSI七层模型：

  • 应用层（http协议）：网络服务与最终用户的一个接口
  • 表示层：数据的表示、安全、压缩
  • 会话层：建立、管理、终止会话
  • 传输层（TCP/UDP协议）：定义传输数据的协议端口号，以及流控和差错校验
  • 网络层（IP协议、路由器）：进行逻辑地址寻址，实现不同网络之间的路径选择
  • 数据链路层（交换机–MAC地址）：建立逻辑连接，进行硬件地址寻址，差错校验等功能
  • 物理层：建立、维护、断开物理连接

Cookie中的httponly：

  • 如果cookie中设置了httponly属性，那么通过js脚本无法读取cookie信息，有效防止xss（跨站脚本攻击）
设置：reaponse.setHeader(“Set-Cookie”,”
	cookiename=httponlyTest;Path=/;
	Domain=domainValue;Max-Age=seconds; 
	HTTPOnly”)
读取：Cookie cookie[ ] = request.getCookies( );

Package.json中的 ^ 和 ~ ：

  • 波浪符号 ~ ：他会更新到当前miner version（中间一位数字）中最新的版本
  • 插入符号 ^ ：它会更新到当前major version（第一位数字）中最新的版本

版本号三个数，比如 1.15.2 对应为Major、minor、Patch
Major：版本号变化了表示一个不可以和上一个版本兼容的大更改
Minor：版本号变了表示增加了新的功能，可以向后兼容
Patch：版本号变了表示修复了bug，并且可以向后兼容

Js中防止对象被删除：

  • 防止扩展：禁止为对象添加属性和方法，但已存在的属性和方法可以被修改或删除

实操–> object.preventExtensions() 检验是否应用该操作–>object.isExensible()

  • 密封：禁止为对象删除已存在的属性和方法，被密封的对象是不可扩展的

实操–> object.seal() 检验是否应用该操作–>object.isSealed()

  • 冻结：禁止为修改已存在的属性和方法，所有字段均只读，被冻结的对象不可扩展和密封

实操–> object.freeze() 检验是否应用该操作–>object.isFrozen()

对于同一个对象，防止扩展–>密封–>冻结，这种操作是不可逆的，一旦对象被冻结，无法恢复到防止扩展和密封状态的，一旦对象被密封，是不可以恢复到不可扩展状态的

TCP和UDP的区别：

  1. TCP面向连接，UDP是无连接，即发送数据前不需要建立连接
  2. TCP提供可靠的服务，通过TCP连接的传送的数据，无差错、不丢失、不重复、且按顺序到达；UDP尽最大努力交付，不保证可靠交付
  3. TCP面向字节流，实际上是TCP把数据看成一串无结构的字节流；UDP是面向报文
    的，UDP没有拥塞控制，因此不会出现拥塞使主机的发送速率降低（对实时很有用，如视频会议）
  4. TCP是点到点；而UDP是一对一、一对多、多对一、多对多的交互通信
  5. TCP搜捕开销20字节，UDP首部开销小，只有8个字节
  6. TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

Js数组：

  • Push（）：向数组的末尾添加一个或多个元素，并返回新的长度
  • Pop（）：删除数组的最后一个元素，返回删除元素的值
  • Unshift（）：向数组的头部添加一个或多个元素，返回新的长度
  • Shift（）：删除并返回数组的第一个元素
  • Reverse（）：颠倒数组中的元素顺序
  • Sort（）：默认按首字母排序，sort（（a，b）=>{ return a - b }） 从小到大排序
  • Concat（）：连接两个或多个数组
  • Join（）：把所有的元素放进一个字符串，通过指定的分隔符分隔
  • Splice（）：删除元素，并向数组添加新元素
  • Slice（start，end）：从某个已有的数组返回特定的元素（没有end是就到数组末尾）
  • Indexof（x，start）：查找数组元素的位置

数组遍历：

  • for循环
  • forEach（（value，index，arr）=>{ }）：value当前值；index：下表索引；arr：当前数组
  • Map（（value，index，arr）=>{ }）：value当前值；index：下表索引；arr：当前数组，返回一个新的数组
  • Filter（（value，index，arr）=>{ }）：value当前值；index：下表索引；arr：当前数组，返回一个新的数组
  • Every（（value，index，arr）=>{
    }）：value当前值；index：下表索引；arr：当前数组，检测数组所有元素是否都通过指定函数的测试，返回true或false
  • Some（（value，index，arr）=>{
    }）：value当前值；index：下表索引；arr：当前数组，检测数组存在元素通过指定函数的测试，有返回true，没有返回false
  • Find（（value，index，arr）=>{
    }）：value当前值；index：下表索引；arr：当前数组，返回第一个通过测试的元素，如果全部没有通过测试，返回undefined
  • Fill（value，start，end）：用一个固定值来填充一个数组的所有元素

进程和线程的区别：
进程：火车，线程：车厢

  1. 线程在进程下行进（单纯的车厢无法运行）
  2. 一个进程可以包含多个线程（一辆火车可以有多个车厢）
  3. 不同进程间的数据很难共享（一辆火车上的乘客很难换到另一辆火车上）
  4. 同一进程下不同线程数据容易共享（A车厢换到B车厢）
  5. 进程比线程消耗更多的计算机资源（采用多列火车比多个车厢更消耗资源）
  6. 进程间不会相互影响，一个线程挂掉将导致整个进程结束（一列火车不会影响另一列火车，一节车厢着火将影响所有车厢）
  7. 进程可以拓展到多机，适合多核（不同火车可以开在多个轨道上）
  8. 进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这块内存（比如火车上的洗手间）
  9. 进程使用的内存地址可以限定使用量（火车上餐厅，最多允许多少人进入，满了需要在门口等，等有人出来了才能进去）

Flex布局：

  • flex-direction： row：（默认值）主轴为水平方向，起点在容器的左端
    row-reverse：主轴为水平方向，起点在容器的右端 Column：主轴为垂直方向，起点在容器的上沿
    column-reverse：主轴为垂直方向，起点在容器的下沿
  • flex-wrap： nowarp：（默认值）不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方
  • flex-flow： flex-flow为flex-direction和flex-wrap的简写形式，默认值为row nowrap
  • justify-content：
    flex-start：向主轴的起始方向对齐，如果使用flex-direction改变主轴对齐方式也会对应排列方式改变
    flex-end：向主轴的结束方向对齐，如果使用flex-direction改变主轴对齐方式也会对应排列方式改变 Center：居中
    space-between：如果有两个以上的项目，则容器主轴开始和结束位置各一个，其他项目均匀排列，如果只有一个则只在开始位置排列
    space-around：每个项目两侧的间距相等，如果只有一个则排列在中间

align-items：

  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • Center：交叉轴的中点对齐
  • Baseline：项目的第一行文字的基线对齐
  • Stretch：（默认值）如果项目未设置高度或为auto，将占满整个容器的高度
  • align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，则不起作用
  • Stretch：多行占满整个交叉轴
  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • Center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，之间均匀对齐
  • space-around：每跟轴线两侧的间距都相等

TCP流量控制和拥塞控制：

  • 流量控制：防止发送发发的太快，耗尽接收方的资源，导致接收方来不及处理
  • 流量控制的知识点： 1、接收端抑制发送端的依据：接收端缓冲区的大小 2、流量控制的目的时接收端，是怕接收端来不及处理
    3、流量控制的机制是丢包
  • 怎样实现流量控制：
    滑动窗口：类似于窗口（一次批量的发送多少数据）一样的东西，是用来告诉发送端可以发送数据的大小或者是窗口标记了接收端缓冲区的大小
    为什么会出现滑动窗口：在确认应答策略中，对每一个发送的数据段，都要给一个ACK确认应答，收到ACK后再发送下一个数据段，这样做有一个比较大缺点，就是性能比较差，尤其是数据往返的时间长的时候。使用滑动窗口，就可以一次发送多条数据，从而提高了性能。
  • 滑动窗口：
    1、接收端将自己可以接受的缓冲区大小放入TCP首部的“窗口大小”字段，通过ACK通知发送端
    2、窗口大小字段越大，说明网络的吞吐率越高 3、窗口大小指的是无需等待确认应答而可以继续发送数据的最大值，九十四不需要接收端的应答
    4、操作系统内核为了维护滑动窗口，需要开辟发送缓冲区，来记录当前还有哪些数据没有应答，只有确认应答过的数据，才能从缓冲区删除掉（发送缓冲区如果太大，会有空间开销）
    5、接收端一旦发现自己的缓冲区快满了，就会将窗口大小设置为一个更小的值通知给发送端，发送端收到这个值后，就会减慢自己的发送速度
    6、如果接收端发现自己的缓冲区满了，就会将窗口的大小设置为0，此时发送端将不再发送数据，但是需要定期发送一个窗口探测数据字段，使接收端把窗口大小告诉发送端（在TCP的首部，有一个16为窗口字段，用来存放窗口大小信息）。
  • 拥塞控制：防止发送发发送的太快，使得网络来不及处理，从而导致网络拥塞
  • 拥戴控制机制：AIMD/slow start（慢启动）
    A（additive：加法的）I（increase：增加）：加法增加：是指执行拥塞避免算法后，在收到对所有报文段的确认后，即经过一个往返时间，就把拥塞窗口cwnd增加一个MISS大小，是拥塞窗口缓慢增大，以防止网路过早出现拥塞
    M（multiplication：乘法）D（decrease）：乘法减少：出现一次超市，即出现一次网络拥塞，就把慢开始门限值ssthresh设置为当前的拥塞窗口值乘以0.5
    Ps：当网络频繁出现拥塞时，ssthresh值就下降的很快，以大大减少注入到网络中的分组数
  • 发送端如何知道已经丢包：定时器超时、收到三个重复的ACK
  • 为什么会有拥塞控制：流量控制虽然可以高效可靠的传送大量的数据，但是如果在刚开始阶段就发送大量的数据，就可能会导致网络拥堵，网络上的计算机太多了
  • 拥塞控制的表现：丢包、延时变长
  • 流量控制和拥塞控制的相同点：
  • 现象都是丢包、实现机制都是让发送端发的慢一点，发的少一点
  • 不同点： 丢包位置不同：流量控制（接收端）、拥塞控制（路由器）
    作用对象不同：流量控制（接收方，怕发送发发的太快，使得接收方来不及处理）、拥塞控制（对象是网络，怕发送发发的太快造成网络拥塞，使得网络来不及处理）

less和sass的区别：

  1. 编译环境不一样 Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。

  2. 变量符不一样，Less是@，而Scss是$。

  3. 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

  4. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

  5. 引用外部CSS文件 css@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件.

  6. Sass和Less的工具库不同 Sass有工具库Compass, Less有UI组件库Bootstrap

wait_yin
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值