前端面试题第二次整理（第二次找工作）

快乐的高兴的学习代码中

已于 2023-02-11 12:47:44 修改

阅读量580

点赞数

分类专栏：工作面试文章标签：前端

于 2022-03-01 22:54:32 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/123218355

版权

浏览器相关

有哪几种浏览器，它们的内核是

浏览器有ie /safari/ chrome /mozilla firefox /opera

对应的内核有：ie----trident safari/chrome---webkit mozilla firefox---gecko opera---presto

说下对浏览器内核的理解

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。

排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器

JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；

2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手

a.客户端向服务器发送一个建立连接的请求

b.服务器接到请求后发送同意连接的信号

c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功

3.浏览器发送HTTP请求

浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：

a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

b.服务器将得到的 HTML 文件发送给浏览器；

c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；

d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。

5.断开连接

浏览器缓存有哪些

sessionStorage/localStorage/cookie

数据存放有效期

sessionStorage:仅在当前浏览器窗口关闭之前有效，浏览器关闭就没了

localStorage:始终有效，窗口或者浏览器关闭也保存，所以叫持久化存储

cookie只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭也有效

过期时间设置

sessionStorage/localStorage不可以设置过期时间

cookie有过期时间，可以设置过期时间（把时间调整到之前的时间，就过期了）

存储大小

cookie存储量最大不能超过4k

sessionStorage/localStorage不能超过5M(localstorage大小有点争议，另外一个地方我看到的说说是10mb,不知道谁为准)

注意：不同的浏览器存储的大小是不同的，会有影响

http状态码有哪些，有哪些

1xx代表临时响应并需要请求者继续执行操作的状态码

100，服务器已收到请求的第一部分，正在等待其余部分

2xx表示成功处理了请求的状态码

200，成功处理了请求

202，服务器已接受请求，但尚未处理

3xx重定向，要完成请求，需要进一步操作

304，自上次请求后，请求的网页未修改过

4xx 请求出错，妨碍了服务器的处理

400 服务器不理解请求的语法

401 未授权，需要进行身份验证

404 找不到请求的网页

5xx服务器错误，服务器在处理请求时发生内部错误

500 服务器内部错误

http与https的区别

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

前端三要素是

html 结构，超文本标记语言，决定网页的结构和内容

css表现，层叠样式表，设定网页的表现样式

js,行为，弱类型的脚本语言，源码不需要经过编译，由浏览器解释运行，用于控制网页的行为。

强缓存、协商缓存、cdn缓存

http2

三次握手与四次握手

跨域（jsonp/cors）

跨域时如何处理cookie

垃圾回收机制

网络安全

https

什么是xss以及如何防止它

什么是csrf以及如何预防它

为什么会引起csrf攻击

事件循环-----涉及宏任务、微任务、ui渲染等的执行顺序

Vue部分

Vue中的v-if和v-for为什么不能一起用

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表, 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

v-if与v-for都是vue模板系统中的指令，在vue模板编译的时候，会将指令系统转化成可执行的render函数

v-for优先级比v-if高, v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

Vue的三种常用传值方式

父组件向子组件传值，在子组件中通过props传递过去的数据

子组件向父组件传值，在子组件中定义数据，使用$emit来进行自定义事件的触发及事件的发送

非父子组件传值，公共的vuex来进行传递值和获取值，或者用localsstorage来传值和取值

通过vuex来进行传递或者获取值，在state中定义变量，对变量值进行修改通过mutations，比如点击按钮进行加减，对变量值进行变异使用getters,比如变量初始值为100，修改后为10000，有异步使用action

兄弟组件之间

兄弟组件指的是平级之间的组件，他们中得传值方式比较多

1.第一种是属于一种比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件得传值方式传值给另一个子组件

2.可以使用Bus事件总线，创建一个中转站来进行传值。

组件之间如何通信

父子组件之间如何通信

组件间传递数据

父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on
监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。
祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。
通过属性$root / $parent / $children /
ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。
通过事件总线(event bus)的方式，可以实现任意两个组件间进行数据传递；缺点：不支持响应式，这个概念是vue1.0版本中的，现在已经废弃。
通过 VueJs 的状态管理模式 Vuex，实现多个组件进行数据共享，推荐使用这种方式进行项目中各组件间的数据传递。