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

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

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）：

创建XMLHttpRequest对象（核心对象）：let xhr = new XMLHttpRequest()；配置请求参数：xhr.open(请求方式, 请求地址, 是否异步)；（如xhr.open('GET', '/api/data', true)）发送请求：xhr.send()；（POST请求需在send()中传入请求体，且需设置请求头）监听请求状态变化：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请求非幂等（多次请求可能产生不同结果，如提交订单）。

版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除