一年多社招经验，成功跳槽网易

打个广告：

社招手动内推，内推找我，官网（网易官网）有的岗位均可内推

内推简历私聊我哈~内推详情介绍

24届雷火校招内推

【网易游戏雷火】校招内推进行中，点击链接内推！

https://xiaozhao.leihuo.netease.com/neitui/#/?introduceId=o1E2uJ1BUIWeyYgx

内推扫码：

废话不多说，直接上面经（不完全正确哈）：

网易面试题（一面）

0.自我介绍和项目介绍，项目介绍问的还挺多的，结合项目问技术细节，还有就是项目的各种配置和性能优化。

1.isEqualWith底层是原理是如何实现的

isEqualWith是JavaScript中的一个函数，用于比较两个对象是否相等。它的底层实现原理如下：

1. 首先判断两个对象是否为同一类型，如果不是直接返回false。
2. 判断两个对象的属性个数是否相等，如果不相等直接返回false。
3. 逐个比较两个对象的属性，如果属性值不相等，直接返回false。
4. 如果所有属性值都相等，则返回true。

需要注意的是，isEqualWith函数使用的是“浅比较”方式，即只比较对象的直接属性值。如果对象的属性值还是对象，那么isEqualWith函数并不会递归比较对象的内部属性。如果需要对复杂对象进行比较，则需要使用其他更复杂的比较方法。

isEqualWith针对引用类型的是怎么比较的？

对于引用类型的比较，JavaScript的默认行为是比较它们的引用地址，即判断它们是否指向同一个对象。例如：

const obj1 = { name: 'John' };
const obj2 = { name: 'John' };
const obj3 = obj1;

console.log(obj1 == obj2); // false，因为obj1和obj2的引用地址不同
console.log(obj1 == obj3); // true，因为obj1和obj3的引用地址相同

如果要比较对象的值是否相等，可以使用深度比较。深度比较是比较对象的所有属性及其嵌套属性的值是否相等。可以手动实现深度比较函数，或者使用第三方库（如lodash）提供的深度比较函数。

以下是一个手动实现的深度比较函数的示例代码：

function isEqual(obj1, obj2) {
  // 如果类型不同，直接返回false
  if (typeof obj1 !== typeof obj2) {
    return false;
  }

  // 如果是简单类型，使用 === 比较
  if (typeof obj1 !== 'object') {
    return obj1 === obj2;
  }

  // 如果是数组，逐个比较元素
  if (Array.isArray(obj1)) {
    if (!Array.isArray(obj2) || obj1.length !== obj2.length) {
      return false;
    }
    for (let i = 0; i < obj1.length; i++) {
      if (!isEqual(obj1[i], obj2[i])) {
        return false;
      }
    }
    return true;
  }

  // 如果是对象，逐个比较属性及其值
  for (let key in obj1) {
    if (!isEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  for (let key in obj2) {
    if (!(key in obj1) && obj2.hasOwnProperty(key)) {
      return false;
    }
  }
  return true;
}

const obj1 = {
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  },
  hobbies: ['reading', 'traveling']
};
const obj2 = {
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  },
  hobbies: ['reading', 'traveling']
};
const obj3 = {
  name: 'Jane',
  address: {
    city: 'Boston',
    zip: '02108'
  },
  hobbies: ['cooking', 'gardening']
};

console.log(isEqual(obj1, obj2)); // true
console.log(isEqual(obj1, obj3)); // false

以上代码中，isEqual函数分别处理了简单类型、数组和对象的比较方式。如果比较的两个对象都是简单类型，直接使用===比较。如果比较的两个对象都是数组，需要比较它们的元素是否相同，如果元素中包含对象，则递归比较。如果比较的两个对象都是对象，需要逐个比较它们的属性及其值，如果属性值中包含对象，则递归比较。比较的过程中，如果发现有任何属性或属性值不相等，直接返回false，否则返回true。

3.有没有了解过二叉树反转，能不能用反转二叉树来实现两个引用数据类型的比较

没有答出来，后面查了一下资料，发现是可以的。（如下）

反转二叉树本质上是将二叉树中每个节点的左子树和右子树交换位置，可以用递归的方式实现：

public TreeNode invertTree(TreeNode root) {
    if (root == null) return null;
    TreeNode left = invertTree(root.left);
    TreeNode right = invertTree(root.right);
    root.left = right;
    root.right = left;
    return root;
}

当两个引用数据类型需要比较时，可以将它们所在的二叉树先进行反转，然后再进行比较。例如，比较两个字符串的字典序大小：

