前端面试题

最新推荐文章于 2023-08-14 17:09:28 发布

原创最新推荐文章于 2023-08-14 17:09:28 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端面试题

前端专栏收录该内容

20 篇文章

订阅专栏

本文深入讲解Vue生命周期、响应式原理及网络请求流程等前端核心技术，同时探讨了面向对象编程、事件流机制、XSS攻击防范等重要概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Vue声明周期有哪些？

beforeCreate （初始化页面前）
created （初始化页面后）
beforeMount（渲染dom前）
mounted（渲染dom后）
beforeUpdate（更新数据前）
updated（数据更新后）
beforeDestroy（卸载组件前）
destroyed（卸载组件后）

2、Vue响应式数据是如何实现的？

基于Object.defineProperty实现的

在实例化 Vue 构造函数前，所有进行双向绑定的数据，都是要在data里面做初始化，哪怕是一个空值；

因为在每次实例化的时候，Vue会去检测 data ，查看并把存在的属性用Object.defineProperty 进行监听；

例如：

<div>{{name}}</div>

new Vue({
    data(){
        return {
            name:'真好'
        }
    }
})

初始化的时候，我绑定了一个 name 属性，它放在div中渲染展示；

当我在 div 里面添加了 name 属性，data 中也有 name 属性，那么在模板编译的时候，获取了一下 name 属性；

因为data中的 name 属性绑定了 Object.defineProperty ，所以在获取的时候，会调用 get 方法，获取到设置的值渲染到页面上；

在这之前，我有实例化一个dep队列，把每次获取 name 属性的地方，做一个 push；

当我接下来要做数据修改的时候，就会调用 Object.defineProperty 的 set 方法，把我当前属性的队列有监听当前属性的位置，全部更新一遍。

最后把 data 对象里面的属性值做修改；

3、一个 url 从输入按下回车键，到页面展示出来，都经历了什么？

首先，在输入网址按下回车以后，这个时候DNS服务器会通过当前的网址去解析网址的 ip；

在查找到真的 IP 以后，这个时候浏览器会向 web 服务器发起一个 TCP 链接请求（三次握手）；

第一次：简历链接时，客户端发送 SYN 包到服务器，并进入 SYN_SENT（传输控制协议）状态，等待服务器确认；

第二次：服务器收到 SYN 包，必须确认客户的 SYN，同事自己也发送一个 ack 包，即 syn+ack 包，测试服务器进入 SYN_RECV（服务端被动打开后，接受到了客户端的 SYN 并且大宋了 ack 时的状态）状态；

第三次：客户端收到了服务器的 syn+ack 包，向服务器发送确认包 ack，此包发送完毕，客户端和服务器进入 ESTABLISHED （TCP链接成功）状态，完成三次握手；

当三次握手结束后，客户端和服务器就建立好了链接，这时候 TCP 协议断开；

开始访问当前服务器下默认的 index.html，并调用该访问的资源文件，展示赌赢的内容。

4、你是怎么理解面向对象的，什么是面向对象，用面向对象做过什么

面向对象有三大特性：封装、继承、多态，其实还有一个特性，就是抽象，只不过我们平时很少说这一点；

面向对象有两个概念：类和实例；

面向对象的优势：可扩展，易维护，高内聚，低耦合；

面向对象的劣势：由于它的特点导致了它的整体体积会很大，哪怕拆分成了不同的类，这一点和函数式编程相比，是它的劣势，因为函数式编程有一个特点就是，每个函数只做一件事情；

5、能简单的说一下，什么是事件流吗？

js是单线程的，虽然现在有 worker 的存在，但是也只是可以进行运算，并不能操作 dom；
js 最一开始执行的现成，是主线程，然后主线程执行完毕后，是微队列的循环执行，微队列执行完毕后，在执行宏队列；

宏队列的方法：

setTimeout 、setInterval 、 setImmediate 、 I/0、UI rendering

微队列的方法：

