Please contact the author for reprint. The original link

Lol, it used to be a must-read article for 2020, but now that it’s 2021, it feels like these articles are still classics, so change the title. [Manual dog head]

preface

Before, I wrote an article about how to prepare for the alibaba front-end interview with one and a half years of experience, and I shared an interview review map with you. Many friends said that they hoped to provide a reference answer for each case.

Write the answer, one is limited energy, two is I think you still need to understand the conclusion will be better.

I have sorted out some fairly good articles for each case (including some good articles lying in my favorites), so that we can read the article and summarize the answer, so that we can understand more deeply.

Not all articles need to be read, hope is a role of a brick to attract jade, you can also exercise their ability to find effective information ~

Article sort before and after, random sort ~

Suggested collection of articles, combined with review map edible, the effect is better.

Complete review map full expansion is too big, can pay attention to the public number “front-end test” reply [interview] to obtain.

1. The JavaScript

1.1 Execution context/scope chain/closure

  • Understand the execution context and execution stack in JavaScript
  • JavaScript deep execution context stack
  • A JS interview questions triggered by the thinking
  • JavaScript deep lexical scope and dynamic scope
  • JavaScript deep scope chain
  • Discover the power of closures in JavaScript
  • The underlying mechanics of JavaScript closures
  • I never understood JavaScript closures until someone explained it to me like this…
  • Cracking the front-end interview (80% fail series) : Start with closures

1.2 this/call/apply/bind

  • JavaScript base method — this
  • JavaScript digs into this from the ECMAScript specification
  • Front end foundation advanced (seven) : all-round interpretation of this
  • The interviewer asks: JS this points to
  • JavaScript deep simulation of call and apply
  • Call apply bind
  • Interviewer: Can you simulate implementing JS call and apply methods
  • Call apply and bind
  • Interviewer: Can you simulate the JS bind method
  • The CALL and apply methods are not used to emulate the BIND method of ES5

1.3 Prototype/Inheritance

  • In-depth understanding of JavaScript prototypes
  • 【THE LAST TIME】 A thorough understanding of all JS prototype related knowledge points
  • Rediscover constructors, stereotypes, and stereotype chains
  • JavaScript goes from prototype to prototype chain
  • The most detailed JS prototype and prototype chain ultimate detail, no “could be”. (a)
  • The most detailed JS prototype and prototype chain ultimate detail, no “could be”. (2)
  • The most detailed JS prototype and prototype chain ultimate detail, no “could be”. (3)
  • JavaScript Engine basics: Prototyping optimization
  • Prototypes in JavaScript
  • JavaScript delves into the many ways to create objects, as well as the pros and cons
  • Detail JS prototype chain and inheritance
  • Get a deep understanding of JS objects and prototype chains from __proto__ and Prototype
  • Code reuse pattern
  • Inheritance in JavaScript: ES3, ES5 and ES6

1.4 Promise

  • Promises/A+ 100 lines of code
  • Hello JavaScript asynchronous programming —- Understand the beauty of JavaScript asynchrony
  • Promise won’t…? Look here!! The most accessible Promise ever!!
  • 1. Write A Promise that Promises/A+ Promises from scratch
  • Promise implementation principle (source code attached)
  • Async /await meets forEach
  • I Promise I will (10 questions)
  • Classic INTERVIEW Questions: The most detailed handwritten Promise tutorial ever
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

/ / equivalent to
async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(() = > {
      console.log('async1 end'); })}Copy the code

1.5 Shallow copy

  • JavaScript basics – deep and shallow copy
  • The ultimate quest for deep copy (90% of people don’t know)
  • Deep and shallow copy of JavaScript topics
  • Implementation of shallow copy and deep copy in javaScript
  • Deep dive into JavaScript deep copy
  • “JavaScript” walks you through deep copy, shallow copy, and circular references
  • How to implement a deep copy of the interview question

1.6 Event Mechanism /Event Loop

  • Tasks, microtasks, queues and schedules
  • How JavaScript works
  • Explore javaScript asynchrony and browser update rendering timing from the Event Loop specification
  • This time, thoroughly understand the JavaScript execution mechanism
  • 【THE LAST TIME】 Thoroughly understand JavaScript execution mechanics
  • Learn the Event Loop once (Once and for all)
  • What is the difference between browser and Node Event loops?
  • Understand JavaScript Event Loop in depth
  • The Node.js Event Loop, Timers, and process.nextTick()

