招银网络面试题

[include-all]

招银网络面试题

1. css实现圆圈旋转？

css3动画相关知识

2. this的显式和隐式赋值？

js 五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
此篇文章还有作用域链与原型链的区别的解释

• 默认绑定

this默认绑定我们可以理解为函数调用时无任何调用前缀的情景, 默认绑定时this指向全局对象（非严格模式），在严格模式环境中，默认绑定的this指向undefined

• 隐式绑定

如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上, 注意隐式丢失的问题

• 显式绑定

显式绑定是指我们通过call、apply以及bind方法改变this的行为
bind属于硬绑定，返回的 boundFunction 的 this 指向无法再次通过bind、apply或 call 修改；call与apply的绑定只适用当前调用，调用完就没了，下次要用还得再次绑。

• new绑定

js中的构造函数只是使用new 调用的普通函数，它并不是一个类，最终返回的对象也不是一个实例,
构造调用创建了一个新对象echo，而在函数体内，this将指向新对象echo上（可以抽象理解为新对象就是this）

• this绑定优先级:

显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定
为什么显式绑定不和new绑定比较呢？因为不存在这种绑定同时生效的情景，如果同时写这两种代码会直接抛错，所以大家只用记住上面的规律即可。

• 箭头函数的this
  bind、call、alpay与箭头函数
  由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向,可以使用，但不会生效

准确来说，箭头函数中没有this，箭头函数的this指向取决于外层作用域中的this，外层作用域或函数的this指向谁，箭头函数中的this便指向谁。

3. 箭头函数this什么时候决定？

上题箭头函数的this

4. 实现轮播图，1/2就返回

仿造网易云音乐轮播图
JS实现移动端可滑动轮播图

轮播图原理：假设现在有6张图片，将6张图左浮动排列，并且被一个 list 容器包裹，所以这个 list 的 width 会很大，然后 list 有一个 div 父容器，div 的宽度只有一张图片那么大，同时设置它的 overflow 为 hidden，这里 div 的 position 是 relative，list 的 position 是 absolute，最后通过调节 list 的 left 值来实现图片的显示切换。

5. 能知道链式promise在哪一步pendding吗？

不能

6. setTimeout的最短时间是多少？

JavaScript异步编程笔记

事实上HTML5标准规定setTimeout的最短时间间隔是4毫秒；setInterval的最短间隔时间是10毫秒

在此之前，老版本的浏览器都将setTimeout最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16.6毫秒执行一次(大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次,不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升)。这时使用requestAnimationFrame()的效果要好于setTimeout()

7. cookie的最大值是多少？

Cookie和Session的区别

4kb

8. js中的task ，job的理解

对于js任务队列的理解
此文章清晰的描述了宏任务（macro task）和微任务（micro task）原理，同时也将渲染和I/O等浏览器的异步线程也分析了

js代码执行顺序
此文章主要分析浏览器的异步线程

js 事件驱动机制

9. get和post的区别

Get和Post之间的区别

10. 判断一个值是否是数组？

javascript如何判断一个值是否为数组

此处有一个重要知识点：constructor 是指构造函数，
一个对象obj的constructor指向他的构造函数，
一个构造函数func的func.prototype.constructor === func
js constructor的理解

11. Map有哪些方法，怎么迭代?

ES6必知必会 （四）—— Symbol、Set和Map

12. 怎么实现一个promise

1. 从0到1实现Promise
2. 最简实现Promise，支持异步链式调用（20行）

13. 怎么判断页面的渲染速度

Web 性能优化-首屏和白屏时间

从HTML开始到window.onload的时间（这个“开始”不够明确）
打点如下
开始时间：HTML文档头第一行script 获取当前时间（Head部分）
结束时间：利用window.onload获取

14. 跨域有哪些，什么是jsonp，如果没有跨域会怎么样？

DOM 同源策略： 禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
XMLHttpRequest 同源策略： 禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

为什么要有跨域限制
浏览器同源策略及跨域的解决方法
前端常见跨域解决方案（全）

15. 有解决过前端性能上面的问题吗？

前端性能优化最佳实践
对于前端性能优化的理解与实践

• 减少 HTTP 请求数(比如合并js, css)
• 减少 DNS 查询(应尽量减少域名数量)
• 避免重定向
• 缓存 Ajax 请求（利用浏览器的缓存，Expires 和 Cache-Control）
• 延迟加载
• 预先加载
• 减少 DOM 元素数量
• 划分内容到不同域名
• 尽量减少 iframe 使用
• 把脚本放在页面底部
• 事件的节流（throttle）与防抖（debounce）
• lazy-load(懒加载)
• DOM的优化（避免回流和重绘）
• 服务端渲染（SSR）

16. vue中如何修改数组中对象的值

Vue.set(data, key, value)
vue如何修改数组中对象的值？

17. react和vue的区别，各自的优劣点

个人理解Vue和React区别
不吹不黑比对下React与Vue的差异与优劣

• 数据流的不同(双向绑定和onChange/setState()模式)
• HoC 和 mixins(第二篇文章中有较详细的解释)
• 组件通信的区别
• 模板渲染方式的不同
• Vuex 和 Redux 的区别

vue适合小而精的项目，react则更适用于偏大的项目，但是立住这个结论的支点是不一样的，vue的组件由于一些复杂逻辑的复用方式和组件可应用模式的不足，以至于在大型项目中复用性与设计性是不如react的，但是在小而精的项目里，vue更友好的书写方式，更简化的代码与更声明式的指令都是很棒的优势与特点，而相反的react在中大型项目中能更好的完成vue的不足项，但是也更需要团队技术整体比较给力，领头大佬的设计与把关能力要更优秀，不然糟糕的设计或许不如没有设计。有一些比较总会认为vue由于api较多书写更灵活导致最后的代码难以维护，事实上react或许才是更灵活的一个，因为react几乎没有api导致无论怎样的写代码都是可行的，团队中有10个人可能就有10种方式去理解react，并且无论是状态管理还是异步中间件再加上路由等等，react的社区都提供了更多的选项

18. webpack打包原理

webpack打包原理 ? 看完这篇你就懂了 !

19 webpack loader和plugin谁先加载

webpack原理 -- 流程细节

Webpack 的构建流程可以分为以下三大阶段：

1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

所以webpack是先初始化时加载plugin,再在编译的时候通过loader去翻译文件

20. webpack 热更新原理

彻底搞懂并实现webpack热更新原理

Server端使用webpack-dev-server去启动本地服务，内部实现主要使用了webpack、express、websocket

• 使用express启动本地服务，当浏览器访问资源时对此做响应。
• 服务端和客户端使用websocket实现长连接
• webpack监听源文件的变化，即当开发者保存文件时触发webpack的重新编译。每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件;编译完成后通过socket向客户端推送当前编译的hash戳
• 客户端的websocket监听到有文件改动推送过来的hash戳，会和上一次对比。一致则走缓存；不一致则通过ajax和jsonp向服务端获取最新资源
• 使用内存文件系统去替换有修改的内容实现局部刷新

所以热更新是通过本地起的服务端和客户端通过websocket通信的，轮询判断文件的最后编辑时间是否发生变化，保存时就发生变化，重新编译后通知客户端，客户端根据hash值判断是否需要更新