Issues related to

  • Flex layout vs. Grid layout.
  • Vue SSR is implemented.
  • Migrate from SPA to SSR using minimal cost.
  • Implementation method: (incomplete) according to the specified element, in the array to find ff array (FF array name is a lie). For example, if the array [2, 3, 6, 7] specifies element 7, then the array ff is [2, 2, 3] (2+2+3 = 7) and [7]. If element 6 is specified, the ff array is [2, 2, 2], [3, 3], and [6].
  • Realize the Promise. Finally.
  • Another way to implement the responsive principle of Vue.
  • Why the Vue component data must be a function.
  • Vue computed implementation.
  • Diff algorithm implementation.
  • Vue Complier implementation.
  • Fast platoon and its optimization.
  • Caching algorithm implementation and its optimization (simple caching algorithm model: assumptions can cache data, three requests to the first three data directly into the cache list, when the request data, the fourth, if hit cache, will be cached data in the cache list head, or add new data into the cache list head, eliminate the last data).
  • How to quickly locate a component that has a performance problem.
  • HTTP status code 202, 204.
  • WebSocket.
  • Tell me as much as you can about Electron.

Relevant solutions

Flex layout vs. Grid layout

This problem is relatively simple, with Flex and grid implementation as follows:

The implementation is as follows:

<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>
Copy the code

The grid study: https://www.jianshu.com/p/d183265a8dad

To realize the Vue SSR

Some ideas for the next problem.

Migrate from SPA to SSR using minimal cost

The benefits of Vue SSR are not mentioned, there is an article about server side rendering and client side rendering. Simple summary of Vue SSR implementation. There is an implementation diagram:

Its basic realization principle:

  • App.js serves as a common entrance for the client and server to export the Vue root instance for client entry and server entry. Client entry is mounted to the DOM. Server entry creates and returns instances, and performs route matching and data preacquisition.
  • Webpack packs a Client Bundle for the customer side and a Server Bundle for the Server side.
  • When the Server receives the request, it loads the corresponding component according to the URL, obtains and parses the asynchronous data, creates a BundleRenderer that reads the Server Bundle, and generates HTML to send to the client.
  • Client mixing, the client receives the DOM from the server and compares it with the DOM generated by itself, and activates the different DOM so that it can respond to subsequent changes. This process is calledClient Activation. To ensure successful mixing, the client and server need to share the same set of data. On the server side, data can be retrieved before rendering and filled into the stroe so that data can be retrieved directly from the Store before the client is mounted into the DOM. Dynamic data on the front screen passeswindow.__INITIAL_STATE__Send to the client.

The main implementation of Vue SSR is to output Vue components as a full HTML, and vue-server-renderer does just that.

The pure client-side output procedure has a complier procedure (described briefly in “Next”) that converts a Template to a Render string.

Vue SSR has a bit more to do (output full HTML), including things like complier -> vNode, data fetching to fill in HTML, client blending, caching, and more.

Compared to other templating engines (EJS, Jade, etc.), the ultimate goal is the same and the performance may be lower.

Reference:

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

Ff array

Realize the Promise. Finally

The finally method is used to specify actions that will be performed regardless of the final state of the Promise object, using the following method:

Promise
	.then(result= >{...}). The catch (error= >{...}). Finally,(a)= >{...})Copy the code

The finally features:

  • No parameters are accepted.
  • Finally is essentially a special case of the THEN method.
Promise.prototype.finally = function (callback) {
  let P = this.constructor
  return this.then(
    value= > P.resolve(callback()).then((a)= > value),
    reason => P.resolve(callback()).then((a)= > { throw reason })
  )
}
Copy the code

Another way to implement the responsive principle of Vue

The reactive principle of Vue is to use Object.defineProperty to track dependencies and notify when properties are accessed or changed.

There are two disadvantages:

  • Attributes added or deleted could not be detected.
  • Changes to the array, such as changing elements by index or directly changing the length of the array, cannot be detected.

It’s the same thing, except it’s not getter/setter.

The first one is easier to understand, why can’t array lengths be getters/setters?

If you know the length of the array, it is theoretically possible to set getters/setters for all indexes beforehand. But a lot of times you don’t know the length of the array, and b, if it’s a big array, adding getter/setter beforehand is a bit of a performance burden.

Now there is an alternative solution Proxy, but it is not compatible, will be introduced sooner or later.

Proxy, which places a layer of interception in front of the target object. Specific, you can refer to http://es6.ruanyifeng.com/#docs/reference

Why does the Vue component Data have to be a function

Understand two points:

  • Each component is an instance of Vue.
  • Components share the data property, and when the values of data are of the same reference type, changing one of them affects the others.

Vue computed to realize

This question has been asked by two people, and I feel that neither answer is very good.

Start with two questions:

  • Establish relationships with other properties, such as data and Store.
  • When a property changes, notify the compute property to recalculate.

When implemented, it is mainly as follows

  • Initialize data, using Object.defineProperty to turn all of these properties into getters/setters.
  • Initialize computed, iterate over each property in computed, and each computed property is an instance of Watch. The function provided by each property acts as the getter for the property and is converted using Object.defineProperty.
  • Object.defineproperty Getter depends on collection. Used to trigger property recalculation when a dependency changes.
  • If the current computed attribute is nested with other computed attributes, other dependency collections are performed first.

Reference: https://segmentfault.com/a/1190000010408657

Diff algorithm implementation