String str1 = "abc";
String str2 = "def";
TreeNode node1 = createTree(str1);
TreeNode node2 = createTree(str2);
invertTree(node1); // 反转二叉树
invertTree(node2);
int cmp = compare(node1, node2); // 比较两个字符串的字典序大小

其中，createTree 方法可以将一个字符串转换为一棵二叉树，可以采用常规的方式，例如将字符串拆分成字符数组，然后以中序遍历的方式构建二叉树：

private TreeNode createTree(String str) {
    char[] chars = str.toCharArray();
    return createTree(chars, 0, chars.length - 1);
}

private TreeNode createTree(char[] chars, int left, int right) {
    if (left > right) return null;
    int mid = (left + right) / 2;
    TreeNode root = new TreeNode(chars[mid]);
    root.left = createTree(chars, left, mid - 1);
    root.right = createTree(chars, mid + 1, right);
    return root;
}

最后，compare 方法可以采用递归的方式比较两棵二叉树的大小，例如比较其中的一个方法：

private int compare(TreeNode node1, TreeNode node2) {
    if (node1 == null && node2 == null) return 0;
    if (node1 == null) return -1;
    if (node2 == null) return 1;
    if (node1.val < node2.val) return -1;
    if (node1.val > node2.val) return 1;
    int cmpLeft = compare(node1.left, node2.left);
    if (cmpLeft != 0) return cmpLeft;
    return compare(node1.right, node2.right);
}

4.二叉树反转来做两个对象的比较合适吗

不合适，在二叉树的反转操作和两个对象的比较操作中，并没有任何直接关系。

二叉树的反转操作是一种针对二叉树结构的变换操作，将二叉树的左右子树进行交换。这个操作通常用于优化二叉树的搜索性能，使得搜索更加高效。而对象的比较需要比较对象的属性及其嵌套的属性值是否相等，这和二叉树反转是两个不同的操作。

在比较两个对象时，如果这两个对象是引用类型，需要考虑值相等和引用地址相等两个方面。如果是值类型，则只需要考虑值是否相等。

综上所述，二叉树反转操作和对象比较操作虽然都涉及到数据结构的变化，但是它们的具体实现方式和目的不同，不能混淆。

5.deep clone

1. 使用JSON.parse和JSON.stringify进行深克隆

通过将对象转换为字符串，再将字符串转换为对象，以达到深克隆的目的。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

但是，该方法会有一些限制：

• 会忽略undefined、function、symbol等属性
• 会忽略循环引用的属性
• 不能克隆RegExp、Date等对象类型

1. 使用递归实现深克隆

递归判断每个属性是否为对象，如果是，则递归处理它的属性。这种方法可以解决JSON.stringfiy和parse的限制。

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key]);
    }
  }

  return result;
}

但是，该方法仍然存在一个问题：无法克隆循环引用的对象。

1. 使用WeakMap实现深克隆

使用WeakMap来记录已经被拷贝过的对象，如果再次遇到同样的对象，直接返回它的克隆即可，解决了递归方法的循环引用问题。

function deepClone(obj, map = new WeakMap()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 检查Map中是否已存在该对象
  if (map.has(obj)) {
    return map.get(obj);
  }

  const result = Array.isArray(obj) ? [] : {};
  // 将新对象存储到map中
  map.set(obj, result);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key], map);
    }
  }

  return result;
}

6.怎么主动去学习前端技术

主动去学习前端技术的过程中，可以按照以下步骤进行：

1.了解前端技术的基础知识

前端技术的基础知识包括 HTML、CSS 和 JavaScript，需要掌握它们的语法、特点以及基本用法。通过阅读相关书籍、教程和视频等，掌握前端技术的基础知识。

2.学会使用前端框架和工具

掌握常用前端框架和工具的使用，例如 React、Vue、Angular、Webpack、Gulp 等。熟练使用这些工具可以提高前端开发的效率和质量。

3.实践项目和练习

通过实践项目和练习，展现自己的能力。可以参加开源项目、参与社区贡献和练习个人项目等方式，不断提高自己的编码能力和解决问题的能力。

4.多参加技术交流和分享活动

参加各种技术交流和分享活动，可以学习到最新的技术发展动态和前沿的技术知识。通过分享和交流，不断提高自己的沟通表达和合作能力。

5.持续学习和实践

不断学习和实践，关注业界最新的技术趋势和最佳实践方法，参与相关社区和平台，积极提问和探索技术。

总之，要主动去学习前端技术需要有一定的计划、目标和具体行动。不断学习、实践、交流和思考，相信一定能够在前端领域取得不错的成就。

网易二面

1.自我介绍和项目介绍

