前端面试题：常见的HTTP、TCP/IP、跨域问题等解析；

最新推荐文章于 2024-04-26 20:44:39 发布

狗蛋的博客之旅

最新推荐文章于 2024-04-26 20:44:39 发布

阅读量932

点赞数

分类专栏： Vue2 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43263566/article/details/130800326

版权

Vue2 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

部分数据来源：ChatGPT

一、HTML、CSS、JavaScript 基础知识

1、简单介绍HTML、CSS、JavaScript的作用及它们之间的关系？

HTML、CSS、JavaScript是Web开发中常用的三个技术，它们之间的关系如下：

HTML（超文本标记语言）：用于创建网页结构和内容；
CSS（层叠样式表）：用于网页的布局和样式；
JavaScript：用于网页的动态交互和逻辑处理。

2、HTML5 跟 HTML4 的区别是什么？

HTML5增加了一些新元素，如,,,等，使结构更加清晰。
HTML5引进了一些新功能，比如，多媒体播放、本地存储等。
HTML5增加了一些新的属性。
HTML5废除了一些不再使用的元素和属性。

3、CSS3 有哪些新特性？

CSS3 支持圆角、阴影、渐变、动画、弹性布局、响应式设计等新特性。

4、如何优化Web前端性能？

减少HTTP请求；
压缩文件和图片；
去掉重复或无用的代码；
合并文件和请求；
合理使用缓存；
静态资源采用CDN等。

4、什么是框架？列出当前流行的前端框架及其优缺点。

框架是在软件工程中指的是封装了某种特定语言或技术的通用解决方案，目的是提高代码组织、重用性和可维护性。

目前流行的前端框架有 React、Angular 和 Vue。

React：高效、灵活、可自定义；缺点是学习曲线急，需要掌握JSX和组件；
Angular：强大、模块化，更适用于大型应用；缺点是性能相对较差，语法较为复杂；
Vue：轻量、易学、易用；缺点是生态比较薄弱。

5、什么是DOM？什么是BOM？它们有什么区别和联系？

DOM（Document Object Model）：是一种树状结构的文档对象模型，描述了文档的层次结构，可用于操作HTML和XML文档的编程接口。
BOM（Browser Object Model）：是一个独立于HTML的对象集合，提供了JavaScript操作浏览器的接口。

DOM和BOM是两个独立的对象模型，但它们有联系。BOM提供了一些对象，如window对象和navigator对象，这些对象可以访问和操作DOM。

二、前端框架、库和插件

1、jQuery的原理是什么？底层核心代码和类库？ jQ如何实现选择器和链式操作？

jQuery底层实现靠的是选择器，然后对元素进行操作实现；核心代码是用JavaScript实现的，封装了一些常用的操作函数。

jQuery选择器主要是借助querySelectorAll实现的，链式调用主要是利用return this实现的。

2、什么是Vue？Vue和React的区别和相似处是什么？

Vue是一款轻量级的前端框架，它采用了现代化的MVVM架构，核心库只关注视图层，易于集成其它库和已有项目。

Vue和React的最大相似之处在于，它们都是通过Virtual DOM来实现DOM的高效更新，从而提升应用的性能。此外，它们也都采用了组件化的思想，更方便地实现复用和维护。

Vue和React的区别主要在以下几个方面：

模板语法：Vue采用了更为传统的模板语法，而React则是通过JSX语法实现模板。
架构：Vue采用了现代化的MVVM架构，而React则是围绕组件化思想构建的。
学习曲线：Vue的学习曲线相对较低，而React需要掌握JSX等技术。
生态系统：React的生态系统相对更为成熟，社区也更为活跃，但Vue也在快速发展。

3、什么是Webpack？它的主要功能是什么？

Webpack是一款现代化的打包工具，主要功能是将前端项目中的不同类型资源（如CSS、JavaScript、图片等）打包成最终可用的前端静态文件，用于构建高效、可维护的前端项目。

Webpack的主要功能包括：

支持多种资源类型，如JavaScript、CSS、图片、字体文件等；
实现模块化开发，支持CommonJS、AMD等模块规范；
支持插件机制，可以自定义配置、扩展功能；
支持代码压缩、文件合并、打包分离等优化；
支持热更新、文件监听等开发工具，提高开发效率。

4、AngularJS的基本知识和原理是什么？

AngularJS是一款前端框架，它采用了MVVM架构模式和双向数据绑定的思想，易于开发和维护复杂的前端应用。

