2020年web前端最全面试题及答案【含vue-react】

目录

HTML篇 (1)

1,doctype的作用是什么 (1)

文档解析类型有： (1)

2, 这三种模式的区别是什么 (1)

3, HTML、XHTML、XML有什么区别 (2)

4, 什么是data-属性 (2)

5, 你对HTML语义化的理解 (2)

6, HTML5与HTML4的不同之处 (3)

7有哪些常用的meta标签 (4)

8, src和href的区别 (4)

9知道img的srcset的作用是什么 (5)

10, 还有哪一个标签能起到跟srcset相似作用 (5)

11, script标签中defer和async的区别 (5)

12, 有几种前端储存的方式 (6)

13, 这些方式的区别是什么 (6)

CSS篇 (7)

1, CSS选择器的优先级是怎样的 (7)

2,link和@import的区别 (7)

2,em\px\rem区别 (8)

3,块级元素水平居中的方法 (8)

4, CSS有几种定位方式 (8)

5, 如何理解z-index (9)

6, 如何理解层叠上下文 (9)

是什么 (9)

如何产生 (9)

7, 清除浮动有哪些方法 (10)

8,你对css sprites的理解，好处是什么 (10)

是什么 (10)

好处： (11)

不足： (11)

9, 你对媒体查询的理解 (11)

是什么 (11)

如何使用 (12)

10, 你对盒模型的理解 (12)

是什么 (12)

11, 标准盒模型和怪异盒模型有什么区别 (12)

12, 谈谈对BFC的理解 (13)

是什么 (13)

如何形成 (13)

作用是什么 (14)

13, 为什么有时候人们用translate来改变位置而不是定位 (14)

14, 伪类和伪元素的区别是什么 (14)

是什么 (15)

区别 (15)

15, 你对flex的理解 (15)

JS篇 (16)

1, 解释下变量提升 (16)

2, 理解闭包吗 (16)

闭包是什么 (16)

3, JavaScript的作用域链理解吗 (16)

4, ES6模块与CommonJS模块有什么区别 (17)

ES6 Module和CommonJS模块的区别： (17)

ES6 Module和CommonJS模块的共同点： (17)

5,js有哪些类型 (17)

原始类型: (18)

复杂类型: (18)

6, null与undefined的区别是什么 (18)

7, 谈谈你对原型链的理解 (18)

原型对象 (19)

8, 谈一谈你对this的了解 (19)

9, 那么箭头函数的this指向哪里 (20)

10, async/await是什么 (20)

11, async/await相比于Promise的优势 (20)

12, JavaScript的参数是按照什么方式传递的 (21)

基本类型传递方式 (21)

复杂类型按引用传递 (21)

按共享传递 (21)

13, 聊一聊如何在JavaScript中实现不可变对象 (21)

14, JavaScript的基本类型和复杂类型是储存在哪里的 (22)

Vue篇 (22)

1, 你对MVVM的理解 (22)

2, MVVM的优缺点 (23)

优点: (23)

缺点: (23)

3, 你对Vue生命周期的理解 (24)

4, 异步请求适合在哪个生命周期调用 (24)

5, Vue组件如何通信 (24)

6, computed和watch有什么区别 (25)

computed: (25)

watch: (25)

7, Vue是如何实现双向绑定的 (25)

8, Proxy与的优劣对比 (26)

Proxy的优势如下: (26)

的优势如下: (26)

9, 你是如何理解Vue的响应式系统的 (26)

10, 既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff 检测差异 (27)

11, Vue为什么没有类似于React中shouldComponentUpdate的生命周期 (28)

12, Vue中的key到底有什么用 (28)

React篇 (29)

1, React最新的生命周期是怎样的 (29)

2, React的请求应该放在哪个生命周期中 (31)

3, setState到底是异步还是同步 (32)

4, React组件通信如何实现 (33)

5, React如何进行组件/逻辑复用 (33)

6, mixin、hoc、render props、react-hooks的优劣如何 (34)

7, 你是如何理解fiber的 (36)

8, redux的工作流程 (36)

9, react-redux是如何工作的 (37)

10, redux与mobx的区别 (38)

11, redux中如何进行异步操作 (39)

12, redux异步中间件之间的优劣 (40)

HTML篇

1,doctype的作用是什么

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于CSS 代码甚至JavaScript 脚本的解析

文档解析类型有：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

IE8还有一种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

2, 这三种模式的区别是什么

标准模式(standards mode)：页面按照 HTML 与 CSS 的定义渲染