This knowledge point is really heavy in understanding, must understand thoroughly

for (const macroTask of macroTaskQueue) {
  handleMacroTask();
  
  for (const microTask ofmicroTaskQueue) { handleMicroTask(microTask); }}Copy the code

1.7 Functional programming

  • Functional programming is north
  • Currization of JavaScript topics
  • Understanding Functional Programming in Javascript
  • What is Functional Programming?
  • A primer on simple JavaScript functional programming
  • You Should Learn Functional Programming
  • What is JavaScript functional programming
  • JavaScript- Functional programming

1.8 Service Worker/PWA

  • Service Worker: Introduction
  • How does JavaScript work: Service Worker lifecycle and usage scenarios
  • Caching and offline development with Service Worker and cacheStorage
  • PWA Lavas document
  • PWA Study Manual
  • Interviewer: Please implement a PWA

1.9 Web Worker

  • Talk about HTML5 Web Workers
  • Multithreading in JavaScript – Web Workers
  • JavaScript performance tool – Web Worker
  • A Simple Introduction to Web Workers in JavaScript
  • Speedy Introduction to Web Workers

1.10 Common Methods

There is too much… In general, the API must be familiar with…

  • Nearly 10,000 words ES6 grammar knowledge supplement
  • ES6, ES7, ES8 Features stew (ES6, ES7, ES8 Study Guide)
  • Unlock multiple JavaScript arrays to go heavy poses
  • Here’s how you can make better use of JavaScript arrays
  • 28 JavaScript Skills a qualified intermediate front-end engineer needs to master
  • ES6 features (updated ES2020)

2. The CSS

  • position – CSS: Cascading Style Sheets | MDN
  • position | CSS Tricks
  • Let’s get back to position:sticky
  • Flex layout in 30 minutes
  • Some in-depth understanding and application of CSS line height
  • A Complete Guide to Flexbox
  • Display: Flex Layout tutorial for myself
  • Think about front-end design draft and workflow from font size of netease and Taobao
  • Detail the classic REM and Rookie VW layouts on mobile
  • Mobile 1PX solution
  • How do Retina mobile devices achieve true 1px lines?
  • CSS retina hairline, the easy way.
  • Reflow & Repaint for browsers
  • Backflow and Redraw: Is CSS performance Slowing JavaScript down?
  • 1010 Ways to implement horizontal and vertical centralization of CSS
  • Dry! Various common layout implementations
  • CSS common layout modes
  • Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and Z-index
  • In-depth understanding of cascading context and cascading order in CSS
  • Sass vs. Less
  • Can you ditch CSS preprocessors in 2019?
  • A brief introduction to CSS Preprocessors (1) : Why use preprocessors?
  • What if the browser has a precision error when converting REM to PX?
  • Fighting the Space Between Inline Block Elements

3. Framework (mainly Vue)

3.1 MVVM

  • 50 lines of MVVM, feel the art of closures
  • Excuse me! Take ten minutes of your time and let MVVM principles return to you
  • Based on Vue to achieve a simple MVVM
  • Analysis of Vue implementation principle – how to achieve bidirectional binding MVVM

3.2 Life Cycle

  • Vue lifecycle source code analysis
  • Do you really understand $nextTick
  • React Source Code Analysis series – The art of managing the lifecycle

3.3 Data Binding

  • Vue is deeply responsive
  • Interviewer: How better is implementing a two-way binding Proxy than defineProperty?
  • Why did Vue3.0 no longer use defineProperty for data listening?

3.4 Status Management

  • Vuex, Flux, Redux, Redux-Saga, Dva, MobX
  • 10 lines of code to see the redux implementation
  • The realization principle of Mobx idea, and comparison with Redux
  • Build a state management system using native JavaScript

3.5 Component Communication

  • Vue 8 component communication modes, worth collecting!
  • Six ways to Communicate between Vue components (full version)
  • Communication between Vue components

3.6 Virtual DOM

  • Vue Virtual DOM source code analysis
  • Interviewer: How do you understand the virtual DOM?
  • Let the virtual DOM and dom-diff not stand in your way
  • Explore the past and present of Virtual DOM
  • What exactly is the virtual DOM? (Long article suggested collection)

