前端面试大宝典
js面试题
1, Js数据类型有哪些?
数值、字符串、布尔、undefined、null、数组、对象、函数
2, 引用类型和值类型的区别
- 值类型存在于栈中, 存取速度快 引用类型存在于堆,存取速度慢
- 值类型复制的是值本身 引用类型复制的是指向对象的指针
- 值类型结构简单只包含基本数据, 引用类型结构复杂,可以实现多层嵌套
3, 你的项目需要在页面上播放视频,用什么播放?怎么防止用户下载视频?
可以使用video标签播放视频,
通过DOM事件禁止下载, 可以在页面的鼠标右击事件和F12键盘事件的回调中return false 以屏蔽用户操作
4, 如何防止你的页面数据被抓取(复制或保存) ?
(1, 阻止鼠标右击事件的默认行为(弹出菜单)
(2, 阻止F12按键的点按事件默认行为(检查元素)
(3, 组件ctrl+C组合按键的默认行为 (复制)
5, 怎样实现在动画结束之后执行一段代码?
过度动画:监听transitionend事件。
关键帧动画:监听animationend事件。
Js动画:自定义js动画时,直接在停止动画的代码之后添加要执行的代码,如果使用js动画工具库(velocity),则把要执行的代码写在动画结束时的回调函数中。
6, Promise有哪些使用场景?
(1, 在页面打开时,要同时执行多个ajax请求,可以使用promise处理多异步任务并发执行
(2, 有些ajax请求之间存在依赖关系,需要顺序执行,造成结构嵌套,可以使用promise解决异步任务多层嵌套的问题, 实现链式调用
(3, 在项目中封装网络请求时,使用peomise封装ajax请求并返回peomise对象
7, 浏览器中事件传播的 流程是什么?怎样阻止事件的传播?怎样阻止事件的默认行为。
事件触发后,先从根元素到叶子元素逐层捕获,然后再从叶子元素到根元素逐层冒泡。 e.stopPropergation , e.preventDefault
8, Js函数中的this有哪些指向?怎样改变函数中this的指向。
一般情况下,通过谁调用,就指向谁。
在js全局作用域, this指向window
在对象中,this指向这个对象本身
构造函数中,this是正在创建的对象。
在事件函数中,this指向事件目标
(注意: 在计时器中this会被还原成window或置空,但箭头函数可以保留this指向)
可用通过call(), apply(), bind()改变this的指向
apply,和call一样,修改指向的同时调用函数,唯一的区别是,传参方式不同,aplly需要提供一个数组。
bind修改this指向时不会调用函数,而是生成一个新的函数,新的函数和原函数代码一样,但是里面的this是绑定过的。
9, 如何阻止form表单提交?
监听form表单submit事件,在事件处理函数内部return false 或者阻止浏览器默认行为
10, 数组有哪些常用处理方法,字符串、数字有哪些常用处理方法。
数组:join,splice,push,slice,indexof,sort,concat,reverse,map,reduce,some,every,filter,foreach。
字符串:
split,indexof,substr,substring,replace,trim,toUppercase,startsWith,
数字:tofixed。
Math: floor,ceil,round,random,abs,sqrt,pow,max,sin,
11, 什么是原型和原型链?
Js中的对象都有一个属性叫做__ptoto__(也是一个对象),表示对象的原型。当访问对象中的属性或方法时,首先在对象本身中寻找,如果找不到则会在原型中寻找,原型中也找不到时会在原型的原型中寻找,直到最顶层为止。
js中的类(构造函数)都有一个prototype的属性,表示本类的原型类型,通过这个类实例化的对象(这个构造函数创建的对象), proto__都指向本类的prototype,从而实现了类方法的共享。一个类的prototype也是一个对象,它也有__proto,把它的__proto__指向另一个类的prototype时,那么这个类的对象就能访问另一个类中的方法,从而实现了方法的继承。
A类的prototype.__proto__指向另一个类B,B的prototype.__proto__又可以指向C,这种结构叫做原型链。
12, 什么是JS严格模式?怎么进入干戈模式?严格模式下有哪些限制?
严格模式是JS的一种特殊执行模式,设立”严格模式”的目的,主要有以下几个:
1,消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
2, 消除代码运行的一些不安全之处,保证代码运行的安全;
3,提高编译器效率,增加运行速度;
4, 为未来新版本的Javascript做好铺垫。
在函数中或全局域的开头添加字符串”user strict”进入严格模式。
严格模式主要有以下限制:
变量必须声明后再使用
函数的参数不能有同名属性,否则报错
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀0表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)
13, Js原生Ajax实现流程
(1)创建XMLHttpRequest请求对象
(2)open方法指定请求方式、请求路径、同步异步
(3)设置响应HTTP请求状态变化的函数
(4)send方法发送请求
(5)响应成功使用JavaScript和DOM实现局部刷新
14, 闭包是什么?有什么作用?
当一个函数A的作用域被内部的B函数引用时,A函数的作用域就会被B函数闭包,当A函数执行完毕时,A函数的作用域也不会释放。
闭包可以实现对象的私有属性和私有方法。
闭包可以封装变量,从简减少对全局作用域的污染。
15, 什么是函数防抖和函数节流?
函数防抖:对于频繁触发的事件,如果只希望其最后一次(或第一次)执行绑定函数的执行,则需要使用函数防抖。
函数节流:对于频繁触发的事件,希望其按照一定的频率进行绑定函数调用,则使用函数节流。
函数防抖和节流都可以通过settimeout实现。
16, 栈和队列的区别是什么?js中怎样实现栈结构?
栈和队列都是线型数据结构,栈只有一个入口,同时也是出口,所以数据遵循先进后出,后进先出的规则。队列一侧是入口,另一侧是出口,所以数据先进先出,后进后出。
Js中的数组可以实现栈和队列。Push和pop方法是一对栈操作,push和shift是一对队列操作。
17, 什么是深拷贝和浅拷贝?
浅拷贝就是只复制数组(对象)本身,而不复制其内容(引用类型的数据内容),最终两个数组中指向同一套数据。深拷贝则是既赋值本身也赋值内容。
Js中对于引用类型的数据,默认进行的都是浅拷贝。
18, ES6中新增加了哪些特性?
箭头函数,字符串模板,let块级作用域声明方式,const常量,class声明类,结构赋值,Promise,ES6模块化。
19, 箭头函数和普通函数的区别
- 箭头函数内部this跟函数所在上下文this保持一致
- 没有arguments参数集合,可以用rest替代
- 不能使用call、bind、apply来改变this的指向
20, 使用axios发起ajax请求无法携带cookie,什么原因? 如何解决?
axios默认跨域请求不使用凭证,当服务器在响应头中设置了cookie后, axios会默认隐藏这部分信息,
设置axios.defaults.withCredentials = true;即可
21, 什么是跨域请求,怎样实现跨域请求。
一个页面发送到非本身来源的请求叫做跨域请求,浏览器只禁止ajax跨域请求。
三种跨域请求的方式:
1,cors,服务器在响应头中添加access control allow origin字段,浏览器在收到请求之后就会认为本次请求时允许跨域的。
2,JSONP,浏览器使用创建script标签的形式发送请求,将一个函数名作为请求参数发给服务器,服务器将需要返回的数据封装在一段js代码中(把前端发来的函数名进行调用,把要发送的数据作为参数),然后把这段代码返回给前端,前端立刻执行这个函数。
3,代理服务器,将请求先发送给代理服务器,代理服务器装发给目标服务器。
22, 怎么列出一个文件夹下的所有文件?
可以使用nodeJS中的内置fs模块,调用fs.readDir读取文件夹中的所有文件和子文件夹, 传入递归函数,可读取子文件夹中的文件
23, Express中常用的中间件都有哪些?
static , bodyparser , session , multer ,
24, HTTP和HTTPS的区别是什么?
HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS。
默认HTTP的端口号为80,HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性
25, Ajax中get和post两种请求方式的区别
(1)运行速度:get请求简单,运行速度也更快(存在缓存);
(2)缓存:get存在缓存(优:提升速度,缺:不能及时获取最新数据)post没有缓存;
(3)数据储量:get有数据量的限制,post则没有限制
(4)数据安全:发送包含未知字符的用户输入时,post比get 更稳定也更可靠;
(5)传参方式:get参数拼接在url后,post放在send里面并且需要设置请求头xmr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”)
26, 什么是同源策略
同源策略是浏览器执行ajax请求时的一种安全策略, 它规定了浏览器只能请求端口、域名、协议全部相同的数据源, 而非同源的请求会被浏览器拦截
27, cookie和localstorage有什么区别?
都可以实现在用户的浏览器中存储一些数据。
不同:cookie是由服务端主导的,主要用于存储用户身份验证信息。localstorage是由前端js控制的,主要用于缓存业务逻辑数据。Cookie会随着请求头和响应头往返于服务器和浏览器之间。
28, localStorage、sessionStorage和cookie的区别
- 本地存储容量更大有5MB左右,cookie只有4KB
- 本地存储没有过期时间,localStorage持久保存,除非手动清除,sessionStorage窗口关闭自动清除
- cookie会在客户端与服务器端之间往返,服务器端可以操作cookie,本地存储只存储于本地
29, cookie 和session 的区别?
1、cookie数据存放在客户的浏览器上,session数据放在服务器上。Session基于cookie。
2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
30, LocalStorage能存储多少数据量?如果数量过大会出现什么问题?怎么办?
一个域名下可存储5M的数据量, 存储的数据过大会导致部分数据丢失, 破坏数据结构
可优化数据结构,减小数据量
也可以使用window.postMessage实现跨源存储和读取,把数据存入其它域名下
31, 谈一下对token验证机制的理解
发起权限(登录)请求,后端验证通过生成token响应给客户端,客户端发送其他敏感请求,携带token,后端验证获取token识别用户身份
32, localstorage能否实现跨域访问?
正常情况下localstorage不能跨域访问,但是可以通过iframe实现间接的跨域访问,域名A的网站在页面中通过iframe打开域名B的页面,然后通过postMessage给B网页发送消息,域名B页面读取localstorage数据之后再通过postMessage将数据传递给A页面,从而实现跨域访问localStorage。也就是说B页面必须配合,A页面才能跨域访问。
33, webSocket是什么?适用于哪些网站?
webSocket是一种双工通信技术,可以实现服务器主动向客户端发送数据。
一般适用于需要实时通信的网站, 比如人工客服服务和在线页游等
34, webpack工具的功能是什么?
Webpack是为前端开发设计的自动化打包工具,能够对项目中的js、css、图片等资源进行打包(其中js可以直接打包,其他类型资源需要各自对应的loader支持),相比于传统的grunt、gulp等构建工具,webpack在打包js代码时,能够识别多种模块化语法,进行模块化打包。
Webpack还可以配合脚手架工具构建项目的框架
35, 什么是WebWorker?在哪些场景下需要使用WebWorker?
WebWorker是h5中新增的WebAPI,用于启动一个独立的线程,主线程和分线程只能通过相互发送消息进行通信。当前端页面中有耗时很长的代码需要执行时,可以放在worker中执行,否则会卡塞主线程,影响用户体验。
36, 你是否会使用混合(hybrid)APP开发技术进行手机APP开发?
开发手机app我一般使用uniapp去实现, 它不仅可以开发常规安卓和ios手机app还可以同时兼容发布各种小程序版本,开发效率比较高
37, ES6的async函数怎么使用?
Async函数没有返回值,或者只能返回Promise对象。在async函数的函数体中可以使用await,await 后面只能调用返回Promise的函数,且通过await调用之后返回值不再是promise,而是promise.then时所传递的数据(如果失败则会抛异常)。从而实现以同步代码的格式调用异步函数。
38, 在浏览器地址栏输入一个网址,从敲下回车键,到页面完全加载完毕,中间都发生了什么 ?
1,如果地址栏中输入的是一个域名,浏览器会先使用自己的DNS缓存进行域名解析,转为IP地址,如果缓存中不存在,则会请求使用上层DNS(操作系统的DNS),操作系统会先查询本地HOST文件,如果HOST文件中不存在则会使用网络设置的DNS进行域名解析。最终得到域名对应的IP地址。
2,获得IP地址后,浏览器按照IP地址进行连接(tcp连接),连接成功之后按照http协议的格式(请求行,请求头,请求头)发送http请求,服务器会返回响应报文(响应行,响应头,响应体),浏览器收到响应报文后,会根据响应头中的Content-Type字段来决定如何进行下一步处理,对于普通的网页Content-Type值是text/html,浏览器就会在页面中打开本次请求响应体中的数据。
3,在打开页面时,浏览器首先对html文本进行解析,创建DOM树,然后将每个节点渲染到页面上,其中如果出现了附带资源的标签(例如img,script等),浏览器会再次按照这些资源的src发送请求,当请求完成之后将请求内容插入到页面中,其中script标签资源是同步加载的,其他资源是异步加载的。
39, 如何优化网页打开的速度?
1,尽量减少页面资源的请求次数(可以通过base64图片、合并图片、合并js,css文件实现)。
2,对页面代码进行压缩(主要是js代码压缩)
3,合理地使用懒加载。
4,对于不需要支持多国语言的中文网页,可以使用放弃使用UTF-8,使用GBK编码。
(以上是从前端角度进行优化,下面几条是从服务端角度优化)
5,网页中的静态资源使用CDN服务。
6,使用缓存,服务端使用redis进行接口缓存,同时在响应头中通过lastmodified,Etag等字段控制浏览器缓存。
7,使用gzip进行数据压缩。
8,使用多域名,部分浏览器对于同一个域名的并发请求量设置有上限,所以可以把页面资源分布在不同域名中,例如静态资源独自使用一个域名。
40, 什么是MVC和MVVM?
MVC:model-view-controller
MVVM:model-view-view-model,
MVC模式通过controller控制器协调model和view的交互,View 传送指令到 Controller,Controller 完成业务逻辑后,要求 Model 改变状态,Model 将新的数据发送到 View,用户得到反馈,所有通信都是单向的。
MVVM模式使用数据双向绑定,model和view直接进行交互。
41, 什么是XSS攻击?怎么防范?
Xss(cross-site scripting 跨站脚本攻击) 指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。
防范:
首先代码里对用户输入的地方和变量都需要仔细检查长度和对<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私,例如email、密码等等。其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
42, 什么是CSRF攻击?怎么防范?
Cross—Site Request Forgery,跨域请求伪造。
CSRF攻击攻击原理及过程如下:
- 用户C打开浏览器,访问受信任网站A,输入用户名和密码请求登录网站A;
2.在用户信息通过验证后,网站A产生Cookie信息并返回给浏览器,此时用户登录网站A成功,可以正常发送请求到网站A; - 用户未退出网站A之前,在同一浏览器中,打开一个TAB页访问网站B;
- 网站B接收到用户请求后,返回一些攻击性代码,并发出一个请求要求访问第三方站点A;
- 浏览器在接收到这些攻击性代码后,根据网站B的请求,在用户不知情的情况下携带Cookie信息,向网站A发出请求。网站A并不知道该请求其实是由B发起的,所以会根据用户C的Cookie信息以C的权限处理该请求,导致来自网站B的恶意代码被执行。
防范:在服务端敏感接口中添加referer判断。
43, js对象深拷贝有哪些方法?
1, 创建一个空的对象, 遍历老对象, 把老对象中的数据赋值到新对象中
2, 通过json对象编码JSON.stringify()和解码JSON.parse() 后赋值
3, 使用jquery中的$.extend(true, {}, originalObject)实现
44, 如何实现事件委托/代理 ?
在需要给多个相同兄弟标签绑定同一个事件的情况, 可以给他们的父标签绑定此事件, 原理是利用js事件机制中冒泡原理, 字标签的事件可以冒泡给父标签,所以父标签可以代理字标签的事件绑定
45, get请求缓存怎么解决?
Get请求的数据会被缓存到浏览器本地, 重复发起同一个get请求,会把请求重定向到本地缓存获取数据(请求状态码304)
在请求时添加时间戳,保证每次请求字段不同, 就不会被重定向到缓存
46, 什么是正则表达式? 如何使用?
正则表达式, regular expression 也叫规则表达式, 主要用于字符串的检索判断操作
如, 检索一个字符串中是否包含一定规则的字符, 或判断一个字符串是否符合一定规则
常用于用于登录注册时的账号,密码,手机号,邮箱等的验证