银行类前端面试简单版01

这个是在国企银行面试中行、农行、招商、移动、光大、中信、工行、人寿中总结的常见的会问的问题,我面的是基本都是信息技术岗,所以基本不会特别难的,问的都是比较框架性能、ajax优缺点这种东西。最常见的就是描述一下aiax的过程问了好多次~
当然前端基础知识也需要自己总结~!祝愿大家拿到好offer,我已经开始入职实习啦!
最近学了一句话只有懒人 没有笨人

Ajax介绍:

AJAX 是一种在无需重新加载整个网页的情况下,与服务器交互的异步交互的技术。能够更新部分网页的技术。

1 ajax的优点

ü  最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。

ü  使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。

ü  可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

ü  基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

2 ajax的缺点

ü  ajax干掉了back按钮,即对浏览器后退机制的破坏。

ü  安全问题  技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

ü  对搜索引擎的支持比较弱。

ü  破坏了程序的异常机制。

ü  给我们的调试带来了很大的困难。

3 Ajax请求的步骤

ü  创建`XMLHttpRequest`对象,也就是创建一个异步调用对象;

ü  创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息;

ü  通过open与服务器建立连接

ü  设置响应`HTTP`请求状态变化的函数;onreadystatechange

ü  发送`HTTP`请求;

ü  获取异步调用返回的数据;

ü  使用JavaScript和DOM实现局部刷新。

4.readyState状态码

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成,且响应已就绪

5.http状态码(status

200:(成功)

301:永久重定向

302:临时重定向

401 未授权

403:(禁止)服务器拒绝请求

404:(未找到)服务器找不到请求的页面

408:(请求超时)服务器等候请求发生超时

500:(服务器内部错误)服务器遇到错误,无法完成请求。

6.XMLHttpRequest对象

(1)对象类型的API;

(2)在浏览器环境使用;

(3)用于客户端和服务端数据的传递和接收;

(4)用于请求XML数据(JSON/TEXT)。

Axios:基于promiseajax的封装

优点:

ü  简单易用从node.js 创建http 请求

ü  支持Promise API

ü  客户端支持防止CSRF(跨站请求伪造)

ü  提供了一些并发请求的接口(重要,方便了很多的操作)

ü  浏览器兼容性好

jquery ajax

优点:

ü 浏览器兼容性好

ü 是对js中的ajax的封装,可以调用ap,使用较容易

ü 可以很简单的设定beforesenderrorsuccesscomplete等回调函数

缺点:

ü  本身是针对MVC的编程,不符合现在前端MVVM的浪潮

ü  基于原生的XHR开发,XHR本身的架构不清晰

ü  JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)

Promise

Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有allrejectresolve这几个方法,原型上有thencatch等方法。

Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的API,各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点:

1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

好处:

ü  promise主要解决回调地狱问题

ü  使得原本的多层级的嵌套代码,变成了链式调用

ü  让代码更清晰,减少嵌套数

缺点:

编写的难度比传统写法高,而且阅读代码也不是一眼可以看懂。你只会看到一堆then,必须自己在then的回调函数里面理清逻辑。

JQuery的特点
优点:

.一款轻量级的js框架。
JQuery
核心js文件才几十kb,不会影响页面加载速度。与Extjs相比要轻便的多。
(2).
丰富的DOM选择器(CSS1-3 + XPath)
JQuery
的选择器用起来很方便,好比要找到某个dom对象的相邻元素js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定。
(3).
链式表达式。
JQuery
的链式操作可以把多个操作写在一行代码里,更加简洁。
(4).
事件、样式、动画支持。
JQuery
还简化了js操作css的代码,并且代码的可读性也比js要强。
(5).Ajax
操作支持。
JQuery
简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信。
(6).
跨浏览器兼容。
JQuery
基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
(7).
插件扩展开发。
JQuery
有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
(8).
可扩展性强。
JQuery
提供了扩展接口:JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。

缺点:

(1):不能向后兼容,不能兼容早期版本,早期版本插件不能用。

(2):在同个页面使用多个插件,会出现冲突现象。

(3)jQuery版本稳定性较差,版本更新较快。

