《JAVA面经实录》- Web前端面试题
以下是63个最常见的前端面试题及其答案：
一、HTML相关
1.HTML5有哪些新特性？
- 语义化标签：如
<header>、<footer>、<article>、<section>等，让页面结构更清晰，利于SEO和可访问性。 - 音视频标签：
<audio>和<video>，无需插件即可播放音视频。 - 画布（Canvas）：用于绘制图形、动画等，通过JavaScript操作。
- 地理定位：
navigator.geolocation接口，获取用户地理位置信息。 - 离线存储（Application Cache）：使网页在离线状态下也能访问，通过manifest文件配置。
- 表单新特性：新增多种input类型（如email、url、date、time等）、表单验证（required、pattern等属性）。
2.如何优化HTML代码？
- 减少标签嵌套：避免不必要的嵌套，降低页面复杂度。
- 使用语义化标签：提升代码可读性和SEO效果。
- 压缩HTML文件：去除空格、换行、注释等，减小文件体积。
- 合理使用缓存：通过设置缓存策略，减少服务器请求。
- 避免使用表格布局：表格布局不利于维护和SEO，推荐使用CSS布局。
3.什么是HTML5的Web存储？
- Web存储提供了两种机制：
localStorage和sessionStorage。 localStorage：持久化存储，数据没有过期时间，除非手动删除，否则一直存在。sessionStorage：会话级存储，数据在页面会话结束时（关闭页面或浏览器）被清除。- 两者都以键值对的形式存储数据，容量通常为5MB左右，且仅在同源窗口中共享。
4.HTML5的WebSocket有什么作用？
- WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务器主动向客户端推送数据。
- 它解决了传统HTTP请求的“请求-响应”模式的局限性，实现了真正的实时通信。
- 适用于实时聊天、实时通知、在线游戏等场景。
5.如何处理HTML中的特殊字符？
- 使用HTML实体：如
<表示<，>表示>，&表示&等。 - 使用
<pre>标签：保留文本中的空格和换行，适合显示代码块等。 - 使用CSS的
white-space属性：如white-space: pre-wrap;，保留空格和换行，同时允许文本换行。
6.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、hr、link、input、img、meta
7.说一下src和href的区别？
● src是引入外部资源下载到文档，会暂停其他资源的下载
● href是链接外部资源，不会暂停其他资源的下载
二、CSS相关
1.CSS选择器的优先级如何计算？
- 优先级由四部分组成：内联样式（
style=""）> ID选择器（#id）> 类选择器（.class）、属性选择器（[type="text"]）、伪类选择器（:hover）> 标签选择器（div）、伪元素选择器（::before）。 - 计算方式：
a*1000 + b*100 + c*10 + d，其中a为内联样式数量，b为ID选择器数量，c为类选择器、属性选择器、伪类选择器数量，d为标签选择器、伪元素选择器数量。
2.如何实现元素的水平垂直居中？
- 水平居中：
- 块级元素：
margin: 0 auto;（需设置宽度）。 - 行内元素：
text-align: center;（父元素设置）。 - Flex布局：
display: flex; justify-content: center;。 - Grid布局：
display: grid; justify-items: center;。 - 垂直居中：
- Flex布局：
display: flex; align-items: center;。 - Grid布局：
display: grid; align-items: center;。 - 绝对定位+transform：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。 - 行内元素：
line-height等于容器高度。
3.什么是CSS的BFC？如何触发BFC？
- BFC（Block Formatting Context）：块级格式化上下文，是页面中一个独立的渲染区域，内部的元素布局不会影响外部元素。
- 触发条件：
- 根元素（
<html>）。 - 浮动元素（
float不为none）。 - 绝对定位元素（
position为absolute或fixed）。 - 行内块元素（
display为inline-block）。 - 表格单元格（
display为table-cell）。 overflow不为visible的元素（如overflow: hidden;）。
4.CSS3有哪些新特性？
- 新增选择器：如属性选择器（
[type="text"]）、伪类选择器（:nth-child()、:not()等）。 - 盒模型：
box-sizing属性，控制元素的宽度和高度是否包含内边距和边框。 - 圆角：
border-radius属性，设置元素的圆角。 - 阴影：
box-shadow（盒子阴影）和text-shadow（文本阴影）。 - 渐变：线性渐变（
linear-gradient）和径向渐变（radial-gradient）。 - 过渡和动画：
transition（过渡）和@keyframes（关键帧动画）。 - 弹性布局（Flex）和网格布局（Grid）：更灵活的布局方式。
5.如何优化CSS代码？
- 减少选择器嵌套：避免过度嵌套，降低优先级复杂度。
- 合并重复样式：将重复的样式合并到一个选择器中。
- 压缩CSS文件：去除空格、换行、注释等，减小文件体积。
- 使用CSS预处理器：如Sass、Less，提高代码可维护性。
- 避免使用
@import：@import会阻塞页面渲染，推荐使用<link>标签引入CSS。
6.CSS选择器有哪些？
CSS2选择器：元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
CSS2伪类选择器：a:link/visited/hover/active
CSS3选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
7.什么是CSS盒子模型？
一个css盒子从外到内可以分成四个部分：margin(外边距),border(边框),padding(内边距),content（内容）
默认情况下，盒子的width和height属性只是设置content（内容）的宽和高
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框;
8.px，rem，em的区别？
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em的值并不是固定的；
em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。
三、JavaScript相关
1.JavaScript的基本数据类型有哪些？
- 原始类型：
number（数字）、string（字符串）、boolean（布尔值）、null（空）、undefined（未定义）、symbol（ES6新增，唯一值）。 - 引用类型：
object（对象）、array（数组）、function（函数）、date（日期）、regexp（正则）等。
2.如何判断变量的数据类型？
typeof：适用于原始类型，但对null返回object，对函数返回function。instanceof：适用于引用类型，判断变量是否为某个构造函数的实例。Object.prototype.toString.call()：返回变量的类型字符串，如[object Array]、[object Object]等，适用于所有类型。
3.什么是闭包？闭包有什么作用？
- 闭包是指函数能够访问并记住其词法作用域，即使函数在其词法作用域之外执行。
- 作用：
- 数据私有化：避免变量污染全局作用域。
- 延长变量生命周期：闭包中的变量不会被垃圾回收机制回收。
- 实现模块化：通过闭包封装模块，暴露公共接口。
- 闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。
4.JavaScript中的this指向如何确定？
- 全局作用域：
this指向全局对象（浏览器中为window，Node.js中为global）。 - 函数调用：
this指向调用函数的对象（普通函数调用指向window，严格模式下为undefined）。 - 方法调用：
this指向调用方法的对象。 - 构造函数调用：
this指向新创建的实例对象。 - 箭头函数：
this指向定义时所在的作用域（词法作用域）。
5.如何实现数组去重？
- 使用
Set：[...new Set(arr)]，Set是ES6新增的数据结构，自动去除重复值。 - 使用
filter：arr.filter((item, index) => arr.indexOf(item) === index)，通过索引判断是否为首次出现。 - 使用
reduce：arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], [])，通过累加器收集不重复的值。
6.JavaScript中的事件委托是什么？
- 事件委托是将事件监听器绑定到父元素上，而不是子元素上，利用事件冒泡机制处理子元素的事件。
- 优点：
- 减少事件监听器数量，提高性能。
- 动态添加的子元素也能触发事件。
- 适用于列表、表格等动态内容的事件处理。
7.如何实现深拷贝？
- 使用
JSON.parse(JSON.stringify(obj))：适用于简单对象，但会忽略函数、undefined、Symbol等。 - 递归拷贝：遍历对象的每个属性，如果是对象则递归拷贝，否则直接赋值。
- 使用第三方库：如Lodash的
_.cloneDeep()，功能更强大，支持更多数据类型。
8.JavaScript中的异步编程有哪些方式？
- 回调函数：通过回调函数处理异步操作的结果，但容易导致“回调地狱”。
- Promise：通过
Promise对象封装异步操作，支持链式调用，避免回调地狱。 async/await：基于Promise的语法糖，使异步代码看起来像同步代码，更易读。- Generator函数：通过
yield关键字暂停和恢复函数执行，配合Promise实现异步操作。
9.什么是事件循环（Event Loop）？
- 事件循环是JavaScript实现异步操作的核心机制，分为宏任务（
macro task）和微任务（micro task）。 - 执行流程：
- 执行同步代码。
- 执行微任务队列中的所有任务（如
Promise.then()、MutationObserver）。 - 渲染页面（可选）。
- 执行宏任务队列中的一个任务（如
setTimeout、setInterval、script标签的代码）。 - 重复上述步骤。
10.JavaScript中的原型链是什么？
- 每个函数都有一个
prototype属性，指向一个对象（原型对象），原型对象有一个constructor属性，指向函数本身。 - 每个对象都有一个
__proto__属性，指向其构造函数的原型对象。 - 当访问对象的属性时，如果对象本身没有该属性，则会沿着
__proto__链向上查找，直到找到该属性或到达原型链的末端（null）。
11.JS 的内置类型有哪些？
基本类型：null、undefined、boolean、number、string、symbol
对象（Object）：引用类型（也称为复杂类型）
注意: NaN 也属于 number 类型，并且 NaN 不等于自身。
12.说一下同步和异步的区别?
同步会阻塞，异步不会阻塞
同步：程序运行从上而下，浏览器必须把这个任务执行完毕，才能继续执行下一个任务
异步：程序运行从上而下，浏览器任务没有执行完，但是可以继续执行下一行代码，当被调用者得到结果之后会通过回调函数主动通知调用者。
13."=="和"==="的不同？
"=="会自动转换类型，因此直接判断两边的值
"==="先判断左右两边的数据类型，然后再判断两边的值
14.Javascript如何实现继承？
原型链继承，借用构造函数继承，组合继承，寄生式继承，寄生组合继承
15.什么是AJAX？
AJAX（Asynchronous Javascript And XML）其实就是异步的javaScript和XML。它是一组用于异步显示数据的相关技术。换句话说，它在不重新加载网页的情况下发送和检索数据。
16.简述AJAX的优点？
1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才能更新相应的内容，而这种更新也是瞬间的用户几乎感受不到。
2.可以充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担。
3.使得web中界面与应用相分离 也可以说是数据与呈现相分离。
17.简述AJAX的缺点？
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
2.AJAX安全问题
3.对搜索引擎支持较弱
4.不好调试
5.违背了URL和资源定位的初衷
6.AJAX不是很好支持移动设备
18.AJAX如何处理网络请求？
AJAX模块在处理网络请求的时候包括以下四个步骤
①通过XMLHttpRequest类创建xhr对象
②为xhr对象添加属性与回调方法
③令xhr对象执行open()方法，指明请求被发往某处
④令xhr对象执行send()方法，发出请求。
补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生‘阻塞效应。
19.AJAX几种请求方式？他们的优缺点？
常用的post,get,delete。不常用copy、head、link等等。
区别：
(1)post比get安全 (因为post参数在请求体中。get参数在url上面)
(2)get传输速度比post快 根据传参决定的。(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
(4)get获取数据 post上传数据(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)。
20.jQuery中有哪几种类型的选择器？
正常是有9中，但我们常用的就3种：
1.基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。
2.层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。
3.过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。
四、Vue相关
1.Vue的响应式原理是什么？
- Vue通过
Object.defineProperty()（Vue2）或Proxy（Vue3）劫持对象的属性，当属性被访问或修改时，触发相应的getter和setter。 - 在getter中收集依赖（Watcher），在setter中触发更新，实现数据的双向绑定。
2.Vue中的组件通信有哪些方式？
- 父子组件通信：
- 父组件通过
props向子组件传递数据。 - 子组件通过
$emit触发父组件的事件，传递数据。 - 兄弟组件通信：
- 通过事件总线（Event Bus）：创建一个空的Vue实例，作为事件中心，兄弟组件通过它通信。
- 通过Vuex：使用Vuex的状态管理，兄弟组件共享状态。
- 跨级组件通信：
- 通过
provide/inject：父组件通过provide提供数据，子组件通过inject注入数据。 - 通过Vuex：使用Vuex的状态管理，跨级组件共享状态。
3.Vue的生命周期有哪些阶段？
- 创建阶段：
beforeCreate（实例初始化之后，数据观测和事件配置之前）、created（实例创建完成，数据观测和事件配置完成）。 - 挂载阶段：
beforeMount（模板编译之前）、mounted（模板编译完成，挂载到页面）。 - 更新阶段：
beforeUpdate（数据更新之前）、updated（数据更新完成，页面重新渲染）。 - 销毁阶段：
beforeDestroy（实例销毁之前）、destroyed（实例销毁完成）。
4.Vue中的v-if和v-show有什么区别？
v-if：条件渲染，根据条件决定是否渲染元素，切换时会销毁和重建元素，开销较大。v-show：条件显示，通过CSS的display属性控制元素的显示和隐藏，切换时不会销毁元素，开销较小。- 适用场景：
v-if适合条件不经常变化的场景，v-show适合频繁切换的场景。
5.Vue中的计算属性（computed）和侦听器（watch）有什么区别？
- 计算属性：基于依赖的数据进行缓存，当依赖的数据变化时，重新计算。适用于复杂的逻辑计算。
- 侦听器：监听某个数据的变化，执行相应的操作。适用于异步操作或复杂的业务逻辑。
五、React相关
1.React的组件有哪些类型？
- 类组件：通过继承
React.Component创建，有状态和生命周期。 - 函数组件：通过函数创建，无状态（React16.8之前），React16.8之后通过
Hook支持状态和生命周期。 - 高阶组件（HOC）：接收一个组件，返回一个新的组件，用于复用组件逻辑。
2.React中的useState和useEffect有什么作用？
useState：用于在函数组件中声明状态变量，返回当前状态和更新状态的函数。useEffect：用于在函数组件中执行副作用操作（如数据获取、订阅、手动修改DOM等），类似于类组件的生命周期方法。
3.React中的虚拟DOM是什么？
- 虚拟DOM是React对真实DOM的抽象，是一个轻量级的JavaScript对象，描述了真实DOM的结构。
- 当状态变化时，React会生成一个新的虚拟DOM，与旧的虚拟DOM进行对比（Diff算法），计算出最小的DOM操作，然后更新真实DOM，提高性能。
4.React中的key有什么作用？
key是React在渲染列表时用于标识每个元素的唯一标识符，帮助React识别哪些元素发生了变化、添加或删除。- 使用稳定的、唯一的
key（如ID），可以提高列表渲染的性能，避免不必要的DOM操作。
5.React中的上下文（Context）是什么？
- 上下文提供了一种在组件之间共享数据的方式，避免通过层层传递
props。 - 通过
React.createContext()创建上下文，通过Provider组件提供数据，通过Consumer组件或useContextHook消费数据。
六、浏览器相关
1.浏览器的渲染过程是怎样的？
- 解析HTML生成DOM树。
- 解析CSS生成CSSOM树。
- 合并DOM树和CSSOM树生成渲染树（Render Tree）。
- 布局（Layout）：计算渲染树中每个节点的几何信息（位置、大小）。
- 绘制（Paint）：将渲染树的每个节点转换为屏幕上的像素。
- 合成（Composite）：将绘制的图层合成到页面上。
2.什么是重绘和重排？
- 重排（Reflow）：当DOM结构或几何属性（如宽度、高度、位置）发生变化时，浏览器需要重新计算布局，触发重排。重排会触发重绘。
- 重绘（Repaint）：当元素的外观属性（如颜色、背景、边框）发生变化时，浏览器需要重新绘制元素，但不触发重排。
- 优化建议：避免频繁操作DOM，批量修改样式，使用
requestAnimationFrame优化动画。
3.浏览器的缓存机制有哪些？
- 强缓存：通过
Cache-Control（如max-age=3600）或Expires（过期时间）控制，浏览器直接使用缓存，不请求服务器。 - 协商缓存：通过
ETag（实体标签）或Last-Modified（最后修改时间）控制，浏览器请求服务器验证缓存是否有效，有效则返回304状态码，使用缓存。
4.如何实现跨域？
- JSONP：通过
<script>标签的src属性请求数据，服务器返回一段JavaScript代码，执行回调函数。 - CORS：通过服务器设置响应头
Access-Control-Allow-Origin，允许浏览器跨域请求。 - 代理服务器：在同源服务器上设置代理，前端请求代理服务器，代理服务器转发请求到目标服务器。
- WebSocket：WebSocket协议本身支持跨域，通过服务器配置允许跨域连接。
5.浏览器的事件机制是什么？
- 事件捕获：事件从最外层元素向目标元素传播。
- 事件目标：事件到达目标元素。
- 事件冒泡：事件从目标元素向最外层元素传播。
- 事件委托：利用事件冒泡机制，将事件监听器绑定到父元素上，处理子元素的事件。
七、网络相关
1.HTTP和HTTPS有什么区别？
- HTTP：超文本传输协议，明文传输，不安全。
- HTTPS：HTTP的安全版本，通过SSL/TLS协议加密传输，保证数据的安全性和完整性。
- 区别：
- 安全性：HTTPS加密，HTTP不加密。
- 端口：HTTP默认端口80，HTTPS默认端口443。
- 证书：HTTPS需要CA证书，HTTP不需要。
2.HTTP请求有哪些方法？
GET：请求获取资源，参数在URL中，不安全，有长度限制。POST：提交数据到服务器，参数在请求体中，相对安全，无长度限制。PUT：更新资源，替换目标资源的所有当前表示。DELETE：删除资源。HEAD：请求资源的响应头，不返回响应体。OPTIONS：请求服务器返回支持的HTTP方法。
3.HTTP状态码有哪些？
- 1xx（信息性状态码）：请求已接收，继续处理。
- 2xx（成功状态码）：请求成功。
- 3xx（重定向状态码）：需要进一步操作以完成请求。
- 4xx（客户端错误状态码）：请求包含语法错误或无法完成。
- 5xx（服务器错误状态码）：服务器在处理请求时发生错误。
4.什么是RESTful API？
- RESTful API是一种基于HTTP协议的API设计风格，遵循REST（表述性状态转移）原则。
- 特点：
- 资源：每个资源都有一个唯一的URI（统一资源标识符）。
- 操作：通过HTTP方法（GET、POST、PUT、DELETE）对资源进行操作。
- 状态：无状态，每个请求都包含所有必要的信息，服务器不保存客户端的状态。
5.什么是AJAX？
- AJAX（Asynchronous JavaScript and XML）：异步JavaScript和XML，通过JavaScript的
XMLHttpRequest对象或fetchAPI实现异步请求，无需刷新页面即可更新部分页面内容。 - 优点：
- 提升用户体验，减少页面刷新。
- 减少服务器负载，只请求必要的数据。
- 支持异步操作，提高页面响应速度。
八、性能优化相关
1.如何优化前端性能？
- 减少HTTP请求：合并CSS、JavaScript文件，使用CSS Sprites合并图片。
- 压缩资源：压缩HTML、CSS、JavaScript文件，使用图片压缩工具。
- 使用CDN：将静态资源部署到CDN，提高资源加载速度。
- 懒加载：延迟加载非首屏资源，如图片、视频等。
- 减少重绘和重排：避免频繁操作DOM，批量修改样式。
- 使用缓存：利用浏览器缓存、服务端缓存，减少服务器请求。
2.如何实现图片懒加载？
- 使用
IntersectionObserverAPI：监听图片元素是否进入视口，进入视口时加载图片。 - 使用
scroll事件：监听滚动事件，计算图片元素的位置，当图片进入视口时加载图片。 - 使用第三方库：如
lazyload，提供简单的图片懒加载功能。
3.如何优化JavaScript性能？
- 减少DOM操作：避免频繁操作DOM，使用文档片段（DocumentFragment）批量操作。
- 避免闭包陷阱：闭包会延长变量生命周期，可能导致内存泄漏。
- 使用事件委托：减少事件监听器数量，提高性能。
- 避免全局变量：全局变量会污染全局作用域，影响性能。
- 使用
requestAnimationFrame：优化动画性能，避免掉帧。
4.如何优化CSS性能？
- 减少选择器嵌套：避免过度嵌套，降低优先级复杂度。
- 避免使用
@import：@import会阻塞页面渲染，推荐使用<link>标签引入CSS。 - 使用CSS Sprites：合并小图片，减少HTTP请求。
- 避免使用
!important：!important会提高优先级，增加维护难度。 - 使用
will-change：提示浏览器优化即将变化的属性，如will-change: transform;。
5.如何优化页面加载速度？
- 压缩资源：压缩HTML、CSS、JavaScript文件，使用图片压缩工具。
- 使用CDN：将静态资源部署到CDN，提高资源加载速度。
- 懒加载：延迟加载非首屏资源，如图片、视频等。
- 减少HTTP请求：合并CSS、JavaScript文件，使用CSS Sprites合并图片。
- 使用缓存：利用浏览器缓存、服务端缓存，减少服务器请求。
九、工具相关
1.Webpack的基本配置有哪些？
- 入口（entry）：指定打包的起点，如
./src/index.js。 - 输出（output）：指定打包后的文件路径和名称，如
./dist/bundle.js。 - 加载器（loader）：处理非JavaScript文件，如
babel-loader（转换ES6+代码）、css-loader（处理CSS文件）。 - 插件（plugin）：执行更复杂的任务，如
HtmlWebpackPlugin（生成HTML文件）、CleanWebpackPlugin（清理输出目录）。 - 模式（mode）：指定打包模式，如
development（开发模式）、production（生产模式）。
2.如何使用Babel转译ES6+代码？
- 安装Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env。 - 配置Babel：创建
.babelrc文件，添加配置：
{
"presets": ["@babel/preset-env"]
}
- 使用Babel CLI：
npx babel src --out-dir dist，将src目录下的代码转译到dist目录。
3.如何使用ESLint规范代码？
- 安装ESLint：
npm install --save-dev eslint。 - 初始化ESLint：
npx eslint --init，选择配置方式（如Airbnb、Standard等）。 - 配置ESLint：在
.eslintrc.js文件中添加规则，如：
module.exports = {
extends: 'airbnb',
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
},
};
- 使用ESLint：
npx eslint src，检查src目录下的代码。
4.如何使用Git进行版本控制？
- 初始化仓库：
git init，创建一个新的Git仓库。 - 克隆仓库：
git clone <repository-url>，克隆远程仓库到本地。 - 提交代码：
git add .（添加所有文件），git commit -m "commit message"（提交代码）。 - 推送代码：
git push origin <branch-name>，将本地分支推送到远程仓库。 - 拉取代码：
git pull origin <branch-name>，从远程仓库拉取最新代码。
5.如何使用NPM管理依赖？
- 初始化项目：
npm init -y，创建package.json文件。 - 安装依赖：
npm install <package-name>，安装依赖到node_modules目录，并添加到package.json的dependencies。 - 安装开发依赖：
npm install <package-name> --save-dev，安装依赖到node_modules目录，并添加到package.json的devDependencies。 - 卸载依赖：
npm uninstall <package-name>，卸载依赖，并从package.json中移除。 - 更新依赖：
npm update <package-name>，更新依赖到最新版本。
十、其他
1.什么是前端工程化？
- 前端工程化是通过工具、流程、规范等手段，提高前端开发效率和质量的过程。
- 包括：
- 代码规范：使用ESLint、Prettier等工具规范代码。
- 模块化：使用CommonJS、ES Module等规范模块化代码。
- 组件化：使用Vue、React等框架实现组件化开发。
- 自动化：使用Webpack、Gulp等工具实现自动化构建、测试、部署。
- 性能优化：通过压缩、懒加载、CDN等手段优化前端性能。
2.什么是前端安全？
- 前端安全是保护前端应用免受攻击的过程，常见的攻击方式包括：
- XSS（跨站脚本攻击）：通过注入恶意脚本，窃取用户信息或执行恶意操作。
- CSRF（跨站请求伪造）：通过伪造用户请求，执行未经授权的操作。
- SQL注入：通过注入SQL语句，窃取或篡改数据库数据。
- 防御措施：
- 输入验证：对用户输入进行验证和过滤。
- 输出编码：对输出内容进行编码，防止XSS攻击。
- 使用CSRF Token：在请求中添加CSRF Token，验证请求的合法性。
- 使用HTTPS：加密传输数据，防止中间人攻击。
3.如何实现前端路由？
- 哈希路由：通过
window.location.hash实现，URL中#后面的部分为路由路径，如#home。监听hashchange事件，根据路径加载对应的内容。 - 历史路由：通过
window.historyAPI实现，使用pushState和replaceState修改URL，监听popstate事件，根据路径加载对应的内容。
4.什么是前端框架？
- 前端框架是提供了一套完整的解决方案，帮助开发者快速构建前端应用的工具。
- 常见的前端框架：
- Vue：轻量级框架，易于上手，适合中小型项目。
- React：Facebook开发的库，专注于视图层，适合大型项目。
- Angular：Google开发的框架，功能强大，适合大型企业级项目。
5.如何实现前端国际化？
- 使用i18n库：如
vue-i18n（Vue）、react-intl（React），提供多语言支持。 - 配置语言包：为每种语言创建语言包，包含翻译后的文本。
- 切换语言：通过用户选择或浏览器语言，动态切换语言包。
6.什么是前端测试？
- 前端测试是通过自动化工具或手动测试，验证前端应用的功能、性能、兼容性等是否符合预期的过程。
- 测试类型：
- 单元测试：测试单个函数或组件的功能。
- 集成测试：测试多个组件或模块的交互。
- 端到端测试：测试整个应用的流程，模拟用户操作。
7.如何实现前端错误监控？
- 使用
window.onerror：捕获全局的JavaScript错误。 - 使用
window.addEventListener('error')：捕获资源加载错误。 - 使用
window.addEventListener('unhandledrejection')：捕获未处理的Promise拒绝。 - 使用第三方监控工具：如Sentry、LogRocket，提供全面的错误监控和分析。
8.什么是前端性能监控？
- 前端性能监控是通过工具或API，收集和分析前端应用的性能数据，如页面加载时间、首屏时间、资源加载时间等。
- 常用工具：
- Lighthouse：Chrome DevTools中的性能分析工具。
- Web Vitals：Google提供的性能指标，如LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）。
- 第三方监控工具：如New Relic、Datadog，提供全面的性能监控和分析。
9.如何实现前端代码的热更新？
- 使用Webpack的Hot Module Replacement（HMR）：在不刷新页面的情况下，替换、添加或删除模块。
- 配置Webpack：在
webpack.config.js中启用HMR：
module.exports = {
devServer: {
hot: true,
},
};
- 在代码中使用HMR API：
if (module.hot) {
module.hot.accept('./module', () => {
// 重新加载模块
});
}
10.什么是前端构建工具？
- 前端构建工具是用于自动化处理前端开发流程的工具，如代码压缩、打包、转译、测试等。
- 常见的构建工具：
- Webpack：模块打包工具，支持多种资源类型。
- Gulp：基于流的构建工具，适合处理文件操作。
- Grunt：基于任务的构建工具，配置简单，但性能较差。
11.如何实现前端代码的模块化？
- 使用CommonJS：Node.js的模块化规范，通过
require和module.exports实现。 - 使用ES Module：现代JavaScript的模块化规范，通过
import和export实现。 - 使用AMD：异步模块定义规范，通过
define和require实现，适合浏览器环境。
12.什么是前端组件化？
- 前端组件化是将页面拆分为独立的、可复用的组件，每个组件包含自己的结构、样式和逻辑。
- 优点：
- 提高代码复用性，减少重复代码。
- 提高代码可维护性，便于团队协作。
- 提高开发效率，快速构建页面。
13.如何实现前端代码的可维护性？
- 遵循代码规范：使用ESLint、Prettier等工具规范代码。
- 模块化和组件化：将代码拆分为独立的模块和组件，提高代码复用性和可维护性。
- 注释和文档：为代码添加注释和文档，便于理解和维护。
- 单元测试：编写单元测试，确保代码的正确性和稳定性。
- 持续集成：使用CI工具（如Jenkins、Travis CI）自动化测试和部署，确保代码质量。
本来第一道撕不出来我就说不耽误hr了，hr说他的工作就是面我们，硬是面了1.5h
查看6道真题和解析