It must be all the ones I’ve seen and thought were good. It’s just roses.

JS based

  • Hu Yu big blog – JavaScript in-depth series, JavaScript special series, ES6 series belong to the more systematic JS advanced blog, I suggest close reading.

  • Interviewer: Tell me about the execution context

This series is a reconstruction of hu Yu greatly article, more inclined to interview, you can have a look.

  • This time, thoroughly understand the JavaScript execution mechanism

There are many articles related to Event Loop, but this one is the best one among the related translations.

  • Finish this 48 questions thoroughly understand JS inheritance (1.7W words with a touch of finishing – back to nature)
  • Js deep and shallow copy
  • The function is currified
  • Iterators and generators
# js
  • What are the differences and connections between function declarations and function expressions, and how should they be selected and used?
# Variable promotion, closures, etc
  • Let in-depth understanding – Is there variable promotion in LET?

ES6 related

  • The interview questions about Promise in ES6 are quite comprehensive, but the answers to some questions may not be accurate.
  • Classic INTERVIEW Questions: The most detailed handwritten Promise tutorial ever

The regular tutorial for handwritten Promise is worth reading a few more times.

  • I Promise I will (10 questions)

Some promise details are recommended to be eaten together with the event loop micro task and macro task.

  • Because the promise.prototype. then and promise.prototype. catch methods return a Promise object, they can be called chained.

  • The difference between an arrow function and a normal function

  • ESM CommonJs

# Symbol and Polyfill
  • A shallow interpretation of ES6 Symbol
  • Symbol Polyfill Pit Filling Tour

Babel does not come with symbol polyfill by default. It needs to introduce third-party libraries such as core.js.

Vue

Reactive, bidirectional binding
  • 50 lines of MVVM, feel the art of closures

In a simple demo, feel the process of Object. DefineProperty hijacking get/set and registering observers for variables to implement reactive processes. You can use Proxy to replace Object.defineProperty for further learning.

  • Excuse me! Take ten minutes of your time and let MVVM principles return to you

The principle of interpretation is closer to vUE source code, inspiring how to implement computed and Mounted.

  • Interviewer: How better is implementing a two-way binding Proxy than defineProperty?
  • Why did Vue3.0 no longer use defineProperty for data listening?
    1. Object.defineproperty is not incapable of monitoring array subscript changes. The inability to automatically update reactive data via array indexes in Vue2. X is due to the design of Vue itself, not to defineProperty.
    2. The essential difference between Object.defineProperty and Proxy is that defineProperty can only hijack attributes, so it needs recursive traversal and manual Observe to add attributes.
    3. Proxy as a new standard, browser manufacturers will continue to optimize it, but its compatibility is also a problem, and there is no complete polyfill solution at present.
  • In-depth analysis of Vue source code – reveal Vue event mechanism
# Lifecycle
  • Vue lifecycle source code analysis
  • Do you really understand $nextTick
# Data state – This part of each machine can be understood, need to find time to understand
  • Vuex, Flux, Redux, Redux-Saga, Dva, MobX

The overall writing of the article is very good, from multiple angles in the comparison of now popular data management mechanism, but only more familiar with vUE friends are not too friendly, do understanding items. Focus on the implementation principle and comparison.

  • Build a state management system using native JavaScript
  • Vuex source code analysis

Was asked a vuex source how to inject the problem, a little helpless;

# Component communication
  • Vue 8 component communication modes, worth collecting!
# Virtual DOM and diff algorithms
  • Interviewer: How do you understand the virtual DOM?
  • Let the virtual DOM and dom-diff not stand in your way
  • What exactly is the virtual DOM? (Long article suggested collection)

The first two papers mainly focus on the understanding of a diff algorithm; The third one is more academic and more comprehensive. Every time I look at the diff algorithm, I get confused. TODO. In general, diff algorithms are used separately to compare the evolution process of React and Vue. Virutal-dom is easier to understand.

# computed and watch
  • How does vue.js’ computed and Watch work?

