整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。

篇幅过长，大家可以先点赞收藏后慢慢看。

(以下所有面试题目均有答案)

目录

BOM&&DOM

1.BOM事件?

2.常见BOM事件?

3.BOM事件处理程序?

4.BOM对象方法?

5.BOM对象

1.history

2.location

3.document

6.DOM?

7.DOM节点

8.DOM获取节点

9.DOM创建节点与插入节点

10.DOM0级和DOM2级有什么区别

11.textContent、innerText、innnerHTML、value的区别

12.关于dom的api有什么

13.什么叫Dom事件流？

14.如何让事件先冒泡后捕获

15.说一下事件代理

html和css部分

1. 如何理解CSS盒子模型

2.BFC

3.标签语义化

4.meta标签

5.css与javascript引入设置

6.HTML的块级元素，行内元素，行内块元素有哪些,区别是什么

7.CSS3有哪些新特性

８.实现元素隐藏

9.如何实现元素水平居中

10.如何实现元素垂直居中

11.Position

12.定位元素水平垂直居中

13.清除浮动

14.css选择器有哪些，选择器的优先级

15.各种布局优缺点

16.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问

题？如何区分 HTML 和 HTML5？

17. CSS3新增伪类举例：

18.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

19.如何实现浏览器内多个标签页之间的通信?

20.解释下浮动和它的工作原理？清除浮动的方法

JS基础

1.什么是闭包

2.闭包的用途

3.闭包的缺点

4.闭包实用场景

5. JS 有哪些数据类型？

6.基本数据类型和引用数据类型有什么区别？

7.判断数据类型的方法有哪些？

8.浅拷贝与深拷贝有何区别？如何实现？

9. let、const的区别是什么？

10. 什么是执行上下文和执行栈？

11.什么是作用域和作用域链？

12.作用域和执行上下文的区别是什么？

13.this指向的各种情况都有什么？

14.如何改变this指针的指向？

15.如何理解同步和异步？

16.JS是如何实现异步的？

17.什么是AJAX？如何实现？

18.实现异步的方式有哪些？

19.怎么理解Promise对象？

20.怎么理解宏任务，微任务？？？

21.实现继承的方法有哪些？？？

22.require/import之间的区别？23.原型和原型链

24.事件委托

25.解释一下变量的提升

26. 如何理解高阶函数

27.如何区分声明函数和表达式函数

28.解释原型继承是如何工作的

HTTP

1.什么是域名发散和域名收敛？

2.为什么浏览器要做并发限制呢？

3.什么是 DDOS 攻击

4.DDOS 攻击方式

5.如何应对 DDOS 攻击

6.http请求过程

7.DNS 域名如何解析的？

8.TCP三次握手

9.为什么要三次握手？

10.为什么HTTP协议要基于TCP来实现？

11.什么是面相连接协议？面向无链接协议又是什么？

1. 面相连接协议定义

2. 面向无链接协议定义

12.说到三次握手，那在说下四次挥手吧？

13.为什么要四次挥手

14.为什么建立连接是三次握手，关闭连接确是四次挥手呢？

15.如果已经建立了连接，但是客户端突然出现故障了怎么办？

16.http请求方式有哪些？

17.常用的请求状态码？

18.TCP和UDP的区别以及应用场景

1.UDP

2.TCP

3.应用场景

19.GET和POST的区别

20.cookies机制和session机制的区别：

21.HTTP、状态码：

22.Internet采用哪种网络协议?该协议的主要层次结构?

23.IP地址的编码分为哪俩部分?

24.TCP/IP通信建立的过程怎样，端口有什么作用？

25.IP组播有那些好处?

HTTP2 && HTTP缓存

1.http/2项目设定目标

2.http/2特性

3.什么是缓存？又有什么用？

4.你知道有哪些缓存方式吗？

5.缓存位置

6.http缓存怎样生效的？7.HTTP2的伪头字段

8.HTTP 2:服务器推送

9.队首阻塞问题

10.Transport头域

11.时效缓存（强制缓存）

12.非时效缓存（对比缓存，用的是标识）：

13.两种缓存标识

14.Service Worker

15.memory cache

16.disk cache

https

1.https的访问过程

详细解释：

2.https的优缺点？

1. 优点

2、缺点

3.https如何进行性能优化？

1.https访问速度优化

2.https计算性能优化

4.http和https

5.HTTPS为什么是安全的？

6.HTTPS相对于HTTP的缺陷？

7.为什么需要证书?

8.怎么防止的篡改?

Git

1.列举工作中常用的几个git命令？

2. 提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的？

3. 如果本次提交误操作，如何撤销？

4. 如果我想修改提交的历史信息，应该用什么命令？

第二步：执行命令git rebase –i HEAD~3，会把前3次的提交记录按照倒叙列出来；

5. 你使用过git stash命令吗？你一般什么情况下会使用它？