I have written two articles discussing the implementation of this algorithm before, but I have forgotten it for too long. (address: https://github.com/jkchao/blog/issues/3, https://github.com/jkchao/blog/issues/4). Well, call this an opportunity to sum up

Diff is implemented mainly through two methods, patchVnode and updateChildren.

PatchVnode has two parameters: old node oldVnode and new node vnode. There are five main cases:

  • If (oldVnode === vnode), their references are consistent and can be considered unchanged.
  • if(oldVnode.text ! == null && vnode.text ! == null && oldVnode.text ! == vnode.text), the text Node comparison, need to modify, will call Node.textContent = vnode.text.
  • if( oldCh && ch && oldCh ! == ch), both nodes have children, and they are different, so we call the updateChildren function to compare children, which is the heart of diff, as we’ll see later.
  • If (ch), only the new node has children, call createEle(vnode), vnode.el already references the old DOM node, createEle adds children to the old DOM node.
  • If (oldCh), the new node has no children and the old node has children. Delete the old node directly.

UpdateChildren is key, and the process can be summarized as follows:

OldCh and newCh each have two starting and ending variables, StartIdx and EndIdx. The two variables of oldCh and newCh are compared with each other in four ways. If none of the four comparisons match, if the key is set, the comparison will be performed with the key. During the comparison, the variable will be moved to the middle, and the comparison will end as soon as StartIdx > EndIdx indicates that at least one of oldCh and newCh has been traversed.

Vue complier implementation

I wrote a “Vue pasta cycle summary article”, which mentioned the role of complier, did not do a thorough understanding of…

Template parsing is essentially converting data into a piece of HTML that starts in the back end and then goes through various processes to the front end. With the rise of mv*, template parsing is left to the front end. In general, Vue complier converts template to a Render string. It can be simply understood as the following steps:

  • A parse process that converts a template into an AST abstract syntax tree using re.
  • Optimize process, mark static nodes, post diff process skips static nodes, improve performance.
  • Generate process, which generates the render string.

Reference:

  • https://segmentfault.com/a/1190000006990480
  • https://github.com/answershuto/learnVue/blob/master/docs/%E8%81%8A%E8%81%8AVue%E7%9A%84template%E7%BC%96%E8%AF%91.MarkDo wn

Fast platoon and its optimization

The front-end algorithm requirements are relatively low, but it is also an essential part.

Find a relatively good article: https://www.cnblogs.com/zichi/p/4788953.html

Implementation and optimization of cache algorithm

The easiest way to think about it is to use array storage and let me optimize. I… He looked confused. Interested students can refer to this: http://www.cnblogs.com/dolphin0520/p/3749259.html.

Ps: It seems that I need to catch up on data structures and algorithms.

How can I quickly locate which component has a performance problem

When the interviewer asks this question, he or she fails to get the interviewer’s point and makes a bunch of useless –. Later, the interviewer said it was mainly the timeline tool. Using the timeline, you can determine which function is faulty and which component is faulty.

Attached are two articles using Timeline:

  • https://juejin.cn/post/6844903556802150413
  • https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn

HTTP status code 202, 204

The interviewer doesn’t know why 202, 204… Looks like he brought it in by himself. – –

202: The server has accepted the request but has not yet processed it. 204: The server successfully processed the request without returning anything.

These status codes feel like it’s ok to remember the usual ones, as well as 200 +, 300+, 400+ and 500+.

WebSocket

WebSocket should be a more frequently asked surface pilot, if the question is not deep, should be easier to answer.

Because there is an obvious drawback of HTTP (messages can only be pushed to the server by the client, and the server can not actively push to the client), so if the server has continuous changes, polling can only be used, and polling is too inefficient and not suitable. So WebSocket was invented.

Compared with HTTP, it has the following advantages:

  • Support two-way communication, more real-time;
  • You can send text or binary files;
  • The protocol identifier is WS and WSS after encryption.
  • Less control overhead. After the connection is created, when the WS client and server exchange data, the packet header controlled by the protocol is small. Without the header, the client-to-client header is only 2 to 10 bytes (depending on the packet length), with an additional 4-byte mask for client-to-server. HTTP requires a complete header for each communication.
  • Support for extensions. The WS protocol defines extensions, and users can extend the protocol or implement custom subprotocols. (such as support for custom compression algorithms)
  • No cross-domain problems.

Implementation is relatively simple, server libraries such as socket. IO, WS, can help us get started. The client only needs to follow the API implementation.

Reference:

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

Tell me as much as you can about Electron

I wrote a simple article about electron-vue before, but I didn’t expect an interviewer to ask me and ask me deeply.

Most importantly, Electron is actually a Chrome node application.

So it should be said from two aspects:

  • Chrome (no compatibility issues);
  • Node (Node can do everything Node can do).

Chrome has nothing to say, a front-end understand.

There’s a lot to be said for Node.

One of the interviewers asked me, how do you solve cross-domain problems at ELECTRON?

In my own project, I did run into this problem and took a not-so-good approach to setting up nginx.

Why not? If the project belongs to the company, operation and maintenance students are needed to help. – –

Also talked about using CORS to allow cross-domain, also feel bad because of the need for back-end interface processing. I was confused until the interviewer reminded me to use Node to represent the following. (It used to be possible to do this…)

Of course, you can also connect to the database. The previous company was going to do a desktop application with electron connecting to the database. It is a pity that the database has been selected at that time, levelDB or lowDB, I think it should be easy.

Attached are two links for ELECTRON to use with the database:

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

Lack of skills, unavoidable mistakes, but also hope to point out more.

Gold digging technical certificate activity link: https://juejin.cn/post/1