AngularJS的核心思想是：HTML作为模板语言，JavaScript作为编程语言，通过双向数据绑定实现模板和JavaScript的交互。

AngularJS的主要组件包括：模块、服务、控制器、指令、过滤器等。其中，指令是AngularJS的核心特色，是一种在HTML中添加指令属性，实现动态渲染和交互的方式。

5、React-router是什么？React-router的作用和原理是什么？

React-router是一款基于React的前端路由框架，它可用于管理页面间的路由跳转、参数传递、页面缓存等功能。

React-router的作用主要是实现SPA（Single Page Application）的路由功能，它将页面的不同部分作为不同的路由，并借助浏览器的URL切换实现页面间的无刷新跳转。

React-router的原理主要是通过history或hash机制实现URL的监听和控制，根据不同的URL路由到不同的组件，在页面中渲染不同的界面。同时，React-router也支持异步加载组件，提高应用性能。

三、前端开发工具

1、WebStorm中代码格式化、代码提示、Git使用等基本操作？

代码格式化：可以使用快捷键Ctrl+Alt+L格式化代码，或在设置中进行自定义配置。
代码提示：WebStorm提供了代码补全、语法提示、错误检查等功能，能大大提高开发效率。
Git使用：WebStorm内置Git，可以直接在WebStorm中进行代码版本控制和管理。

2、什么是调试？如何在浏览器中调试JavaScript？

调试是指在程序运行过程中，通过查看程序执行过程中的变量、调用栈、错误信息等信息，寻找并解决程序中的问题。在浏览器中调试JavaScript可以使用浏览器内置的开发工具，如Chrome中的开发者工具，通过设置断点、查看变量值等方式实现。

3、Chrome开发者工具的调试功能和使用方法？

Chrome开发者工具是一款用于开发、调试和优化网站和应用的浏览器开发工具。其主要调试功能包括：

元素面板：用于调试和修改页面元素的HTML和CSS属性；
资源面板：用于查看和调试页面资源，如JavaScript文件、CSS文件、图像等；
控制台面板：用于调试JavaScript代码、查看调用栈、打印日志等操作；
网络面板：用于分析网络请求和响应，查看HTTP响应状态码、请求时间、请求和响应头等信息；
设备模式：模拟移动设备或不同分辨率下的页面显示，检查布局和效果。

四、计算机网络、算法、数据结构

1、HTTP和HTTPS的区别是什么？

HTTP和HTTPS都是用于传输数据的网络协议，但HTTPS基于HTTP，在传输数据时增加了SSL/TLS协议进行数据加密和认证，从而提高了数据传输的安全性。具体区别如下：

HTTP默认使用80端口，HTTPS默认使用443端口；
HTTP传输的数据是明文的，可以被窃听和篡改，而HTTPS传输的数据是加密的，不容易被窃听和篡改；
HTTPS需要服务器端使用SSL/TLS证书进行认证，确保数据传输的安全性；
HTTPS使用较多的计算资源，通信速度较慢，而HTTP相对较快。

2、什么是跨域？如何避免跨域问题？

跨域是指在浏览器端，访问其他域名下的资源时出现的安全限制问题。主要出现在Ajax请求、Web字体、样式等请求跨越域名的情况。

可以通过以下方式避免跨域问题：

使用JSONP技术，在访问跨域JSON数据时使用回调函数实现数据传递；
使用CORS（Cross-Origin Resource Sharing）跨域资源共享，具体可以在后端接口返回中添加Access-Control-Allow-Origin字段；
通过代理实现跨域请求，在本域名下发送请求到服务器，再由服务器转发到跨域的目标域名。

3、描述一下TCP/IP协议及OSI模型？

TCP/IP协议是一组用于互联网数据传输的协议集合，包括TCP、IP、HTTP、FTP、SMTP等协议。其中，TCP（Transmission Control Protocol）和IP（Internet Protocol）是TCP/IP协议中最核心的两个协议，TCP负责可靠传输数据，IP负责数据分组和路由。

OSI模型是一种计算机网络通信协议的七层抽象模型，分别是：

物理层：传输介质、电压等底层物理实现；
数据链路层：定义数据的格式、数据的传输、差错校验等；
网络层：路由决策、网络寻址等；
传输层：实现连接（Socket）和端对端（End-to-End）数据传输；
会话层：管理持久连接、会话管理等；
表示层：数据格式、数据加密解密、数据压缩等；
应用层：定义了各种协议和数据交互的方式，如HTTP、FTP、DNS等。

