电话

020-88888888

完美体育:2022年最新前端面试题,持续更新

标签: 2024-05-08 

【js面试题】
1、js数据类型

 

2、js变量和函数声明的提升

 

3、闭包

 

4、== 和 ===的区别

 

5、this

 

6、js数组和对象的遍历方式

 

7、map与forEach的区别

 

8、箭头函数与普通函数的区别?

 

9、同源策略

 

10、如何解决跨域

 

11、严格模式的限制

 

12、es6新增

 

13、attribute 和 property 的区别是什么?

 

14、let和const 的区别是什么?

 

15、内存泄漏

 


16、script 引入方式?

 

17、数组(array)方法

 

18、JavaScript 深浅拷贝?

 

19、说说异步编程的实现方式?

 

20、说说面向对象编程思想?

 

21、项目性能优化

 

22、什么是单线程,和异步的关系?

 


23、说说负载均衡?

 

24、作用域链?

 


25、什么是原型、原型链、继承?

 


26、JS垃圾回收机制是怎样的?

 

27、逐进增强和优雅降级

逐进增强

 


优雅降级

 


【vue面试题】
1、vue优点

 

2、vue父组件向子组件传递数据

 


3、子组件向父组件传递事件

 


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

 

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

 

6、<keep-alive></keep-alive>的作用是什么

 


7、如何获取dom

 

8、说出几种vue当中的指令和它的用法

 

9、vue-loader是什么?它的用途是什么?

 

10、为什么用key

 

11、axios及安装?

 

12、v-model的使用

 

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

 

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

 

15、v-on可以监听多个方法吗?

 

16、$nextTick的使用

 


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

 

18、渐进式框架的理解

 

19、vue在双向数据绑定是如何实现的?

 

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

 

21、Vue 项目中为什么要在列表组件中写 key,其作用是什么?

 


22、父组件和子组件生命周期钩子执行顺序是什么?

 

23、谈一谈你对 nextTick 的理解?

 

24、vue组件中data为什么必须是一个函数?

 

25、vue和jQuery的区别

 

26、delete和Vue.delete删除数组的区别

 

27、SPA首屏加载慢如何解决

 

28、vue项目是打包了一个js文件,一个css文件,还是有多个文件?

 

29、vue更新数组时触发视图更新的方法

 

30、什么是 vue 生命周期?有什么作用?

 

31、第一次页面加载会触发哪几个钩子?

 

32、vue获取数据在一般在哪个周期函数

 

33、created和mounted的区别

 

34、vue生命周期的理解

 

35、vuex是什么?

 

36、vuex有哪几种属性?

 

37、vue全家桶

 

38、vue-cli 工程常用的 npm 命令有哪些?

 


39、请说出 vue-cli 工程中每个文件夹和文件的用处?

 


40、v-if 和 v-show 有什么区别

 


41、v-for 与 v-if 的优先级?

 

42、 vue 常用的修饰符?

 
 
 
 


43、vue 事件中如何使用 event 对象?

 


44、组件传值方式有哪些

 


45、vue 中子组件调用父组件的方法?

 

47、如何获取 dom?

 

48、vue路由跳转

 

(二)this.$router.push()

 



(三)this.$router.replace()

用法同上
(四)this.$router.go(n)

 


49、Vue.js 双向绑定的原理

 

50、Computed和Watch的区别

 


51、过滤器 (Filter)

 


52、axios是什么

 

53、sass是什么?如何在vue中安装和使用?

 


54、Vue.js页面闪烁

 


55、如何解决数据层级结构太深的问题

 

56、vue常用指令

 

57、$route和$router的区别

 

58、怎样理解 Vue 的单项数据流

 


59、虚拟DOM是什么?有什么优缺点?

 
 
 


60、Vuex 页面刷新数据丢失怎么解决?

 


61、Vuex 为什么要分模块并且加命名空间?

 
 

62、vue 中使用了哪些设计模式?

 


63、你都做过哪些 Vue 的性能优化?

 

64、Vue.set 方法原理
 

 


65、函数式组件使用场景和原理

 
 
 

66、子组件为何不可以修改父组件传递的 Prop?

 

67、vue项目创建、路由配置、环境配置以及组件传值等

【css、html面试题】
HTML和HTML5有什么区别?

 

什么是盒子模型?

 

完美体育
如何理解HTML5语义化?

 


语义化的好处?

 


cookies、sessionStorage、localStorage的区别是什么?(浏览器)
 

 

 

 


常见的浏览器内核有哪些?

 

谈谈你对web标准以及W3C的理解?

 

W3C:

 

