Interview experience

1. Try to throw some questions to the interviewer in the process of answering, and let him ask questions along your train of thought, so as to avoid encountering too much strange knowledge
2. Don't panic when you encounter a problem that won't work. The direct explanation is not very clear, but you can guess the general idea
3. Every time, carefully summarize, check and fill in deficiencies
4. Algorithm problems still need to strengthen practice
5. Try to show that you are eager to learn basic knowledge when introducing yourself, for example, like reading deeply and so on
6. Don't be nervous. Just forget to treat the interviewer as a good friend to share knowledge

Interview questions

1. self-introduction
   Their basic situation, how to learn, personality, social, etc
2. Project function introduction
3. Principle of mobile terminal adaptation with rem
4. 1px shows how to solve different problems on apple and Android (it will be thicker on Android)
5. Has the project been debugged on the real machine
6. How to process and visualize oil data in the project
7. What is the difference between SPA and traditional multi page
8. How to solve the problem of excessive amount of data requested for the first time caused by SPA
9. Front end performance optimization
10. Components load on demand
11. What optimization has been done for the project (keep alive, vue custom plug-in + axios interceptor)
12. Picture lazy loading principle
13. The workflow of Vue cli, from typing out commands to outputting results, what has Vue cli done, how to start the project, how to complete the construction, and the plug-in and loader of webpack
14. Understanding of HTTP
15. What parts does the request message consist of
16. Status code (403 -- > export cross domain)
17. Reasons for cross domain and how to solve cross domain (jsonp,cors,webpack proxy)
18. Online algorithm problem

 /* Assemble the input array into a tree data structure, and pay attention to the handling of boundary outliers. The functions are as follows:
// Input 1
transform([
  { id: 1, name: 'i1' },
  { id: 2, name: 'i2', parentId: 1 },
  { id: 4, name: 'i4', parentId: 3 },
  { id: 3, name: 'i3', parentId: 2 },
]);

// Output 1
 {
    "id": 1,
    "name": "i1",
    "children": [
        {
            "id": 2,
            "name": "i2",
            "parentId": 1,
            "children": [
                {
                    "id": 3,
                    "name": "i3",
                    "parentId": 2,
                    "children": [
                        {
                            "id": 4,
                            "name": "i4",
                            "parentId": 3,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

// Input 2
transform([
  { id: 1, name: 'i1' },
  { id: 2, name: 'i2', parentId: 1 },
  { id: 4, name: 'i4', parentId: 3 },
  { id: 3, name: 'i3', parentId: 2 },
  { id: 11, name: 'i11', parentId: 'UFO' },
]);

// Output 2
{
    "id": 1,
    "name": "i1",
    "children": [
        {
            "id": 2,
            "name": "i2",
            "parentId": 1,
            "children": [
                {
                    "id": 3,
                    "name": "i3",
                    "parentId": 2,
                    "children": [
                        {
                            "id": 4,
                            "name": "i4",
                            "parentId": 3,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

// Input 3
transform([
  { id: 1, name: 'i1', parentId: 4 },
  { id: 2, name: 'i2', parentId: 1 },
  { id: 3, name: 'i3', parentId: 2 },
  { id: 4, name: 'i4', parentId: 3 },
]);

// Output 3
/**
{
    "id": 1,
    "name": "i1",
    "children": [
        {
            "id": 2,
            "name": "i2",
            "parentId": 1,
            "children": [
                {
                    "id": 3,
                    "name": "i3",
                    "parentId": 2,
                    "children": [
                        {
                            "id": 4,
                            "name": "i4",
                            "parentId": 3,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}
 */

        let cnt = 1
        function transform(args, ID) {
            //Find the first node
            console.log(ID);
            let list = args.filter((item) => {
                return item['parentId'] == ID
            })
            console.log(list);
            list.forEach((item) => {
                item['children'] = transform(args, cnt++)
            })
            return list
        }

        let a = transform([
            { id: 1, name: 'i1' },
            { id: 2, name: 'i2', parentId: 1 },
            { id: 4, name: 'i4', parentId: 3 },
            { id: 3, name: 'i3', parentId: 2 },
        ], undefined);
        console.log(a);
    </script>

1. Why consider the front direction
2. The most impressive front-end knowledge points in recent books
3. Is there anything you want to ask me? (what are Alibaba cloud's requirements for front-end talents, and what are the differences between front-end work and learning - the interviewer's answer: it is required to have a good foundation of data structure and knowledge, do you need to do some performance optimization at work, or do you need to lay a good foundation, etc.)