4、简述快排算法的原理和时间复杂度？

快排是一种常见的排序算法，其基本思路是选取一个基准数，并将小于基准数的数放在基准数的左边，将大于基准数的数放在基准数的右边。然后对基准数左右两个子数组递归调用快排算法，最终完成整个数组的排序。

快排算法的时间复杂度为O(nlogn)。它是基于分治法的思想实现的，每次将数组分成两个部分，每个部分执行一次递归操作，一次操作的时间复杂度为线性时间O(n)，故总时间复杂度为O(nlogn)。

五、实际应用

1、Vue的生命周期是什么？它们分别在什么时候执行？

Vue组件的生命周期指的是在组件被创建、更新和销毁过程中，组件内置的一些函数以及触发的一些事件。Vue的生命周期分为以下几个阶段：

beforeCreate：组件刚被创建，数据对象data还没被初始化，无法访问Vue实例中的数据和方法；
created：完成组件数据对象的初始化，数据可访问，但DOM元素还未被创建；
beforeMount：将组件挂载到DOM节点之前执行；
mounted：将组件挂载到DOM节点后执行，此时组件已渲染完成，可访问DOM元素；
beforeUpdate：在组件更新之前执行；
updated：在组件更新之后执行，此时DOM元素已更新；
beforeDestroy：在组件被销毁之前执行，此时组件还可以使用；
destroyed：在组件被销毁之后执行，此时组件中的数据和方法已全部被销毁。

2、如何在Vue中使用路由？如何实现路由跳转？

在Vue中，使用vue-router插件来实现路由功能。主要包括以下几个步骤：

安装vue-router插件：通过npm install vue-router安装vue-router插件；
实例化VueRouter并配置路由：可通过数组或函数形式配置路由信息；
在Vue根实例中注册vue-router插件；
在Vue组件中，使用<router-link>或this.$router.push()等方式实现路由跳转。

例如，使用<router-link>实现路由跳转可以这样写：

<template>
  <div>
    <router-link to="/about">About</router-link>
  </div>
</template>

3、如何在Vue中实现父子组件之间的数据传递？

在Vue中，父子组件之间的数据传递可以通过props和$emit实现。

使用props：在父组件中通过props向子组件传递数据，在子组件中通过props接收数据；
使用emit：在子组件中通过emit：在子组件中通过emit触发自定义事件，从而向父组件传递数据，在父组件中通过v-on监听自定义事件并获取数据。

例如，使用props实现父子组件之间的数据传递：

父组件：

<template>
  <div>
    <child-component :msg="parentMsg"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        parentMsg: 'HelloWorld!’
}
}
}
</script>

子组件：


<template>
  <div>{{msg}}</div>
</template>

<script>
  export default {
    props: ['msg']
  }
</script>

4、介绍一下Vue和React的优缺点？

Vue的优点：

学习曲线相对较低，易于入门；
模板语法更为传统，易于理解和编写；
性能较高，采用虚拟DOM和高效的模板编译方式进行优化；
生态系统不断壮大，社区活跃度高；
文档丰富，开发效率高。

Vue的缺点：

未来发展不确定，可能存在风险；
社区相对于React而言较小，资源相对较少。

React的优点：

采用虚拟DOM，性能较高；
采用JSX语法，实现了UI组件与逻辑的分离，更灵活可扩展；
生态系统成熟，社区活跃度高；
集成测试（End-to-End Testing）效果更好。

React的缺点：

学习曲线较陡峭，需要掌握JSX等多种技术；
模板语法相对较为复杂，需要花费一定时间进行学习；
开发效率相对较低，需要编写更多的代码和技术实现一些功能。

5、什么是单向数据流？为什么在React中推崇单向数据流？

单向数据流是指数据在组件之间的传递方向是单向的，即从上层组件向下层组件传递数据。在React中，组件间的数据传递需要通过props进行，子组件只能从父组件中获取数据，不能直接修改父组件的数据。

React推崇单向数据流的主要原因：

降低组件之间的耦合度，使得组件具有更好的独立性和可重用性；
简化程序的逻辑，提高代码的可读性和可维护性；
便于实现数据的可追踪性和管理。

总之，单向数据流符合React的“状态管理”的思想，将整个应用的状态统一管理，更加方便管理和维护。