1. How to realize on-demand loading and the specific principle

2. Principle of WebPack plug-in

3. Vue performance bottleneck

React setState Asynchronous update time

5. The CSS image is vertically centered at the baseline position

1. Koa middle layer, EJS template, server rendering, and then refactoring to NUxT server rendering

2. Why refactor to NUXT

3. What performance optimization did Vue3 do

4. Pain points for compositionAPI and hook solutions

Vue3 is tree-shaking pruning, cutting out unused code during compilation

Only import is supported, require is not, so Vue2 cannot be tree-shaking optimized

6. import and require

7. The difference between VUe3 proxy that monitors data changes and VUe2 defineProperty

————— the above is from the technical point of self-introduction

8. Specify how the browser renders the page

9. It talks about caching and explains the caching process in detail

Cache-control and max-press are used to specify the relative time and the absolute time in Greenwich mean Time.

Why are there two time fields in the judgment cache? The absolute time has a higher priority than the relative time because the client time and the server time are not synchronized

11. Judgment and detailed process of negotiation cache: Last-MoDefined and E-tag fields. Because last-MoDefined is at the second level, resource modifications cannot be monitored within one second, the e-tag field is required to distinguish the two fields

12, 304 negotiate cache, 301 temporary redirect, 302 permanent redirect

13, HTTP and HTTPS differences, HTTPS detailed browser and server asymmetric encryption and symmetric encryption process, signature verification

14, how many browser security issues

· XSS attack, prevention method escape · CSRF attack, phishing website attack, prevention method add verification code or custom header token · Third party interception capture packet, modify request body and so onCopy the code

Code problem

In the following data structures, id represents the department number, name is the department name, parentId is the parent department number, and 0 represents the primary department. Now we need to implement a convert method to convert the original list into a tree structure. ParentId = children; parentId = children;

Let list =[{id:1,name:' department A',parentId:0}, {id:2,name:' department B',parentId:0}, {id:3,name:' department C',parentId:1}, {id: 4, name: D ' 'department, parentId: 1}, {5, id: name:' E ', parentId, 2}, {id: 6, name: 'division F, parentId, 3}, {id: 7, name:' department G, parentId, 2}, {id:8,name:' parentId ',parentId:4}]; const result = convert(list, ...) ; Let result = [{id: 1, name: 'department A', parentId: 0, children: [{id: 3, name:' department C', parentId: 1, children: [{id: 6, name: 'department F', parentId: 3}, {ID: 16, name:' department L', parentId: 3}]}, {id: 4, name: 'department D', parentId: 1, the children: [{id: 8, name: 'H', parentId: 4}]}}],...];Copy the code

The second question

var a = 1; (() => { console.log(a); a = 2; }) (); Var a = 1; (() => { console.log(a); var a = 2; }) (); Var a = 1; (() => { console.log(a); let a = 2; }) (); // Output errorCopy the code

This is the process of yesterday’s headline interview

Vite www.jianshu.com/p/07960e4bb…