preface

I worked overtime until 1:30 in the morning and went to meet two companies in the afternoon. I was really sleepy and the interview was completely out of state 🤣🤣. If it weren’t for some simple topics, I felt like exploding again. Ps: There are two algorithm problems, you can focus on them

Show how

This dish experience about 2 years, cast for 2-3 years experience requirements.

The first company

General situation of

  • Company: Shenzhen.
  • Interviewer: Very polite and introduced himself first.
  • Interview result: should be hr face (jump too frequently, resume ugly 🤣🤣).
  • Interview experience: The technical aspect is ok, but the HR aspect is very uncomfortable.

The interview questions

  1. Tell me about a project you’ve worked on before.
  2. VueLife cycle of.
  3. CreateandbeforeMountWhat’s the difference between them?
  4. VueComponent communication.
  5. v-ifandv-showThe differences and usage scenarios.
  6. nextTickUse scenarios and functions of.
  7. VueIn thekeyWhat does it do?
  8. Calculate the property sumwatchThe difference between.
  9. Child elements are centered up, down, left, and right.
  10. Generate a 0.5px line.
  11. Adaptive scheme.
  12. remandrmThe difference between.
  13. vwWhat’s the difference with percentages.
  14. Merge two arrays.
  15. Array deduplication, bubble sort.
  16. ObjectRemove one of the attributes,deleteWhat is the impact of deleting objects?
  17. Deep and light copy.
  18. Anti-shake throttling.
  19. From 0 plus 100.
  20. One to a hundred of the same requests, the next one depends on the result of the previous one, now how to get the hundredth result.
  21. Suppose you are climbing stairs and there are N floors, but you can only take one, two or three steps at a time. Calculate how many steps there are and how to print all the steps?

Tell me about a project you’ve worked on before.

You can answer it better

Vue life cycle.

Component life cycle

  1. new Vue()Initializing events and life cycles
  2. beforeCreate($elanddataAre allundefined)
  3. Initialize data and methods (dataandpropsIs responsive processing,mehodsMethod declaration)
  4. created($elisundefined, modifydataDon’t triggerupdate)
  5. Judge whether or notelItems (vm.$mount(el)), determine whether there is a template (there is no EL outer HTML as a template), compile the template into a rendering function, return the virtual DOM
  6. beforeMounted($elIs a virtualDOM, modifydataDon’t triggerupdate)
  7. Create a formalDOMReplace the virtualDOM, mount to the page specified container display
  8. mounted(Can operate realDOM)
  9. Data changes
  10. beforeUpdate
  11. Re-render virtualDOMAnd through theDIFFAlgorithms compare differences and update realityDOM
  12. updated
  13. callvm.$destory()
  14. beforeDestory(Clean up timers, events)
  15. Remove data listeners, event listeners, and subcomponents
  16. destoryed(Instance not available)

Keep-alive life cycle A component wrapped by keep-alive has two life cycles: Activated and Deactivated. For example,

wraps two components: A and B. When switching to component A for the first time, both the Created and activated life cycle functions of component A are executed. When switching to component B, the deactivated life cycle function of component A is triggered. When switching back to component A, component A’s Activated life cycle function is triggered, but its Created life cycle function is not.

This section describes the Vue keep-live VUE life cycle

What is the difference between Create and beforeMount.

Same as above problem

Vue component communication.

  1. Parent-child communication: The father provides data through attributespropsPass on to a son; The son through $onThe kidnapping of the father$emitTrigger your own event (publish subscribe)
  2. Using the father-child relationship$parent, $children ，
  3. The parent component provides the data and the child component injects it.Dojo.provide, injectPlugins are used a lot.
  4. Ref gets the component instance and calls its properties and methods
  5. Cross component communicationEvent Bus （Vue.prototype.bus=newVue) based ononwith$emit
  6. vuexState management enables communication

The difference between V-if and V-show and their usage scenarios.

V-if is used to delete the generated DOM,v-show is used to switch the dispaly state. Usage scenarios

  • v-if
  1. A piece of code whose conditions rarely change at run time is usedv-ifGood (v-ifHigher switching overhead)
  2. Used on componentsv-ifTrigger a component’s lifecycle function
  3. withtransitionUsed in combination this command can trigger transitions when conditions change (used for animation switching)
  • v-show
  1. You need to switch a block of code very frequently to usev-showApply colours to a drawing
  2. This command triggers transition effects when conditions change (used for animation switching)

