1. 自我介紹

2. HTTP和HTTPS

3. 項(xiàng)目介紹， 項(xiàng)目遇到的困難及其解決方案，接著就是不斷問項(xiàng)目相關(guān)的問題。

4. 前端工程化的問題，如果去優(yōu)化項(xiàng)目性能和減少項(xiàng)目體積， 了解webpack嗎 了解其他構(gòu)建工具嗎？能詳細(xì)說說嗎？ （webpakc了解比較少，后面翻書才想起來經(jīng)常用的commonJS和ES的modules是這塊內(nèi)容，學(xué)的還是不仔細(xì)不深，慚愧，這題就迷迷糊糊過去了，其實(shí)應(yīng)該想我去回答webpack多種模塊格式（CommonJS、AMD、ES6 Modules）好讓話題繼續(xù)進(jìn)行下去的）

可以這樣回答：（只要引出一兩個(gè)和webpack有關(guān)的并且自己熟悉的概念就行）

Webpack 是一個(gè)模塊打包工具，主要用于現(xiàn)代 JavaScript 應(yīng)用程序。它將應(yīng)用程序的所有資源（如 JavaScript、CSS、圖片等）視為模塊，并通過配置文件將這些模塊打包成靜態(tài)資源文件。（至于其他工具就是Gulp、Rollup、 Grunt等等）
1.主要特點(diǎn)
  模塊化：支持多種模塊格式（CommonJS、AMD、ES6 Modules）。
  代碼分割：通過動(dòng)態(tài)導(dǎo)入（import()）和 SplitChunksPlugin 實(shí)現(xiàn)按需加載。
  熱模塊替換（HMR）：在開發(fā)過程中，可以在不刷新頁面的情況下更新模塊。
  插件系統(tǒng)：豐富的插件生態(tài)，可以擴(kuò)展 Webpack 的功能。
  加載器（Loaders）：通過加載器處理不同類型的文件，如 CSS、圖片等。
  優(yōu)化：提供多種優(yōu)化手段，如 Tree Shaking、Scope Hoisting 等。

5. 場景題：如何去檢查一個(gè)軟件或者系統(tǒng)或者web網(wǎng)頁系統(tǒng)的性能，從哪些方面和參數(shù)去考慮呢？ （這次也沒理解題意，后續(xù)找到完整答案，牛油們可以參考一下 只要想起兩三個(gè)應(yīng)該就能通過的）

1. 響應(yīng)時(shí)間
	定義：用戶發(fā)起請求到系統(tǒng)返回結(jié)果的時(shí)間。
	重要性：直接影響用戶體驗(yàn)，過長的響應(yīng)時(shí)間會導(dǎo)致用戶不滿。
	測量方法：
	  使用性能測試工具（如 JMeter、LoadRunner、Apache Bench）進(jìn)行負(fù)載測試。
	  監(jiān)控實(shí)際用戶的行為數(shù)據(jù)（如 Google Analytics、New Relic）。
2. 吞吐量
	定義：單位時(shí)間內(nèi)系統(tǒng)能夠處理的請求數(shù)量。
	重要性：反映系統(tǒng)的處理能力，高吞吐量意味著系統(tǒng)能夠處理更多的并發(fā)請求。
	測量方法：
	  使用性能測試工具進(jìn)行壓力測試，記錄單位時(shí)間內(nèi)的請求數(shù)量。
	  監(jiān)控服務(wù)器的日志文件，統(tǒng)計(jì)請求處理的數(shù)量。
3. 并發(fā)用戶數(shù)
	定義：系統(tǒng)在同一時(shí)間內(nèi)能夠處理的并發(fā)用戶數(shù)量。
	重要性：反映系統(tǒng)的并發(fā)處理能力，高并發(fā)用戶數(shù)意味著系統(tǒng)能夠應(yīng)對更多的用戶同時(shí)訪問。
	測量方法：
		使用性能測試工具模擬大量并發(fā)用戶，觀察系統(tǒng)的響應(yīng)情況。
		監(jiān)控服務(wù)器的資源使用情況（如 CPU、內(nèi)存、網(wǎng)絡(luò)帶寬）。
4. 資源利用率
	定義：系統(tǒng)在運(yùn)行過程中對 CPU、內(nèi)存、磁盤 I/O 和網(wǎng)絡(luò)帶寬等資源的使用情況。
	重要性：高資源利用率可能導(dǎo)致系統(tǒng)性能下降，甚至崩潰。
	測量方法：
		使用系統(tǒng)監(jiān)控工具（如 Prometheus、Grafana、Zabbix）。
		查看操作系統(tǒng)自帶的監(jiān)控工具（如 Windows 的任務(wù)管理器、Linux 的 top 命令）。