3.7 the Diff

  • Explain the DIff algorithm of VUE
  • React 16 Diff Strategy (2)
  • React Diff – React Diff
  • Shallow in and shallow out diagram Dom Diff

3.8 Vue compute properties VS listen properties

  • Vue calculated attribute VS listening attribute source analysis
  • How does vue.js’ computed and Watch work?

3.9 the React Hooks

  • The React principle of Hooks
  • React hooks: not magic, just arrays
  • Deep dive: How do React hooks really work?
  • React Goes from Mixin to HOC to Hook
  • React Hooks 【 nearly 1W words 】+ project combat
  • React Hooks learn React Hooks — the biggest new feature of the year
  • React Hooks

3.10 the React Hoc/Vue mixins

  • Explore Vue higher-order components
  • React Advanced Components (HOC) Introduction guide
  • Learn more about React advanced components

3.11 What is the difference between Vue and React

Sum up for yourself in terms of ideas, ecology, syntax, data, communication, diff, etc.

4. Engineering

4.1 Webpack

  • Front-end engineers have to master the WebPack Loader
  • Webpack Loader from start to understand series: VUe-loader
  • Webpack Loader from start to understand series: style-loader
  • Master Webpack compilation process
  • Hand by hand teach you a simple Webpack
  • Take you into the webpack world, become the number one Webpack player.
  • 14 facts about webpack4, honestly
  • Hand by hand teach you a Webpack Loader
  • How does WebPack eliminate useless code through scope analysis
  • Do you really master loader? 10 q – loader
  • Webpack little book
  • Discuss webpack-dev-server and socket, HMR implementation
  • Improved compilation speed by 180% with webpack4
  • Code Splitting for Webpack
  • Easy to understand the webpack hot update principle
  • Easy to understand the webpack hot update principle
  • Reveal webpack plugin

4.2 the Babel

  • An article about what front-end development must know about Babel
  • Babel7 knowledge not to be missed
  • What front-end engineers need to know about Babel
  • Babel: Architecture and Principles + Practice
  • Babel: Plugins don’t produce Macros
  • Front end engineer ego. – That Babel thing
  • Front end and compilation principle – write a JS interpreter with JS

4.3 Template Engine

  • Write a simple JavaScript template engine
  • JavaScript template engine principles, a few lines of code
  • Vue template compilation principle
  • JavaScript template engine in just 20 lines
  • Understanding JavaScript Micro-Templating

4.4 Front-end Release

  • How do you develop and deploy front-end code in large companies?
  • Front-end Advancements: The evolution of front-end deployment

4.5 weex

  • Learn more about Weex
  • Weex principle overview
  • How does Weex work on iOS clients
  • Detail the Weex page rendering process
  • JSBridge introduction and implementation principle
  • JSBridge in mobile mixed development

4.6 Front-end Monitoring

  • 5 minutes for a front-end performance monitoring tool
  • Do the best front-end monitoring
  • GMTC best practices for front-end monitoring in the big front-end era
  • Front-end monitoring and front-end buried point design
  • Tencent CDC team: front-end abnormal monitoring solution

5. Performance optimization

5.1 Packaging Phase

  • Webpack Optimization – Double your build efficiency
  • Performance Optimization -Webpack build speed optimization
  • Webpack build speed and result optimization
  • Let your Webpack take off – Koala members backstage Webpack optimization practice
  • Webpack dllPlugin package volume and speed optimization
  • Improved compilation speed by 180% with webpack4
  • Webpack package optimization for speed
  • Multi-process parallel compression code
  • Tree-Shaking Performance Optimization Practices – Principles
  • Volume reduced by 80%! Unleash the true potential of Webpack tree-shaking
  • Your tree-shaking is not good for eggs
  • How does WebPack eliminate useless code through scope analysis
  • Speed up Webpack- Narrow file search
  • Brief introduction to scope hoisting in Webpack
  • Optimize Webpack output by Scope reactive
  • What is the scope reactive of Webpack?
  • Code Splitting for Webpack optimization
  • Webpack 4: Code Splitting and Chunks segmentation optimization
  • Code Splitting for Webpack
  • Better tree shaking with deep scope analysis
  • Front-End Performance Checklist 2020
  • 2019 Front-end Performance Optimization List — Part 1

