腾讯面试准备-2024.3.21

腾讯面试准备-2024.3.21

• 腾讯面试准备-2024.3.21
• • 自我介绍
  • C++11/14/17新特性
  • • C++11新特性
    • C++14新特性
    • C++17新特性
  • struct和class的区别
  • 从浏览器地址栏输入URL到请求返回发生了什么？
  • HTTPS和HTTP的区别
  • HTTP加密原理
  • HTTP版本详解
  • • HTTP/1.0
    • HTTP/1.1
    • HTTP/2.0
    • HTTP/3.0
    • 总结
  • 前端常见的安全问题及防范措施
  • • 跨站脚本攻击（XSS）
    • 跨站请求伪造（CSRF）
    • [点击劫持（Click Jacking）](#点击劫持（Click Jacking）)
    • CDN劫持
  • 前端性能优化：提升网站加载速度
  • Vue3响应式原理
  • Vue3渲染过程
  • [Vue router实现](#Vue router实现)
  • • Hash模式
    • History模式
    • abstract模式
  • TypeScript
  • BFC
  • HTML块级元素、行内元素
  • css中的position有哪些定位方式
  • 什么是宏任务和微任务？
  • 什么是跨域？
  • 回调函数

腾讯面试准备-2024.3.21

自我介绍

略。

C++11/14/17新特性

C++11新特性

1. 自动类型推导（Type Inference）：引入了 auto 关键字，可以根据初始化表达式自动推导变量的类型。
2. 统一的初始化语法（Uniform Initialization）：可以使用花括号 {} 初始化对象，无论是基本类型、数组、类对象还是容器。
3. lambda 表达式：可以在代码中定义匿名函数，简化函数对象的创建和使用。
4. 范围-based for 循环：用于遍历容器中的元素，提供了一种更简洁、安全的遍历方式。
5. nullptr：引入了 nullptr 关键字，代表空指针，替代了传统的 NULL 宏。

C++14新特性

1. C++14引入了通用lambda表达式，可以使用auto关键字作为参数类型和返回类型，使得lambda表达式更加灵活。
2. C++14引入了二进制字面量，允许程序员使用二进制表示法来表示整数值。二进制字面量以前缀0b或0B开头，后面跟着一串二进制数字。例如，0b101010表示十进制数42。
3. 数字分隔符使得大数字的可读性变得更高了。

C++17新特性

1. 自从 C++11 起，C++ 就已经支持以 u8 为前缀的 UTF8 字符串字面量。C++17 进一步支持以 u8 为前缀的 UTF8 字符字面量。比如：char c = u8'6'。
2. C++17 之前，在类中定义的非 const 静态变量，需要在类的外面进行初始化。C++17 引入了内联变量的概念，可以直接在类中定义并初始化非 const 静态变量。
3. C++17 中，if 和 switch 语句允许我们在条件表达式里声明一个初始化语句。
4. C++17 终于将文件系统纳入标准中，提供了关于文件系统的很多功能，基本上应有尽有。比如：创建目录、拷贝文件、判断文件是否存在等等。

struct和class的区别

1. 默认访问权限：结构体的成员默认访问权限是公共的（public），类的成员默认访问权限是私有的（private）。
2. 成员函数：类可以包含成员函数，这些函数可以操作类的私有成员，并且可以实现类的行为和功能。结构体也可以有成员函数，但是它们的主要目的是为了实现一些操作，而不是定义类似于类的行为。
3. 继承：类可以通过继承实现子类与父类之间的关系，可以使用公共、保护或私有继承来控制成员的访问权限。结构体也可以继承，但由于其成员默认是公共的，继承可能导致访问权限问题。
4. 构造函数和析构函数：类可以拥有构造函数和析构函数，用于对象的初始化和清理。结构体没有默认的无参构造函数，且只能声明有参的构造函数，没有析构函数，它们的使用场景通常是比较简单的数据封装。
5. 默认成员访问标签：在类中，可以使用访问标签（public、private、protected）来指定成员的访问权限。在结构体中，无法使用访问标签来指定成员的访问权限，所有成员都默认是公共的。
6. class是引用类型，struct是值类型。作为参数传递时，class变量以按址方式传递，而struct变量是以按值方式传递的。
7. class实例由垃圾回收机制来保证内存的回收处理，而struct变量使用完后立即自动解除内存分配。

从浏览器地址栏输入URL到请求返回发生了什么？

1. 用户输入URL地址：用户在浏览器的地址栏中输入一个URL地址（例如：http://www.example.com）。

2. DNS解析：浏览器首先会检查本地缓存中是否有该URL的IP地址，如果没有，则会向本地DNS服务器发送一个DNS查询请求，以获取URL的IP地址。如果本地DNS服务器也没有该IP地址的缓存，它将向顶级DNS服务器发出请求，并依次向下查找，直到找到URL的IP地址。

3. 建立TCP连接：浏览器使用URL中的IP地址与服务器建立TCP连接。这是通过三次握手来完成的，即浏览器发送一个连接请求，服务器回复一个确认连接的响应，最后浏览器再次发送一个确认连接的响应。

4. 发送HTTP请求：一旦TCP连接建立，浏览器就会向服务器发送一个HTTP请求。这个请求包含了用户想要获取的资源的类型（例如HTML页面、图片、视频等）以及其他相关的信息，如请求方法（GET、POST等）、请求头部、请求体等。

5. 服务器处理请求：服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行相应的处理。这可能涉及到查询数据库、处理业务逻辑等操作。

6. 服务器发送HTTP响应：服务器处理完请求后，会生成一个HTTP响应。这个响应包含了请求的资源以及其他相关的信息，如响应状态码、响应头部、响应体等。

7. 接收HTTP响应：浏览器接收到服务器发送的HTTP响应后，会对响应进行解析。它会检查响应的状态码，以确定请求是否成功，并根据响应的内容类型来决定如何处理。

8. 渲染页面：如果响应的内容类型是HTML页面，浏览器会解析HTML代码，并根据CSS样式和JavaScript脚本来渲染页面。它会将页面的结构、样式和交互行为展示给用户。

9. 关闭TCP连接：一旦页面渲染完成，浏览器会关闭与服务器之间的TCP连接。这是通过四次握手来完成的，即浏览器发送一个关闭连接的请求，服务器回复一个确认关闭连接的响应，最后浏览器再次发送一个确认关闭连接的响应。

当用户在浏览器中输入一个URL地址到响应发生，涉及到DNS解析、TCP连接的建立与关闭、HTTP请求的发送与响应的接收等过程。这些过程通过TCP/IP协议进行通信，最终实现了用户请求的资源在浏览器中的展示。

HTTPS和HTTP的区别

HTTP（HyperText Transfer Protocol）中文全称叫超文本传输协议，属于应用层协议，一般用于web浏览器和网站服务器之间传递信息。HTTPS（Hypertext Transfer Protocol Secure）比HTTP出现得更晚，本质还是HTTP协议。从名称后面加了Secure就可以看出，很明显是为了解决HTTP传输中的安全性问题。

区别如下：

1. HTTP是明文传输，HTTPS是加密的安全传输。比如用wireshark抓你自己网卡的数据包，HTTP的请求是能看到明文数据的，HTTPS的请求看到的是乱码。这就避免了http传输过程中被窃听截取，或者冒充篡改。

2. HTTP+SSL=HTTPS。HTTPS并不是新的应用层协议，只是HTTP不再直接跟TCP进行通信了，而是先跟SSL（Secure Socket Layer）通信，再由SLL和TCP通信。

3. 端口不同。HTTP在url中以http://开始，默认使用的是80端口；HTTPS在url中以https://开始，默认使用的是443端口。

4. 资源消耗：和HTTP通信相比，HTTPS通信会由于加减密处理消耗更多的CPU和内存资源，页面加载速度更慢。

5. 开销：HTTPS通信需要证书，而证书一般需要向认证机构购买。

HTTP加密原理

对称加密：对称加密，用一个密钥，对明文进行加密，同理，同这把密钥，也可以对密文进行解密。

非对称加密：使用公钥和私钥进行加密解密，可以使用私钥加密，公钥进行解密，同理也可以使用公钥加密，私钥进行解密。

HTTP加密原理👉非对称加密+对称加密：客户端生成对称传输的密钥，然后用非对称加密中服务端发布的公钥对该密钥进行加密发给服务端，服务端收到之后用非对称加密中的私钥解密即可拿到对称加密的公钥。之后双方就可以采用这个密钥进行对称加密传输了。这样不仅保证了安全，效率也够高（相比于用两组公钥私钥进行数据的传输）。

存在问题：服务端在发送公钥A给客户端时，如果被截取，那么攻击者可以把服务端本要发送给客户端的公钥A替换成自己生成的公钥B，这个操作对于客户端来说是不可得知的。那么后续客户端生成密钥X再加密发出时其实使用的就是攻击者生成的公钥B去进行加密的，那么攻击者就可以通过自己的私钥B'解密出客户端生成的对称加密密钥X，然后再用服务端的公钥A加密后返回给服务端。那么后续双方通信的内容同样还是被攻击人所窃取了。

解决方式：数字证书。网站在使用HTTPS前，需要向CA机构申领一份数字证书，数字证书里含有证书持有者信息、公钥信息等。服务器把证书传输给浏览器，浏览器从证书里获取公钥就行了。当然这里还得保证证书本身的真实性，即防止证书本身在传输过程中被篡改。明文和数字签名共同组成了数字证书。

HTTP版本详解

HTTP/1.0

1. 状态码：HTTP/1.0引入了状态码来表示服务器对请求的处理结果。常见的状态码包括200（成功）、404（未找到）、500（服务器内部错误）等。
2. 缓存控制：HTTP/1.0引入了一些缓存控制机制，允许客户端和服务器进行缓存的管理。例如，通过设置响应头中的Cache-Control字段，可以指定缓存的行为。
3. 无状态：HTTP/1.0是无状态协议，即服务器不会保留客户端之前的请求信息。每个请求都是独立的，服务器只根据当前请求来处理。
4. 无连接：默认使用 Connection: close，浏览器每次请求都需要与服务器建立一个 TCP 连接，服务器处理完成后立即断开 TCP 连接。

状态码：

• 1XX------信息提示，服务器收到请求，需要请求者继续执行操作；
• 2XX------成功，操作被成功接收并处理；
• 3XX------重定位，需要进一步的操作以完成请求；
• 4XX------客户端错误，请求包含语法错误或无法完成请求；
• 5XX------服务器错误，服务器在处理请求的过程中发生了错误。

常见状态码：

100：继续，客户端应继请求；

200：请求成功；

301：资源（网页等）被永久转移到其他 URL；

302：暂时重定向；

403: Forbidden ---禁止访问；

404：请求的资源（网页等）不存在；

500：内部服务器错误。

HTTP/1.1

1. 持久连接：HTTP/1.1默认启用持久连接（Connection:keep-alive），允许在一个TCP连接上发送多个请求和响应。这样可以减少连接建立和关闭的开销，提高性能。
2. 管道化（pipelining）：HTTP/1.1引入了管道化机制，允许客户端发送多个请求而无需等待每个请求的响应。这样可以减少延迟，并提高网络利用率。
3. 分块传输编码（chunked transfer encoding）：HTTP/1.1支持分块传输编码，允许服务器将响应分成多个块进行传输。这样可以在接收到部分响应时就开始渲染页面，而不需要等待整个响应完成。
4. 虚拟主机支持：HTTP/1.1支持虚拟主机，允许在同一个IP地址上托管多个域名，并根据请求中的Host头部字段来区分不同的网站。
5. 缓存控制增强：HTTP/1.1引入了更多的缓存控制机制，例如通过Cache-Control头部字段来指定缓存的行为，以及通过ETag和If-None-Match头部字段来进行缓存验证。
6. 断点续传：HTTP/1.1支持断点续传，允许客户端在下载大文件时可以从上次中断的地方继续下载，而不需要重新下载整个文件。

HTTP/2.0

1. 二进制传输：HTTP/2.0使用二进制格式而不是文本格式来传输数据。这样可以提高传输效率和解析速度。

2. 多路复用（multiplexing）：HTTP/2.0允许在一个TCP连接上同时发送多个请求和响应。这样可以减少连接建立和关闭的开销，并提高网络利用率。

3. 头部压缩：HTTP/2.0使用HPACK算法对请求和响应头部进行压缩，减少了数据传输的大小。

4. 服务器推送（server push）：HTTP/2.0允许服务器在客户端请求之前主动推送相关资源。这样可以减少客户端发送额外请求的次数，提高页面加载速度。

5. 流量控制：HTTP/2.0引入了流量控制机制，允许客户端和服务器控制数据流的速率，避免了过载或拥塞情况的发生。

6. 优先级（priority）：HTTP/2.0允许客户端指定请求的优先级，以确保重要资源能够更快地加载。

7. 安全增强：HTTP/2.0要求使用TLS加密，提供了更好的安全性和隐私保护。

HTTP/3.0

1. 实现了类似TCP的流量控制，传输可靠性的功能。
2. 实现了快速握手功能（QUIC基于UDP，UDP是面向无连接的，不需要握手和挥手，比TCP快）。
3. 集成了TLS加密功能。
4. 多路复用，彻底解决TCP中队头阻塞的问题（单个"流"是有序的，可能会因为丢包而阻塞，但是其他流不会受到影响）。

总结

HTTP/1.0是最早的版本，简单易用但性能较低。HTTP/1.1引入了持久连接和管道化机制，提高了性能和网络利用率。HTTP/2.0使用二进制格式传输数据，引入了多路复用、头部压缩和服务器推送等特性，进一步提升了性能和安全性。HTTP3.0的底层支撑协议QUIC基于UDP实现，又含TCP的特点，实现了又快又可靠的协议。

前端常见的安全问题及防范措施

跨站脚本攻击（XSS）

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、VBScript、ActiveX、Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

分类：反射型XSS、DOM型XSS、存储型XSS攻击。

防范措施：输入检查和过滤、使用POST代替GET、避免直接在Cookie中泄露用户隐私、验证码、内容安全策略（CSP）。

跨站请求伪造（CSRF）

跨站请求伪造（CSRF）是一种黑客攻击技术，攻击者通过伪装来自受信任的用户的请求来攻击受信任的网站，利用网站对于用户网页浏览器的信任，挟持用户当前已登陆的Web应用程序，去执行并非用户本意的操作。

分类：GET类型的CSRF、POST类型的CSRF、链接类型的CSRF。

防范措施：同源检测、CSRF Token、给 Cookie 设置合适的 SameSite。

点击劫持（Click Jacking）

点击劫持（click hijacking）也称为 UI 覆盖攻击，是一种通过视觉欺骗的手段来达到攻击目的手段。攻击者将目标网站通过 iframe 嵌入到自己的网页中，通过 opacity 等手段设置 iframe 为透明的，使得肉眼不可见，这样一来当用户在攻击者的网站中操作的时候，比如点击某个按钮（这个按钮的顶层其实是 iframe），从而实现目标网站被点击劫持。

防范措施：

1. 在HTTP投中加入 X-FRAME-OPTIONS 属性，此属性控制页面是否可被嵌入 iframe 中。
2. 判断当前页面是否被嵌入到 iframe 中。

CDN劫持

CDN（Content Delivery Network，内容分发网络）就是采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。网络上有很多黑客为了让用户能够登录自己开发的钓鱼网站，都会通过对CDN进行劫持的方法，让用户自动转入自己开发的网站。而很多用户却往往无法察觉到自己已经被劫持。防范措施：

1. 使用SRI来解决CDN劫持。SRI是浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。

前端性能优化：提升网站加载速度

1. 压缩和合并资源：在前端开发中，我们通常会使用多个CSS和JavaScript文件。将这些文件进行压缩和合并可以减少HTTP请求和文件大小，从而提高网站加载速度。
2. 图片优化：图片是网站加载时间的主要因素之一。通过优化图片可以减小文件大小，从而提高加载速度。此外，使用适当的图片格式（如JPEG、PNG、WebP）和选择正确的尺寸也可以帮助提高性能。
3. 延迟加载：对于长页面或包含大量图片的页面，可以使用延迟加载技术，只加载可视区域内的内容，减少不必要的资源请求。
4. 使用缓存：通过设置HTTP缓存头信息，让浏览器缓存常用的静态资源，减少重复请求，提高加载速度。对于不经常更改的静态资源，如图片、CSS和JavaScript文件，可以设置较长的缓存时间。
5. 异步加载：将不影响页面渲染的JavaScript代码使用async或defer属性进行异步加载，避免阻塞页面加载。

Vue3响应式原理

Vue 3 中的响应式原理是通过使用 ES6 的 Proxy 对象来实现的。在 Vue 3 中，每个组件都有一个响应式代理对象，当组件中的数据发生变化时，代理对象会立即响应并更新视图。

具体来说，当一个组件被创建时，Vue 会为组件的 data 对象创建一个响应式代理对象。这个代理对象可以监听到数据的变化，并在数据变化时更新视图。当组件的 data 对象发生变化时，代理对象会收到变化通知，然后将变化传递给相关的组件和子组件，从而触发组件的重新渲染。这种机制可以有效地保证视图和数据的同步。

Vue3数据的更新是proxy配合Reffect来实现的。

通过Proxy（代理）：拦截对象中任意属性的变化，属性值的读写，属性的增加，属性的删除等。

通过Reffect（反射）：对源对象的属性进行操作。

Vue3渲染过程

在Vue 3中，组件的渲染过程可以概括为以下几个步骤：

1. 通过createApp方法创建组件实例。
2. 通过props传递数据给子组件。
3. 执行组件内部的生命周期钩子函数，如setup()。
4. 使用render()函数或模板来描述组件的虚拟DOM结构。
5. 通过虚拟DOM的差异比对，生成最小化的DOM更新。
6. 将更新后的DOM挂载到页面上。

Vue router实现

Vue Router 是 Vue.js 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

Vue Router 的实现主要包括以下几个核心部分：

1. 路由记录: 一个路由记录就是一个路由配置对象，包括 path, component 等属性。
2. 路由匹配算法: Vue Router 使用的是路径到组件的映射，通过 path-to-regexp 实现路径的解析和匹配。
3. history模式和hash模式 : Vue Router 支持使用 history.pushState 和 hash 来管理路由。
4. 路由视图: 路由视图是一个组件，它会根据当前的路由渲染对应的组件。
5. 导航守卫: Vue Router 提供全局和独立的路由守卫来对路由进行拦截和处理。

原理核心就是更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

● hash: 使用 URL hash 值来作路由。默认模式。

● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

● abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端

Hash模式

hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。也就是说#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。

History模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面。

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。

vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （当然，你也可以明确指定在所有情况下都使用 abstract 模式）。

TypeScript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

优势：

1. 静态类型检查：TypeScript是一种静态类型检查的语言，这意味着它可以在编译时检测代码中的类型错误，从而避免在运行时出现这些问题，增强代码的健壮性和可靠性。
2. 更好的可维护性：TypeScript提供更好的类型检查，IDE支持，帮助开发者更好地理解代码，减少错误和重构成本，还可以为代码提供更好的文档。
3. 更好的可扩展性：TypeScript支持类、接口、泛型等高级特性，适合大型应用程序的开发，还支持模块化开发，帮助开发者更好地组织代码和管理依赖。
4. 支持ES6：TypeScript支持ES6规范的语言，有助于代码的未来兼容性和可维护性。
5. 社区支持和生态系统：TypeScript拥有庞大的开发者社区和丰富的第三方库生态系统，方便共享和重用代码。

BFC

Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

规则：

1. BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
2. BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签

作用：解决高度坍塌、解决margin重叠问题、阻止元素被浮动元素覆盖。

HTML块级元素、行内元素

块级元素：元素显示为矩形区域，主要用于网页布局和网页结构的搭建。它有自己的宽度和高度，也就是可自定义 width 和 height。块级元素会独占一行，并且会在前后自动添加换行符。它们会尽可能地占满其父元素的宽度。

div、p、h1-h6、ul、ol、li、table、form等。

行内元素：行内元素在默认情况下不会独占一行，它们会在同一行上水平排列。行内元素只占据其内容所需要的空间，并且不会强制换行。行内元素不可以设置宽（width）和高（height），常用于控制页面中文本的样式。

a、span、strong、em、img、input、button、label等。

既作为行内元素又作为块级元素的有a、span、img等当使用"display: block;"时，会变为块级元素。

css中的position有哪些定位方式

CSS中的position属性用于控制元素在页面中的定位方式。

1. static：HTML 元素默认情况下的定位方式为 static。静态定位的元素不受 top、bottom、left 和 right 属性的影响，始终根据页面的正常流进行定位。

2. relative：相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

3. fixed：相对于视口定位。这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

4. absolute：相对于最近的定位祖先元素进行定位。如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。注意："被定位的"元素是其位置除 static 以外的任何元素。

5. sticky：根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其"粘贴"在适当的位置（比如 position:fixed）。

什么是宏任务和微任务？

宏任务和微任务是在事件循环中执行的两种不同类型的任务。

宏任务是相对较大的任务，通常包括定时器任务（setTimeout、setInterval）、网络请求、用户交互事件（点击、滚动等）。宏任务会被添加到事件队列中，在每个事件循环中执行一次。微任务是相对较小的任务，通常包括Promise回调、DOM变动观察器。微任务会在当前宏任务执行完毕后立即执行，而不会添加到事件队列中。微任务的执行时机是在当前宏任务的末尾，在下一个宏任务之前。

因此，微任务比宏任务具有更高的优先级，可以在用户交互之前或渲染之前得到及时处理，可以用于执行一些需要优先处理的任务，如更新DOM、处理异步操作的结果等。

什么是跨域？

跨域是指在浏览器中，从一个网站的网页去请求另一个网站的资源时，由于浏览器的同源策略所施加的安全限制，导致无法执行或访问另一个网站的脚本或其他资源。

• 同源策略规定，如果请求的URL在协议、域名（包括主域名和子域名）以及端口这三个方面与当前页面URL有任何不同，则被视为跨域。
• 跨域的限制主要是出于安全考虑，防止恶意网站获取用户敏感信息，如登录账号和密码。
• 跨域可以通过javascript在不同的域之间进行数据传输或通信，例如使用ajax向不同域请求数据，或获取页面中不同域的框架（如iframe）中的数据。

回调函数

回调函数是作为参数传递给另一个函数的函数，然后在外部函数的内部调用该函数。回调函数通常在事件发生或任务完成后执行。

同步回调：立即执行的回调函数。

异步回调：在异步操作后执行代码的回调函数。