前端常见面试题

http1.0和http2.0的区别？

HTTP 1.0和HTTP 2.0是两种不同的网页通信协议，它们之间的主要区别在于连接方式、数据格式、头部压缩以及服务器推送等方面。

• 连接方式：HTTP 1.0是无状态的，每次请求都需要建立新的连接，因此会导致大量的TCP握手，从而产生大量延迟。相比之下，HTTP 2.0支持多路复用，可以在一个TCP连接上并发处理多个请求和响应，从而减少了连接建立和断开的开销。
• 数据格式：HTTP 1.0使用文本格式进行数据传输，这种格式便于阅读，但不利于传输和解析。相反，HTTP 2.0采用二进制格式进行数据传输，这种格式更有利于数据的快速传输和解析。
• 头部压缩：HTTP 1.0的请求头部信息是明文的，这会导致大量的冗余数据。而HTTP 2.0则通过使用HPACK算法对头部数据进行压缩，从而减少了数据传输量。
• 服务器推送：HTTP 1.0中，客户端需要明确请求服务器才能获取资源。而HTTP 2.0中，服务器可以主动向客户端推送资源，即服务端可以在客户端请求之前就将资源发送到客户端存储到缓存中，从而减少了不必要的请求和响应。

综上所述，HTTP 2.0相比HTTP 1.0在很多方面有更好的性能和效率，能够提供更好的用户体验。

 

http和https的区别？

HTTP和HTTPS的区别主要体现在以下四个方面：

• 协议性质：HTTP是超文本传输协议，信息以明文形式传输。而HTTPS是具有安全性的SSL加密传输协议，通过加密方式传输数据，保证了信息的安全性。
• 连接方式：HTTP和HTTPS使用的连接方式完全不同，前者使用80端口，后者使用443端口。
• 证书与安全性：HTTPS协议需要向CA申请证书，以验证服务器身份的合法性，这个过程需要一定的费用。同时，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全性更高。
• 数据传输：HTTP连接是无状态的，意味着服务器不会记录之前发生过的请求和响应。而HTTPS协议是有状态的，服务器会记录之前的请求和响应，以确保数据传输的安全性。

总的来说，HTTP和HTTPS的主要区别在于安全性和连接方式的不同。HTTPS协议使用SSL加密技术来保证数据的安全传输，因此比HTTP协议更加安全，但是需要更多的成本。在选择使用哪种协议时，需要根据具体需求和实际情况进行综合考虑。

 

react 中useCallback的作用？

在React中，useCallback是一个Hook，它的主要作用是让函数在组件多次渲染时保持不变。

在React中，当组件的props或state发生变化时，组件会重新渲染。在每次渲染过程中，如果存在回调函数的改变，React会尝试使用新的函数实例，这可能导致一些问题。例如，如果你有一个被useCallback保护的回调函数，它被传递给一个子组件，但是父组件的state变化导致子组件重新渲染，如果这个回调函数引用了一个闭包，那么闭包内的变量可能就会发生变化，这就可能导致预期之外的行为。

useCallback可以解决这个问题。它接受两个参数：第一个参数是你要保护的函数，第二个参数是依赖数组。如果依赖数组为空，那么这个函数就必须被返回。当依赖数组中的值改变时，useCallback会返回一个新的函数。如果依赖数组没有改变，那么useCallback会返回先前渲染的函数。这样就可以确保在多次渲染过程中，回调函数始终保持不变。

总的来说，useCallback的作用是让函数在组件多次渲染时保持不变，这样可以避免由于回调函数的改变导致的一些预期之外的行为。

重新生成

 

computed计算属性在Vue中常用于处理以下场景：

• 一个数据受多个数据影响的情况。当一个数据的变化受多个其他数据影响，并且需要被频繁地使用时，可以将这个计算属性定义在Vue的computed对象中。例如，在购物车应用中，购物车的总金额会随着商品数量和商品单价的变化而变化，这时就可以使用computed计算属性来处理这个计算过程。只要其中一个数据（例如商品数量或商品单价）发生变化，总金额就会自动更新。
• 需要缓存数据的情况。Computed计算属性具有缓存特性，只有在它依赖的数据发生改变时，它才会重新计算。这对于需要快速计算并显示给用户视图的数据非常有用，因为这些数据往往不需要每次都重新计算，只需要在相关数据改变时重新计算即可。例如，在新闻阅读器应用中，用户可以收藏某些文章，如果我们将收藏的文章列表作为computed属性的结果，那么只有在用户取消收藏或收藏新的文章时，这个列表才会更新。

