前端真实面试题大全(有详细答案)--常见/真题

电玩女神 2023-10-01 17:03 57阅读 0赞

原文网址：[前端真实面试题大全(有详细答案)--常见/真题\_IT利刃出鞘的博客-CSDN博客][--_IT_-CSDN]

## 简介 ##

**说明**

本文展示前端面试题，有详细答案。

**面试题说明**

本文按类别划分面试题，包括：HTML，CSS，JavaScript，框架，Vue，jQuery，浏览器，HTTP，浏览器，适配，项目相关。

## HTML ##

HTML5的新特性

[HTML5的十大新特性\_IT利刃出鞘的博客-CSDN博客][HTML5_IT_-CSDN]

如何判断DOM树被创建完毕

[JS--页面加载完毕后执行\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN]

link标签和import标签的区别

[CSS--link与@import的区别\_IT利刃出鞘的博客-CSDN博客][CSS--link_import_IT_-CSDN]

## CSS ##

CSS选择器类型及优先级

[CSS--选择器--使用/教程\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN]

伪类、伪元素

[CSS--选择器--使用/教程\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN]

显示和隐藏的方式及其区别

[CSS--显示(display)与可见性(visibility)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_display_visibility_--_IT_-CSDN]

盒模型

[CSS--盒子模型(box)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_box_--_IT_-CSDN]

块元素有哪些，块元素和行内元素的区别和特点

[CSS--块级元素、内联元素、内联块元素--区别/详解\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 1]

有哪些空元素 (类似于img这样的单标签元素)

[CSS--块级元素、内联元素、内联块元素--区别/详解\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 1]

CSS中有哪些属性是可以继承的？

[CSS--可继承的属性与不可继承的属性--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 2]

**flex布局**

flex有哪些属性

[CSS--flex布局--教程/详解\_IT利刃出鞘的博客-CSDN博客][CSS--flex_--_IT_-CSDN]

使用flex实现垂直居中

[CSS--垂直居中--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 3]

使用flex实现九宫格布局

[CSS--九宫格布局(自适应)--方法/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 4]

**布局**

前端布局有哪些方案？

[静态布局、流式布局、自适应布局、响应式布局的概念及区别\_IT利刃出鞘的博客-CSDN博客][IT_-CSDN]

响应式布局的方式？

[CSS--响应式布局的实现方式\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN]

如何垂直居中布局？

[CSS--垂直居中--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN 3]

**动画**

CSS动画的transform的用法

[CSS--transform(转换)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--transform_--_IT_-CSDN]

如何实现一个元素位移，从快到慢，从慢到快的动效

使用贝塞尔曲线。见：[CSS--贝塞尔曲线(cubic-bezier)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_cubic-bezier_--_IT_-CSDN]

## JS ##

### 基础 ###

作用域

[JS--作用域--详解/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN]

闭包作用？原理？为什么不使用全局变量

[JS--闭包--作用/用途/原理\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 1]

如何实现继承

[JS--继承的实现方式--详解/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 2]

深拷贝与浅拷贝的区别

[JS--浅拷贝与深拷贝--方法/详解/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 3]

**数组**

用过数组的哪些方法？

[JS--数组方法--汇总/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 4]

怎么实现数组去重？

[JS--数组去重的方法--汇总/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 5]

**事件**

事件的执行机制

[JS--事件(Event)--机制/原理\_IT利刃出鞘的博客-CSDN博客][JS--_Event_--_IT_-CSDN]

事件的委托（代理）是怎样的？好处是什么

[JS--事件的委托(代理)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN 6]

### ES6 ###

ES6的新特性有哪些？用到过哪些？（他重点想让你说出箭头函数和promise）

[ES6新特性--汇总/实例\_IT利刃出鞘的博客-CSDN博客][ES6_--_IT_-CSDN]

ES6的 const、let、var的区别

[JS--let, const, var的区别\_IT利刃出鞘的博客-CSDN博客][JS--let_ const_ var_IT_-CSDN]

ES5和ES6箭头函数中this的指向