2.移动端和PC端的区别

1. 屏幕尺寸：移动设备一般屏幕较小，PC设备屏幕较大。
2. 平台：移动设备多数是基于iOS和Android系统运行，PC设备则运行Windows，macOS等系统。
3. 网速：移动设备因为无线网络的限制，网速比较慢，比PC设备的有线网络慢很多。
4. 物理控制：移动设备有触摸屏和重力感应等物理控制，而PC设备主要依赖键盘、鼠标和摄像头等。
5. 应用程序：移动设备主要使用APP应用程序，而PC设备则有更多的软件和应用可供选择。
6. 使用场景：移动设备主要在户外场景中使用，例如商店购物，旅游等。而PC设备主要在室内使用，例如工作，学习等。

3.移动端和PC做适配

移动端和PC端的适配是指网页或应用程序在不同设备上能够以适当的方式展现，适配可以提高用户的体验和用户留存率。以下为移动端和PC适配的方法：

1. 响应式布局：通过CSS Media Queries技术在不同的屏幕尺寸下自动调整布局。
2. 弹性布局：使用rem、em等相对长度单位，设置元素的宽高和字体大小，使元素自适应屏幕大小。
3. 流式布局：通过百分比控制元素宽度，使网页在不同屏幕大小下自适应。
4. 分辨率适配：通过JavaScript获取不同设备的分辨率，针对不同的分辨率设置不同的样式和布局。
5. 设备判断和重定向：通过服务器端判断用户设备类型和屏幕尺寸，自动重定向到对应的适配页面。
6. 适配不同操作系统和浏览器：在开发时要考虑不同操作系统和浏览器的兼容性问题，确保网页或应用程序在不同的设备上表现一致。

4.响应式布局注意点

响应式布局可以使网页在不同设备上自适应展示，但也需要注意以下几点：

1. 定义媒体查询：媒体查询需要在CSS文件中定义，针对不同设备的屏幕大小设定不同的样式规则。
2. 避免盒子模型问题：在使用百分比或em作为元素宽度或高度时，需要根据盒子模型调整内边距和外边距。
3. 调整字体大小：在不同设备上可能需要更改字体大小和行高，以便更好地适应不同的屏幕和分辨率。
4. 图像调整：通过缩放、裁剪等方式，在不同设备上呈现不同的图片大小，避免图片过大导致页面加载缓慢。
5. 调整布局：在不同设备上可能需要调整布局，例如设置不同的列数、调整排列方式等。
6. 测试效果：在不同设备上进行测试，确保网页呈现效果一致，避免因为考虑不周而影响用户体验。
7. 优化网页性能：响应式布局可能会影响网页性能，需要通过压缩、合并CSS文件、优化图片等方式优化网页性能，提高用户体验。

5.移动端加载速度提高策略

移动端加载速度的提高有以下几种策略：

1. 压缩网页：压缩HTML、CSS和JavaScript文件，减少文件大小，提高加载速度。
2. 合并文件：将多个CSS或JavaScript文件合并成一个文件，减少文件请求次数，提高加载速度。
3. 图片优化：压缩图片、设置图片大小、格式（例如JPEG或WebP）或提前加载预览图片等方式来优化图片。
4. 懒加载：将某些资源（例如图片和视频）延迟加载，直到用户需要时再加载，以提高页面初始加载速度。
5. 静态资源缓存：通过在HTTP Response Header中添加Cache-Control来设置静态资源缓存时间，避免多次加载相同的文件。
6. 使用CDN：使用内容分发网络（CDN）来缩短网络距离，提高加载速度。
7. 接口优化：优化后端接口的响应速度和数据传输格式，减少接口请求时间。

通过使用以上策略，可以有效提高移动端网页的加载速度，提高用户体验。

6.http1和http1.1

HTTP（HyperText Transfer Protocol）是Web协议的基础，常见的HTTP协议有HTTP1.0、HTTP1.1和HTTP2.0。HTTP1.0是最早的一种HTTP协议，HTTP1.1是一个相对完善的HTTP协议。它们之间的主要区别在于以下几点：

1. 长连接：HTTP1.0每次请求都需要建立一个新的连接，请求结束后即关闭，而HTTP1.1支持持久连接，可以在一个TCP连接上发送多个请求和响应，节省了重复建立和关闭连接所需的时间和资源。
2. Host头：HTTP1.0将主机名放在URL中，而HTTP1.1则添加了一个名为Host的请求头字段，用于指定请求的主机名。
3. 分块传输编码：HTTP1.1增加了一个分块传输编码机制，可以让服务器将消息分成多个块来发送，而不是等待整个请求和响应消息都被传输完。这在传输大文件和流媒体等大数据时有很大的优势。
4. 缓存处理：HTTP1.1支持更细粒度的缓存控制，可以根据不同的资源类型指定缓存时间，从而减少重复的数据请求。
5. 错误状态码：HTTP1.0只有20x和404两种状态码，而HTTP1.1增加了更多的状态码，如语义错误400、服务端错误500等。