总的来说，computed计算属性主要被应用于需要根据其他数据动态计算一个值的情况，并且这个值需要被频繁地使用或者展示给用户。

 

react 中redux解决啥问题

React-Redux作为一个状态管理库，可以帮助解决React应用中的状态管理问题。

• 在React中，状态是非常重要的，因为它是驱动React应用的主要因素。然而，当应用变得越来越复杂时，状态的管理也会变得越来越困难。如果将状态分散到多个组件中，那么改变状态或获取状态将变得非常困难和繁琐。
• Redux是一种可预测的状态管理库，它可以帮助开发者更好地组织和管理应用的状态，提供了一种可预测的状态管理方案，从而减少了状态管理方面的困惑和错误。通过使用React-Redux，开发者可以在React应用中更加高效地管理状态，提高应用的性能、可维护性和可扩展性。
• Redux通过以下核心概念来解决状态管理问题：

单一数据源：所有的状态都存储在一个称为“store”的地方，这使得状态的管理变得简单和可预测。

不可变性：一旦一个状态被创建，就不能被改变，只能通过执行特定的动作来修改状态。

纯函数：执行动作的函数必须是纯函数，这意味着它们不会改变状态，只会返回新的状态。

总的来说，React-Redux可以帮助开发者解决React应用中的状态管理问题，使得状态的管理变得更加高效、可预测和易于维护。

函数式组件和类组件的区别，各有哪些优势

函数式组件和类组件在React中都有其应用场景，具体区别和优势如下：

• 设计思想：函数式组件基于函数式编程思想，而类组件基于面向对象编程思想。函数式编程强调的是将复杂的业务逻辑通过数学运算的方式表达出来，函数之间没有状态依赖。而面向对象编程则是将属性和方法封装起来，通过对象之间的交互来实现业务逻辑。
• 语法：函数式组件是一个纯函数，只需要接受props参数并返回一个React元素。而类组件需要继承React.Component，并且需要创建render方法来返回React元素，语法上更复杂。
• 调用方式：在调用方式上，函数式组件可以直接调用并返回一个新的React元素，而类组件需要先实例化一个对象，然后通过这个实例化对象来调用render方法来返回一个React元素。
• 状态管理：函数式组件没有状态管理，所有的状态都在外部通过useState自定义。而类组件有状态管理，可以通过this关键字来访问和修改状态。
• 使用场景：类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），一般情况下能用函数式组件就不用类组件，提升效率。

总的来说，函数式组件和类组件在React中都有其应用场景，具体使用哪种组件需要根据具体的业务逻辑和项目需求来决定。

 

context替代redux

Context 和 Redux 都是用于在 React 应用中管理状态的库，但它们实现的方式有所不同。

• Context 提供了一种简单、轻量级的方式来管理应用中的状态。它允许在组件树中任何位置访问状态，而无需显式地传递 props。然而，当应用中的状态管理变得复杂时，可能会变得难以维护。此外，Context 不提供类似 Redux 那样的开发者工具，如时间旅行调试和状态快照。
• Redux 是一个更复杂的解决方案，专为大型、复杂的 React 应用设计。它有一个强大的开发者工具集，可以让你在应用中轻松地跟踪状态变化，并可以轻松地进行调试和测试。Redux 需要显式地将状态存储在一个单一的 store 中，并通过 action 和 reducer 来改变状态。虽然这增加了一些复杂性，但它使得状态管理更具可预测性和可维护性。

因此，Context 和 Redux 之间的选择取决于你的项目需求。如果你正在构建一个简单的 React 应用，并且不需要复杂的状态管理，那么 Context 可能会是一个更好的选择。然而，如果你正在构建一个大型、复杂的 React 应用，并且需要高级的状态管理功能，那么 Redux 可能会是一个更好的选择。

 

