七天速记前端八股文（重点）

for in和正常for循环的区别

在遍历数组时，正常的 for 循环通常比 for...in 循环更适合。虽然 for...in 循环可以用于遍历数组，但它有一些潜在的问题和限制。

下面是一些使用 for 循环相对于 for...in 循环的优势：

顺序遍历：for 循环可以按照数组元素的顺序进行迭代。而 for...in 循环在遍历数组时，并不能保证按照特定顺序遍历，因为它遍历的是对象的属性。
不包含原型链上的属性：for 循环仅遍历数组自身的索引，不包括原型链上的属性。而 for...in 循环会遍历对象的所有可枚举属性，包括原型链上的属性，这可能会导致意外的行为。
性能优化：for 循环通常比 for...in 循环具有更好的性能。因为 for 循环只需要维护一个迭代变量，并直接通过索引访问数组元素，而 for...in 循环需要处理对象的所有属性。

建议使用for循环！！！

async

async是异步的意思，await则可以理解为async wait ，所以可以立即async就是用来声明一个异步方法，而await是用来等待异步方法执行的。

扩展： JSONPlaceholder 是一个免费的在线 REST API，用于开发和测试前端应用程序。它提供了一组模拟的 HTTP 接口，可以进行常见的 CRUD（创建、读取、更新、删除）操作，如获取用户信息、文章、评论等。这样，开发人员可以在不使用真实后端服务的情况下，通过 JSONPlaceholder 来模拟和测试前端应用程序的数据交互。

  function f() { return Promise.resolve('TEST'); }async function asyncF() { return 'TEST'; }

这两种写法都是等效的，第一种使用传统的Promise去创建，第二种使用了语法糖。

Promise.resolve() 可以创建一个返回给定值的 Promise 对象，这里返回的是字符串 'TEST'

