中高级前端

时间 2019-11-16 标签中高级前端

一些回答不够好的前端面试题著做权归做者全部

javascript/jquery

浏览数:421javascript

2018-3-5html

相关解答

flex 布局与 grid 布局

这个问题比较简单，用 flex 与 grid 实现以下便可：前端

实现方式以下：vue

 
          <html> 
         
          <head> 
         
          <style> 
         
          /* flex */ 
         
          .box { 
         
          display: flex; 
         
          flex-wrap: wrap; 
         
          width: 100%; 
         
          } 
         
          .box div { 
         
          width: calc(100% / 3 - 2px); 
         
          height: 100px; 
         
          border: 1px solid black; 
         
          } 
         
          /* grid */ 
         
          .box { 
         
          display: grid; 
         
          grid-template-columns: 1fr 1fr 1fr; 
         
          width: 100%; 
         
          } 
         
          .box div { 
         
          height: 100px; 
         
          border: 1px solid black; 
         
          } 
         
          </style> 
         
          <head> 
         
          <body> 
         
          <div class= 
          "box" 
          > 
         
          <div></div> 
         
          <div></div> 
         
          <div></div> 
         
          <div></div> 
         
          </div>   
         
          <body> 
         
          </html>

grid 学习：https://www.jianshu.com/p/d183265a8dadjava

实现 Vue SSR

一些想法写在下题。node

从 SPA 使用最小成本迁移到 SSR

Vue SSR 的好处就很少说了，这有一篇相关文章服务端渲染与客户端渲染。
简单的总结下 Vue SSR 的实现。
有一张实现图：jquery

其基本实现原理：webpack

app.js 做为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。客户端 entry 主要做用挂载到 DOM 上，服务端 entry 除了建立和返回实例，还进行路由匹配与数据预获取。
webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。
服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，建立一个读取 Server Bundle 的 BundleRenderer，而后生成 html 发送给客户端。
客户端混合，客户端收到从服务端传来的 DOM 与本身的生成的 DOM 进行对比，把不相同的 DOM 激活，使其能够可以响应后续变化，这个过程称为客户端激活。为确保混合成功，客户端与服务器端须要共享同一套数据。在服务端，能够在渲染以前获取数据，填充到 stroe 里，这样，在客户端挂载到 DOM 以前，能够直接从 store 里取数据。首屏的动态数据经过 window.__INITIAL_STATE__ 发送到客户端。

Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的。nginx

纯客户端输出过程有一个 complier 过程（「下题」中有一个简单描述），主要做用是将 template 转化成 render 字符串。git

Vue SSR 须要作的事多点（输出完整 HTML），除了 complier -> vnode，还需如数据获取填充至 HTML、客户端混合（hydration）、缓存等等。

相比于其余模板引擎（ejs, jade 等），最终要实现的目的是同样的，性能上可能要差点。

参考：

https://ssr.vuejs.org/zh/
https://segmentfault.com/a/1190000006701796

ff 数组

实现 Promise.finally

finally 方法用于指定无论 Promise 对象最后状态如何，都会执行的操做，使用方法以下：

 
          Promise 
         
          .then(result => { ··· }) 
         
          . 
          catch 
          (error => { ··· }) 
         
          .finally(() => { ··· })

finally 特色：

不接收任何参数。
finally 本质上是 then 方法的特例。

 
          Promise.prototype.finally =  
          function 
          (callback) { 
         
          let P =  
          this 
          .constructor 
         
          return 
          this 
          .then( 
         
          value  => P.resolve(callback()).then(() => value), 
         
          reason => P.resolve(callback()).then(() => {  
          throw 
          reason }) 
         
          ) 
         
          }

另外一种方式实现 Vue 的响应式原理

Vue 的响应式原理是使用 Object.defineProperty 追踪依赖，当属性被访问或改变时通知变化。

有两个不足之处：

不能检测到增长或删除的属性。
数组方面的变更，如根据索引改变元素，以及直接改变数组长度时的变化，不能被检测到。

缘由差很少，无非就是没有被 getter/setter 。

第一个比较容易理解，为何数组长度不能被 getter/setter ？

在知乎上找了一个答案：若是你知道数组的长度，理论上是能够预先给全部的索引设置 getter/setter 的。可是一来不少场景下你不知道数组的长度，二来，若是是很大的数组，预先加 getter/setter 性能负担较大。

如今有一个替代的方案 Proxy，但这东西兼容性很差，早晚要上的。

Proxy，在目标对象以前架设一层拦截。具体，能够参考 http://es6.ruanyifeng.com/#docs/reference

Vue 组件 data 为何必须是函数

理解两点：

每一个组件都是 Vue 的实例。
组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其余。

Vue computed 实现

这个题目有两家问了，感受都不是答得很好。

从两个问题出发：

创建与其余属性（如：data、 Store）的联系；
属性改变后，通知计算属性从新计算。

实现时，主要以下

初始化 data，使用 Object.defineProperty 把这些属性所有转为 getter/setter。
初始化 computed, 遍历 computed 里的每一个属性，每一个 computed 属性都是一个 watch 实例。每一个属性提供的函数做为属性的 getter，使用 Object.defineProperty 转化。
Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性从新计算。
若出现当前 computed 计算属性嵌套其余 computed 计算属性时，先进行其余的依赖收集。

参考：https://segmentfault.com/a/1190000010408657