6. 如何查看分支提交的历史记录？查看某个文件的历史记录呢？

7. 能不能说一下git fetch和git pull命令之间的区别？

8. 使用过git merge和git rebase吗？它们之间有什么区别？

9. 能说一下git系统中HEAD、工作树和索引之间的区别吗？

10. 之前项目中是使用的GitFlow工作流程吗？它有什么好处？

11. 使用过git cherry-pick，有什么作用？

12. git跟其他版本控制器有啥区别？

13.我们在本地工程常会修改一些配置文件，这些文件不需要被提交，而我们又不想每次

执行git status时都让这些文件显示出来，我们该如何操作？

14. 如何把本地仓库的内容推向一个空的远程仓库？

15.如在 Git 恢复先前的提交?

16.什么是“git cherry-pick”?

webpack

1.webpack与grunt、gulp的不同？

2.与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？

3.有哪些常见的Loader？他们是解决什么问题的？

4.有哪些常见的Plugin？他们是解决什么问题的？

5.Loader和Plugin的不同？（不同的作用）（不同的用法）

6.webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

7.是否写过Loader和Plugin？描述一下编写loader或plugin的思路？

8.webpack的热更新是如何做到的？说明其原理？

9.如何利用webpack来优化前端性能？（提高性能和体验）

10.如何提高webpack的构建速度？

11.怎么配置单页应用？怎么配置多页应用？

12.npm打包时需要注意哪些？如何利用webpack来更好的构建？

13.如何在vue项目中实现按需加载？

14.webpack是解决什么问题而生的?

15.如何配置多入口文件?

16.webpack中的模块解析规则

17.webpack中的模块解析规则具体实现

18.什么是模块热替换

计算机基础

1.CPU基础

2.CPU与主存

3.程序等同数据

4.指令系统

5.指令寄存器与程序计数器

6.指令如何执行

7.控制器

8.直接存储器存取

9.什么是程序局部性？为什么会有程序的空间局部性？

10.为了实现重定位，需要哪些硬件？

11.在交互式系统中，非剥夺是不是一个好的策略？为什么？

12.谈一谈计算机网络和分布式计算机系统的区别

13.为什么要引入多道程序技术？

14.处理器如何读并解释存储在内存中的指令

15.总线

16.I/O设备

17.主存

18.处理器

19.计算机如何访问信息

20.什么是操作数指示符

21.如何传送数据

22.栈数据如何压入和弹出23.如何进行算数和逻辑操作

24.什么是“加载有效地址”

25.什么是一元和二元操作

跨域

1.什么是跨域

2.同源策略

3.为什么有同源策略

4.跨域的解决方案

5.jsonp原理

6.常见的跨域场景

7.postMessage跨域

8.资源共享跨域（CORS）

9.nginx代理跨域

10.nodejs中间件代理跨域

1、 非vue框架的跨域（2次跨域）

2、 vue框架跨域

11.webscoket协议跨域

数据结构与算法

数据结构与算法

1. 什么是复杂度分析 ？

2. 为什么要进行复杂度分析 ？

3. 如何进行复杂度分析 ？

1 大 O 表示法

2 时间复杂度

3 时间复杂度分析

4.常用的时间复杂度分析

5.时间复杂度分类

6.时间复杂度消耗时间排序

7.空间复杂度分析

8.如何掌握好复杂度分析方法 ？

9.判断一段字符串是否为回文？

10.数组去重

性能优化

1.性能优化的几个方面?

2.如何进行首屏优化

3.什么情况会造成内存泄漏？

4.异步加载?

5.加载方式区别？

6.浏览器缓存?

分类

7.预加载?8.预渲染？

9.CDN?

10.DNS 预解析?

11.节流?

12.防抖?

13.懒执行?

14.懒加载?

15.图片优化?

16.图片加载优化?

17.js css 顺序对前端优化影响?

18.重排重绘为什么会影响渲染，如何避免?

19.何时缓存在memory,合适缓存在dist？

20.CSS选择符优化

Ajax

1.什么是ajax？ajax作用是什么？

2.为什么要用ajax：

3.AJAX最大的特点是什么。

4.请介绍一下XMLHttprequest对象。

5.AJAX技术体系的组成部分有哪些。

6.工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？

7.Ajax的实现流程是怎样的？

8.AJAX请求总共有多少种CALLBACK

9.AJAX有哪些有点和缺点？

10.Ajax 解决浏览器缓存问题？

Angular

1.什么是Angular 7？与AngularJS有何不同？

2.什么是Angular框架？

3.Angular 7中的结构指令和属性指令有什么区别？

4.NgModule中的”声明”, “提供者”和”导入”之间有什么区别？

5.Angular的关键组件是什么？

6.解释Angular的体系结构概述

7.如何将Angular 6更新为Angular 7？

8.什么是angular material?

9. 什么是aot编译?