综上所述，HTTP1.1相较于HTTP1.0在性能方面有了不少改进，克服了一些HTTP1.0的不足，成为目前应用最广的Web协议。

7.http1.1优化加载速度的策略是

HTTP1.1优化加载速度的策略包括以下几个方面：

1. 持久连接：HTTP1.1支持持久化连接，可以在一个TCP连接上发送多个请求和响应。这样，在一个页面内，多个资源可以通过同一个连接来传输，避免了重复的三次握手和请求头的发送，从而减少了网络延迟，优化了加载速度。
2. 流水线：对于支持持久连接的服务器，客户端可以发送多个请求，而不需要等待每个请求的响应。这样可以避免等待响应的时间，优化了加载速度。不过需要注意的是，某些服务器可能不支持流水线，需要进行测试后再决定是否使用。
3. 压缩：HTTP1.1支持压缩数据的传输，可以使用gzip和deflate等压缩算法来减小响应数据的大小。在HTTP头中添加Accept-Encoding字段，通知服务器客户端支持哪些压缩算法。在响应头中添加Content-Encoding字段，通知客户端返回的数据已经进行了压缩。这样可以减少网络带宽的消耗，缩短加载时间。
4. 缓存：HTTP1.1支持缓存机制，允许浏览器缓存响应内容或者建立代理服务器缓存。通过缓存，可以减少资源的重复请求，优化加载速度。

通过结合以上优化策略，可以大幅度提升HTTP1.1加载速度，并为用户提供更好的体验。

8.http1.0的协商过程

在HTTP1.0中，客户端发出请求时，不会告诉服务器自己的协议版本，只有服务器响应时才会返回自己的协议版本。如果服务器使用的是HTTP1.0协议，那么客户端和服务器之间就会使用HTTP1.0协议来通信，没有协议版本协商的过程。

如果客户端想要升级到更高版本的HTTP协议，比如HTTP1.1，可以在请求头中添加一个Upgrade字段，告诉服务器自己想要升级到的协议版本。如果服务器支持该协议版本，就会在响应头中添加一个Upgrade字段，确认协议版本的升级。升级成功后，客户端和服务器之间就会使用指定的协议版本来通信。

需要注意的是，HTTP1.0不支持持久连接，每次请求都需要建立一个新的连接，请求结束后即关闭。这会导致频繁地进行TCP连接的握手和挥手，浪费了大量时间和资源。因此，HTTP1.1引入了持久连接机制，支持一条TCP连接上发送多个请求，避免了重复连接建立的过程，提高了性能。

9.怎么通过协商过程来知道是http1.0还是1.1

在HTTP请求和响应报文的起始行中，都会包含当前请求或响应使用的HTTP协议版本。客户端请求的起始行中使用的是HTTP/1.0或HTTP/1.1关键字来指示客户端所使用的HTTP协议版本，服务器响应的起始行中也使用相应的关键字来指示服务器所使用的HTTP协议版本。

例如，客户端发起一个请求时，请求报文的起始行中可能如下所示：

GET /index.html HTTP/1.1

这里的HTTP/1.1指示客户端使用的HTTP协议版本为HTTP1.1。相应地，服务器在返回响应的时候，响应报文的起始行中的HTTP版本如下所示：

HTTP/1.1 200 OK

这里的HTTP/1.1指示服务器使用的HTTP协议版本为HTTP1.1。如果客户端请求中未指定HTTP协议版本，那么服务器默认使用HTTP1.0协议版本。

如果客户端请求指定了版本号，而服务器仅支持该协议版本之前的某个版本，那么服务器会使用低版本的协议进行响应，而不是使用客户端请求的协议版本。

需要注意的是，在HTTP请求协商过程中，客户端和服务器之间互相交换起始行以及各类报头字段来进行搭建协商信息，以确定双方所使用的HTTP协议版本。

10.前端是怎么进行监控的，以及监控怎么接入

监控接入，指的是通过一定的技术手段，实现对应用程序运行状态进行监控、记录、显示、报警等处理的过程。应用程序潜在的问题和异常通常会在运行过程中产生，通过监控接入的方式，将异常和问题及时反馈给监控中心，监控系统就能及时地发现问题和异常，并做出及时的响应和处理。

