web常见面试题

前端面试必备知识点详解

最新推荐文章于 2022-12-02 16:34:06 发布

原创最新推荐文章于 2022-12-02 16:34:06 发布 · 931 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

面试专栏收录该内容

1 篇文章

订阅专栏

本文详细探讨了前端面试中常见的问题，包括CSS自定义动画、JavaScript数据类型判断、ES6新特性、闭包、柯里化和偏函数的解释、防抖与节流的应用、浏览器加载页面的过程、跨域问题及其解决方案、GET与POST请求的区别、Vue生命周期、Vue Router守卫、页面权限管理策略、页面缓存方法、Vue的双向绑定原理、页面性能分析、Git常用命令、Vue2与Vue3的区别、数据变更未触发页面更新的原因、v-if与v-show的选择、隐藏页面元素的方法、未保存数据提交的风险与防范措施、以及前端开发中的问题解决和项目管理经验。

1.css如何自定义一个动画效果

animation

2.js如何判断数据类型

typeof Array,Null等特殊对象使用typeof一律返回object

js.constructor == 数据

Object.prototype.toString.call()

3.es6的新特性

let,const for...of 字符串拼接模板箭头函数解构 set对象 map

4.说说闭包,柯里化,偏函数

闭包:函数内还有函数

优点:减少全局变量,减少传递函数的参数值,

缺点:内存泄漏

解决:把不需要的变量赋值为null

为什么造成内存泄漏:垃圾回收机制，被另一个作用域引用的变量不会被回收。

柯里化:把一个多参数的函数，转化为单参数函数(对高阶函数的降阶处理)

使用场景:减少重复传递不变的部分参数

偏函数:固定一个函数的一个或者多个参数，返回一个新的函数，这个函数用于接受剩余的参数。

5.说说防抖,节流的实际应用

防抖:事件被触发后，延迟执行回调，在执行前事件又被触发，则重新计时。

百度搜索

节流:减少一段时间内时间的触发频率

懒加载时要监听计算滚动条的位置鼠标要多次点击

6.说说浏览器从输入URL到页面渲染的整个流程

1、首先浏览器在输入URL之后，会先解析URL，判断是否合法；
2、合法的话会查看浏览器缓存，判断是否有缓存，如果有缓存，则显示；
3、如果没有缓存，浏览器会向服务器发送HTTP协议，会进行DNS解析，获取IP地址；
4、浏览器和服务器进行TCP连接，进行三次握手；
5、握手成功之后，浏览器会向服务器发送http请求，请求数据包；
6、服务器处理请求，将数据返回给浏览器；
7、浏览器收到HTTP响应后，会解析它；
8、浏览器发送异步请求，然后渲染页面；

7.如何部署一个网站

1、购买域名、虚拟空间。购买完成后会有个FTP帐号，你上传你的代码，然后域名解析到你的空间，别人通过测试地址或者你的域名访问到。

2、使用自己的电脑做服务器，下载web服务器软件，常用的可以用iis,apache，然后在自己的电脑里设置一个文件夹，放网页，你把你电脑的IP给别人访问。前提是你的IP是外网的，如果是内网ip，需要做映射，将80端口开放出去。

3、直接发把代码发给用户访问。因为是html+css+js的，游览器直接可以解析。

8.为什么会有跨域问题

出于浏览器的同源策略限制,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

什么是跨域:

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

解决方法:

使用 ajax 的 jsonp,使用该方式的缺点：请求方式只能是 get 请求

cors 设置请求路径,请求方法,dateType,成功函数,失败函数

9.GET请求和POST请求有什么区别

get的url可见,post不可见

get没post安全

get传输2-4k,post无限大

get可缓存,post不可缓存

get后退没影响,post后退重新提交

10.如果要实时展示系统最新数据，你有哪些方案

11.前端数据的存储有哪些技术，他们的区别是什么

1.存储大小

cookie：一般不超过4k

sessionStorage：5M甚至更多

localStorage：5M甚至更多

2. 数据有效期

cookie:一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，如果设置了时间，cookie就会存储在硬盘中，过期失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久删除

3. 作用域

cookie：在所有同源窗口中都是共享的

sessionStorage：在同一个浏览器窗口是共享的（不同浏览器，即使是统一页面也不共享）

localStorage：在所有同源窗口中共享

4. 通信

cookie：cookie在浏览器和服务器之间来回传递，如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

localStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

5. 应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息

sessionStorage：敏感账号一次性登录，单页面用的较多

localStorage：用于长期登录，适于长期保存在本地的数据

12. vue的生命周期有哪些

beforeCreate:骨架屏占位,日志上传

created:发起ajax请求.可以，

beforeMount:可以对一些数据进行格式化

mounted:发起ajax【推荐】前端项目多大部分都是运行在浏览器，极少是服务器端渲染

beforeUpdate:可以二次对更新的数据修改

updated:只能是观察到更新的数据

beforeDestroy:清除常驻内容的垃圾.对用户的离开行为进行提示

destroyed:啥都没了

13. vue-router有哪些守卫

全局导航守卫：beforeEach（全局前置守卫）、beforeResolve（全局解析守卫）、afterEach（全局后置守卫）
组件内路由守卫：beforeRouteEnter（组件激活时触发）、beforeRouteUpdate（组件被重复使用时触发）、beforeRouteLeave（组件失活时触发）
路由独享守卫：beforeEnter（进入当前路由时触发）

14.如果要做页面权限管理，怎么做

接口权限

目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录

登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

按钮权限

初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验
菜单权限

菜单与路由分离，菜单由后端返回

前端定义路由信息

路由权限按钮权限也可以用v-if判断

15.如何实现页面缓存，会有什么问题