1. 浏览器从输入 URL 到页面渲染完成的过程？

1. 输入 URL，浏览器解析协议、域名、端口等。
2. DNS 解析域名得到 IP。
3. 建立 TCP 连接（三次握手）。
4. 发送 HTTP 请求，服务器处理并返回响应。
5. 浏览器接收响应（HTML、CSS、JS、图片等）。
6. 解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树，合并成渲染树。
7. 布局（Layout）和绘制（Paint）。
8. 若遇到 JS 会阻塞解析（视 async/defer 而定）。
9. 完成显示。

2. HTTP 状态码常见的有哪些？

• 1xx：信息性状态码（如 101 切换协议）。
• 2xx：成功（200 OK，201 Created，204 No Content）。
• 3xx：重定向（301 永久移动，302 临时移动，304 未修改）。
• 4xx：客户端错误（400 错误请求，401 未授权，403 禁止，404 未找到）。
• 5xx：服务器错误（500 服务器内部错误，502 网关错误，503 服务不可用）。

3. Redux 的工作原理是什么？

• 核心概念：Store（单一状态树）、Action（描述发生了什么的普通对象）、Reducer（根据 Action 更新状态的纯函数）。
• 工作流程：组件通过 dispatch(action) -> Store 将 action 传给 reducer -> reducer 返回新状态 -> Store 更新 -> 订阅的组件重新渲染。
• 结合 React-Redux：使用 Provider 注入 store，connect 或 useSelector/useDispatch 连接组件。

4. Vue 双向数据绑定的原理是什么？

• 基于数据劫持和发布-订阅模式。
• Vue 2 使用 Object.defineProperty 劫持数据属性的 getter/setter，Vue 3 使用 Proxy。
• 当数据变化时，触发 setter，通知订阅者（Watcher），进而更新视图。
• v-model 是语法糖，绑定 value 属性和 input 事件。

5. 请说说HTML、CSS、JavaScript三者的关系？

三者是前端开发的核心三要素，分工明确、协同工作：

• HTML：负责页面的结构，相当于“骨架”，定义页面有哪些元素（如标题、段落、按钮）；
• CSS：负责页面的样式，相当于“皮肤”，美化HTML元素（如颜色、大小、布局）；
• JavaScript：负责页面的交互和动态效果，相当于“灵魂”，让页面拥有可操作性（如点击按钮、数据渲染）。

简单总结：HTML搭结构，CSS做美化，JS做交互。

6. CSS选择器有哪些？优先级如何排序？

常见CSS选择器（按常用程度排序）：

• 基础选择器：元素选择器（如div）、类选择器（如.class）、ID选择器（如#id）、通配符选择器（如*）；
• 复合选择器：后代选择器（如div .class）、子选择器（如div>.class）、相邻兄弟选择器（如div+.class）、伪类选择器（如:hover、:first-child）、伪元素选择器（如::before、::after）。

优先级排序（从高到低，优先级高的覆盖优先级低的）：

!important（最高，慎用） > ID选择器（#id） > 类选择器（.class）、伪类选择器、属性选择器 > 元素选择器（div）、伪元素选择器 > 通配符选择器（*）。

补充：同优先级时，后定义的CSS样式会覆盖先定义的。

7. 说说typeof和instanceof的区别？

两者都是用于判断数据类型，但适用场景和原理不同：

• typeof：
• 原理：检测数据的类型标签（typeof null返回object是bug）；
• 适用：判断基本数据类型（除null外，均可准确判断）；
• 缺点：无法区分引用数据类型（如typeof []、typeof {}、typeof function(){}均返回object，仅function返回function）。
• instanceof：
• 原理：判断一个对象是否是某个构造函数的实例（检测原型链）；
• 适用：判断引用数据类型（如数组、对象、函数）；
• 缺点：无法判断基本数据类型（如123 instanceof Number返回false），且可通过修改原型链改变结果。

8. 说说数组的常用方法？（至少列举8个）

按功能分类，常用数组方法如下（重点记是否改变原数组）：

• 改变原数组：
• push()：向数组末尾添加元素，返回新长度；
• pop()：删除数组末尾元素，返回删除的元素；
• shift()：删除数组开头元素，返回删除的元素；
• unshift()：向数组开头添加元素，返回新长度；
• splice()：删除/添加/替换元素，返回被删除的元素；
• sort()：排序数组，默认按字符串排序，可自定义排序规则；
• reverse()：反转数组。
• 不改变原数组（返回新数组）：
• map()：遍历数组，对每个元素处理，返回新数组；
• filter()：筛选数组中符合条件的元素，返回新数组；
• slice()：截取数组片段，返回新数组（不包含结束索引）；
• concat()：合并多个数组，返回新数组；
• join()：将数组转为字符串，返回字符串；
• find()：查找第一个符合条件的元素，返回该元素；
• every()：判断数组所有元素是否符合条件，返回布尔值。

9. 说说AJAX是什么？核心步骤有哪些？

定义：AJAX（异步JavaScript和XML），是一种在不刷新整个页面的情况下，向服务器请求数据并更新页面部分内容的技术，核心是“异步”（不阻塞页面其他操作）。

核心步骤（原生AJAX）：

1. 创建XMLHttpRequest对象（核心对象）：let xhr = new XMLHttpRequest()；
2. 配置请求参数：xhr.open(请求方式, 请求地址, 是否异步)；（如xhr.open('GET', '/api/data', true)）
3. 发送请求：xhr.send()；（POST请求需在send()中传入请求体，且需设置请求头）
4. 监听请求状态变化：xhr.onreadystatechange = function() {}，判断readyState（状态码）和status（响应码），获取响应数据。

补充：现在开发中常用axios、fetch替代原生AJAX，简化代码，兼容性更好。

10. 说说GET和POST请求的区别？

核心区别在于请求方式、数据传递、安全性等，重点记以下5点：

• 数据传递：GET请求数据放在URL后面（参数拼接），POST请求数据放在请求体中；
• 数据大小：GET请求有长度限制（约2KB），POST请求无限制；
• 安全性：GET请求数据暴露在URL中，不安全（适合查询）；POST请求数据隐藏在请求体，相对安全（适合提交、修改数据）；
• 缓存：GET请求会被浏览器缓存，POST请求不会；
• 幂等性：GET请求是幂等的（多次请求结果一致），POST请求非幂等（多次请求可能产生不同结果，如提交订单）。