具体来说，监控接入需要从以下几个方面考虑：

1. 监控对象：需要明确监控对象，例如服务器、应用程序、网络、数据库等。
2. 监控指标：需要确定监控哪些指标，例如CPU利用率、内存使用情况、I/O吞吐量等等。
3. 监控方式：需要选择适合的监控方式，一般有以下几种：

• 异常捕捉：在应用程序中增加异常处理逻辑，当出现异常时，将异常信息记录并发送到监控中心。
• 日志监控：通过记录日志的方式进行监控，当超出指定的阈值时，触发告警机制。
• 代理监控：通过搭建代理服务器来实现对网络及应用程序的监控，收集和分析代理服务器的访问日志和请求，进行监控分析。
• 监控软件：通过安装监控软件，对应用程序和系统进行监控。

1. 数据采集和分析：监控系统需要采集和分析监控指标的数据，常见的数据采集方式包括轮询采集和事件驱动采集。采集到的数据可以进行分析和聚合，生成图表或报表，帮助实现事实分析和趋势分析。同时，也可以通过对数据的分析，进行自动化的告警和预测。

总之，监控接入是一项非常重要的工作，可以有效地避免应用程序因异常和问题导致的停机和故障，有助于提高应用程序的可用性和稳定性。

11.使用了阿里的监控接入，项目中怎么用的？

阿里的监控接入，主要指应用程序性能管理（APM），它是一种基于Java语言开发的性能监控系统，可以监控用户在Web应用程序中的行为、访问来源、访问时间分布、业务性能等多个方面，同时能够快速定位瓶颈和异常问题，并提供预警和报警功能。

阿里的监控接入主要包括以下几个方面：

1. 通过植入监控代码，收集用户在应用程序内部的信息，包括访问页面、操作行为、耗时占比等，以便对应用程序进行优化。
2. 通过监控网关收集网络层次的信息，包括网络延迟、各节点调用耗时等，以便对应用程序的网络性能进行优化。
3. 通过监控数据存储和缓存收集对应用程序的访问和使用信息，包括数据库性能、缓存命中率、缓存使用情况等，以便对应用程序的数据存储和缓存方面进行优化。
4. 通过实时监控和历史分析，提供对应用程序的性能分析和问题排查，以及对应用程序的优化建议和技术支持。
5. 通过可视化、实时和多维度的展示方式，为用户提供直观、实时和全面的应用程序性能监控数据，以便及时掌握应用程序状况，进行相应的调整和优化。

综上，阿里的监控接入主要是通过自主开发的APM（应用程序性能管理）系统，对应用程序进行全面且细致的性能监测，包括代码层面、网络层面、数据存储和缓存方面等，并通过可视化和多维度的方式对监测数据进行展示和分析，以实现快速定位和解决问题，同时提供优化建议和技术支持，为用户提供专业的监控服务和技术支持。

12.前端的阿里监控接入

阿里前端监控是阿里云推出的一款专门为前端应用设计的产品，主要针对Web页面和移动应用程序，可以帮助开发人员快速发现应用程序中的问题，提升用户体验，以及优化终端性能。

前端阿里监控的主要特点包括：

1. 可以监控前端应用运行环境中的各项参数和指标，包括浏览器信息、网络速度、性能分析等，以便及时发现问题。
2. 可以对访问网站的用户行为进行精细化分析，包括用户访问路径、停留时间、点击次数等，以便精确分析用户体验问题。
3. 可以通过接口调用监控和错误日志监控，确保前后端的数据交互和代码执行的正确性和稳定性。
4. 可以基于大数据和机器学习技术，提供实时的智能告警和预警，以及精确的问题定位和处理方案。

总之，前端阿里监控是一种专门为前端应用设计的监控系统，能够有效地发现应用程序中的问题，提升用户体验和终端性能，适用于各类Web页面和移动应用程序的监控和优化。

13.如何监控前端页面有没有报错和接口错误

是的，监控前端页面的报错和接口错误是前端监控系统的其中一个功能。

在前端监控系统中，我们通常会通过前端代码内置监控代码来捕获页面中的错误信息和异常，例如JavaScript错误、资源加载错误等，然后将错误信息上传至服务器进行分析和处理。

此外，前端监控系统还可以通过接口调用监控来监测服务端接口的调用情况和结果，包括请求和响应的状态码、请求参数和响应数据等，以便快速发现和定位接口错误和异常情况。

通过监控前端页面的报错和接口错误，我们可以快速发现并解决潜在的问题，提升用户体验和应用程序的稳定性。同时，还可以为开发人员提供实时的监控数据和数据分析，以便优化应用程序的性能和质量。