5.2 Other Optimizations

  • Site performance optimization – from 12.67s to 1.06s story
  • Browser page resource loading process and optimization
  • Talk about long lists in front-end development
  • Talk about the realization of the front end virtual list
  • Briefly explain the implementation principle of virtual list
  • Browser IMG images native lazy loading= “lazy” practice guide
  • Preload page resources with preload
  • In-app Web startup acceleration Practice: Static resource preloading perspective
  • Tencent HTTPS performance optimization practice
  • Preload, Prefetch And Priorities in Chrome
  • Front-End Performance Checklist
  • Detailed guide to lazy loading of pictures & videos
  • Use Intersection Observer to lazily load images

Welcome to pay attention to the public account “front-end test”, reply [interview] to get a complete review map. The public usually share some practical or interesting things, find the beauty of the code. Focus on depth and best practices, hoping to create a high quality public account.

6. TypeScript

  • What is the TypeScript
  • Why static type checking in javascript
  • TypeScript Start: Base type
  • TypeScript interesting series – Interfaces
  • Advanced applications and best practices in TypeScript
  • Typescript advanced techniques
  • Probably the 50 React + TypeScript specs and experience you need
  • From the JavaScript to the TypeScript
  • TypeScript + Working on large projects
  • TypeScript – A way of thinking
  • How to write a D.ts file
  • Use and writing of TypeScript declaration files
  • TypeScript advancements: Write declaration files for third-party libraries
  • TypeScript generic
  • Refactoring Axios in TypeScript
  • Teach TypeScript Transformer plugins by hand

7. Network

7.1 HTTP

  • “99% of people GET the difference between GET and POST in HTTP wrong”?
  • HTTP protocol for front-end basics
  • It’s 9102 years ago and you’re asking the difference between GET and POST
  • | MDN HTTP response code
  • How to understand the status code of an HTTP response?
  • You know the 3XX status code
  • What do you know about browser caching
  • Browser cache
  • HTTP headers and keep-alive modes are explained in detail
  • HTTP keep-alive two or three things

7.2 the HTTPS/HTTP2

  • In-depth understanding of HOW HTTPS works
  • Nine questions from getting started to getting familiar with HTTPS
  • Talk about the HTTPS
  • Look at the picture to learn HTTPS
  • A minute to understand HTTPS
  • New features for decrypting HTTP/2 and HTTP/3
  • HTTP/2 Server Push
  • HTTP2 Basic concepts study notes

7.3 the DNS

  • DNS basics for front-end engineers
  • Front-end optimization: DNS pre-resolution improves page speed
  • The DNS

7.4 the TCP

  • TCP three handshakes and four breakups are understood in colloquial terms
  • You know TCP
  • TCP protocol details
  • Have you ever been asked about TCP/IP in an interview?
  • “Three handshakes, four waves.” Do you really understand?

7.5 the CDN

  • Learn about CDN in five minutes
  • Ramble: how to explain to girlfriend what is CDN?
  • On THE CDN, back to the source and other issues
  • What is CDN? What are the advantages of using CDN?

7.6 classic topic

  • What happens between entering the URL and presenting the page?
  • Typical front-end interview question: What happens from entering the URL to loading the page?

8. Design patterns

  • Common Javascript design patterns in detail
  • JavaScript Design pattern
  • Collating common design patterns in JavaScript
  • JavaScript common design pattern parsing
  • Dive into JavaScript design patterns, and you’ll have a theoretical basis for optimizing your code
  • Beauty of design patterns – front end

9. Data structures/algorithms

  • Linked Lists in JavaScript (ES6 code)
  • DS with JS — Linked Lists — II
  • LeetCode List
  • Algorithms and Data Structures in JS — Linked-List
  • Front-end written test & interview climbing pit series – algorithm
  • Comics: What is a red black tree?
  • Front-end data structures and algorithms that you should understand
  • Application of data structures and algorithms in the front-end domain (Starter)
  • Data structures and Algorithms in the field of front-end applications – Part 2
  • The beauty of JavaScript data structures and algorithms