diff 算法实现

之前写过两篇文章讨论这个算法的实现，没想到过的过久，忘记了。（文章地址：https://github.com/jkchao/blog/issues/3 ，https://github.com/jkchao/blog/issues/4）。
也好，称此机会总结下

diff 的实现主要经过两个方法，patchVnode 与 updateChildren 。

patchVnode 有两个参数，分别是老节点 oldVnode, 新节点 vnode 。主要分五种状况：

if (oldVnode === vnode)，他们的引用一致，能够认为没有变化。
if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，须要修改，则会调用Node.textContent = vnode.text。
if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点，并且它们不同，这样咱们会调用 updateChildren 函数比较子节点，这是diff的核心，后边会讲到。
if (ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点。
if (oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点。

updateChildren 是关键，这个过程能够归纳以下：

oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx ，它们的2个变量相互比较，一共有4种比较方式。若是 4 种比较都没匹配，若是设置了key，就会用key进行比较，在比较的过程当中，变量会往中间靠，一旦 StartIdx > EndIdx 代表 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。

Vue complier 实现

之前写过一篇「Vue 生面周期总结的文章」的文章，里面提到了 complier 的做用，没有作深刻了解。。。

模板解析这种事，本质是将数据转化为一段 html ，最开始出如今后端，通过各类处理吐给前端。随着各类 mv* 的兴起，模板解析交由前端处理。
总的来讲，Vue complier 是将 template 转化成一个 render 字符串。
能够简单理解成如下步骤：

parse 过程，将 template 利用正则转化成 AST 抽象语法树。
optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提高性能。
generate 过程，生成 render 字符串。

参考：

快排及其优化

前端对算法的要求仍是比较低的，但也是必不可少的一部分。

找到一篇比较不错的文章：https://www.cnblogs.com/zichi/p/4788953.html

缓存算法实现及其优化

最简单的一种思路就是使用数组存储，而后让我优化。
我。。。一脸懵逼。
有兴趣的同窗能够参考这个： http://www.cnblogs.com/dolphin0520/p/3749259.html 。

ps: 看来我得补补数据结构和算法相关的知识了。

怎么快速定位哪一个组件出现性能问题

当面试官问这个问题，没有 get 到面试官的点，扯了一堆乱七八糟没用的 – -。
后来面试官说主要是用 timeline 工具。
大意是经过 timeline 来查看每一个函数的调用时常，定位出哪一个函数的问题，从而能判断哪一个组件出了问题。

附上两个使用 timeline 的文章：

https://juejin.im/post/5a6e78abf265da3e3f4cf085
https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn

http 状态码 202, 204

面试官不知道为什么扯到了 202, 204。。。好像是由本身带进坑的。- –

202: 服务器已接受请求，但还没有处理。
204: 服务器成功处理了请求，没有返回任何内容。

这些状态码感受只要能记住经常使用的就 ok 了，固然还得了解 200 +, 300+, 400+, 500+ 表明什么意思。

WebSocket

WebSocket 应该算是一个比较常问的面试点，若是问的不深的话，应该比较好回答。

因为 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），致使若是服务器若是有连续的变化，这时只能使用轮询，而轮询效率太低，并不适合。因而 WebSocket 被发明出来。

相比与 http 具备如下有点：

支持双向通讯，实时性更强；
能够发送文本，也能够二进制文件；
协议标识符是 ws，加密后是 wss ；
较少的控制开销。链接建立后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的状况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，须要加上额外的4字节的掩码。而HTTP协议每次通讯都须要携带完整的头部；
支持扩展。ws协议定义了扩展，用户能够扩展协议，或者实现自定义的子协议。（好比支持自定义压缩算法等）
无跨域问题。

实现比较简单，服务端库如 socket.io、ws ，能够很好的帮助咱们入门。而客户端也只须要参照 api 实现便可。

参考：

http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://www.cnblogs.com/chyingp/p/websocket-deep-in.html

尽量多的说出你对 Electron 的理解

之前写过一篇简单的关于 electron-vue 的文章，没想到真有面试官问，并且问的挺深的。

最最重要的一点，electron 其实是一个套了 Chrome 的 node 程序。

因此应该是从两个方面说开来：

Chrome （无各类兼容性问题）；
Node （Node 能作的它也能作）。

Chrome 没什么好说的，是个前端都懂。

Node 方面可说的就多了。

有个面试官问我，在 electron 怎么解决跨域问题？

在我本身的项目里，确实遇到了这个问题，惋惜选择了一个不怎么好的方法的方法，设置 nginx 。

为何很差，若是项目是公司的，还须要运维同窗帮忙。- –

也聊到了使用 CORS 容许跨域，也以为很差，由于须要后端接口处理。
一脸懵逼的我，直到面试官提醒使用 node 来代理如下，才恍然大悟。（原来还能够这种操做。。。。）

固然也能够链接数据库，上家公司原本打算要作一个 electron 配合链接数据库的桌面应用。（还没开始作就离职了- -）
挺惋惜的，当时数据库都已经选择好了，leveldb 或者 lowdb ，以为应该不难。

附上两个 electron 配合数据库使用的连接：

https://github.com/typicode/lowdb/issues/169
https://github.com/Level/electron-demo

功力不足，不免有错误之处，还望多多指出。

原文连接：https://jkchao.cn/article/5a784fc46c89ce0ff8dbfa36