5. 錯(cuò)誤率
	定義：系統(tǒng)在處理請求時(shí)發(fā)生錯(cuò)誤的比例。
	重要性：反映系統(tǒng)的穩(wěn)定性和可靠性，高錯(cuò)誤率會影響用戶體驗(yàn)。
	測量方法：
		監(jiān)控服務(wù)器的日志文件，統(tǒng)計(jì)錯(cuò)誤日志的數(shù)量。
		使用性能測試工具記錄錯(cuò)誤請求的數(shù)量。
6. 可用性
	定義：系統(tǒng)在規(guī)定時(shí)間內(nèi)正常運(yùn)行的時(shí)間比例。
	重要性：反映系統(tǒng)的可靠性和穩(wěn)定性，高可用性意味著系統(tǒng)能夠持續(xù)提供服務(wù)。
	測量方法：
		監(jiān)控系統(tǒng)的運(yùn)行狀態(tài)，記錄停機(jī)時(shí)間和正常運(yùn)行時(shí)間。
		使用服務(wù)級別協(xié)議（SLA）來衡量可用性。
7. 擴(kuò)展性
	定義：系統(tǒng)在增加資源后能夠處理更多請求的能力。
	重要性：反映系統(tǒng)的可擴(kuò)展性，良好的擴(kuò)展性意味著系統(tǒng)能夠隨著業(yè)務(wù)增長而擴(kuò)展。
	測量方法：
		進(jìn)行水平擴(kuò)展測試（增加服務(wù)器數(shù)量）和垂直擴(kuò)展測試（增加服務(wù)器資源）。
		監(jiān)控系統(tǒng)在擴(kuò)展后的性能表現(xiàn)。
8. 用戶體驗(yàn)
	定義：用戶在使用系統(tǒng)時(shí)的主觀感受，包括響應(yīng)時(shí)間、界面設(shè)計(jì)、交互流暢度等。
	重要性：直接影響用戶的滿意度和留存率。
	測量方法：
		用戶調(diào)查和反饋。
		使用用戶體驗(yàn)監(jiān)控工具（如 Hotjar、UserTesting）。
9. 安全性
	定義：系統(tǒng)抵御攻擊和保護(hù)數(shù)據(jù)的能力。
	重要性：保護(hù)用戶數(shù)據(jù)和系統(tǒng)安全，防止數(shù)據(jù)泄露和系統(tǒng)被攻擊。
	測量方法：
		進(jìn)行安全審計(jì)和滲透測試。
		使用安全監(jiān)控工具（如 OWASP ZAP、Nessus）。
10. 可維護(hù)性
	定義：系統(tǒng)易于維護(hù)和更新的程度。
	重要性：降低維護(hù)成本，提高系統(tǒng)的長期可持續(xù)性。
	測量方法：
		代碼質(zhì)量和文檔的完整性。
		開發(fā)團(tuán)隊(duì)的反饋和維護(hù)記錄。

6.場景題：檢測兩個(gè)元素有沒有碰撞 （這個(gè)我覺得比較麻煩，上網(wǎng)找AI搜了一下答案，有大佬有更好的思路可以分享一下，謝謝）

  1. 矩形碰撞檢測
  矩形碰撞檢測是最簡單的方法，適用于矩形元素。假設(shè)兩個(gè)矩形的邊界分別為 (x1, y1, w1, h1) 和 (x2, y2, w2, h2)，其中 (x, y) 是左上角坐標(biāo)，(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. 圓形碰撞檢測
圓形碰撞檢測適用于圓形元素。假設(shè)兩個(gè)圓的中心分別為 (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. 矩形和圓形碰撞檢測
矩形和圓形的碰撞檢測稍微復(fù)雜一些，但可以通過幾何計(jì)算來實(shí)現(xiàn)。

function isRectCircleCollision(rect, circle) {
  // 找到最近的點(diǎn)
  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. 多邊形碰撞檢測
多邊形碰撞檢測更為復(fù)雜，通常使用分離軸定理（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.場景題：如何去實(shí)現(xiàn)數(shù)組反轉(zhuǎn)，時(shí)間和空間消耗（這題比較簡單了，頭尾指針對換元素）

后面就是經(jīng)典反問環(huán)節(jié)了