ts比js多了哪些关键字？

TypeScript相对于JavaScript新增了一些关键字，包括：

1. 新的数据类型有：any，number，string，boolean，数组，元组，enum，null，undefined
2. 类型关键字：TypeScript引入了JavaScript中没有的“类”概念，及类相关的关键字，如“class”、“extends”、“implements”、“super”等。
3. 模块关键字：TypeScript中引入了模块的概念，可以把声明、数据、函数和类封装在模块中，模块相关的关键字如“module”、“import”、“export”。
4. 其他关键字：TypeScript还新增了一些其他关键字，例如“null”、“undefined”、“true”、“false”、“new”、“typeof”等。

总的来说，TypeScript扩展了JavaScript的语法，提供了更强的类型检查和面向对象编程的特性。

伪类选择器有哪些？

伪类选择器是CSS选择器的一种，它允许你根据元素的特定状态来选择和应用样式。以下是一些常见的伪类选择器：

1. :hover：当用户鼠标悬停在元素上时，该选择器就会选择该元素。
2. :active：当用户与元素交互（例如点击按钮）时，该选择器就会选择该元素。
3. :visited：当用户已经访问过一个链接时，该选择器就会选择该元素。
4. :link：当链接未被访问时，该选择器就会选择该元素。
5. :focus：当元素（如输入框或按钮）获得焦点时，该选择器就会选择该元素。
6. :first-child：当元素是其父元素的第一个子元素时，该选择器就会选择该元素。
7. :last-child：当元素是其父元素的最后一个子元素时，该选择器就会选择该元素。
8. :nth-child(n)：当元素是其父元素的第n个子元素时，该选择器就会选择该元素。
9. :nth-last-child(n)：当元素是其父元素的倒数第n个子元素时，该选择器就会选择该元素。
10. :checked：当元素（如单选框或复选框）被选中时，该选择器就会选择该元素。
11. :not(selector)：这个选择器会选择所有不符合给定选择器的元素。

以上是伪类选择器的一部分，它们在CSS中非常有用，可以用来更改特定状态下的元素样式。

网页性能优化，前端能做什么？

1.减少HTTP请求：合并和压缩CSS和JavaScript文件，使用CSS Sprites来减少图片请求，删除不必要的资源请求，以减少页面加载时间。

2.压缩和优化静态资源：压缩CSS和JavaScript文件，优化图片大小和格式，以减少文件大小和加载时间。

3.缓存机制：通过设置合适的缓存头部（例如使用缓存控制和ETag）来缓存静态资源，从而减少服务器的请求和响应时间。

4.使用异步加载：将非关键的JavaScript文件异步加载，以避免阻塞主页面的加载。

5.延迟加载和按需加载：将页面上的非关键组件和内容延迟加载或按需加载，以减少初始页面加载2时间。

6.使用CDN（内容分发网络）：通过使用CDN来分发静态资源，可以提高资源的加载速度，并减轻服务器的负载。

7.响应式设计：使用响应式设计来适应不同设备和屏幕大小，避免不必要的资源加载和布局问题。

8.前端框架和库的优化：如果使用前端框架或库，可以选择优化过的版本或按需加载所需的部分，以减少文件大小和加载时间。

9.减少重绘和重排：通过优化CSS样式和布局，减少DOM操作和频繁的重绘和重排，以提高页面的响应速度。

10.性能监测和优化：使用性能分析工具来监测和分析网页的性能瓶颈，并根据结果进行优化和改进。

什么是 seo，前端能做什么？

SEO（搜索引擎优化）指的是通过优化网站的内容、结构和技术，提高网站在搜索引擎中的排名，从而获得更多的有机流量和更好的曝光度。

前端在SEO方面可以采取以下措施：

1.优化网页结构：使用语义化标签，合理划分页面结构，使搜索引擎更好地理解和索引网页内容。

2.关键词优化：在网页的标题、描述、头部标签和内容中合理使用关键词，使搜索引擎更容易理解网页的主题和内容。

3.URL优化：使用简洁、明确的URL结构，包含关键词，避免使用动态参数和无意义的字符。

