Interview review series 3, how do you feel worse and worse? Begin to doubt yourself, doubt life…

After the interview, stopped the pace of resume, interview. Learn to organize, brush leetcode, combine projects to do more thinking and precipitation ✊…

General situation of

  • Company: Shanghai, e-commerce business.
  • Interviewer: A serious female interviewer.
  • Interview result: failed.
  • Feeling of interview: Sitting in the square telephone interview “nervous”, next to a child talking to grandma, I did not hear a word.

The interview questions

  1. Tell me about a project you did best. 8
  2. If the front end controls the route, the user randomly enters an address, and the background interface is required to determine whether the user jumps to the page first and then to the login page? 7 ✔
  3. The VUE life cycle is explained in detail. Created and Mounted cycles. Which one is more suitable for requesting background data? 8 ✔
  4. Is computed different from Watch? 6 ✔
  5. Mobile adaptation solution? Rem layout specific implementation? 7 ✔
  6. Cookie, localStorage, SessionStorage 9 ✔
  7. Preload and prefetch 7 ✔
  8. Performance analysis 6
  9. ✔ The difference between undefined and null
  10. ES6 new array operation method “brain suddenly short circuit 😵, didn’t say a few”

Problem 2 route control

Except for some routes, such as login, the other routes must be logged in (have a token and know the user role). You can put it in the beforeEach route guard to determine whether the current route role contains the current user.

Problem 3 vUE lifecycle

  1. New Vue(), initialize the event and lifecycle
  2. BeforeCreate ($el and data are undefined)
  3. Initialize data and methods (reactive processing of data and props, mehods method declaration)
  4. Created ($el = undefined, data change does not trigger update)
  5. $mount(el)), check whether there is a template (no el outer HTML as template), compile template into a rendering function, return the virtual DOM
  6. BeforeMounted ($el is a virtual DOM, updating data does not trigger update)
  7. Create a formal DOM to replace the virtual DOM, mount to the page specified container display
  8. Mounted (Real DOM operable)
  9. Data changes
  10. beforeUpdate
  11. The virtual DOM is re-rendered and the real DOM is updated using DIFF algorithm to compare the differences
  12. updated
  13. Call the vm $destory ()
  14. BeforeDestory (Cleanup timers, events)
  15. Remove data listeners, event listeners, and subcomponents
  16. Destoryed (instance not available)

created vs mounted

If the difference between created and Mounted time is tens of ms, the return time of asynchronous requests is usually longer than this difference. Therefore, the page will be re-rendered. But Created will be dozens of ms earlier.

Problem 4. Computed and Watch

Computed attributes are cached based on their responsive dependencies, and only the associated responsive dependency changes are reevaluated. Accessing a calculated property multiple times or immediately returning the result of a previous calculation does not execute the function again. (Caching is used for instant rerender, whereas methods are called every time they are rerendered.)

The Watch listener is better suited for listening for data changes by performing asynchronous operations or other logical processing. The Watch listener can also set deep to true to implement deep listening for object properties (as deep as you can nest them).

Note that you should not use the arrow function to define the watcher function. In normal vue projects, you use the arrow function, this refers to undefined. In HTML script, this refers to the window.

Problem 5 Mobile adaptation solution

Px + flex

Some scenarios may want the bigger the phone, the more content you can see, and use PX directly. However, the adaptation of elements and image layouts is based on business needs.

Rem layout

Adapt through THE HTML root element, 1rem=1 root element font size, according to the screen using CSS media query or JS set the size of the root element.

Px2rem, you can write your own method, or you can use the dependency package px2rem.

Vw layout

Dependency package, postcss-px-to-viewPort

Vw + REM layout

1vw = Viewport width * 1%

For the size of the root element, use VW, and for other elements, use REM.

viewport

The mobile must set viewPort so that @Media can get the size that matches the visual width.

  • Layoutviewport: layoutviewport, larger than the actual screen.
  • Visualviewport: visualviewport
  • Idealviewport: idealviewport, device size

