FE知识1

本文主要是介绍FE知识1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.BFC理解，那些可以开启BFC

BFC 英文名为 Block Formatting Context (块级格式化上下文)

内部的盒子会在垂直方向上一个接一个的放置
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC的作用
元素开启BFC后，子元素不会发生margin塌陷问题，解决margin重叠（塌陷）问题
元素开启BFC后，子元素脱离文档流父元素无法撑开，解决子元素浮动的问题，

BFC有几种常见的方法：
满足下列条件之一就可以触发 BFC:
HTML 根元素
position 为 absolute 或 fixed
float 属性不为 none（常用）
overflow 不为 visible（常用）例如hidden、auto或scroll。
display 为 inline-block， table-cell， table-caption， flex

2.标准盒模型和怪异盒模型区别，如何设置

通过CSS3的box-sizing属性来控制元素的盒模型。
当box-sizing属性的值为content-box时，使用的是标准盒模型；
当box-sizing属性的值为border-box时，使用的是怪异盒模型。

在标准盒模型中，元素的总宽度是由元素的内容宽度（content）、内边距（padding）、边框（border）和外边距（margin）四部分相加得到的。css中设置盒子的width，height只代表内容的尺寸，不包括内边距、边框和外边距。

在怪异盒模型中，元素的总宽度是由元素的内容宽度（content）加上内边距（padding）和边框（border）三部分相加得到的。也就是说，css中设置盒子的width，height,(元素的宽度和高度)不仅包括内容的尺寸，还包括内边距和边框。

3.rem，em区别

em和rem都是在CSS布局中常用的相对长度单位;

em,em是相对于当前元素的字体大小。
rem是CSS3新增的相对长度单位，全称为root em，是相对于根元素（通常是HTML元素）。通常的做法是给HTML元素设置一个字体大小，然后其他元素的长度单位就为rem。这意味着，如果HTML元素的font-size是20px，那么1rem就等于20px

4.数据类型，typeof null 是什么？

基本数据类型，也被称为原始值，包括：

Number：数值类型，包括整数和浮点数，也可以表示为科学记数法的形式。例如 123，0.123，1.23e4 等。
String：字符串类型，用于表示文本信息，比如 ‘Hello World’。
Boolean：布尔类型，只有两个可能的值，即 true 和 false。
Undefined：未定义类型，表示变量已经声明，但还未赋值。
Null：空类型，表示变量没有值。
Symbol：符号类型，ES6 新增的数据类型，主要用于创建唯一的标识符。
BigInt：大整数类型，ES 2020新增，能够表示超过 Number 类型大小限制的整数。

引用数据类型,引用数据类型，包括：
Object：对象类型，包括普通对象、数组和函数等。

typeof null == ‘object’

在 JavaScript 中，数据类型在底层都是以二进制形式表示的，二进制的前三位为 0 会被 typeof 判定为对象类型，如下所示：

000 - 对象，数据是对象的应用
1 - 整型，数据是31位带符号整数
010 - 双精度类型，数据是双精度数字
100 - 字符串，数据是字符串
110 - 布尔类型，数据是布尔值
而 null 值的二进制表示全是 0 ，自然前三位当然也是 000，因此，typeof 会误以为是对象类型。如果想要知道 null 的真实数据类型，可以通过下面的方式来获取。

Object.prototype.toString.call(null) ; // [object Null]

5.原型链

JavaScript中的每个对象都有一个内部的[[Prototype]]属性，也称为原型（prototype），它指向另一个对象或者null。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着它的原型链一层层向上查找，直到找到该属性或方法或者原型链到达顶端（即Object.prototype，它是所有对象的祖先）为止。

在JavaScript中，每个对象都有一个指向它的原型的链接，这就是所谓的原型链。原型链是JavaScript实现继承的一种方式。

原型链的工作原理
当尝试访问一个对象的属性时，JavaScript不仅会在该对象本身上查找，还会在其原型上查找，然后再查找其原型的原型，这个过程会一直持续到找到匹配的属性或达到原型链的末尾。如果最终没有找到匹配的属性，那么JavaScript会返回undefined。