promise.then 、 process.nextTick 、 Object.observe(已废弃)

6、说一说 xss 攻击

其实就是一种利用脚本把代码植入到提供给其他用户使用的页面中，一般就是利用表单提交；

如果我们自己去写这种攻击防御的方式，最简单的就是留用表单提交的内容，去做处理，不允许提交 script标签内容等；

平时在实际项目当中，提交请求一般会用 axios ，它对 xss 攻击已经做了拦截；

以上文章我是看了软谋前端的公众号里的一篇文章自行摘抄过来的，很多雷同，希望原作者不要介意哈，没有恶意，只是想自己写一遍熟悉一下。。。嘻嘻嘻

7、请你谈谈Cookie的弊端

chrome和Safari没有做硬性限制

其他浏览器最多50个cookie

优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小
2. 通过加密和安全传输技术（SSL），减少cookie被破解的可能性
3. 只在cookie 中存放不敏感的数据，即使被盗也不会有重大的损失。
4. 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie

缺点：
1.cookie的数量和长度的限制，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题，如果cookie被人截掉，那人就可以取得所有的session信息，即使加密也于事无补，因为拦截者并不需要知道cookie的意义，只要原样转发就可以了

8、 display：none和visibility：hidden的区别
display:none：隐藏对应的元素，文档中不会找到元素
visibility:hidden：隐藏对应的元素，但是文档中会有位置保存

9、 css中的link 和 @import的区别；

link是HTML标签，@import是css提供的
页面加载时，link会被同事加载，@import会在页面加载完后在加载
link是HTML标签，没有兼容问题
link方式的样式的权重高于@import的权重

10、 position的absolute和fixed的共同点和不同点
共同点：

改变行内元素的呈现方式，display设置为block
让元素脱离普通流，不占据空间
默认会覆盖到非定位的元素上

不同点：

absolute的根元素是可以设置的而fixed的根元素固定为浏览器窗口

11、css的盒子模型
1）IE盒模型
2）W3C盒模型
在这里插入图片描述

12、对BFC规范的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素，在同一个BFC中的两个毗邻的块级盒在垂直方向的margin会发生折叠。

13、HTML与XHTML的区别
1）所有的标记都必须要有一个相应的结束标记
2）所有标签的元素和属性的名字都必须使用小写
3）所有的XML标记都必须合理嵌套
4）所有的属性必须用引号"“括起来
5）把所有<和&特殊符号用编码表示
6）给所有属性附一个值
7）不要再注释内容中使用”–"
8）图片必须有说明文字

14、解释下浮动和他的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间，浮动元素碰到包含他的边框或者浮动元素的边框停留

使用空标签清除浮动
这种方法是在所有浮动标签的后面添加一个空标签定义CSS clear:both。弊端就是增加了无意义的标签
使用overflow
给包含浮动元素的父标签添加css属性 overflow：auto；zoom：1；zoom：1用于兼容IE6
使用after伪对象清除浮动
该方法只适用于非IE浏览器，具体写法可参照以下示例。使用中需注意以下几点。一：该方法中必须为需要清除浮动元素的伪对象中设置height：0，否则尬元素会比实际高出若干像素。

15、浮动元素引起的问题和解决办法
浮动元素引起的问题：
1）父元素的高度无法被撑开，影响与父元素同级的元素
2）与浮动元素同级的非浮动元素会跟随其后
3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：
使用clear：both；属性来清楚元素的浮动可解决2、3问题，对于1问题，添加如下样式，给父元素添加

.clearfix:after {
	content:  ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block; 
}

清除浮动的几种方法：

额外标签法
使用after伪类

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

浮动外部元素
设置overflow为hidden或者auto

16.线程和进程的区别
一个程序至少有一个进程，一个进程至少有一个线程
线程的划分尺度小于进程，使得多线程程序的并发性高
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
线程在执行过程中与进程还是有区别的，每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。单操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源的分配。这就是进程和线程的区别。