用async声明的函数会被自动封装为一个 resolved 状态的 Promise 对象。

 async function fn1() {console.log(1)await fn2()console.log(2) // 阻塞}async function fn2() {console.log('fn2')}fn1()console.log(3);

await 会阻塞下面的代码（即加入微任务队列），先执行 async外面的同步代码，同步代码执行完，再回到 async 函数中，再执行之前阻塞的代码

所以上述输出结果为：1，fn2，3，2

fetch网络请求接口

fetch 方法已经内置在 JavaScript 中，因此通常不需要安装额外的插件或库就可以使用它。

注意事项： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使 JavaScript 可以在服务器端运行。VS Code 是一个代码编辑器，它本身并不是 Node.js 环境，但是可以用于开发 Node.js 应用程序。也就是说在兼容旧版浏览器或在 Node.js 环境中使用 fetch，则可能需要考虑使用相关的 polyfill 或库来提供 fetch 功能。

transition

在css3中，为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或者javascript. 直接使用transition

transition控制的是属性值的过渡效果，而不是特定的属性

cursor: pointer; 鼠标放上去会变成手性指示

数据加密

加密方式：对称加密，非堆成加密，哈希算法。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Symmetric Encryption Example</title>
</head><body><h1>Symmetric Encryption Example</h1><script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script><script>// 定义一个密钥（需要确保密钥的安全性）const key = "mySecretKey123";// 待加密的数据const data = "Hello, this is a secret message.";// 加密函数function encryptData(data, key) {const encryptedData = CryptoJS.AES.encrypt(data, key).toString();return encryptedData;}// 解密函数function decryptData(encryptedData, key) {const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);return decryptedData;}// 加密数据const encryptedData = encryptData(data, key);console.log("Encrypted Data:", encryptedData);// 解密数据const decryptedData = decryptData(encryptedData, key);console.log("Decrypted Data:", decryptedData);</script></body></html>

以上是使用对称加密中的AES加密的过程。

8中数据类型

在JS中，我们已知有5种基本数据类型：String、Number、Boolean、Undefined、Null。
一种引用数据类型：Object 包含(Function, Array)

Symbol、BigInt

es6的时候新增Symbol数据类型，每个通过Symbol（）创建的对象属性值都是独一无二的，避免了重复。

// 创建一个 Symbol 值
const mySymbol = Symbol('description');// 使用 Symbol 作为对象的属性名
const obj = {[mySymbol]: 'Hello, Symbol!'
};console.log(obj[mySymbol]); // 输出: Hello, Symbol!

在 JavaScript 中，普通的 Number 类型使用双精度浮点数表示，其最大安全整数是 2^53 - 1，es10中新增BigInt，它可以表示任意精度的整数，取决于计算机内存的大小

BigInt 类型的字面量以 "n" 结尾，用来区分普通的 Number 类型

定位

position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。
float属性取值：none(默认)、left、right、inherit。
display属性取值：none、inline、inline-block、block、table相关属性值、inherit。

多做案例！！！

POST和GET请求的区别

1.针对数据操作的类型不同.GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写。

2.参数大小不同. GET请求在URL中传送的参数是有长度的限制，而POST没有限制

3.安全性不同. GET参数通过URL传递，会暴露，不安全；POST放在Request Body中，相对更安全

4.浏览器回退表现不同 GET在浏览器回退时是无害的，GET 请求可能会比较宽松地进行重试，而 POST 请求则会更加谨慎，避免自动重复发起请求，以确保数据提交的准确性和安全性。

5.浏览器对请求地址的处理不同 GET请求地址会被浏览器主动缓存，而POST不会，除非手动设置

6.浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留

var和let\const

ES6之前创建变量用的是var,之后创建变量用的是let/const

var 存在变量提升，且可以重复定义（不会报错），而const和let不存在变量提升；

let 不能重复定义（因为它申明的变量是块级作用域的）；允许值的修改；

const 不能重复定义；不允许值的修改；

box-sizing

box-sizing 属性确实有三个可能的属性值，它们分别是：

content-box：默认值，元素的宽度和高度仅包括内容框（content box），不包括 padding 和 border。
padding-box：这个值在一些旧的草案中出现过，但在最终的 CSS 规范中被移除了，因此实际上并不在标准中使用。
border-box：元素的宽度和高度包括内容框（content box）、padding 和 border 的尺寸。

WebStock

 // 创建 WebSocket 连接const socket = new WebSocket('wss://echo.websocket.org');// 连接建立时的回调函数socket.onopen = function (event) {console.log('WebSocket 连接已建立');// 发送消息给服务器socket.send('Hello, Server!');};// 接收到消息时的回调函数socket.onmessage = function (event) {console.log('收到服务器消息：', event.data);};// 连接关闭时的回调函数socket.onclose = function (event) {console.log('WebSocket 连接已关闭');};// 发生错误时的回调函数socket.onerror = function (error) {console.error('WebSocket 出现错误：', error);};

实现原理： 实现了客户端与服务端的双向通信，只需要连接一次，就可以相互传输数据，很适合实时通讯、数据实时更新等场景。

Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议，为了兼容 HTTP 握手规范，在握手阶段依然使用 HTTP 协议，握手完成之后，数据通过 TCP 通道进行传输。

Websoket 数据传输是通过 frame 形式，一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输，不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息，提高传输效率。

优点：双向通信。客户端和服务端双方都可以主动发起通讯。没有同源限制。客户端可以与任意服务端通信，不存在跨域问题。数据量轻。第一次连接时需要携带请求头，后面数据通信都不需要带请求头，减少了请求头的负荷。传输效率高。因为只需要一次连接，所以数据传输效率高。

缺点：长连接需要后端处理业务的代码更稳定，推送消息相对复杂；兼容性，WebSocket 只支持 IE10 及其以上版本。服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一；【需要后端代码稳定，受网络限制大，兼容性差，维护成本高，生态圈小】

BFC

overflow: hidden;的使用，当我们使用float浮动时，会影响后面的布局，给父元素加该属性即可。

<html lang="en"><head><meta charset="UTF-8"><title>BFC Example</title><style>.container {/* overflow: hidden; *//* 创建 BFC */}.box {margin: 20px;background-color: lightblue;}</style>
</head><body><div class="container"><div class="box">Box 1</div></div><div class="box">Box 2</div>
</body></html>

以上代码是防止外边距合并的案例，在代码中如果一个父元素div里的子元素div需要和父元素一样等级的div一起做操作，子元素div的外边距下和另一个div的外边距上会合并。这是和可使用overflow:hidden来解决。

clear: both; 是一个用于清除浮动元素的 CSS 属性。当子元素设置了浮动（例如 float: left; 或 float: right;）时，父元素的高度可能无法正确被撑开，导致布局混乱。在这种情况下，可以使用 clear: both; 来清除浮动，并确保父元素能够正确地包裹其内部的浮动子元素

要创建一个BFC（块格式化上下文），可以通过以下几种方式来实现：

使用 overflow 属性：将容器元素的 overflow 属性设置为除 visible 以外的值（如 auto、hidden、scroll），即可创建一个新的 BFC。
使用 float 属性：浮动元素会创建一个 BFC。在父容器中设置浮动元素，也会导致该父容器成为一个 BFC。
使用 display: inline-block：将元素的 display 属性设置为 inline-block 也会创建一个 BFC。
使用绝对定位：如果一个元素的 position 属性被设置为 absolute 或 fixed，它也会创建一个 BFC。

数据类型判断 instanceof 和 typeof 的区别

1.typeof

优点：能够快速区分基本数据类型

缺点：不能将Object、Array和Null区分，都返回object

2.instanceof

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象

缺点：Number，Boolean，String基本数据类型不能判断

3.Object.prototype.toString.call()

var toString = Object.prototype.toString;
console.log(toString.call(1));      //[object Number]
console.log(toString.call(true));   //[object Boolean]
console.log(toString.call('mc'));   //[object String]
console.log(toString.call([]));     //[object Array]
console.log(toString.call({}));     //[object Object]
console.log(toString.call(function(){})); //[object Function]
console.log(toString.call(undefined));  //[object Undefined]
console.log(toString.call(null)); //[object Null]

优点：精准判断数据类型

缺点：写法繁琐不容易记，推荐进行封装后使用

隐藏页面元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

**回流（reflow）** ：指的是当页面的布局发生变化，需要重新计算元素的位置和大小，然后重新绘制整个页面的过程。当隐藏一个元素（比如使用 display: none;）导致布局发生变化时，就会触发回流。

- **重绘（repaint）** ：指的是当页面的外观发生变化，但不影响布局时，浏览器只需要重新绘制受影响的部分而不需要重新计算元素的位置和大小。隐藏一个元素（比如修改颜色、背景等）通常会引起重绘。

回流和重绘是浏览器渲染页面时的重要概念，虽然它们可能不直接影响到页面的显示，但是在性能优化方面却非常重要。当页面中的元素频繁地触发回流和重绘时，会导致页面性能下降，出现卡顿等问题。

DNS协议是什么

mp.weixin.qq.com/s?__biz=Mzg…

深拷贝和浅拷贝的区别

浅拷贝：如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

Object.assign

// 创建一个原始对象
const originalObject = { a: 1, b: 2 };// 使用 Object.assign 进行浅拷贝
const shallowCopy = Object.assign({}, originalObject);// 修改浅拷贝后的对象，不会影响原始对象
shallowCopy.a = 3;console.log(originalObject); // 输出: { a: 1, b: 2 }
console.log(shallowCopy);    // 输出: { a: 3, b: 2 }

Array.prototype.slice()

// 创建一个原始数组
const originalArray = [1, 2, 3, 4, 5];// 使用 slice 进行浅拷贝
const shallowCopy = originalArray.slice();// 修改浅拷贝后的数组，不会影响原始数组
shallowCopy[0] = 6;console.log(originalArray); // 输出: [1, 2, 3, 4, 5]
console.log(shallowCopy);    // 输出: [6, 2, 3, 4, 5]

Array.prototype.concat()

// 创建一个原始数组
const originalArray = [1, 2, 3, 4, 5];// 使用 concat 进行浅拷贝
const shallowCopy = originalArray.concat();// 修改浅拷贝后的数组，不会影响原始数组
shallowCopy[0] = 6;console.log(originalArray); // 输出: [1, 2, 3, 4, 5]
console.log(shallowCopy);    // 输出: [6, 2, 3, 4, 5]

使用拓展运算符实现的复制 const shallowCopy = { ...originalObject };

深拷贝：深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

Flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。简单的分为容器属性和元素属性。

容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;

flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow： .box { flex-flow: || ; }

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

align-content

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

闭包

关于这块还是不太懂,刷课.

function createCounter() {let count = 0;function increment() {count++;console.log("当前计数值：", count);}return increment;
}// 创建一个计数器
const counter = createCounter();// 每次调用 counter 函数，计数器值会增加
counter(); // 输出: 当前计数值： 1
counter(); // 输出: 当前计数值： 2
counter(); // 输出: 当前计数值： 3

Rem布局

Rem是相对于html的font-size大小来计算的,如果font-size:10px;那么1rem=10px; 优点:可以快速使用鱼移动端布局,字体,图片高度. 缺点: ①目前 ie 不支持，对 pc 页面来讲使用次数不多；

②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；

③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

知识扩展:媒体查询

浏览器如何渲染UI的

1.解析html 2.解析css 3.合并两者 4.布局 5.绘制:根据计算出的位置和大小绘制 6.触发交互

DOM树的构建过程:

当浏览器接收到二进制数据后，首先会按照指定的编码格式将其转化为HTML字符串。然后，浏览器开始解析这个HTML字符串，将其转换成一系列的标记（Tokens）。接下来，浏览器会根据这些标记构建出相应的节点（Nodes），并为每个节点添加特定的属性，同时通过指针确定节点之间的父子关系、兄弟关系以及所属的树形结构（treeScope）。最终，通过这些节点之间的指针关系，浏览器构建出完整的DOM树。

重绘和回流

回流：

有些人也会把回流称为重排.

1、布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。

2、改变元素的位置和尺寸大小都会引发回流

重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

注意: **回流一定会引起重绘,但重绘不一定会引起回流.**

如何避免重排和重绘 1.提升为合成层 will-change: transform;

2.集中改变样式，不要一条一条地修改 DOM 的样式。

不要把 DOM 结点的属性值放在循环里当成循环里的变量。
尽量只修改position：absolute或fixed元素，对其他元素影响不大(absolute和fixed将元素移出文档流，使其成为一个独立的图层,如果需要重排重绘也不会影响到后面元素的位置变化)

百分比布局的优缺点

优点:

响应式布局设计
灵活性
相对定位:百分比可以实现相对定位,是的元素的位置相对余父元素进行调整

缺点: 复杂性:在处理多层嵌套布局时,非常复杂. 限制:百分比布局幼时会受到父元素尺寸的限制性能:相对鱼固定像素值而言,百分比布局对性能有一定影响,浏览器需要在调整窗口大小时重新渲染页面.

空元素：br hr img input link meta

当你的子元素中使用了浮动,记得用<div style="clear: both;"></div>清楚,如果不写后期可能会导致高度塌陷问题,建议都写上.

当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等

当元素浮动时，它会脱离常规文档流并且不再占据原本的空间，这就是所谓的“脱标”（out of flow）。父级元素没有包含浮动元素，因此在正常情况下，父级元素的高度会根据其内容的高度来自动调整，但是因为浮动元素脱离了文档流，父级元素无法正确计算其高度，导致父级元素出现高度塌陷的情况。

高度塌陷的表现通常是父级元素无法正确包裹内部的浮动元素，使得父级元素的高度变为0或者很小。这样可能会导致页面布局混乱，影响设计和排版效果。

为了避免高度塌陷问题，可以使用清除浮动的方法，其中包括添加一个空的 div 元素，并设置 clear: both; 样式来清除浮动效果。这样可以确保父级元素正确包裹内部的浮动元素，保持布局的稳定性

cookie和sessionStorage和localStorage的关系

相同点： 存储在客户端

不同点： cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+

cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除

cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

重点理解:

当在浏览器中打开一个新的标签页时，新的标签页会复制父级标签页的 sessionStorage 数据，类似于进行了一次深拷贝操作。这意味着新标签页会获取到与父级标签页相同的 sessionStorage 数据副本，但之后它们之间的 sessionStorage 数据就不再同步了。换句话说，在这种情况下，如果你在其中一个标签页中修改了 sessionStorage 的数据，这些修改不会自动同步到其他标签页。

另外，即使是打开多个拥有相同 URL 的标签页，它们之间的 sessionStorage 也不会同步，因为它们并不属于同一个会话（session）。每个标签页都会维护自己独立的 sessionStorage 数据，互相之间不会共享数据。这种设计可以确保在不同标签页之间能够保持数据的隔离性和独立性。

给我背下来:

*生命周期不同：cookie：可以设置失效时间；如果没有设置失效时间，浏览器关闭后数据会失效；localStorage：数据会永久保存，除非手动清除；sessionStorage：会话当前数据有效就是在浏览器窗口关闭之前有效，浏览器关闭后数据会被清除

体积大小：cookie：传递少量数据，4KB左右。每次http请求都会携带cookie，所以适合存储很小的数据。localStorage、sessionStorage：保存大量数据，5MB左右

http请求不同：cookie：每次http请求都会携带cookie，请求过多保存过多的数据会带来性能问题，web Storage（localStorage和sessionStorage）：只在客户端保存，不参与服务器的交互。*

js获取DOM元素的几种方法

1、根据id获取元素document.getElementById("id属性的值")2、根据标签名字获取元素document.getElementsByTagName("标签的名字");3、根据name属性的值获取元素document.getElementsByName("name属性的值");4、根据类样式的名字获取元素document.getElementsByClassName("类样式的名字");5、根据选择器获取元素document.querySelector("选择器");
它会返回与指定 CSS 选择器匹配的文档中第一个元素，如果没有匹配的元素，则返回 `null`document.querySelectorAll("选择器");
它会返回一个 `NodeList` 对象，其中包含了文档中所有与指定 CSS 选择器匹配的元素列表。

WEB攻击(背下来)

XSS(跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当用户登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息

CSRF（跨站请求伪造：攻击者诱导用户进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用用户在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

Sql 注入攻击，是通过将恶意的 Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql服务器上解析执行进行的攻击

XSS避免方式：

1、url参数使用encodeURIComponent方法转义

2、尽量不是有InnerHtml插入HTML内容

3、使用特殊符号、标签转义符。

CSRF避免方式：

1、添加验证码

2、使用token

服务端给用户生成一个token，加密后传递给用户用户在提交请求时，需要携带这个token 服务端验证token是否正确 DDoS又叫分布式拒绝服务，其原理就是利用大量的请求造成资源过载，导致服务不可用。

DDos 避免方式：

1、限制单IP请求频率。

2、防火墙等防护设置禁止ICMP包等

3、检查特权端口的开放

输入URL回车后发生了什么?(背下来)

1 面试套话： “检查缓存、先解析URL、然后DNS域名解析、再发起HTTP请求建立TCP连接、服务端响应返回页面资源进行渲染、然后断开TCP连接”

2 详细过程： 1、（找）DNS解析 -> 寻找哪台机器上有你需要资源根据网址找IP

2、TCP连接 -> 客户端和服务器，TCP作为其传输层协议

3、发送HTTP请求 -> HTTP报文是包裹在TCP报文中发送的请求行，请求报头，请求正文

4、服务器处理请求并返回HTTP报文 -> 状态码,响应报头和响应报文。

5、浏览器解析渲染页面 -> 浏览器在收到HTML,CSS,JS文件后依次渲染

6、连接结束 -> 断开TCP连接四次挥手

html中dom 的event事件(背下来)

onblur：失去焦点
onfocus:元素获得焦点。
加载事件：
onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
5. 键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
onchange 域的内容被改变。
onselect 文本被选中。
7. 表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

清除浮动的几个方式

1.给父元素末尾添加一个空元素，并设置成清除浮动，即：

优点：通俗易懂，易于掌握

缺点：添加了无意义标签，不易于后期维护，违背了结构和表现分离的标准

2.给父元素添加 overflow：auto;

3.让父元素也浮动

缺点：影响整体页面布局，若父元素也有父元素呢？总不能一直浮动到body吧？

4.使用after伪元素

.clearfix::after {content: "";display: table;clear: both;}

在伪元素中，使用 content: ""; 可以确保伪元素有内容可以插入，即使是空内容。这是因为伪元素默认是没有内容的，如果不指定 content 属性，伪元素是不会显示的。
添加 display: table; 主要是为了解决一些浏览器对空内容的伪元素可能不渲染的问题。将 display 设置为 table 或其他类似值，可以强制让伪元素生成一个框，确保它在页面上占据空间。

给父元素添加一个类，来添加一个看不见的块元素，以实现清除浮动。

5.最优解

首先我们说一个CSS的概念——BFC块级格式上下文，简单来说就是只要样式或方法触发了BFC就可以防止高度塌陷.

AJAXX原理

异步的javaScript和XML,可以在不重新加载整个页面的情况下,与服务器交换数据,并更新部分网页.

创建 XMLHttpRequest 对象：这是Ajax的核心对象，用于在后台与服务器交换数据而不必重新加载整个页面。
通过 XMLHttpRequest 的 open() 方法建立与服务器的连接，并指定请求的类型（GET、POST等）和URL。
构建请求所需的数据内容，可以是参数或者请求体。然后使用 XMLHttpRequest 的 send() 方法将请求发送给服务器。
监听 XMLHttpRequest 的 onreadystatechange 事件，以便在通信状态发生改变时进行处理。通常会检查 readyState 和 status 属性来确定请求的状态。
当 readyState 为 4 且 status 为 200 时，表示请求成功，可以从 XMLHttpRequest 对象的 responseText 或 responseXML 属性中获取服务器返回的数据结果。
使用获取到的数据结果，通过JavaScript操作DOM来更新页面的特定部分。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax Example</title><script>// 创建一个新的 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 当 readyState 改变时执行的函数xhr.onreadystatechange = function () {// 确保请求已完成，并且响应状态为 200（即成功）if (xhr.readyState === 4 && xhr.status === 200) {// 获取响应数据var response = xhr.responseText;// 将响应数据显示在 id 为 "output" 的元素中document.getElementById("output").innerHTML = response;}};// 打开一个新的 GET 请求xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);// 发送请求xhr.send();</script>
</head><body><!-- 用于显示响应数据的 div 元素 --><div id="output">Loading...</div>
</body></html>

元素水平居中

仅居中元素定宽高适用

absolute + 负margin

absolute + margin auto

absolute + calc

居中元素不定宽高

absolute + transform

lineheight

writing-mode

table

css-table

flex

grid

PC端有兼容性要求，宽高固定，推荐absolute + 负margin

PC端有兼容要求，宽高不固定，推荐css-table

PC端无兼容性要求，推荐flex

移动端推荐使用flex

如何理解CDN?实现原理?(背)

内容分发网络: CDN（内容分发网络）是一种通过位于世界各地的服务器来加速互联网内容传输的技术架构。它通过将内容缓存在离用户更近的位置，以降低用户对原始服务器的访问次数，从而提高内容的传输速度和性能

当你使用 CDN（内容分发网络）时，通常会将你的域名指向 CDN 提供的服务器，以便加速内容的传输和提高网站性能。在这种情况下，DNS 解析的结果可能不再是直接的 IP 地址，而是一个 CNAME 记录，它是 Canonical Name 的缩写

跨越(还没练习)

跨域访问的限制并不是浏览器限制发送请求，而是浏览器阻止了请求后数据的加载渲染

一、定义：

跨域：是由浏览器的同源策略造成的。同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

解决方案:

1.最初做项目的时候，使用的是 jsonp(一种利用 JSON 格式进行跨域数据传输的解决方案)，但存在一些问题，使用 get 请求不安全，携带数据较小

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。步骤：

① 去创建一个 script
② script 的 src 属性设置接口地址
③ 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
④ 通过定义函数名去接受返回的数据

//动态创建 script
var script = document.createElement('script');// 设置回调函数
function getData(data) {console.log(data);
}//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';// 让 script 生效
document.body.appendChild(script);

缺点:
JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。

CORS（跨源资源共享）是一种机制，允许网页应用从不同的源（域、协议或端口）请求资源。当浏览器发起跨域请求时，目标服务器需要设置适当的响应头来指示浏览器该请求是被允许的。

具体来说，服务器通过在 HTTP 响应头中设置 Access-Control-Allow-Origin 来允许特定源的请求访问资源。例如，如果服务器设置了 Access-Control-Allow-Origin: https://example.com，那么来自 https://example.com 的请求就会被允许访问该资源。

简而言之，CORS 允许服务器在响应中告诉浏览器哪些源是被允许访问资源的，从而确保安全地进行跨域请求。这个机制有助于防止恶意网站对其他网站的资源进行未经授权的访问。

3.最方便的跨域方案 proxy代理+ Nginx

方法有很多,遇到的时候再去一一尝试即可.