4.图片优化：对图片进行压缩和优化，使用描述性文件名和ALT属性，以便搜索引擎能够理解图片内容。

5.优化页面加载速度：优化静态资源、压缩文件、使用CDN等技术，以减少页面的加载时间，提高用户体验和搜索引擎的评级。

6.响应式设计：确保网站能够适应不同设备和屏幕大小，提供良好的用户体验，获得更好的搜索引擎排名。

7.内容质量：提供有价值、原创和高质量的内容，满足用户需求，吸引自然的外部链接和社交分享，提升搜索引擎对网站的排名。

8.内部链接优化：合理设置内部链接结构，使网页之间相互关联，增加页面被搜索引擎收录和索引的机会。

9.网站地图：创建和提交网站地图，提供给搜索引擎更好地理解网站结构和内容，提高收录和索引效率。

10用户体验优化：确保网站界面友好、导航清晰，提供良好的用户体验，减少跳失率，增加用户停留时间。

如何实现响应式布局(页面自适应)？

1.使用CSS媒体查询：CSS媒体查询可以根据设备的宽度、高度、分辨率等特性为页面应用不同的CSS样式。通过定义不同的媒体查询规则，可以为不同大小的设备提供不同的布局和样式。

2.使用流式布局：流式布局是一种相对于设备宽度而不是固定像素宽度的布局。通过使用相对单位（如百分比）和自适应元素宽度（如max-width属性），可以实现页面的自适应。

3.使用CSS Flexbox布局：CSS Flexbox布局是一种用于创建灵活的、自适应的布局的CSS模块。通过使用Flexbox属性和值，可以在不同的设备上轻松地创建自适应的布局。

v-model双向绑定的原理？

v-model双向绑定的原理实际上就是通过事件机制实现的。当一个表单元素（如input、textarea）的值发生变化时，它会触发一个change事件或input事件，Vue.js会监听这些事件并更新数据。同时，当Vue实例的数据发生变化时，也会触发一个更新视图的事件，从而实现数据与视图的同步更新。除了默认情况下的change和input事件，v-model还可以绑定其他自定义事件，例如lazy、debounce等。lazy指令可以让v-model延迟更新，只有在失去焦点时才更新数据，而debounce则可以让v-model在一定时间内不更新，直到用户停止输入后才更新，从而减少无用的数据更新操作。

 

gitee平台上常用的git命令有哪些？

1. git clone: 用于从远程仓库克隆项目到本地。
2. git init: 初始化一个新的本地Git仓库。
3. git remote add: 添加一个远程仓库，与本地仓库建立联系。
4. git pull: 从远程仓库拉取代码更新到本地。
5. git push: 将本地仓库的代码推送到远程仓库。
6. git status: 查看当前版本管理状态，包括哪些文件已经更改，哪些文件已添加，等等。
7. git add: 将文件添加到暂存区，准备提交。
8. git commit: 提交暂存区的更改，同时可以添加提交描述。
9. git log: 查看提交历史。
10. git reflog: 查看命令历史。
11. git reset: 恢复到某个提交，可以指定提交ID。
12. git revert: 放弃某些文件的更改。
13. git branch: 查看、创建、切换分支。
14. git merge: 将一个分支的更改合并到当前分支。
15. git rebase: 获取指定提交的最新更改并将其应用到当前分支上。

WebSocket的主要作用如下：

1. 实时通信：WebSocket能保持一个长连接，当服务端有新消息时，能够实时推送到使用方，这使得基于WebSocket的通信方式具有更好的实时性。
2. 数据收集：一些次优级别的数据，如行为日志、trace、异常执行堆栈等，都可以通过WebSocket通道进行传输，这有助于增加信息的集中度，并及时对用户行为进行适当的配置推送。
3. 加密与认证：虽然使用Fiddler、Charles等工具可以捕获WebSocket包，但由于其是双工长连接，服务端可以推送一些钩子命令，甚至直接是代码，在客户端进行执行。例如，截屏、录音、种植小马等操作。

以上是WebSocket较为常见的作用，如需了解更多信息，建议咨询专业人士或者查阅专业书籍。

React Hooks提供了多种常用的钩子，以下是一些主要的钩子：

