探迹一面社招（11月25日20分钟）
- 自我介绍
2. HTTP和HTTPS
3. 项目介绍， 项目遇到的困难及其解决方案，接着就是不断问项目相关的问题。
4. 前端工程化的问题，如果去优化项目性能和减少项目体积， 了解webpack吗 了解其他构建工具吗？能详细说说吗？ （webpakc了解比较少，后面翻书才想起来经常用的commonJS和ES的modules是这块内容，学的还是不仔细不深，惭愧
可以这样回答：（只要引出一两个和webpack有关的并且自己熟悉的概念就行）
Webpack 是一个模块打包工具，主要用于现代 JavaScript 应用程序。它将应用程序的所有资源（如 JavaScript、CSS、图片等）视为模块，并通过配置文件将这些模块打包成静态资源文件。（至于其他工具就是Gulp、Rollup、 Grunt等等） 1.主要特点 模块化：支持多种模块格式（CommonJS、AMD、ES6 Modules）。 代码分割：通过动态导入（import()）和 SplitChunksPlugin 实现按需加载。 热模块替换（HMR）：在开发过程中，可以在不刷新页面的情况下更新模块。 插件系统：丰富的插件生态，可以扩展 Webpack 的功能。 加载器（Loaders）：通过加载器处理不同类型的文件，如 CSS、图片等。 优化：提供多种优化手段，如 Tree Shaking、Scope Hoisting 等。
5. 场景题：如何去检查一个软件或者系统或者web网页系统的性能，从哪些方面和参数去考虑呢？ （这次也没理解题意，后续找到完整答案，牛油们可以参考一下 只要想起两三个应该就能通过的）
1. 响应时间 定义：用户发起请求到系统返回结果的时间。 重要性：直接影响用户体验，过长的响应时间会导致用户不满。 测量方法： 使用性能测试工具（如 JMeter、LoadRunner、Apache Bench）进行负载测试。 监控实际用户的行为数据（如 Google Analytics、New Relic）。 2. 吞吐量 定义：单位时间内系统能够处理的请求数量。 重要性：反映系统的处理能力，高吞吐量意味着系统能够处理更多的并发请求。 测量方法： 使用性能测试工具进行压力测试，记录单位时间内的请求数量。 监控服务器的日志文件，统计请求处理的数量。 3. 并发用户数 定义：系统在同一时间内能够处理的并发用户数量。 重要性：反映系统的并发处理能力，高并发用户数意味着系统能够应对更多的用户同时访问。 测量方法： 使用性能测试工具模拟大量并发用户，观察系统的响应情况。 监控服务器的资源使用情况（如 CPU、内存、网络带宽）。 4. 资源利用率 定义：系统在运行过程中对 CPU、内存、磁盘 I/O 和网络带宽等资源的使用情况。 重要性：高资源利用率可能导致系统性能下降，甚至崩溃。 测量方法： 使用系统监控工具（如 Prometheus、Grafana、Zabbix）。 查看操作系统自带的监控工具（如 Windows 的任务管理器、Linux 的 top 命令）。 5. 错误率 定义：系统在处理请求时发生错误的比例。 重要性：反映系统的稳定性和可靠性，高错误率会影响用户体验。 测量方法： 监控服务器的日志文件，统计错误日志的数量。 使用性能测试工具记录错误请求的数量。 6. 可用性 定义：系统在规定时间内正常运行的时间比例。 重要性：反映系统的可靠性和稳定性，高可用性意味着系统能够持续提供服务。 测量方法： 监控系统的运行状态，记录停机时间和正常运行时间。 使用服务级别协议（SLA）来衡量可用性。 7. 扩展性 定义：系统在增加资源后能够处理更多请求的能力。 重要性：反映系统的可扩展性，良好的扩展性意味着系统能够随着业务增长而扩展。 测量方法： 进行水平扩展测试（增加服务器数量）和垂直扩展测试（增加服务器资源）。 监控系统在扩展后的性能表现。 8. 用户体验 定义：用户在使用系统时的主观感受，包括响应时间、界面设计、交互流畅度等。 重要性：直接影响用户的满意度和留存率。 测量方法： 用户调查和反馈。 使用用户体验监控工具（如 Hotjar、UserTesting）。 9. 安全性 定义：系统抵御攻击和保护数据的能力。 重要性：保护用户数据和系统安全，防止数据泄露和系统被攻击。 测量方法： 进行安全审计和渗透测试。 使用安全监控工具（如 OWASP ZAP、Nessus）。 10. 可维护性 定义：系统易于维护和更新的程度。 重要性：降低维护成本，提高系统的长期可持续性。 测量方法： 代码质量和文档的完整性。 开发团队的反馈和维护记录。
6.场景题：检测两个元素有没有碰撞 （这个我觉得比较麻烦，上网找AI搜了一下答案，有大佬有更好的思路可以分享一下，谢谢
1. 矩形碰撞检测
矩形碰撞检测是最简单的方法，适用于矩形元素。假设两个矩形的边界分别为 (x1, y1, w1, h1) 和 (x2, y2, w2, h2)，其中 (x, y) 是左上角坐标，(w, h) 是宽度和高度
function isRectCollision(rect1, rect2) {
return !(
rect1.x + rect1.width <= rect2.x || // rect1 在 rect2 的左边
rect1.x >= rect2.x + rect2.width || // rect1 在 rect2 的右边
rect1.y + rect1.height <= rect2.y || // rect1 在 rect2 的上方
rect1.y >= rect2.y + rect2.height // rect1 在 rect2 的下方
);
}
// 示例
const rect1 = { x: 0, y: 0, width: 50, height: 50 };
const rect2 = { x: 40, y: 40, width: 50, height: 50 };
console.log(isRectCollision(rect1, rect2)); // 输出: true
————————————————————————————————————————————————————————————————————————————————————————————————————
2. 圆形碰撞检测
圆形碰撞检测适用于圆形元素。假设两个圆的中心分别为 (x1, y1) 和 (x2, y2)，半径分别为 r1 和 r2。
function isCircleCollision(circle1, circle2) {
const dx = circle1.x - circle2.x;
const dy = circle1.y - circle2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
return distance < (circle1.radius + circle2.radius);
}
// 示例
const circle1 = { x: 0, y: 0, radius: 50 };
const circle2 = { x: 40, y: 40, radius: 50 };
console.log(isCircleCollision(circle1, circle2)); // 输出: true
————————————————————————————————————————————————————————————————————————————————————————————————————
3. 矩形和圆形碰撞检测
矩形和圆形的碰撞检测稍微复杂一些，但可以通过几何计算来实现。
function isRectCircleCollision(rect, circle) {
// 找到最近的点
const distX = Math.abs(circle.x - rect.x - rect.width / 2);
const distY = Math.abs(circle.y - rect.y - rect.height / 2);
if (distX > (rect.width / 2 + circle.radius)) { return false; }
if (distY > (rect.height / 2 + circle.radius)) { return false; }
if (distX <= (rect.width / 2)) { return true; }
if (distY <= (rect.height / 2)) { return true; }
const cornerDistanceSq = (distX - rect.width / 2) ** 2 +
(distY - rect.height / 2) ** 2;
return cornerDistanceSq <= (circle.radius ** 2);
}
// 示例
const rect = { x: 0, y: 0, width: 100, height: 100 };
const circle = { x: 50, y: 50, radius: 50 };
console.log(isRectCircleCollision(rect, circle)); // 输出: true
———————————————————————————————————————————————————————————————————————————————————————————————————
4. 多边形碰撞检测
多边形碰撞检测更为复杂，通常使用分离轴定理（SAT）或其他几何算法。
function isPolygonCollision(polygon1, polygon2) {
const axes = getAxes(polygon1.concat(polygon2));
for (let axis of axes) {
const projection1 = project(polygon1, axis);
const projection2 = project(polygon2, axis);
if (!isOverlapping(projection1, projection2)) {
return false;
}
}
return true;
}
function getAxes(polygon) {
const axes = [];
for (let i = 0; i < polygon.length; i++) {
const p1 = polygon[i];
const p2 = polygon[(i + 1) % polygon.length];
const edge = { x: p2.x - p1.x, y: p2.y - p1.y };
const normal = { x: -edge.y, y: edge.x };
axes.push(normalize(normal));
}
return axes;
}
function project(polygon, axis) {
let min = dot(polygon[0], axis);
let max = min;
for (let point of polygon) {
const projected = dot(point, axis);
if (projected < min) { min = projected; }
if (projected > max) { max = projected; }
}
return { min, max };
}
function isOverlapping(projection1, projection2) {
return !(projection1.max < projection2.min || projection2.max < projection1.min);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function normalize(vector) {
const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
return { x: vector.x / length, y: vector.y / length };
}
// 示例
const polygon1 = [{ x: 0, y: 0 }, { x: 50, y: 0 }, { x: 50, y: 50 }];
const polygon2 = [{ x: 40, y: 40 }, { x: 90, y: 40 }, { x: 90, y: 90 }];
console.log(isPolygonCollision(polygon1, polygon2)); // 输出: true
7.场景题：如何去实现数组反转，时间和空间消耗（这题比较简单了，头尾指针对换元素）
后面就是经典反问环节了
#前端##社招##面试##探迹##面经#
查看7道真题和解析
网易公司福利 162人发布