[ES5的this和ES6箭头函数的this指向的区别\_IT利刃出鞘的博客-CSDN博客][ES5_this_ES6_this_IT_-CSDN]

如何改变this的指向

[JS--改变this的指向--方法/实例\_IT利刃出鞘的博客-CSDN博客][JS--_this_--_IT_-CSDN]

promise如何使用？解决了什么问题？

[JS--Promise--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JS--Promise--_IT_-CSDN]

async，await如何使用？解决了什么问题？

[JS--Promise--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JS--Promise--_IT_-CSDN]

## 框架 ##

vue、react、angular的区别？

[Vue, React, Angular--对比/区别\_IT利刃出鞘的博客-CSDN博客][Vue_ React_ Angular--_IT_-CSDN]

## VUE ##

双向绑定（响应式）的原理

[Vue--双向绑定的原理--手写双向绑定(模仿vue)\_IT利刃出鞘的博客-CSDN博客][Vue--_--_vue_IT_-CSDN]

组件之间的通信怎么做

[Vue--组件通信--父子/隔代/无关联组件\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN]

为什么data要设计成函数

[Vue--为什么data是个函数--实例讲解\_IT利刃出鞘的博客-CSDN博客][Vue--_data_--_IT_-CSDN]

computed和watch的区别

[Vue--computed与watch的区别\_IT利刃出鞘的博客-CSDN博客][Vue--computed_watch_IT_-CSDN]

函数式组件产生的背景和优势？

[Vue--函数式组件--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN 1]

**Vue的生命周期**

各个生命周期的特点

[Vue--生命周期的流程--详解/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN 2]

父组件和子组件的生命周期触发流程

[Vue--生命周期的流程--详解/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN 2]

用到过哪几个钩子函数

[Vue--生命周期钩子函数的使用场景\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN]

SSR的钩子函数用到过哪个

beforeCreate与created。见：[Vue--SSR(服务端渲染)--解决方案/实现方式\_IT利刃出鞘的博客-CSDN博客][Vue--SSR_--_IT_-CSDN]

**指令**

v-model的本质是什么 (语法糖)

[Vue--v-model--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--v-model--_IT_-CSDN]

v-show 和 v-if的区别

[Vue--v-if和v-show的区别\_IT利刃出鞘的博客-CSDN博客][Vue--v-if_v-show_IT_-CSDN]

v-for中的key的作用？

[Vue--v-for的key的作用--详解/实例\_IT利刃出鞘的博客-CSDN博客][Vue--v-for_key_--_IT_-CSDN]

.sync是怎么用的？(本质是语法糖，父组件省略v-on事件)

[Vue--.sync--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--.sync--_IT_-CSDN]

**Vuex**

项目中用到vuex的场景

[Vue--Vuex--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Vuex--_IT_-CSDN]

vuex有哪些优势和缺点

[Vue--Vuex--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Vuex--_IT_-CSDN]

vuex有哪5大属性，action和mutation的区别是什么？

[Vue--Vuex--五大核心概念--详解/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Vuex--_--_IT_-CSDN]

vuex的原理（源码）

**路由**

路由模式及其区别

[Vue--Router--路由模式--种类/区别/原理\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_--_IT_-CSDN]

history需要后台配置相关的url吗

[Vue--Router--路由模式--种类/区别/原理\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_--_IT_-CSDN]

Router的钩子函数及应用

Router路由系统是如何实现的

手写懒加载

**diff运算**

说下对diff的的理解，diff中的key有什么作用

[Vue--diff的原理\_IT利刃出鞘的博客-CSDN博客][Vue--diff_IT_-CSDN]

## jQuery ##

$(document).ready(function()\{\})的理解 （jQuery的ready事件）

## 浏览器 ##

浏览器页面的渲染的流程

[浏览器页面--渲染的流程\_IT利刃出鞘的博客-CSDN博客][--_IT_-CSDN 1]

浏览器页面的阻塞渲染的优化方案

[浏览器页面--阻塞渲染--场景/优化方案\_IT利刃出鞘的博客-CSDN博客][--_--_IT_-CSDN]