6.闭包，闭包会有什么问题，内存泄漏，怎么进行垃圾回收

(1) 闭包是有权访问另一个函数作用域变量的函数
(2) 闭包一般是函数嵌套，一个函数返回另外一个函数，内部函数访问外部函数的变量就形成了一个闭包
(3) 闭包的优点是可以私有化变量，将变量私有化到函数内部，并在私有化的基础上进行数据保持
(4) 闭包在防抖节流函数柯里化，都应用里数据保持这个特性
(5) 在防抖函数中，第一次点击的时候，我们会let一个time一个定时器，如果不采用闭包的话，下次触发函数会重新创建一个新的定时器，两个定时器的引用不同，是没有关联的，使用闭包可以直接在内存中找到之前创建的计时器，调用就可以直接拿到对应的定时器的时间
(6) 闭包的缺点是容易造成内存泄露，因为闭包创建的变量会一直存在内存中，需要及时置空，否则会造成内存泄露，影响程序性能

7.flex：1 是什么缩写

flex: 1 实际上是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;
可放大可缩小，

8.vue.use做了那些事件

可以通过Vue.use方法来注册插件。该方法接收一个插件对象作为参数，该对象必须包含一个名为install的方法。如果插件对象带有install方法，Vue.use会执行该方法，并将Vue构造函数作为第一个参数传入。如果插件对象是一个函数，Vue.use会直接将该函数作为插件的注册方法，同样将Vue构造函数作为第一个参数。

Vue.use的工作流程包括以下步骤：

1.检查插件是否已经注册，如果已经注册则直接跳过注册过程。
2.处理入参，将第一个参数之后的参数归集，并在首部塞入this上下文。
3.执行注册方法，如果插件对象有install方法，则调用该方法，传入处理后的参数。如果插件对象是一个函数，则直接让该函数执行。
4.缓存插件，以避免重复注册。

9.跨域解决方法

1.JSONP
动态创建script请求
带上callback，服务器执行带上参数回调方法

缺点
具有局限性，只支持GET请求
不安全，可能会遭受XSS攻击

2.cors（跨域资源共享
需要浏览器和服务器同时支持

分为简单请求和非简单请求
简单请求不会触发cors预检请求

简单请求
浏览器直接发出

非简单请求
在正式通信前进行一次HTTP查询请求，称为预检请求
浏览器会询问服务器，当前所在网页是否在服务器允许访问的范围内，
以及可以使用哪些HTTP请求和头信息字段，
只有得到肯定的答复，才会进行正式的HTTP请求，否则就会报错

预检请求使用的请求方法是OPTIONS

3.postMessage跨域
是HTML5中XMLHttpRequest中的API

解决以下问题
页面和其打开的新窗口的数据传递
多窗口之间的消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

a.html


