前端高频面试题汇总

一、HTML篇

1、HTML5 新增那些标签?（⭐）

2、常见的块元素、行内元素以及行内块元素，三者有何不同？（⭐）

3、HTML、XML、XHTML它们之间有什么区别？（⭐）

4、DOCTYPE(⽂档类型) 的作⽤（⭐）

5、localStorage、sessionStorage、cookie 三者明细区别？（⭐⭐⭐）

6、网站TDK三大标签以及SEO优化 （⭐）

7、img标签的title属性与alt属性的区别是什么？（⭐）

8、src 和 href 的区别？（⭐）

9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ （⭐）

10、iframe的基本介绍与使用 （⭐⭐⭐）

二、CSS篇

1、说一下 link 与 @import 的区别和用法？（⭐）

2、rgba和opacity的透明效果有什么不同？（⭐⭐）

3、display:none与visibility:hidden的区别？（⭐⭐）

4、定位布局 position中的relative、absolute、fixed、sticky它们之间的区别？（⭐⭐⭐）

5、如何用CSS3画一条0.5px的直线？（⭐）

6、如何用CSS3画一个三角形？（⭐）

7、CSS3盒子模型：标准盒模型、怪异盒模型（⭐⭐⭐）

8、浮动（float)以及清除浮动的方法（⭐⭐）

9、Flex布局（⭐⭐⭐）

10、CSS3中 transform 属性~平面转换（⭐）

11、CSS3中 “子绝父相” 定位布局（⭐⭐⭐）

12、盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”（⭐⭐⭐）

13、CSS3中有哪些新特性？（⭐）

14、CSS3选择器及其优先级（⭐）

15、CSS3中 “transition” 过渡属性（⭐）

16、结构伪类选择器&伪元素选择器（⭐）

17、display的block、inline和inline-block的区别？（⭐）

18、定位堆叠顺序z-index（⭐）

三、HTML&&CSS混合篇

1、Localstorage、sessionStorage、cookie 的区别（⭐⭐⭐）

2、如何实现双飞翼（圣杯）布局？ （⭐）

3、伪元素和伪类的区别和作用？（⭐）

4、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？（⭐）

5、BFC 是什么？ （⭐）

四、JavaScript篇

1、JS基础类型和复杂类型（⭐⭐⭐）

2、箭头函数与普通函数的区别？（⭐⭐⭐⭐）

3、JS中null和undefined的判断方法和区别？（⭐⭐⭐）

4、原型链（⭐⭐⭐）

5、v-show 与 v-if 的区别？（⭐⭐）

6、keep-alive 的作用是什么?（⭐⭐）

7、闭包的理解?（⭐⭐⭐⭐⭐）

8、JS垃圾回收机制（⭐⭐⭐⭐⭐）

9、nextTick的实现？（⭐⭐）

10、混入mixin的原理？（⭐⭐）

11、js列举和数组操作相关的方法(常用)（⭐⭐⭐⭐⭐）

12、typeof和instanceof的区别是什么？ （⭐⭐）

13、JS中 ““和“=“的区别详解（⭐⭐）

14、如何用原生 JS给一个按钮绑定两个 onclick 事件？（⭐⭐）

15、var、let和const的区别？（⭐⭐⭐）

16、讲解js的call、apply和bind区别？（⭐⭐⭐）

17、谈谈你对webpack的理解？（⭐⭐⭐）

18、 const定义的对象属性是否可以改变？（⭐⭐）

19、栈溢出及解决方法？（⭐⭐⭐）

20、JS如何实现多线程？（⭐⭐⭐）

21、浅拷贝和深拷贝区别概念常见情况？（⭐⭐⭐⭐）

22、事件循环，Promise和async/await的详解（⭐⭐⭐⭐）

23、JS中数组常用方法详解 （⭐⭐⭐⭐）

五、Vue2篇

​1、什么是前端构建工具?比如（Vue2的webpack，Vue3的Vite）（⭐⭐）

​2、Vue 组件之间的通信方式（⭐⭐⭐⭐⭐）

​3、Vuex的理解及使用场景（⭐⭐⭐）

4、vue 的生命周期 八个阶段（⭐⭐⭐⭐）

5、简述Vue每个周期具体适合哪些场景？（⭐⭐⭐）

6、简述MVVM 和MVC的原理以及区别？（⭐⭐⭐）

7、vue常见指令（⭐⭐⭐）

8、vue中的data为什么是一个函数？起到什么作用？ （⭐⭐⭐）

9、vue中ref的作用？ （⭐⭐⭐）

10、Vue中hash和history的区别 ？ （⭐⭐⭐）

六 、Vue3篇

1、Vue2.0和Vue3.0的区别？（⭐⭐⭐⭐）

2、Vue3带来了什么改变？ （⭐⭐⭐）

3、生命周期（vue2和vue3的生命周期对比）有哪些？（⭐⭐⭐）

4、Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？（⭐⭐⭐）

5、vue3的常用 Composition API有哪些？（⭐⭐⭐）

6、Vue3中的ref函数（⭐⭐⭐）

七、React篇

1、讲讲什么是 JSX ？（⭐⭐⭐）

2、React 的生命周期方法有哪些？（⭐⭐⭐）

3、React的Hooks详解（⭐⭐⭐⭐⭐）

4、React和Vue.js的相似性和差异性是什么？（⭐⭐）

5、React的功能是什么？ （⭐⭐）

6、React的一些主要优点是？（⭐⭐）

7、React的局限性是什么？（⭐⭐）

8、如何理解React State不可变性的原则（⭐⭐）

9、React的特点和关键版本区别？（⭐⭐）

10、React Fiber的深入理解（⭐⭐）

八、uniapp篇

1、uniapp优缺点（⭐⭐）

2、uniapp目录结构（⭐）

3、跨端适配—条件编译 （⭐⭐）

4、uniapp 常用的指令语句（⭐⭐）

5、uniapp 应用的生命周期、页面的生命周期、组件的生命周期（⭐⭐）

九、Webpack篇

1、Webpack是什么？（⭐⭐）

2、Webpack的打包过程/打包原理/构建流程？ （⭐⭐）

3、Webpack中loader的作用/ loader是什么？（⭐⭐）

4、常见的loader有哪些？（⭐⭐）

5、Plugin有什么作用？Plugin是什么？（⭐⭐）

6、常见的Plugin有哪些？（⭐⭐）

7、Webpack中Loader和Plugin的区别（⭐⭐）

8、如何利用webpack来优化前端性能？（⭐⭐）

9、Webpack如何配置压缩代码？压缩了什么？（⭐⭐）

10、如何提高webpack的构建速度？ （⭐⭐）

十、Git/SVN篇

1、Git是什么？（⭐⭐）

2、简述Git中如何将一个新增文件添加到本地仓库？（⭐⭐）

3、Git常用命令（⭐⭐⭐）

4、Git和SVN有什么区别?（⭐⭐）

十一、B站开源视频大汇总，前端从入门到精通

1、web 入门（HTML5+CSS3）

2、js（JavaScript+jQuery+Ajax）

3、Vue 开发（Vue2+Vue3+实战项目）

4、React &&微信小程序开发&&uniapp

5、华为鸿蒙进阶

6、ssr（Nuxt+Next.js）

7、工程化（webpack+vite）

8、可视化（echarts ）

9、源码（虚拟DOM和diff算法）

10、移动App跨端开发（Uni-App）

11、桌面应用开发（Electron）

12、网络知识（网络概述+结构算法）

13、浏览器底层原理