Usage scenarios and functions of nextTick

Application scenarios:




He will call it after the DOM update is complete. The function performs a deferred callback after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

What does the key in vUE do?

  • keyWill be used in virtualDOMAlgorithm (diffAlgorithm, used to distinguish between old and new nodes.
  • Don’t takekeyMinimizes element variation and uses the same elements as much as possible. (In place reuse)
  • withkeyWill be based on the samekeyTo arrange. (Same reuse)
  • withkeyIt can also trigger transition effects, as well as trigger the lifecycle of the component

Calculate the difference between properties and Watch.

  • Different data processing scenarios, listeners (watch) is suitable for one data affecting multiple data, and calculation attributes are suitable for one data affected by multiple data
  • The computed property is cacheable, and the computed value is not executed repeatedly if it does not change, butwatchIt will be repeated
  • The listener option provides a more generic way to perform asynchronous or expensive operations

Child elements are centered up, down, left, and right.

The element is centered horizontally and vertically

Generate a 0.5px line.

How to draw a 0.5px edge (update)

Adaptive scheme.

Adaptive layout scheme

The difference between REM and RM.

  • remIs the font size relative to the root element
  • emIs relative to its own font size

What’s the difference between vw and percentage.

  • Percentage is relative height, relative to its parent element.
  • vwIt’s always relative to the window size.

Merge two arrays.

  1. arr1.concat(arr2)
  2. [...arr1,...arr2]
  3. cycle

Array deduplication, bubble sort.

Array.from(new Set(arr)) 2. […new Set(arr)] 3. 5. Sort with a pointer starting at bit 0, then bubble sort with a while loop

function bubbleSort (arr) {
  for (let i = 0; i < arr.length; i++) {
    let flag = true;
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        flag = false;
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp; }}if (flag) break;
  }
  return arr;
}
Copy the code

This is the optimized bubble sort. A flag is used to optimize, which means that if no elements are swapped in a loop, the sorting is complete.

Bubble sort always executes (n-1)+(n-2)+(n-3)+.. + 2 + 1, but if you run into a trip of sorting has been completed, or is an ordered array of input, they are superfluous behind relatively, in order to avoid this kind of situation, we add a flag to determine whether the sorting in the middle is complete (that is, to judge whether exchange element) and array to heavy bubble sort algorithm

Object Deletes an attribute. Delete Specifies the impact of deleting the Object.

Delete Object[‘name’] delete can only delete its own attributes and does not affect the attributes on the prototype chain

Deep and light copy.

What are the means of shallow copy in JS? Can YOU write a full deep copy?

Anti-shake throttling.

If the throttle

From 0 plus 100.

1. Add the sum from 1 to 100 using the for loop

let sum=0;
for(var i=0; i<=100; i++){ sum+=i; }Copy the code

Add the sum from 1 to 1000 using the while function

let i=0, sum=0;
while(i<=100){
    sum+=i++;
}
Copy the code

One to a hundred of the same requests, the next one depends on the result of the previous one, now how to get the hundredth result.

Await async cycle

Suppose you are climbing stairs and there are N floors, but you can only take one, two or three steps at a time. Calculate how many steps there are and how to print all the steps?

It’s a little bit too much code. See another article I wrote

Climb the stairs 2

Second company

General situation of

  • Company: Online education.
  • Interviewer: Just so.
  • Interview result: mutual scorn 😂.
  • What skills do you have to match this salary? .

Pen test

  1. httpandhttpsThe difference between
  2. requestAnimationFrameThe role of.
  3. instanceofThe principle of
  4. localStorage,sessionStorage 和 CookieThe difference.
  5. CommonJS 和 ES6 ModuleThe difference between.
  6. Memory leak scenario.
  7. A containAsync, await, setTimeout, PromiseThe event loop problem.
  8. React HOCWhat problem does it solveHookWhat problems have been solved?
  9. VueWhat is a render function? Try writing a simple one.
  10. Given an array of integers, find two numbers that add up to the target value.

Difference between HTTP and HTTPS

  • HttpIt’s hypertext transfer protocol. Data transfer in plaintext.
  • HttpsIt is safeSSLEncrypted transport protocol. The transport is encrypted.
  • HttpandHttpsThe port used is different. The former is80, which is443.

The role of requestAnimationFrame