vue框架(MVVM

优点:

·            轻量级框架,语法简单,学习成本低

·            双向数据绑定

·            组件化开发

·            数据和结构的分离

·            虚拟DOM

·            运行速度快

·            灵活渐进式框架

缺点:

·            不支持IE8

·            生态环境差,不如angularreact

·            不适合偏大型的项目

react框架(MVC

优点:

·            jsx语法创建虚拟DOM,极速的渲染性能

·            组件化开发,组件独立,方便重复使用

·            单向数据流

·            组件生命周期

·            跨浏览器兼容性好

缺点:

·            不适合单独做一个完整的框架

React是目标是UI组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架。React 即使配上Flux 的组合,也不能称之一个完整的框架,比如你想用Promise化的AJAX?对不起没有,自己找现成的库去。而且第三方组件远远不如Angular多。

应用场景:个性化需求、中型应用

原型对象:

  每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含特定类型的所有实例共享的属性和方法,即这个原型对象是用来给实例共享属性和方法的。而每个实例内部都有一个指向原型对象的指针。

 

原型链:

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针。当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

 

1prototype:每个构造函数都有一个prototype 属性,指向原型对象。每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。

2proto每一个实例对象(除了null )都具有的一个属性,叫proto,这个属性会指向该对象的原型对象。

3Constructor:每个原型都有一个constructor 属性指向关联的构造函数 实例原型指向构造函数。如此层层递进,这就构成了实例与原型的链条。这就是原型链的基本概念;

 

 

闭包

 

闭包:能够读取其他函数内部变量的函数。(应用场景:要获取某函数内部的局部变量)。闭包是就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量的是这个内部函数的一部分。闭包是将函数内部和函数外部连接起来的桥梁。

 

闭包的优点:1.能够读取函数内部的变量2.让这些变量一直存在于内存中,不会在调用结束后,被垃圾回收机制回收

 

闭包的缺点:正所谓物极必反,由于闭包会使函数中的变量保存在内存中,内存消耗很大,影响网页性能。

  所以不能滥用闭包,解决办法是,退出函数之前,将不使用的局部变量删除。简单的说就是把那些不需要的变量,但是垃圾回收又收不走的的那些赋值为null,然后让垃圾回收走;

 

 

 

 

 

 

 

 

 

 

  作用域链:如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

 

同步任务和异步任务:

1)同步任务

    同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务

2)异步任务

    异步任务是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务

 

异步加载的方法:

 

方案一:<script>标签的async="async"属性(详细参见:script标签的async属性)

点评:HTML5中新增的属性,ChromeFFIE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。

方案二:<script>标签的defer="defer"属性

点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的脚本按顺序执行。

方案三:动态创建<script>标签

示例:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

(function(){

var s = document.createElement_x('script');

s.type = 'text/javascript';

s.src = "http://code.jquery.com/jquery-1.7.2.min.js";

var tmp = document.getElementsByTagName_r('script')[0];

tmp.parentNode.insertBefore(s, tmp);

})();

</script>

</head>

<body>

<img src="http://xybtv.com/uploads/allimg/100601/48-100601162913.jpg" />

</body>

</html>

点评:兼容所有浏览器。

方案四:AJAX eval(使用AJAX得到脚本内容,然后通过eval_r(xmlhttp.responseText)来运行脚本)

点评:兼容所有浏览器。

方案五:iframe方式(这里可以参照:iframe异步加载技术及性能中关于Meboo的部分)

 

 

 

浏览器对于所请求资源的缓存处理有一套完整的机制,主要包含以下三个策略:存储策略、过期策略、协商策略。

 

其中,存储策略发生在收到请求响应后,用于决定是否缓存相应资源;过期策略发生在请求前,用于判断缓存是否过期;协商策略发生在请求中,用于判断缓存资源是否更新

 

 

 

 

 

 

 

 

 

 

 

 

 



#银行面经##面经##前端工程师##银行#
全部评论
我好久之前看了你一篇面经,今天竟然又刷到了,感觉咱们俩经历惊人相似,希望2021我也能找到好工作!楼主方便告诉我最后去了那个银行吗?
1 回复 分享
发布于 2020-06-12 19:12
请问银行卡专业吗,非计算机相关专业有机会吗😂
1 回复 分享
发布于 2020-07-13 22:01
楼主 银行的前端岗位一般在什么里面啊 感觉一般看不见 学历是不是要硕士啊
1 回复 分享
发布于 2020-06-12 14:23
楼主是什么学历呀
点赞 回复 分享
发布于 2020-06-12 16:29
想问下楼主最后去哪个公司了?
点赞 回复 分享
发布于 2020-06-13 20:46
楼主是在哪个银行&nbsp;可以方便透露一下吗,银行是不是前后端不分离?
点赞 回复 分享
发布于 2020-06-20 00:16
小姐姐是去了工行嘛,想问一下工行软开怎么样呀,加班多嘛
点赞 回复 分享
发布于 2020-07-02 09:30
楼主请问,前端的岗位在哪里投,官网的信息嘛
点赞 回复 分享
发布于 2021-11-27 00:06
大佬去哪家银行?
点赞 回复 分享
发布于 2023-03-05 22:29 广东

相关推荐

头像
11-21 11:39
四川大学 Java
是红鸢啊:忘了还没结束,还有字节的5k 违约金
点赞 评论 收藏
分享
评论
28
250
分享
牛客网
牛客企业服务