[Notes] Essential skills for front-end interviews-overview

---

The notes come from the course: https://coding.imooc.com/class/129.html

---

Although the course was a few years ago, most of the content can still be tested in interviews today.
Let’s take a look at some official publicity pictures:

1. Course introduction

1. Interview those things~~

• How does JD describe it?
• How to prepare for the project?
• How to write a resume?
• How to review knowledge?
• How to answer the question?
• How to communicate with the interviewer?
• How to leave HR impression?

2. Interview preparation~~

• JD description analysis
• Business analysis
• Technology stack preparation
• Self introduction

3. Simulate one side~~

• Interview skills
• Page layout class
• CSS box model
• DOM event class
• HTTP protocol class
• Prototype chain
• Object Oriented Class
• Communication
• Front-end security
• Front-end algorithm

4. Simulate two sides~~

• Interview skills
• Rendering mechanism class
• JS operating mechanism
• Page performance
• Error monitoring

5. Simulate three sides~~

• Interview skills
• Operational capacity
• team work
• Carrying ability

6. Simulate the end~~

• Interview skills
• Professional competitiveness
• career planning

How to look at the interview? What is an interview?

Answer: Interview is an examination activity to test and evaluate the competence of personnel. Specifically, the interview is a kind of carefully designed by the organizer, in a specific scenario, the examiner's face-to-face conversation and observation of the examinee is the main method, and the knowledge, ability, experience and other related qualities of the examinee are evaluated from the outside to the inside. Exam activities.

Interview skills

• Be well prepared
• Knowledge system
• Communicate concisely
• Be honest
• Be humble
• Be flexible

Two, interview preparation

• Job description (JD) analysis
• Business analysis or actual combat simulation
• Technology stack preparation
• Self introduction

(1) Job description (JD) analysis

Front-end jobs at JD Finance

List the main points according to the job description:

• PC + mobile
• hybrid
• Data mock
• Front-end component library architecture (difficulty: solid basic skills [native js, css], other component library source code, component library creation experience)
• Don’t be true to the number of years of work experience
• Pursue new technology hotspots (the latest popular open source project on github)
• Semantic HTML (use appropriate tags to do the right things)
• Master the most commonly used web standard: eslint. . .
• Review actual project experience:
  • What problems did you encounter in the actual process?
• Architecture analysis and design capabilities (cut off people who have only business capabilities for 1-2 years): directory structure, reusability, modular design, automated testing, performance monitoring, and exception capture...
• Hand-written code on site, easy to read and maintain (functions are singularized, and abstract if possible)
• User experience inspection to control the overall product and business, one point should reflect the gradual optimization of the project process
• Difference between grunt and gulp
• Pay attention to understanding, familiarity and proficiency. . .

Introduction to H5 Mobile App Development: Concepts-Ruan Yifeng's Blog

Elong Hotel Front-end Post

• Front-end animation: canvas (all commonly used api), svg, css3 (transition, flip...), js (animation frame, GPU acceleration)
• WeChat Mini Program, WeChat Official Account Development, WeChat Pay
• Usability and accessibility: front-end performance monitoring (js instant running error, resource loading error)

(2) Business analysis and actual combat simulation

JD Finance

• Page layout analysis
• Common component analysis
• Page special effects analysis (css3, three.js...)
• Through the f12 debugging page, look at Sources: head to find:
  • Which browsers need to be compatible:
    • <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    • <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • Dual-core browser webkitfirst:<meta name="renderer" content="webkit">
  • Website performance improvement:
    • DNS pre-resolution:
      • <link rel="dns-prefetch" href="//static.360buyimg.com">
      • <link rel="dns-prefetch" href="//img30.360buyimg.com">
  • Look at Application to find:
    • Local Storage、Session Storage使用
    • Font files, custom fonts, font icons

ELong Travel

• Common control writing: carousel diagram, multi-level navigation bar, date control
  

You can think about how this effect is achieved.
Yilong uses js to calculate the width of the image.
You can try to use pure CSS to achieve

• Old project, not refactored:<html xmlns="http://www.w3.org/1999/xhtml">
• The script tag is written in the head, but async is used to achieve asynchronous (how many ways are there for asynchronous loading of external js? Difference?)
• Require.js module loading mechanism (there are several traditional modular processing mechanisms? How does the existing framework and ES6 deal with modularization?), how to configure, and the difference with cds

Modular mechanism

• jquery template engine (handle bar, eds engine, underscore templete)
• jquery event delegation, event proxy

(3) Technical stack preparation

• jQuery source code learning: core architecture, event delegation, plug-in mechanism
• Vue/React/Angular source code learning
• node.js
• Front-end engineering: environment construction, pre-compilation, construction, packaging
• sass、less
• gulp、grunt
• npm (common commands)
• webpack

(4) Self-introduction

1. Resume

• Basic information: name, age, mobile phone, email, hometown
• Education: PhD, master, undergraduate, junior college
• Work experience: time, company, position, responsibilities, technology stack, performance
• Open source project: Github and explanation
  example (the resume content involves privacy, so I won’t post it here):
  
  

  • Redundant content: course, essay title, middle school, off-topic, self-evaluation
    
    

  • node.js: business development, online, error tracking/monitoring

2. Self-statement

• Grasp the communication direction
  of the interview

  • Project: Project function (combination point with this position, role, and achievements)
  • Person in charge (project size, number of team members, specific roles [project/technology], what achievements have been made, teamwork, technical cooperation, technical difficulties)

• Open-minded, confident and moderate play

• Examples:

  • Talk about interests freely, show examples ingeniously, and discuss questions at the right time (know how to move freely, pay attention to occasions, never give up)
  • The rhythm should be appropriate, and you should not be clever (be patient, think more, be pragmatic, and humble when faced with simple questions or enumerated types of questions)

• Actual combat:

  • The direction must be right, the process must be detailed
  • Have courage and peace of mind
  • If you really haven’t done anything before, you should be able to think out on the spot, say a 123, don’t give up on the spot, and try to face the unknown.
  • To be active, to be rewarding