10.什么是数据绑定？在Angular中有几种方式?

ES6

1.es5和es6的区别，说一下你所知道的es6

2.var、let、const之间的区别

3.使用箭头函数应注意什么？

4.ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能

5.介绍下 Set、Map的区别？

6.ECMAScript 6 怎么写 class ，为何会出现 class？

7.Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

8.setTimeout、Promise、Async/Await 的区别

9.promise有几种状态，什么时候会进入catch？

10.使用结构赋值，实现两个变量的值的交换

11.Promise 中reject 和 catch 处理上有什么区别

12.理解 async/await以及对Generator的优势

Glup_Grunt

1.Grunt的特点

2.Gulp和Grunt的异同点

3.差异和不同

4.I/O流程的不同

5.Gulp中的流

6.为什么应该使用流？

7.为什么要使用Grunt?

8.Grunt都有哪些插件?

9.哪些人都在使用Grunt?

10.Gulp优点：

jQuery

1.jQuery库中的$()是什么？

2.网页上有5个div元素，如何使用 jQuery来选择它们？

3.$(this) 和 this 关键字在 jQuery 中有何不同？

4.使用CDN加载 jQuery库的主要优势是什么？

5.jQuery中的方法链是什么？使用方法链有什么好处？

6.如何将一个HTML元素添加到DOM树中的？

7.说出jQuery中常见的几种函数以及他们的含义是什么?

8.jQuery 能做什么？

9.jquery中的选择器和CSS中的选择器有区别吗？

10.jQuery的特点都有什么？

React

1.什么是React？

2.React有什么特点？

3.列出React的一些主要优点。

4.React有哪些限制？

5.什么是JSX？

6.你了解 Virtual DOM 吗？解释一下它的工作原理。

7.为什么浏览器无法读取JSX？

8.如何理解“在React中，一切都是组件”这句话？

9.解释 React 中 render() 的目的。

10.什么是 Props?

11.React中的状态是什么？它是如何使用的？

12.React组件生命周期的阶段是什么？

13.详细解释 React 组件的生命周期方法。

14.React中的事件是什么？

15.React中的合成事件是什么？

16.列出一些应该使用 Refs 的情况。

17.什么是高阶组件（HOC）？

18.你能用HOC做什么？

19.什么是纯组件？

20.React 中 key 的重要性是什么？

21.什么是React 路由？

22.为什么需要 React 中的路由？

23.列出 React Router 的优点。

24.类组件和函数组件之间有什么区别？

25.state 和 props有什么区别？

26.constructor中super与props参数一起使用的目的是什么？

27.什么是受控组件？

28.使用React Hooks有什么优势？

29.React中的StrictMode是什么？

30.React context是什么？

31.React Fiber是什么？

32.react diff 原理

33.setState 和 replaceState 的区别

34.React 中有三种构建组件的方式

35.应该在 React 组件的何处发起 Ajax 请求

Vue

1.vue 优点？

2.vue 父组件向子组件传递数据？

3.子组件像父组件传递事件？

4.v-show 和 v-if 指令的共同点和不同点？

5.如何让 CSS 只在当前组件中起作用？

6.keep-alive的作用是什么

7.如何获取 dom?8.说出几种 vue 当中的指令和它的用法？

9.vue-loader 是什么？使用它的用途有哪些？

10.为什么使用 key?

11.axios 及安装?

12.v-modal 的使用。

13.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？

14. 分别简述 computed 和 watch 的使用场景

15.v-on 可以监听多个方法吗？

16.$nextTick 的使用

17.vue 组件中 data 为什么必须是一个函数？

18. 渐进式框架的理解

19.Vue 中双向数据绑定是如何实现的？

20. 单页面应用和多页面应用区别及优缺点

21.v-if 和 v-for 的优先级

22.assets 和 static 的区别

23.vue 常用的修饰符

24.vue 的两个核心点

25.vue 和 jQuery 的区别

26. 引进组件的步骤

27.delete 和 Vue.delete 删除数组的区别

28.SPA 首屏加载慢如何解决

29.Vue-router 跳转和 location.href 有什么区别

30. vue slot

31. 你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？

32.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？

33.Vue2 中注册在 router-link 上事件无效解决方法

34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题

35.axios 的特点有哪些

36. 请说下封装 vue 组件的过程？

37.params 和 query 的区别

38.vue 初始化页面闪动问题

39.vue 更新数组时触发视图更新的方法

40.vue 常用的 UI 组件库

41. Vue的生命周期？

42.虚拟DOM和DIFF算法？

43.vue2和vue3原理？

44.生命周期钩子的一些使用方法：

45.开发中常用的指令有哪些?

以上是358道Web前端经典面试题，面试答案小编已整理文档，需要的朋友们可以私信小编：“答案”领取~

这篇文章面试题比较多，后面会出一个精简重点版便于复习，敬请期待~