Lesson learned: The computed property is essentially a computed watch, and the listening property is essentially a user watch. In fact, both of them are implementations of vUE’s listeners. However, computed is mainly used to process synchronous data, while watch is mainly used to observe the change of a value to complete an expensive and complex business logic. Use computed first when you can, avoiding the awkward situation of calling Watch multiple times when multiple data affects one of them.

CSS based

In line with CSS is hard bridge hard horse kung fu, or more practice can be achieved.

  • If you have a sticky footer, consider creating a sticky footer.
  • How do Retina mobile devices achieve true 1px lines?

The article is a bit old, and I have seen that M. Taaobao is not going to modify viewport to achieve. Kind of a tip

  • Backflow and Redraw: Is CSS performance Slowing JavaScript down?

Front-end engineering

# Webpack
  • Webpack source code interpretation: clarify the main compilation process

Briefly summarize the basic flow of webpack compilation module:

  1. callwebpackThe function to receiveconfigConfigure information and initializecompilerIn the meantimeapplyAll plug-ins built into WebPack;
  2. callcompiler.runEnter the module compilation stage;
  3. Each new compilation instantiates onecompilationObject, record the basic information of the compilation;
  4. Enter themakePhase, or triggercompilation.hooks.makeThe hook,entryFor entry: a. Call appropriateloaderPreprocess the source code of the module and convert it to the standard JS module; B. Invoke a third-party plug-inacornAnalyze the standard JS module and collect module dependencies. At the same time, it will continue to recurse for each dependency, collecting dependency information for the dependency, and recurse again and again. You end up with a dependency tree;
  5. The last callcompilation.sealRender module, integrate various dependencies, finally output one or more chunks;

The author’s compilation process and the subsequent reading of the article gave me a new understanding of Webpack, and to learn webpack source code, benefited a lot.

# HMR
  • Easy to understand the webpack hot update principle
  • Webpack HMR principle analysis
  • Question 70: Introduce the principle of webpack hot update, how to update the page without refreshing the browser
# babel
  • How does Babel parse strings into AST, and how does it perform lexical/syntactic parsing
  • Babel 7 Simple upgrade guide

Learn what improvements Babel7 has over Babel6;

Node

  • Nodejs advanced: Answer some questions about Cluster module

How does a node Cluster enable multiple processes? Can a port be listened on by multiple processes? can

Operating system and network

  • Front-end entry operating system knowledge, this one is enough!

This one I did not finish reading, looking for time to come back to fill, I hope not hit the face;

  • What is a process? What is a thread? The relationship between the two?

Simple and easy to remember

  • Single threaded JavaScript
  • Event Loop Interview questions
  • Look at the browser rendering process and performance optimization from 8 interview questions

Process, thread => to the browser multi-process, multi-thread => to the js execution of the single thread, which involves event loop, render tree, rendering process will be involved in the redraw and reflux. Can talk to understand is OK;

  • Cookie-related Issues

When a cross-domain XHR request occurs, cookies are not automatically added to the request header by default, even if the Domain name and Path of the request URL both satisfy the Domain and Path of the cookie.

  • Pros and cons of turning images into Base64
  • Related Service Worker
  • Browser cache
  • Browser cache – 2 Learn the difference between Memory cache and Disk cache
  • Four Cache mechanisms – Service Worker/Memory Cache/Disk Cache/Push Cache
  • How many HTTP requests can be sent over a TCP connection

Review the map

  • 2020 Front-end interview review required reading articles

This article summarizes the front review ideas in detail and presents them in the form of a map.

  • An advanced guide to the beginner intermediate front end
  • 20000 words | front-end based gleanings 90 q

Face the

  • Bytedance Interviewer: Please implement a large file upload and resumable breakpoint

– Upload a large file and slice it. – Upload a large file and slice it. -Write a request based on XMLHttpRequest; – promise.all concurrency limit; 23 lines of code to implement a fetch function with a limit on the number of concurrent requests; To be fair, the second link in the comments is simpler; – Use Node to receive multiple files for concatenation; – How to realize breakpoint resume, pause, progress bar, second pass, etc., is a very comprehensive interview questions;

  • Implement cacheRequest() to make only one ajax request for the same resource

The process of considering how to handle a cache during pending is worth learning;

  • The principle of JSBridge