useState(): 这是一个允许你在React函数组件中添加状态的钩子。每个useState调用都有一个独立的状态变量，并返回该状态的当前值和一个更新该状态的函数。

useContext(): 这个钩子允许你访问React的Context API，以读取或更新组件的上下文。

useReducer(): 这个钩子是一个在React函数组件中替代this.state和解码URI参数的钩子。它接受一个形如(state, action) => newState的reducer函数和一个初始状态作为参数，返回一个状态和一个 dispatch 函数。

useEffect(): 这个钩子允许你在函数组件渲染后执行一些副作用操作，如数据获取，订阅等。

什么是开发环境和生产环境？他们有何区别？

• 开发环境和生产环境是两个不同的环境，它们的主要区别在于其用途和所处阶段的不同。

开发环境是指开发人员在开发过程中使用的环境，通常包括开发工具、代码库、编译器等。开发环境是开发人员编写、测试和调试代码的环境，它通常与开发人员的本地机器相连，以便于开发人员随时进行代码修改和测试。

• 生产环境则是项目最终运行的环境，也称为线上环境。生产环境是应用程序的最终用户使用的环境，因此它需要一个稳定、安全和可靠的网络环境，以保证应用程序的正常运行和用户体验。

开发环境和生产环境的主要区别在于：

1. 用途不同：开发环境用于开发人员编写、测试和调试代码，而生产环境用于最终用户运行应用程序。
2. 配置不同：开发环境的配置通常比较简单，只需要满足开发人员的基本需求即可；而生产环境的配置则比较复杂，需要考虑到应用程序的性能、安全性、可靠性等因素。
3. 运行环境不同：开发环境通常与开发人员的本地机器相连，而生产环境则需要一个稳定、安全和可靠的网络环境。
4. 访问权限不同：开发环境通常对开发人员开放，而生产环境则需要严格的管理和访问权限控制，以保证应用程序的安全性和稳定性。

总之，开发环境和生产环境是两个不同的环境，它们在使用、配置、运行环境和访问权限等方面存在差异。在软件开发过程中，需要合理地配置和管理这两个环境，以保证应用程序的正常运行和用户体验。

• 在项目的package.json文件中，开发依赖项和生产依赖项分别存储在devDependencies和dependencies对象中。

js中浅拷贝，深拷贝的使用场景？

在JavaScript中，浅拷贝和深拷贝的使用场景主要涉及复杂对象的处理。

浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是两种复制复杂对象（如Object或Array）的方法，它们在处理对象的属性时有所不同。

• 浅拷贝：仅复制对象的一层，如果对象的属性是引用类型，实质复制的是其引用。也就是说，当引用指向的值改变时，复制后的对象也会跟着变化。这通常用于对某个数组或对象的值进行修改，但要保留原来数组或对象的值不被修改。在JavaScript中，已经有一些封装好的方法可以实现浅拷贝，如数组方法：concat()，filter()，slice()，map()等。当使用这些方法修改数组时，不会修改原来的数组，而是返回一个新的数组。
• 深拷贝：复制对象的所有层级，无论是浅层对象还是深层对象，都会复制一份新的出来。这通常用于创建新的数组或对象，并保留原来数组或对象的所有值不被修改。在JavaScript中，可以使用JSON的序列化和反序列化来实现深拷贝。例如，可以通过JSON.stringify(obj)将对象转换为字符串，再通过JSON.parse(_obj)将字符串转换回对象。但是这种方法有一些限制，例如非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中，以及对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法会抛出错误。

总的来说，浅拷贝和深拷贝的使用场景主要取决于你是否需要修改原始对象或保留原始对象的所有层级。

 

js中事件流程分为哪三个阶段

• 事件捕获阶段：当某个元素触发某个事件时，顶层对象（如document）会发出一个事件流，随着DOM树的节点从顶层流向目标元素，直到到达事件真正发生的元素。
• 事件目标阶段：当到达目标元素之后，执行目标元素该事件相应的处理函数。
• 事件冒泡阶段：从目标元素开始，往顶层元素传播，途中如果有节点绑定了相应的事件处理函数，这些函数就会被依次触发。