14.上传信息包含哪些数据?

上传的信息数据通常包含以下几类：

1. 用户信息：包括用户的设备信息、浏览器信息、IP地址等，用于分析用户的访问特征和行为。
2. 页面信息：包括页面加载时间、页面响应时间、页面访问路径、页面停留时间等，用于分析页面性能和用户访问习惯。
3. 错误信息：包括JavaScript错误、资源加载错误、接口调用错误等，用于定位和解决前端问题。
4. 事件信息：包括用户的行为事件、页面交互事件等，用于分析用户操作和行为习惯。
5. 接口信息：包括服务端接口的请求和响应数据、状态码等，用于分析接口调用情况和问题定位。

需要注意的是，在上传信息时应保护用户的隐私，避免上传敏感信息，如用户名、密码等，同时也需要注意数据安全性和传输加密，以保证信息的安全性和保密性。

以上数据都是通过前端监控代码捕获和上传至服务器进行分析和处理的，通过对数据的分析和处理，我们可以及时发现并定位前端问题，提升应用程序的性能和质量。

15.上传用户信息中的ip地址，那IP信息前端可以拿到吗

可以，前台代码可以通过 JavaScript 获取用户的 IP 地址。具体实现方式如下：

function getIPAddress() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.ipify.org?format=json', false);
  xhr.send();
  if (xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    return response.ip;
  } else {
    return '';
  }
}

该方法通过向https://api.ipify.org发送 GET 请求，获取用户的公网 IP 地址，返回值为一个 JSON 对象，包含了用户的 IP 地址信息。

需要注意的是，由于 JavaScript 是在客户端执行的，因此所获取的 IP 地址是客户端的公网 IP，但有些网络下的代理等可能会影响 IP 地址的精度和准确性，因此建议在后台对用户 IP 地址进行二次验证和处理。另外，需要保护用户的隐私，避免将用户的 IP 完整暴露在页面上，应当对 IP 地址进行处理，例如对 IP 地址进行匿名化处理等。

16.我想把监控的查询的时间缩减到DNS的速度，怎么做？

这里也不太会，查询一下资料

DNS 查询通常比较快速，可以考虑在前端监控中使用 DNS 预解析的方式来缩短查询时间。

DNS 预解析是一种浏览器优化技术，它提前解析页面中包含的所有域名的 IP 地址，以便在用户点击页面链接时可以更快速地访问网站。在前端监控中，我们可以利用这种技术，提前解析监控数据上报服务器的域名的 IP 地址，并在上传监控信息时使用这个 IP 地址进行请求，从而缩短查询时间。

具体实现方式如下所示：

1. 在 HTML 页面中添加 DNS 预解析的 META 标签。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//your-monitoring-server-domain.com">

1. 在上传监控信息的代码中使用预解析后的 IP 地址生成上报地址。

// 通过 XMLHttpRequest 发送监控信息
var xhr = new XMLHttpRequest();
var url = 'http://' + your_monitoring_server_ip + '/upload-data';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.send(data);

这里的your_monitoring_server_domain.com是监控数据上报服务器的域名，我们在 HTML 页面中添加了 DNS 预解析标签，浏览器会在加载页面时提前解析这个域名的 IP 地址，并使用这个 IP 地址进行数据上传，从而节省了 DNS 解析的时间。

需要注意的是，由于 DNS 缓存和预解析的开销，预解析并不一定适合所有的情况，应根据实际情况来选择是否使用 DNS 预解析。此外，还需要保证预解析的域名与实际使用的域名是一致的，否则可能会造成浪费或者无法预期的后果。

17.DNS解析IP的原理

DNS 解析是将域名解析成 IP 地址的过程。其原理是将域名解析请求通过网络发送到 DNS 服务器，并由 DNS 服务器进行解析和转换。

DNS 解析的过程如下：

1. 用户在浏览器中输入要访问的域名，例如www.baidu.com。
2. 浏览器首先向本地 DNS 服务器发送域名解析请求。
3. 如果本地 DNS 服务器已经缓存了该域名对应的 IP 地址，则直接返回给浏览器。
4. 如果本地 DNS 服务器没有缓存该域名对应的 IP 地址，则发送请求到根域名服务器（Root Server）。
5. 根域名服务器返回包含该域名对应的顶级域名服务器（Top-Level Domain Server）的 IP 地址的信息。
6. 本地 DNS 服务器向顶级域名服务器发送域名解析请求。
7. 顶级域名服务器返回包含该域名对应的权威域名服务器（Authoritative DNS Server）的 IP 地址的信息。
8. 本地 DNS 服务器向权威域名服务器发送域名解析请求。
9. 权威域名服务器返回该域名对应的 IP 地址的信息。
10. 本地 DNS 服务器缓存该域名对应的 IP 地址，并将该信息返回给浏览器。
11. 浏览器将该 IP 地址作为目标地址，发送 HTTP 请求到该地址对应的服务器。