Problem 6 cookie, localStorage, and SessionStorage

  1. Data storage: Cookies are passed back and forth between the server and client in the same HTTP request. Storage is saved locally.
  2. Cookie size: 4kb, storage about 5MB.
  3. Data validity: Cookie validity depends on expiration time Settings (session by default), sessionStorage current TAB is valid, localStorage is always valid.
  4. Scope: Cookie, localStorage origin window, sessionStorage current TAB
  5. Actions: Cookies are only available as an attribute of document, there are no other actions. Storage mail getItem\setItem\removeItem\clear etc.

Question 7. Preload and prefetch

preload

Lets the browser preload specified resources (not executed, mostly for the current page) without blocking onload time for rendering and document.

Preload prioritizes resource loading (always loaded, regardless of resource dependencies).

Cross-domain file preload, need to add crossorigin attribute. (Origin field missing for cross-domain preload requests without Crossorigin)

prefetch

Tell the browser what resources (resources for the next page) might be needed, but may not be loaded.

Preload and prefetch are used together. Resources are not overused but loaded repeatedly.

import(/* webpackPreload: true */ 'ChartingLibrary');
import(/* webpackPrefetch: true */ 'LoginModal');
Copy the code
<! --type indicates MIME type, crossorigin handles cross domain -->
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
<! Reactive preloading -->
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
Copy the code

Loading priority:

  1. Highest: HTML, CSS, font
  2. High: JS (direct import, preload), font (preload)
  3. Low: JS (async)
  4. Lowest: CSS/JS (Prefetch)

Async: Loads JS files asynchronously. If the browser is idle and a Load event is triggered, the file is executed before the load event is triggered.

Defer: Load the JS file asynchronously and defer the script execution until the document is parsed and displayed, similar to window.onload.

Question 8 performance analysis

  • The Network panel of chrome development tool includes waterfall(Timing), TCP connection Queueing events, request sending Requres sent time, TTFB server processing return time, content Download time.
  • Check page performance, generate reports, and submit optimization recommendations with Lighthouse.
  • Performance API: Timing fields are as follows
{
  "navigationStart": 1599730498850."unloadEventStart": 1599730499155."unloadEventEnd": 1599730499156."redirectStart": 0."redirectEnd": 0."fetchStart": 1599730498852."domainLookupStart": 1599730498852."domainLookupEnd": 1599730498852."connectStart": 1599730498852."connectEnd": 1599730498852."secureConnectionStart": 0."requestStart": 1599730498854."responseStart": 1599730499151."responseEnd": 1599730499163."domLoading": 1599730499172."domInteractive": 1599730499517."domContentLoadedEventStart": 1599730499518."domContentLoadedEventEnd": 1599730499525."domComplete": 1599730501370."loadEventStart": 1599730501370."loadEventEnd": 1599730501373
}
Copy the code

Problem 9 null and undefined

Similarities:

  • Is an underlying data type that has only one value
  • Boolean conversions are false, undefined == null √
  • There are no properties or methods

The difference between

  • Undefined is not a keyword; null is
  • Undefined is not initialized; null is initialized
  • Typeof undefined returns undefined, and typeof null returns Object
  • Number(null) 0, Number(undefined) NaN.

Question 10. ES6 array manipulation

  • Includes, fill, find, findIndex
  • Entries, keys and values (use less, Object. The entries/keys/values with more)
  • Copywith, flat, flatMap

**Array.from: ** Convert two types of objects into true arrays, one is array-like (HTMLCollection, NodeList collection, arguments object) and the other is traversable (including ES6 Set and map). All data structures with the Iterator interface deployed.

The difference between array. from and the extended operator

  1. Array.from also supports array-like objects, such as array. from({length:2}), which returns [undefined, undefined].
  2. Array.from supports the second argument, which is similar to the map method of arrays.

Array.of: Converts a set of values to an Array. Unlike Array() or new Array(), Array(3) returns [,,] and array.of (3) returns [3].

series

Interview reset (a) : the interviewer “former Ali big guy” really fierce

Interview review (II) : Hope to get a simple and direct answer