对表现和行为的要求

 

如何实现浏览器响应式布局?

 


CSS选择器以及优先级的理解?

 

谈谈你对回流和重绘的理解?

 
 
 
 

opacity: 0、visibility: hidden、display: none有什么区别?

 

css 预处理器

 

<img>的 title 和 alt 有什么区别

 

行内元素和块级元素有哪些?img属于什么元素

 
 
 

表单中readonly和disabled的区别?

 

 


浏览器

 

2、cookie的弊端

 

3、主流浏览器及内核

Google chrome:webkit/blink
safari:webkit
IE:trident
firefox:gecko
Opera:presto/webkit/blink

4、sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话session中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据永远不会过期的。

5、谈谈对bfc规范的理解

bfc是block formatting context即格式化上下文
bfc是页面css视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域
bfc最重要的一个效果是,让处于bfc内部与外部的元素相互隔离,使内外的元素的定位不会相互影响

6、请说出至少三种减少页面加载时间的方法

尽量减少页面中重复的http请求
css样式放置在文件头部、js脚本放置在文件末尾
压缩合并js、css代码
服务器开启gzip压缩

7、 如何进行网站性能优化?

content 方面
减少 HTTP 请求:合并文件、CSS 精灵、inline Image
减少 DNS 查询:DNS 缓存、将资源分布到恰当数量的主机名
减少 DOM 元素数量
Server 方面
使用 CDN
配置 Etag
对组件使用 Gzip 压缩
Cookie 方面
减少cookie大小
css 方面
将样式表放到页面顶部
不使用 CSS 表达式
使用 <link> 不使用 @import
Javascript 方面
将脚本放到页面底部
将 javascript 和 css 从外部引入
压缩 javascript 和 css
删除不需要的脚本
减少 DOM 访问
图片方面
优化图片:根据实际颜色需要选择色深、压缩完美体育
优化 css 精灵
不要在 HTML 中拉伸图片


8、浏览器存储?

短暂性的时候,我们只需要将数据存在内存中,只在运行时可用
持久性存储,可以分为 浏览器端 与 服务器端
浏览器:
cookie : 通常用于存储用户身份,登录状态等,http 中自动携带, 体积上限为 4K , 可自行设置过期时间
localStorage / sessionStorage : 长久储存/窗口关闭删除, 体积限制为 4~5M
indexDB
服务器
分布式缓存 redis
数据库


9、get / post?

get : 缓存、请求长度受限、会被历史保存记录
无副作用(不修改资源),幂等(请求次数与资源无关)的场景
post : 安全、大数据、更多编码类型


10、安全性问题?

XSS 攻击: 注入恶意代码
cookie 设置 httpOnly
转义页面上的输入内容和输出内容
CSRF : 跨站请求伪造,防护:
get 不修改数据
不被第三方网站访问到用户的 cookie
设置白名单,不被第三方网站请求
请求校验

【性能优化】
1、性能优化的几个方面?

 

2、异步加载?

 

3、加载方式区别?

 

4、预加载?

 

5、DNS 预解析?

 

6、懒执行?

 

7、懒加载?

 

【react面试题】
1、什么时候使用状态管理器?

 

2、说说 React 有什么特点?

 

3、列出 React 的一些主要优点?

 

4、什么是 JSX?

 

5、说说为什么浏览器无法读取 JSX?

 

6、你理解“在 React 中,一切都是组件”这句话?

 

7、 React 中 render()的目的?

 

8、什么是 Props?

 

9、React 中的状态是什么?

 

10、区分状态和 Props?

 

11、如何更新组件的状态?

 

12、React 组件生命周期的阶段是什么?

 

13、你对 React 的 refs 有什么了解完美体育?

 

14、如何模块化 React 中的代码?

 

15、什么是高阶组件 HOC?

 

16、你能用 HOC 做什么?

 

17、 React 中 key 的重要性是什么?

 

18、MVC 框架的主要问题是什么?

 

19、请你解释一下 Flux?

 

20、你对“单一事实来源”有什么理解

 

21、列出 Redux 的组件?

 

22、 Store 在 Redux 中的意义是什么?

 

23、 Redux 有哪些优点?

 

24、 什么是 React 路由?

 

25、说说你对 React 的渲染原理的理解?

 

26、React 中三种构建组件的方式?

React.createClass()、ES6 class 和无状态函数。


【JQuery面试题】
说出jQuery中常见的几种函数以及他们的含义是什么?

 

jQuery 能做什么?

 

什么是jQuery? jQuer能做什么?

 

jQuery的作用

 

JQuery 的优点