需要注意的是，DNS 解析是一个递归的过程，从上到下依次解析域名，并沿着域名的层级结构进行查询，直到找到相应的 IP 地址。DNS 解析过程中还涉及 IP 地址和域名之间的映射、缓存等问题，具体细节根据实际应用场景可能会有所不同。

18.我想清掉这个浏览器的DNS缓存清除掉

清除浏览器的 DNS 缓存的方法会因浏览器的不同而有所区别。下面是一些常见的清除方法：

Google Chrome

在 Google Chrome 中，可以按下 Ctrl + Shift + Delete 组合键打开“清除浏览数据”窗口。在这个窗口中，可以勾选“缓存的图片和文件”和“Cookies 和其他站点数据”，然后选择“全部时间”作为时间范围，最后点“清除数据”。

Mozilla Firefox

在 Mozilla Firefox 中，可以按下 Ctrl + Shift + Delete 组合键打开“清除最近的历史记录”窗口。在这个窗口中，可以选择清除“缓存”和“Cookies”，然后选择“全部历史记录”作为时间范围，最后点“清除现在”。

Microsoft Edge

在 Microsoft Edge 中，可以按下 Ctrl + Shift + Delete 组合键打开“清除浏览数据”窗口。在这个窗口中，可以勾选“缓存的图像和文件”和“Cookies 和网站数据”，然后选择“全部时间”作为时间范围，最后点“清除”。

如果浏览器的版本或操作系统不同，清除 DNS 缓存的方法也可能有所不同。在不清楚当前浏览器的具体清除方法时，可以查看浏览器的文档或者官网获取详细信息。

19.DNS缓存时间是怎么控制的

DNS 缓存时间也称 TTL（Time To Live），是由网站管理员在 DNS 记录中设置的。TTL 是 DNS 缓存的有效期，通常以秒为单位，表示 DNS 缓存的存活时间。DNS 缓存的有效期过期后，DNS 在下一次请求中会重新进行解析。

网站管理员可以在 DNS 记录中设置 TTL 的值，以控制 DNS 缓存的时间。通常来说，网站的管理员会设置较短的 TTL 或者是动态调整 TTL 的值，以便在需要更改 DNS 记录时，能够在较短的时间内生效。

一般情况下，公共 DNS 服务器会遵循网站管理员设置的 TTL 时间。而在以前，DNS 缓存时间有时被 ISP 和本地 DNS 缓存所修改，以加速 DNS 解析的过程。但这种情况现在比较少见，因为它会破坏网站管理员对 DNS 缓存的控制。

需要注意的是，为了加强安全性，某些域名服务器或者 DNS 代理会强制忽略 TLL 的设置，以避免攻击者利用 DNS 缓存攻击，从而导致 DNS 污染和其他网络安全问题。

20.域名解析的缓存时间是怎么控制

域名解析的缓存时间也称为 TTL（Time to Live），它是由域名服务商（DNS 服务器管理者）在 DNS 记录中设置的。TTL 表示 DNS 缓存的有效期，以秒为单位，缓存的解析结果将在该有效期内被重复使用，直到过期后才会重新发起域名解析请求。

一般来说，TTL 的值设定越短，DNS 解析结果更新的速度就越快，但这同时也会增加 DNS 服务器的负载。相反，TTL 设定得过长则会增加域名解析更新的延迟时间，导致用户访问不到更新后的域名解析结果。

在实际运营过程中，DNS 服务器管理者会根据不同需求设置不同的缓存时间。例如，对于经常访问的网站，可以设置相对较长的 TTL 时间，减少 DNS 解析请求的次数，提高用户的访问速度和体验。而对于一些在经常更换 IP 地址或者在 DNS 解析方面需要较快生效的网站，TTL 应该设置得较短。

总之，TTL 的设置需要根据网站的实际情况进行调整，以提供最佳的访问体验和稳定性。

21.造成跨域的原因

跨域，是指在浏览器中，当前页面通过 AJAX、Websocket、Web Worker 等方式请求其他域名下的资源时，浏览器出于安全策略的考虑，会禁止当前页面与其他域名间的数据交互，从而导致无法正常通信的现象。主要是前端请求服务端的时候出现。