<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>var iframe = document.getElementById('iframe');iframe.onload = function () {var data = {name: 'aym'};// 向domain2传送跨域数据   iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');};// 接受domain2返回数据window.addEventListener('message', function (e) {alert('data from domain2 ---> ' + e.data);}, false);</script>

b.html


<script>// 接收domain1的数据    window.addEventListener('message', function (e) {alert('data from domain1 ---> ' + e.data);var data = JSON.parse(e.data);if (data) {data.number = 16;// 处理后再发回domain1           window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');}}, false);
</script>

4.代理跨域
nginx代理
nodejs中间件代理
webpack-dev-server代理

5.iframe

document.domain + iframe
仅限主域相同子域不同的跨域场景
原理：两个页面都通过js强制设置document.domain为基础主域

location.hash + iframe跨域相互通信
原理：a与b跨域通信，通过中间页来实现，
不同域通过iframe的location.hash传值，相同域用js访问

window.name + iframe跨域相互通信
原理：name在不同页面加载后依旧存在
通过iframe的src属性由外域转向本地域，跨域数据window.name由外域转向本地域
巧妙的绕过了浏览器的跨域访问限制

6.WebSocket协议跨域
它实现了浏览器与服务器的全双工通信，同时允许跨域通信

10.src和href的区别，

src和href都是用来引用外部的资源
区别：
1.src是表示对资源的引用，href是表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系
2.对文档的影响不同，src会直接影响文档的加载和显示，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理
3.适用范围不同，src适用于图片、音频、视频和脚本等资源的引用，href适用于css样式表、字体文件和网页链接

11.script标签中的defer和async的区别，

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本，defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析
区别：
1.多个脚本的执行顺序不同，多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行
2.执行时机不同，async加载完立即执行，defer加载完会到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

12.sass less是什么，为什么使用他们

是 CSS 预处理器，CSS预处理器的主要目的是增强CSS的功能，并提供一些在原生CSS中不可用或不便于使用的特性。

变量和嵌套：Sass和Less都支持使用变量来存储和重用样式属性，这样可以减少重复的代码，并且使样式表更易于维护。
混合器和继承：Sass和Less允许定义和使用混合器（Mixin），可以将一组样式属性定义为一个混合器，然后在需要的地方引用。实现样式的复用。
导入和模块化：Sass和Less允许将样式表拆分为多个文件，并通过导入语句组合在一起。这样可以实现样式的模块化，提高可维护性。
运算和函数：Sass和Less都支持使用算术运算和自定义函数，可以在样式表中进行计算和操作。

箭头函数与普通函数的区别

与普通函数相比，他：
1.写法更加简洁，可以根据具体情况省略小括号，return 等。这一点在高阶函数的使用中特别方便。例如,数组的map, forEach等.
2.箭头函数内部没有自己的 this ,它的this就是外层作用域的 this 。它不能通过call,apply,bind来修改。
3.箭头函数内部没有arguments对象。但是，es6配套提供了剩余参数，可以用来替代argument.
4.不能当前构造器来使用。
5.没有原型

6.new箭头函数会发生什么

不能成功，因为它没有prototype，也没有自己的this指向

new操作符的实现步骤如下：

1创建一个对象
2将构造函数的作用域赋给新对象（也就是将对象的proto属性指向构造函数的prototype属性）
3指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
4返回新的对象
所以第二部第三部无法完成

7.Vue的基本原理

vue实例创建时，
1.遍历data属性，vue3是ref和reative，
2.用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化
3. 每个组件实例都有相应的 watcher ，在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher，更新关联的组件。

8.vue-router的基本原理

Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式
hash模式:
hash模式是开发中默认的模式，它的URL带着一个#;
hash模式的主要原理就是onhashchange()事件：
使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求
history模式:
history api可以分为两大部分，切换历史状态和修改历史状态：
使用浏览器的history属性
●
修改历史状态：History的 pushState() 和 replaceState() 方法，当
他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API。
●切换历史状态：包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作

块元素，行内元素有哪些？行内元素怎么变成块元素，行内元素和行内块元素区别

（1）block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
h，p，div

（2）inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
span，a，img

（3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

for……in……和for……of……区别

1.功能不同
for-in是遍历数组的下标
for-of是遍历数组的元素
2.原型的属性
for-in会遍历原型的属性
for-of不会遍历原型的属性
3.数据类型
for-in可以遍历Object类型
for-of不可以遍历对象Object类型，不是可迭代对象

map和weakmap区别

Map 和 WeakMap 都属于 ES6 中新增的数据类型，用于存储键值对。
Map 是一个普通的键值对集合，可以使用任何类型的值作为键或值，包括基本类型和对象。
而 WeakMap 的键必须是对象，值可以是任何类型。
Map 中的键值对是强引用关系，即只要 Map 中的键或值存在，Map 对象就会一直保留这个键值对，不会被垃圾回收。而 WeakMap 中的键值对是弱引用关系，如果 WeakMap 的键不再被引用，那么这个键值对就会被自动删除。
由于 WeakMap 中的键是弱引用，所以 **WeakMap 对象的 size 属性无法访问，**也无法使用 forEach() 和 clear() 等方法。
WeakMap 对象的主要应用场景是需要与另外一个对象关联，并且不想影响到这个对象的垃圾回收机制，以避免内存泄漏。例如，将对象存储在 WeakMap 中，可以确保这个对象只在其他地方仍然被引用时才被保留，否则会自动被删除，从而避免内存泄漏。

垃圾回收机制

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存

通常情况下有两种实现方式：

标记清除:
当变量进入执行环境是，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“

垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉

在此之后再被加上标记的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了

随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存
引用计数::
引用引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放

浏览器渲染过程

解析 HTML，构建 DOM 树
解析 CSS ，生成 CSS 规则树
合并 DOM 树和 CSS 规则，生成 render 树
布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算
绘制 render 树（ paint ），绘制页面像素信息
浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上

从输入url开始到页面渲染过程

 1、用户在浏览器中输入url地址

2、先判断是否有缓存，浏览器从dns解析域名得到服务器ip地址
3、TCP三次握手建立客户端和服务器的连接
三次握手：指建立一个tcp连接时,需要客户端和服务端总要发三个包。保证数据在传输时的一个完整性。
4、客户端发送HTTP请求获取服务器端的静态资源
5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
6、TCP四次挥手关闭客户端和服务器的连接
四次挥手：TCP的连接的拆除需要发送四个包，因此称为四次挥手。
为什么挥手要四次：因为Tcp是全双工通信的，同时也是为了数据的完整性。
7、浏览器解析文档资源并渲染页面

回流重绘区别

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
回流触发时机：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

重绘触发时机：
颜色的修改

文本方向的修改

阴影的修改

如何判断数据类型，typeof null 为什么是object

1.typeof 判断的粒度比较粗，它能准确判断基础类型（不包括null）和 Object 和 Function。换句话，它不能判断null 和 Array ，会把他们都判断为object。

2.instanceof 用来判断对象的更具体的类型。instanceof的模拟实现, 它的主要原理的是沿着对象的原型链的方向，判断原型对象是否是构造器的prototype。 instanceof和typeof的区别

3.Array.isArray 专门用来判断是否是数组。

4.Object.prototype.toString.call 是最全面的方法了。它的代码运行如下
在这里插入图片描述

如何继承原型对象？？？

1、原型链继承；将父类的实例作为子类的原型。
2、构造继承；使用父类的构造函数来增强子类实例。
3、实例继承；为父类实例添加新特性，作为子类实例返回。
4、拷贝继承。
5、组合继承。call式继承 + 原型继承

ex6中 extends继承

如何改变this执行，有什么区别

apply,bind,call
共同点:
都可以修改this，第一个参数都是修改的this
不同点:
传参方式不同：call,bind是逐一传参,， apply是数组/伪数组传参
执行机制不同：call和apply会立即执行函数，bind不会立即执行

v-if，v-show，v-html的原理

v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

v-if，v-show区别

相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

1.原理不同:v-if本质是元素新增与移除,v-show本质是修改元素的display属性
2.场景不同:v-if用于不需要频繁切换的元素,v-show用于需要频繁切换的元素
3.性能不同:v-if初始渲染性能高,切换性能低.v-show初始化渲染性能低,切换性能高

v-model是如何实现的

v-model的本质上来说,是一个语法糖目前咱们习惯性的写法是这样的:
是:value=“val” 和@input="val=$event.target.value"的语法糖

vue3是：model-value和@update:modelvalue

nextick原理，作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

作用是确保操作的是更新完成之后的dom

vue2vue3区别

1、生命周期的改变(setup代替了之前的beforeCreate和created,其他生命周期名字有些变化，功能都是没有变化的)
2、 proxy代替defineProperty

3、性能方面的改变(Diff算法的提升)

4、选项式api新增的compositionAPI（组合式API）

5、v-model的变化
6、更支持ts

父子组件传值

1.props，emit
2.ref
3.provide，inject
4.eventbus
●子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
●通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
●使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。