回流和重绘的区别及触发场景

浏览器的存储方式和区别

浏览器缓存

强缓存和协商缓存的区别

浏览器的渲染的频率

浏览器缓存的标识

V8引擎为什么性能好

## HTTP ##

HTTP1.1和HTTP2.0的区别

常用的http状态码

请求头有哪些

## 软知识 ##

内存泄漏的场景

**跨域**

同源策略是什么？

跨域有哪些解决方案

vue开发怎么配置代理

vue配置的代理属于正向代理还是反向代理

## 适配 ##

IE浏览器的适配

移动端的适配方案

## 项目 ##

Webpack

*  对webpack的了解
 *  常用的webpack plugin和loader

性能优化

*  项目性能优化怎么做的
 *  代码层面怎么做性能优化
 *  webpack怎么做性能优化

长列表优化

*  项目中有用到渲染列表吗
 *  怎么优化长列表？正常的是通过分页优化的。
 *  如果不分页在前端有什么办法做优化？做类似按需加载的方式。

项目中权限控制是怎么做的

路由的权限控制

主要在路由拦截的通过router.addRoutes去动态添加后台返回的权限表。

防抖、节流

## 杂项 ##

2个页面怎么进行通讯

*  同域名的2个页面怎么通讯
 *  不同域的2个页面怎么通讯

websocket

了解过webGL吗？

i18n

1.  怎么配置的
2.  怎么切换语言

## 其他网址 ##

[前端面试总结2020年8月16家公司(附真实面试题) - 知乎][2020_8_16_ -]

[web前端面试 - 面试官系列][web_ -]

[--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122763373
[HTML5_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121943070
[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122005846
[CSS--link_import_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122010211
[CSS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121186058
[CSS--_display_visibility_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122028126
[CSS--_box_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122028724
[CSS--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/121683931
[CSS--_--_IT_-CSDN 2]: https://knife.blog.csdn.net/article/details/122033129
[CSS--flex_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122075788
[CSS--_--_IT_-CSDN 3]: https://knife.blog.csdn.net/article/details/121737727
[CSS--_--_IT_-CSDN 4]: https://knife.blog.csdn.net/article/details/122094707
[IT_-CSDN]: https://knife.blog.csdn.net/article/details/122119409
[CSS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122097821
[CSS--transform_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122141405
[CSS--_cubic-bezier_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121186124
[JS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122150919
[JS--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/122152814
[JS--_--_IT_-CSDN 2]: https://knife.blog.csdn.net/article/details/122203246
[JS--_--_IT_-CSDN 3]: https://knife.blog.csdn.net/article/details/122205739
[JS--_--_IT_-CSDN 4]: https://knife.blog.csdn.net/article/details/122223151
[JS--_--_IT_-CSDN 5]: https://knife.blog.csdn.net/article/details/122226797
[JS--_Event_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122277680
[JS--_--_IT_-CSDN 6]: https://knife.blog.csdn.net/article/details/122284458
[ES6_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122243902
[JS--let_ const_ var_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122147122
[ES5_this_ES6_this_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122248072
[JS--_this_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122246172
[JS--Promise--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122267112
[Vue_ React_ Angular--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122289022
[Vue--_--_vue_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122314245
[Vue--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122391807
[Vue--_data_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122334962
[Vue--computed_watch_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122401707
[Vue--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/122294827
[Vue--_--_IT_-CSDN 2]: https://knife.blog.csdn.net/article/details/122442521
[Vue--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122465430
[Vue--SSR_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122518684
[Vue--v-model--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122522399
[Vue--v-if_v-show_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122527276
[Vue--v-for_key_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122531960
[Vue--.sync--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122571289
[Vue--Vuex--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122631509
[Vue--Vuex--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122658113
[Vue--Router--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122756784
[Vue--diff_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122591120
[--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/121984762
[--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121987066
[2020_8_16_ -]: https://zhuanlan.zhihu.com/p/224922926
[web_ -]: https://vue3js.cn/interview/