造成跨域的原因，主要是浏览器的同源策略（ Same-Origin Policy）限制。同源指的是协议、域名、端口号完全相同，如果不同源，则会被视为跨域。

同源策略是一种浏览器的安全策略，它限制了来自不同源的代码之间的交互。如果当前网页与目标网页不同源，则这两个网页之间的数据交互就被禁止了。

跨域问题影响到了 Web 应用程序的开发与部署，对于跨域问题的解决，主要有以下几种方式：

1. 通过 JSONP 实现跨域访问；
2. 通过跨域资源共享（CORS）机制实现跨域访问；
3. 通过代理服务器实现跨域访问；
4. 通过 WebSocket 对象实现跨域访问等方式。

总之，在实际开发中，需要根据项目实际需要选择相应的解决方案。

22.浏览器和谁在同一个源

浏览器中的同源指的是 URL 三个部分中的协议、域名、端口，即如果两个 URL 的协议、域名、端口三部分相同，则它们属于同源。

举例来说，以下的三个 URL 都属于同源：

https://www.example.com/index.html
https://www.example.com/about.html
https://www.example.com:8080/index.html

而以下这个 URL 则属于不同源：

http://www.example.com/index.html
https://www.example.com/index.html

因为它们的协议部分不同。

同源策略是浏览器的一项安全策略，可以限制来自不同源的代码之间的交互。同源策略主要是针对浏览器端的安全问题，目的是为了防止 Web 应用程序受到恶意攻击。如果两个域名不同源，则它们之间无法直接互相访问彼此的数据，需要通过一些其他的方法来进行数据交互，比如跨域共享资源 (CORS) 、JSONP等。

23.解决跨域配置

解决跨域问题的方法有很多种，以下列举几种常用的方式：

1. 跨域资源共享（CORS）机制：可以通过在服务端配置响应头信息来支持跨域资源共享，比如通过设置 Access-Control-Allow-Origin 属性来指定允许通信的来源域名；
2. 代理服务器：也称为反向代理服务器，将客户端请求转发到目标服务器上，从而实现绕过跨域限制的目的；
3. JSONP：利用 script 标签可以跨域访问资源这一特性，实现跨域数据传递；
4. WebSocket 对象：可以通过 WebSocket 对象来创建一个连接，并在建立连接后进行数据交互；
5. 在后端接口中间层配置跨域相关信息。

具体来说，配置跨域资源共享（CORS）机制的方法是在服务端添加特定的响应头信息。例如，服务端可以设置 Access-Control-Allow-Origin 响应头字段，来指定允许的来源域名。

例如，以下代码是在 Node.js 中使用 Express Web 框架处理跨域问题的示例：

var express = require('express');
var app = express();
app.all('*', function(req, res, next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
    res.header('Access-Control-Allow-Methods','PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
      res.sendStatus(200);
    }
    else {
      next();
    }
});
app.listen(3000);

这段代码表示，让所有资源可以被访问，并添加了一些响应头信息（如 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 等），来指定允许的来源域名。这样就可以实现跨域资源共享，从而解决跨域问题。

24.script解决跨域原理

Script 标签可以通过 src 属性加载一个远程的 JavaScript 脚本，由于浏览器执行 JavaScript 时不会受到同源策略的限制，所以可以通过 Script 标签实现跨域请求。

实现原理如下：

1. 在 HTML 页面中使用 Script 标签引入一个 JS 文件，并带有一个回调函数作为参数；
2. 后台通过返回一个函数调用，来将需要的数据传递给该回调函数，从而完成跨域传输的过程。

比如前端代码：

<script>
function handleResponse(result) {
    console.log(result);
}
</script>
<script src="http://www.example.com/getData?callback=handleResponse"></script>

后端代码：

var result = {
    name: 'John',
    age: 30
};
var jsonp_callback = req.query.callback;
res.end(jsonp_callback + "(" + JSON.stringify(result) + ")");

当请求到后端的 /getData 接口时，后端会根据参数 callback=handleResponse，将 handleResponse 函数作为回调函数的名字放到返回的数据中。前端浏览器在加载这个 JS 文件时，会执行该 JS 文件中指定的回调函数，从而接收到后端传递过来的数据。

需要注意的是，由于使用 Script 标签来实现跨域请求需要后端设置响应头的 Content-Type 为 text/javascript，且返回格式必须是一个函数调用，函数名是前端指定的函数名。另外，前端定义的回调函数必须在 Script 标签之前定义好。

hr

1.xxxxx

后续文章介绍hr问题和回答话术哈~

对了，内推记得找我~