Safety 10.

  • Front-end Security Series 1: How do I Prevent XSS attacks?
  • Front-end Security Series ii: How to Prevent CSRF Attacks?
  • Security
  • The front end also needs to understand JSONP security
  • What you need to know about Web security
  • Talk about your understanding of Web security
  • Web security is a must for programmers
  • The trusted front end road: code protection
  • How does the front end encrypt (not obfuscate) JavaScript?
  • Summary of common Web security attacks and defenses

11. Node

  • Build your NodeJS body of knowledge in one article
  • True -Node Multi-threaded
  • What is the difference between browser and Node Event loops?
  • Talk about the Node. Js RPC
  • Understanding Streams in Node.js
  • Understand Node.js processes and threads in depth
  • How to pass the ele. me Node.js interview
  • Bytedance Interviewer: Please implement a large file upload and resumable breakpoint

12. Projects/operations

Think of questions and play freely

13. Other

  • Simple browser rendering principles
  • How does front-end development solve cross-domain problems independently
  • Explore the front-end development pattern in Serverless
  • “NGW” front End New Technology arena: Inside Serverless SSR Technology
  • JavaScript and Unicode
  • Nine Cross-domain Implementation Principles (Full version)
  • 7 minutes to understand the throttling, anti-shaking and application scenarios of JS
  • How browsers work: Behind the scenes of the new Web browser
  • Different Types Of Observers Supported By Modern Browsers
  • Summary of browser same-origin policy and Ajax cross-domain methods

14. The interview

  • One and a half years of experience how to prepare for alibaba P6 front-end interview
  • Interview sharing: two years of work experience successful interview Ali P6 summary
  • Summarize the interview experience of 100 front-end interviews from the beginning of 2017 to the beginning of 2018 (with answers)
  • 2018 for the front end of the interview: through fine alignment (fine) | the nuggets technical essay
  • 20 JS principle questions help you interview a helping hand!
  • One and a half years of experience, Baidu, Youzan, Ali front-end interview summary
  • 22 high-frequency JavaScript handwritten interview questions and answers
  • Interview sharing: college half a year experience interview Ali front P6+ summary (with the interview real questions and answers)
  • Tips for an intermediate front-end interview for a girlfriend
  • Ali front-end siege lions wrote a front end test answer, please check
  • Bytedance Toutiao Front end via (4 rounds of technical surface + HR surface)
  • “Interview Questions” 20+Vue interview questions
  • A dozen more Webpack interview questions (constantly updated)
  • A series of 34 Vue interview questions for advanced front-end developers

15. The book list

I recommend some books worth reading, mostly ones THAT I’ve finished or turned over a few pages and thought were good but haven’t had time to read.

15.1 JavaScript

  • JavaScript advanced programming (not to mention elevation, fourth edition is available in English)
  • JavaScript Design pattern
  • JavaScript you don’t know
  • The essence of JavaScript
  • High-performance JavaScript
  • Learning TypeScript Chinese version
  • Understand ES6 in depth
  • Introduction to ES6 standards
  • In-depth understanding of JavaScript features

15.2 CSS

  • The Definitive Guide to CSS
  • Proficient in CSS advanced Web standards solutions
  • CSS world (zhang Xinxu teacher’s masterpiece, but it is suggested that you need to have some CSS practice to see)

15.3 the Node

  • Node. Js in actual combat
  • Awesome Node.js

15.4 Computer Fundamentals

  • Big talk about data structures
  • The illustration of HTTP
  • How does a computer/program run
  • Learn JavaScript data structures and algorithms

15.5 Engineering/Browser/Soft skills

  • Front-end engineering system design and practice
  • Webpack: Getting started, Advancing and Optimizing (learn all about Webpack)
  • WebKit technology insider (browser, good)
  • Refactoring: Improving the involvement of existing code
  • Code farmers turn
  • Programmer thinking training
  • Coding: The language hidden behind computer hardware and software
  • A design book for everyone to read
  • Pupil of technology: Alibaba technical written test results

conclusion

Above, I have sorted out some relevant articles on the Internet and selected articles lying in my favorites. Some articles have not been read yet, and still need to continue to learn

Give up the holiday fast fall island life (move sen), vomit blood collate this information, hope to be helpful to everyone ~

You can also scan the code to add my wechat, pull you into the exchange paddling chat group, have seen a good article/code will be sent in the group.