You know requestAnimationFrame

The principle of instanceof

The principle of instanceof

LocalStorage, sessionStorage and cookies

  • Data storage:cookieThe homologousHTTPRequests are passed back and forth between the server and the client.storageIt is saved locally.
  • Storage data size:cookielimit4kb.storageabout5MB.
  • Data validity period:cookieThe validity period of is dependent on the expiration time setting (default is session),sessionStorageThe current TAB is valid,localStorageAlways valid.
  • Scope:cookie,localStorageHomology window,sessionStorageCurrent TAB
  • Operation:cookieAs the onlydocumentA property of, and no other operation.storageThere aregetItem,setItem,removeItem,clearMethods.

CommonJS and ES6 Modules

What’s the difference between CommonJS and ES6 Modules?

Memory Leak scenario

Js memory leak scenario, how to monitor and analyze

An event loop containing async, await, setTimeout, Promise

Async /await interview question execution order

What problems did React HOC solve? How to understand Hook? What problems did React HOC solve?

Never write the react

Vue what is a render function, try to write a simple

Implement the simple render function

Given an array of integers, finding two numbers that add up to the target value requires time complexityO(n)

Leetcode-cn.com/problems/tw…

/ * * *@param {number[]} nums
 * @param {number} target
 * @return {number[]}Select taget-currentValue (taget-currentValue), select taget-currentValue (taget-currentValue), select taget-currentValue (taget-currentValue), and select taget-currentValue (taget-currentValue). * /
var twoSum = function(nums, target) {
  if(! nums)return [];
  // Create a dictionary table
  const m = new Map(a);// Iterate over the NUMS array
  for(let i = 0; i < nums.length; i++){
    // Get the current value
    const n = nums[i];
    // Get the current value that matches the value
    const n2 = target - nums[i];
    // Determine if the target value is in the dictionary
    if(m.has(n2)){
      // Yes, return the coordinates of the target value and the current value
      return [m.get(n2),i]
    }
    // If the key is not in the dictionary, the key is the value and the value is the subscript
    m.set(n,i)
  }
};
Copy the code

The interview questions

  1. Have you done error monitoring for small programs

  2. Error: failed to get details of a third-party script.

  3. Applets life cycle

  4. (Box model) There is a big box, and there are two small boxes inside. Their styles are 50% and 100% high respectively, and they both have a 1px border. At this time, the width and height will overflow.

  5. Up and down in the middle

  6. Webpack turns on load on demand

  7. How to make SVG Sprite graphics

  8. Upload large file slices

  9. Wechat multi-terminal users agree, small program how to get unionID

  10. Canvas implements a scratch-off

  11. What problems have WebSocket encountered

Have you done error monitoring for small programs

Error: failed to get details of a third-party script.

I thought of using onError capture, but the interviewer asked how to get detailed errors, and I didn’t think of a good method for the time being.

Applets life cycle

Applets life cycle

(Box model) There is a big box, and there are two small boxes inside. Their styles are 50% and 100% high respectively, and they both have a 1px border. At this time, the width and height will overflow.

Switch box model

Up and down in the middle

Something like this

The element is centered horizontally and vertically

Webpack turns on load on demand

Webpackage 4 uses the import() module to load on demand

How to make SVG Sprite graphics

Vue3 + TS template to facilitate the front-end use of SVG Sprite diagram

Upload large file slices

Front-end large file upload

Wechat multi-terminal user unified, small program how to get unionID

UnionID mechanism indicates that if the developer has multiple mobile applications, website applications, and public accounts (including small programs), the uniqueness of users can be distinguished by UnionID, because as long as the mobile applications, website applications and public accounts (including small programs) under the same wechat open platform account, The user’s UnionID is unique. In other words, the same user, different applications under the same wechat open platform, UnionID is the same.

UnionID Indicates how to obtain the UnionID

  • Developers can just go throughwx.login + code2SessionThe user name is obtainedUnionIDWithout user authorization.
  • When the small program side calls the cloud function, it can pass through the cloud functioncloud.getWXContextTo obtainUnionID.

Canvas implements a scratch-off

You can look at this. It’s the same idea THAT I talked about in the interview.

Canvas implementation scratch-off js implementation scratch-off

What problems have WebSocket encountered

Ios switching pages and locking screens are disconnected

conclusion

First published in the finch documentation @is_tao

Second Interview second Interview: Regain confidence