Art meow 2 years of front end of the interview journey (bytes to beat, YY, tiger tooth, BIGO) | the nuggets technical essay

This paper will start with my personal background, and then talk about my interview experience in Bytedance, Tiger tooth, YY and BIGO. Finally, I will talk about my learning experience in computer fundamentals, algorithms and data structures, JavaScript and other aspects, as well as my personal learning experience.

This article is not easy to organize, welcome friends to like, comment jokes ~

The status quo

Personal background

From 2016 to 2017, I worked for netease Interactive Entertainment in the post stage art of game brand promotion, column packaging of CC voice (now CC e-sports) and assistant of on-site guidance. Due to some reasons, I gave up the art industry.

Therefore, AFTER graduation in 2017, I prepared for six months to take the postgraduate computer entrance exam. At that time, it was really painful. I learned data structure, computer network, composition principle and operating system from scratch, as well as mathematics.

Live up to expectations, failed the exam out to find a job.

From that background, my experience could be super subtraction, being pressed to the ground and rubbed against.

The interview situation

• Bytedance offer
• Canine teeth offer
• YY offer
• BIGO offer call

It seems that the basic interview for me have passed, the rest of the internal push to cast a resume basic even interview opportunities are not……

Because home in Guangzhou, or want to develop in Guangzhou so Shenzhen post did not go to the face.

And these interviews all feel a bit counterintuitive, often black question marks.

Metal surface by

Bytes to beat

1 face

• Understanding tree-shaking

  • Although it is enabled by default in production mode, all modules are packaged as IIFE due to Babel compilation
  • IIFE has side effects that cannot be shaken off by tree-shaking
  • Need to configure the{ module: false } 和 sideEffects: false
  • Shaking is different in rollup and Webpack. Take a Class as an example

• Common.js is different from es6 Module

  • CommonJs is run at load time, esModule is run at compile time
  • CommonJs prints a shallow copy of the value, esModule prints a reference to the value
  • Webpack_require in Webpack treats them differently
  • An on-demand loading implementation of WebPack

• One of the scaffolds you wrote is a template for the plot of rapid iteration in sales. Can you tell me about it

  • Introduction project background: many pages, fast iteration, chaotic management, and webPack configuration is different
  • To use it, just create a new file in page, then put the main and some configuration files in it, and type:NPM run page = [folder name] env = [environment] method = [dev | build]
  • How does Node implement the merge policy with Webpack

• Image editor to do performance optimization

  • Image changes by matrix changes, remove html2Canva
  • Replace the traditional Cramer’s rule by extracting the ternary equation solution formula in matrix. js
  • Custom stack, through the inverse formula of reversible matrix, brightness, saturation, chromatic aberration, make the return effect, instead of each time the result is stored in Base64, eliminate memory consumption
  • Webwork’s trials and data tests prove that it is slower in the case of less computation
  • Window.performance. Mark buried point, and 1px GIF upload key step time optimization

• Can you explain the cache strategy

  • Strong cache cache-Control, Express
  • Negotiation cache 304, ETag, modify

• 301, 302, 307, 308

OK, finish the above problem and start to do the problem:

• 1. Add two numbers: In 5 minutes

• Shuffle algorithm: write in 5 minutes

❝

Here can not find exactly the same topic, interested partners can baidu /Google search

❞

After finishing the above two questions:

Interviewer: Emm…. Do another question before the interview time is over!

• 215. The KTH largest element in an array

• I put a big top pile on it, and I figured it out pretty quickly
• Interviewer: EmM… There’s still a little time. Do you have any other ideas
• And then I wrote a quick solution, and when I was done the interviewer said let’s write merge sort, so I changed it

Well, the interview is over, but this is where the nightmare begins. Because the algorithm questions do too fast, I do not know what the interviewer wrote my evaluation, the interview behind the basic into a variety of questions.

2 the surface

• Image editor performance Optimization (above)
• Redux-saga vs. Mobx
  • Saga still follows the MVC model, mobx is closer to the MVVM model
  • Why is mobx more appropriate for an introduction project
  • Since it is the electron project related to live broadcasting, there are audio and video streams and some low-level OS operations. Can we take the microphone view switch’s processing of audio streams as an example to create a mapping layer between some operations of OS and data, just as there is a mapping relationship between data and view? Then the data flow is view -> trigger action -> data change -> change view -> perform OS operation
  • Then I talked about how MOBx works, such as data hijacking, publishing and subscribing.
• HTTPS
  • A brief description of asymmetric encryption handshake process
  • Certificate signing process and how to prevent string modification
• Have you seen it across domains
  • Webpack-dev-server principle and how to handle cross-domain
  • Nginx forward
  • Simple and non-simple requests in CROS
  • Options initiated under a non-simple request
• Localstorage, sessionStorage and cookies
• How do I handle cookies when they cross domains

And then we’re going to do it:

• 70. Climb the stairs

(Another 5 minutes)

• Interviewer: Let’s change the title to 746. Use the stairs at minimum cost.

• Me: Revise the previous answer and make it quickly.
• Interviewer: There’s still a little time. Let’s do the slightly harder 72. Edit distance

I: this problem unexpectedly say a little difficult?? Fortunately done before, that method is really not ordinary people want to come out. And then we did it again.

The interview is over, and it feels like it’s all about questions.

3 surface

• To introduce myself
• Introduce the project
• Electron distinguishes between main processes, render processes and their means of communication
  • IpcMain, ipcRenderer
  • localStorage
• WebView is different from Iframe
  • The interaction between the webView application and the embedded content is all asynchronous
  • The interaction between the application and the embedded content is all asynchronous
• What optimizations have you made for your PC application
  • Record the screen optimization
  • Large file upload optimization
  • Redux-saga was rewritten with Mobx to introduce the OS layer concept
  • Troubleshoot the electron-update failure
• Large file upload
  • File section
  • A separate web-work thread computes the hash value of the file
  • Because the domain name of the upload interface is the same as that of other interfaces, the number of concurrent requests must be processed
  • The progress bar
  • Skip second transfer for files that have been transmitted, and retry for failure
  • Then there are some areas where I feel I can improve
  • To take advantage of Electron’s ability to use Node, file slicing, hash computations, and uploads can all be done using Node and run in a different process. Since uploads are done using node modules, there is no limit of 6 connections under the same domain. Why didn’t I do it? Because I was writing something more urgent…
• Record the screen optimization
  • You need to record the entire screen
  • Performance differences such as CPU and memory consumption were compared between FFmpeg and mediaSource
  • Compare mediaSource’s various encoding performance differences vp8, DAala, H264, OPUS and MPEG
  • Initially, the video stream was written in a variable, which caused a significant performance problem
  • The solution is to write the stream as node’s file to the hard disk every 10 seconds, and then, at the end of recording, compose a large file with FFmpeg each 10 seconds of small video clips

Began to do the problem, did a relatively cold topic, look at the concept I have to understand a few minutes.

The interviewer asked me how to optimize it again. I meant to change it to skip table, space to time, but actually the correct answer is binary search…

4 surface

All around is more relaxed, asked a project to begin to do a problem.

112. Sum of paths

And then on this basis, change into

• The path does not need to start at the root node or end at the leaf node

Although the question is not difficult, I have also done the processing of pruning, but the interviewer said that it can also be optimized, how to reduce the double calculation. I know I need a map to store the intermediate results, but I can’t figure out how to design the map key. After thinking for a long time, the interview is over.

Tiger tooth

1 face

• HTTP get and POST are different
• Caching strategies
• HTTPS handshake process
• The characteristics of http2
  • Binary transmission
  • Header compression, incidentally blowing Huffman coding
  • multiplexing
  • Server push
• Weak-set and weak-map are different from Set and Map
• MVVM model is different from MVC model
• How to implement an MVVM model
  • Data hijacking + publish and subscribe
• Why did you refactor Saga with Mobx? Tell me the difference between the two
  • Briefly explained how mobx works
• Talk about VNode
  • A VNode is a mapping between data and views
  • The diff algorithms of Vue and React are similar and different. In the same way, they use the same layer for comparison. In the different way, Vue uses the double pointer for comparison, while React uses the key set level for comparison
• Talk about webpack performance tuning
  • Tree-shaking is not shaking
  • Packaging speed: cache-loader, DLL, multithreading
• Have written a plugin
  • No, but I understood the principle of compiler hooks, and explained what kind of compiler hooks there are
• Are you familiar with the HMR implementation of Webpack-dev-server
• Hand write anti-shake and throttling

2 the surface

• You have done live broadcasting, can you introduce webRTC or use live broadcasting plan now
  • Although I use the SDK of Sonnet, I have probably learned about the live broadcast scheme of general live broadcast
  • Talked about the basic introduction of NAT, STUN, RTP, SDP
  • Then two signaling servers, one is the socket used by the acoustic network to control the incoming media flow into the room, and the other is the socket for business logic
• Do you know anything about coding? Can you explain the bit rate
• I have known about P frame, I frame and B frame
  • I frame: key frame. Can be individually decoded into a complete image.
  • P frame: reference frame. Decoding depends on previously decoded data
  • B frame: Before and after reference frames THE P frame following B frame is decoded prior to it before B frame can be decoded
• RGB is different from YUV
• I’ve learned about live streaming protocols
  • HTTPFLV Transmission mode: HTTP stream, format: FLV, continuous stream
  • RTMP transmission mode: TCP stream, format: FLV, continuous stream
  • HLS transmission mode: HTTP, format: TS file, compatible with mobile terminal but incompatible with PC
  • Dash, which is not very common, is only known as HTTP
• FLV and MP4
  • They all belong to the container. The difference is the header information
  • FLV is a streaming file that can be uploaded at the same time, without subcontracting by index, whereas MP4 relies on index tables
• MediaSource specification
  • I don’t know much about it, but I’m just saying how does video switch work at different bit rates

Then I asked for something else, but I didn’t know it very well. I felt that this round of interview was very strange. Basically no front end, but audio and video processing asked a lot.

3 surface

• WebSocket vs. Ajax
• Do you know about XSS and CSRF and how to prevent it
• Have learned about React fiber
  • Why react has time slices but Vue doesn’t
• Can you briefly introduce the React implementation process
  1. JSX is converted to the Render function via Babel
  2. create update
  3. enqueueUpdate
  4. ScheduleWork Updates the expiration time
  5. requestWork
  6. WorkLoop circulation
     • performUnitOfWork
     • beginWork
     • completeUnitOfWork
  7. Effect List
  8. commit
• Can you introduce hook
  • Compared with hoc, hook has higher reusability
  • UseState, useEffect, and useRef
  • Optimize usecallBack and useMemo
• Situational problem, do a live barrage
  • Subtitle speed, size
  • RequestAnimationFarme is different from setTimeout
  • Barrage throttling problem
  • Socket and polling advantages and disadvantages, barrage pool design
  • How to avoid bullet barrage collision (this I did not answer well, later search there is an airport algorithm)

4 surface

This side is about life. It’s a little bit more distant. I talked about the general monetization of the product, how to recruit, retain, activate, convert and monetize. I used to do things in netease CC e-sports. The outlook of esports in China.

Bigo

1 face

It is in the meeting room because it is in the year before

• To introduce myself
• Introduce the project
• Your project used linear algebra, and I wanted to see if you remember the inverse of invertible matrices.
  • Inverse matrix method for invertible matrix of spot board
• Let’s find three equations of three dimensions
  • The spot board uses Cramer’s rule to solve equations x,y, and z
  • Then write down the optimization equation in matrix.js (although I don’t know how it works)
• How do I use as little space as possible to take the transpose of a matrix
  • It’s essentially 867 transpose

And then there’s a whiteboard

• Can you talk a little bit about Euler angles and rotation matrices, and how they translate to each other
  • Me:?? However, before the project has AR integration, used when calling the interface, so I barely talked about a little, but I will not write the conversion formula

Do above, I am very confused force, I am not face the wrong post.

Then there are situational problems, designing the system on the spot.

The scenarios are as follows:

• This is a multiplayer online collaborative page
• Mainly do is video identification system, used to train AR with the model
• And one video frame can have multiple identifiers at the same time

Emm… Then I guess I know why you were asking me so many math questions

The difficulties of this project are as follows

• Video time frame determination
  • Because there will be I, P and B frames as interference in the video, a video of 25 frames, but in fact, not every second is 25 frames, the number of frames per second is dynamic
  • However, the video information corresponds to the local DTS or decoding timestamp, which tells the player when to decode the data of this frame, and the PTS display timestamp, which tells the player when to display the data of this frame. We just need to get the PTS
• Canvas optimization during painting
  • Canvas should be divided into two layers, one is the unselected graph and the other is the selected graph. When the graph is selected, it will be promoted to the canvas in the editing area
  • For irregular figures, the selection method uses the ray method of thinking, into the formula can know whether the figure is selected
• How do they inform each other
  • Use a signaling server and connect with a Websocket
• If more than two people are working on a tag at the same time, how should this conflict be handled
  • In fact, this problem I encountered in the online whiteboard, this kind of problem can be compared to the state synchronization and frame synchronization in the game.

Face the situation, do the algorithm, the topic is also very strange.

• Problem one: shuffle algorithm. This one works

• If there is an even number of integers, divide the two sides of the integers, and then sum each bit of each array on each side. When the sum of the two sides is relative to each other, it is considered that this group of numbers meets the requirements. A bit dizzy

• Example: 287962 can be divided into 287962, where 2 + 8 + 7 = 9 + 6 + 2, then it meets the requirements.

❝

I thought about it for a long time but I couldn’t think of anything.

❞

2 the surface

Maybe one is difficult and the other is casual:

• Browser Cache policy
• Cross domain processing
• HTTPS to shake hands
• Http2 features
• TCP three-way handshake
• From URL to page display
• Differences between Redux and Mobx
• tree-shaking
• Project performance optimization
• BEM specification of the CSS
• Design a toast on the spot
• LRU implementation
• DNS path selection algorithm used

3 surface

It was a broad conversation. It wasn’t to the point

YY

1 face

• MVVM and MVC models are different
• The realization of the MVVM
• Understand the fiber?
  • The answer comes before
• Understand the hook?
  • The answer comes before
• Why does react click on an event and place it in setTimeout get an event object
  • React event composition
• SetState is asynchronous or synchronous
  • They’re all essentially synchronous, but the timing of changing the state is different
  • One is whether to batch update variables
  • SetTimeout will change it in real time
• Have you ever used Node? Talk about flow
• Koa2 is different from Express
  • Express is large and full of routing, etc. Koa2 is small and fine through middleware
  • Koa2 can use async await, Express cannot
  • Koa2 has the Onion model and CTX context, express does not
• Talk about the Onion model
• Compose ([fn1,fn2,fn3..]) ) into fn3 (fn2 (fn1 ()))
  • This is essentially middleware implementation logic, before looking at Koa2 a bit of source code, but also good to remember
• Difference between KOA2 and egg
  • Egg is a wrapper on KOA2
  • Egg has controller, Service, router
  • The file directory structure is specified
• I’ve been through the authentication process
  • Seesion/cookie
  • Token
  • OAuth
  • SSO
  • Fortunately, the project has been involved. Although IT was not written by me with Node, it was written by the back end, but AT that time, I was curious to ask, and checked some information, and reluctantly answered

2 the surface

• Browser Cache policy
• Cross domain processing
• HTTPS to shake hands
• XSS and CSRF attacks
• Typscript? Tell me about it
  • interface
  • The enumeration
  • The generic
• Webpack optimization
• tree-shaking
• HMR implementation principle
• Does Nginx know
  • How to configure/forward cross-domain
  • Cache Policy Configuration
  • Address redirection configuration
• Scene problem, make a page snow
  • Write a particle Class containing the particle, size, image, and distance traveled per second
  • A particle controller Class, containing the number of particles, distribution, particle falling speed
  • Draw the animation with requestAnimationFrame
  • Enable hardware GPU acceleration with CSS3

3 surface

The three sides are also very wide, there is basically no front.

The learning process

In fact, I did not prepare for the interview specially. In fact, I made my own learning plan in 2019 and insisted on learning every day. See Lien’s Daily Study

The following will be divided into:

1. Computer Fundamentals
2. Front-end expertise
3. The learning

The order has priority points, the reason to put the computer foundation in the first place, because after these interviews found that the computer foundation investigation is more than the front end, even some companies interview do not ask me the front end.

Computer Fundamentals

There are a lot of geektime classes, but I don’t advertise them. Recommend because I read after really feel speak of good, good of course is easy to let beginner understand and start, depth or go to see special authority book do common.

Data structures and algorithms

Learning method is not to brush at the beginning, to learn some entry.

1. There are many ways to get started. Read a book, watch a video, and tap.
2. Then you can look at other people’s interviews and some classic topics summarized by Leetcode, according to the classification of the start of the brush.
3. Do each question at least 3 times, the first time encounter can not think for a long time, 8 minutes without thinking to see the answer. Because everyone at the beginning is not what idea, only do a lot of summary will slowly have ideas. Do it again a week later. Do it a third time before you jump ship.
4. The sequence of calculation questions is algorithm interview pass 40 lecture, sword point offer, Bytedance column, self-summarized high-frequency questions.

I brush the topic is not much, on 100, and others compared to the far.

But I do a wide range of topics, and are summed up by their own high-frequency to do, the probability of hitting a relatively large.

Basic data structure

• An array of
• Queue and stack
• The list
• Binary tree
• hash
• The heap

Common algorithms

• DFS
• BFS
• Sliding window (dual pointer)
• back
• Dynamic programming
• Greedy (in fact, dynamic programming can solve)
• The sorting
• Binary search

References:

• JavaScript version of the data structure and algorithm, this suitable for new learning, basic entry.
• Geektime – The beauty of data structures and algorithms on the basis of this will be better, inside github has JS implementation, diy knock again
• Talk 40 This course is really good, it is full of high-frequency classic questions.
• Leetcode Bytedance column
• Leetcode sword refers to the offer

blog:

• Awesome-coding-js Algorithm and data structure implemented in JavaScript
• Labuladong is a really good dynamic specification
• YaxeZhang/ Just-code is a training algorithm for job interviews, currently including Bytedance interview questions, LeetCode and sword pointing offer

network

The network is the most important of the front-end, and also the most frequent range of interviews. A lot of people are at the beginning to see computer network, TCP/IP protocol, these books entry, is not bad to say, but for novice entry threshold may be too high, did not see a few pages to give up. You can start by watching the video and catching the bag with the author.

Viewing order:

• The geek time-perspective HTTP protocol is the most frequently encountered and relatively independent front-end, so you can learn this first and then the other layers.
• The author uses vivid examples to explain the functions of the various layers of the network and the relationships between them, forming an overall framework for further study of details
• Geek time – Web protocol details and packet capture actual combat. This course is from the top to the bottom, explaining the details of each layer. Because it is very detailed and has a lot of theoretical knowledge, such as RSA algorithm, ECDH algorithm based on elliptic curve, you can consider skipping

The last additions to the book

• HTTP protocol diagram
• TCP protocol
• TCP/IP Details (Volume 1)

Tips:

HTTP, HTTP2, and HTTPS handshakes are frequently used for the front-end.

other

I wanted to talk about the principles of computer composition, operating system and compilation, but I was not good at one, and I didn’t ask much in the second interview. The operating system just asked some simple instructions for Linux and wrote a script for Jenkins. Or the back-end pair will ask more about this.

Front-end expertise

Front-end basics -JS

Be familiar with the following:

• Type, involving the following:
  • types
  • judge
  • conversion
  • Deep copy
• Closures involving the following:
  • scope
  • V8 Garbage collection
  • Variable ascension
• Asynchronous, involving the following:
  • History of Promsie, usage, simple handwritten Promsie implementation
  • Async await principle, generator
  • Macro tasks are different from micro tasks
• The prototype chain involves the following
  • prototype 和 __proto__
  • inheritance
  • Oop programming ideas
• modular
  • CommonJS and ES6 module
  • AMD vs. CMD
• ES6 features
  • let const
  • Arrow function
  • Set, Map, WeakSet and WeakMap
  • Promsie, Async, Class, Es6 Modules mentioned earlier

References:

Do a self-check, a self-check list of a [qualified] front end engineer. Go seeing relevant data according to oneself weak point next.

Books:

An introduction to

• Advanced JavaScript Programs (Third Edition)
• JavaScript You Don’t Know (Part 1)
• JavaScript Ninja Secrets (be sure to buy the second edition)
• Ruan Yifeng ES6 Introduction

BLOG:

• The way to advance the front end
• A guide to front-end interviews and advancement
• ConardLi blog
• Wood and poplar front end advanced
• FE-Interview
• Hu Yu’s blog

The Nuggets

• (1.6W word) Browser and front-end performance soul of the question, how many can you catch? (on)
• Question of native JS soul, how many can you catch? (on)
• Native JS soul ask (middle), check if you are really familiar with JavaScript?
• (2.4W words, recommended collection)😇 native JS soul (2), sprint 🚀 advanced the last kilometer (with personal growth experience to share)
• Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
• (Part) Middle and senior front factory interview secrets, winter for your escort, direct factory
• (Part 2) in the advanced front factory interview secrets, winter for your escort, direct factory

Pay for the good stuff:

Paying for knowledge is actually a good thing, standing on the shoulders of giants to see things far.

• The way of front end of the interview | more basic knowledge of front end, suitable for the couple
• Front end development advanced | on the basic of the core knowledge, distinguished, there are about a lot of engineering, is recommended.

Front-end basics – browsers

There are the following classic questions:

• Cache policy: negotiated cache and strong cache
• The rendering process of the page
• Page performance optimization

References:

• Working principle and practice of browser. This is also a very personal recommendation, because I have read “webkit technology reveal”, found that many things in the book are about some browser implementation methods, a pile of C++ is very uncomfortable, but this column is very simple and vivid way to tell the essence of the browser, personal gain a lot.
• Webkit Technology Revealed

Front-end basics – CSS

• CSS selector priority
• The relationship between REM, EM, VH, VW and PX, and mobile terminal adaptation
• Remove the floating
• The box model
• flex
• Hierarchical context
• All kinds of layout

Front-end framework – VUE

1. The first level: use
   • Vue life cycle
   • Vue family bucket use, vuex, VUE-Router
   • Data, computer, watcher
   • Component communication
     • provide / inject
     • pros emit
     • listen
     • event bus
     • Implement the dispatch and broadcast methods by yourself
2. The second layer: principle
   • How to simply implement an MVVM model
   • What happens when new Vue, and what does the corresponding source code do for each lifecycle
   • Data, Watcher, computer source code implementation
   • The principle of nextTick
   • Nature of instruction
   • Vue performance optimization
   • The Diff nature
3. Layer 3: Component implementation

References:

1. Basic use:

   • Vue tutorial for Jspang
   • Vue2.0 to develop enterprise-class mobile music Web App
   • Componentized thinking and skills for front-end growth

2. Source:

   • To first look at the analysis of vue.js internal operation mechanism handle teach you how to write a minimum MVVM mode, MVVM is the most core idea. When you understand the picture below, you can move on to the next step

   

   • “Simple Vue. Js”, this book is really good, the author introduces a single part, will be the most simple and abstract demo, step by step into the actual frame, finally take the demo you wrote and the actual frame comparison, analyze the advantages and disadvantages of both sides.

   

   • Vue. Js source comprehensive in-depth analysis to supplement. Router, vuex, slot, keep-alive are explained in detail.
   • You teach you to write vUE advanced VUE tutorial source analysis!!!! I went to Fronted Master to flush several hundred yuan for this, but I didn’t expect it to be transported.
   • Finally, after reading, do the questions and see if you can reach that level. How many of the 12 VUE hf Principles interview questions can you answer?

3. component

   • Vue. Js component introduction After that, start copying other people’s components yourself.
   • Recommended imitation objects:
     • vant
     • View

Front-end framework – React

Use: – Class lifecycle – Hooc advanced components – Hook use – React-router use – Context – redux (including Mobx or Saga)

References:

• Jspang react tutorial
• Reconstructing train tickets for travel e-commerce sites
• React.js lets you implement a simple MVC model of React.

However, the most difficult thing to react is Fiber. The code implementation of Fiber is very complicated. At this time, there is no need to pay too much attention to the code, just need to know what problem fiber was created to solve and related concepts.

It is recommended to read the articles in the following order

1. This is probably the most popular way to open React Fiber.
2. React Fiber Architecture for Deep In React
3. Inside Fiber: Take a closer look at React’s new reconciliation algorithm
4. How and why React Fiber uses linked lists to traverse the component tree

Have the ability, can read the original text on the Internet directly science

1. Lin Clark – A Cartoon Intro to Fiber – React Conf 2017
2. Inside Fiber: in-depth overview of the new reconciliation algorithm in React
3. In-depth explanation of state and props update in React
4. The how and why on React’s usage of linked list in Fiber to walk the component’s tree
5. Practical application of reverse-engineering guidelines and principles

Choose as you like below:

• React event mechanism

1. React Event mechanism
2. React events and the future

• React Scheduling mechanism

1. 【React in-Depth 】setState execution mechanism
2. React setState- How does setState handle updates?

• Hook

1. The birth of React hooks
2. React hooks Advances and principles

• Yck series

1. React source code: first heat a body
2. React render render
3. React source code: render
4. React source code: scheduler principle
5. React component update process

Now that you’ve warmed up, go straight to battle:

React Source Code – Essential skills for advanced Front-end engineers

React source code

Shame, I haven’t finished reading it yet.

Ok, so let’s do some problems:

• Senior front-end factory interview secrets, winter for you to escort, direct factory
• Here’s everything you need for a React interview

Component design:

Get ready to look at the source code for ant. Design

Front-end engineering – Webpack

1. Usage and basic concepts
   • Understand loader, Plugin, and some basic common
   • Understand the Babel

Resources: Play with Webpack

2. Learn to optimize
   • Volume optimization: Tree shaking, on demand, code cutting
   • Packaging speed optimization: caching, multithreading packaging, optimizing the packaging path

References:

• Those flowers, building Vue from scratch
• Webpack 4 configuration best practices
• The react development environment is optimized in 30 webPack4 steps

3. The principle of

• Webpack build steps
• Detail the process section of Webpack
• Webpack HMR principle analysis
• Implement WebPack hot update HMR from zero
• Dry! 内 容 提 示 webPack plugin (tapable + Webpack process)
• Hand by hand teach you a Webpack Loader

4. Project reference

In fact, WebPack configuration is by copying…

• le-cli
• Fe-workflow This is the project I refer to the most. It involves initializing the project, packaging, testing, tuning, quality control, rollback, online monitoring (performance monitoring, exception monitoring), and more

The learning

In fact, the learning experience has not changed, but insist on doing it for two years

Deliberate practice

I wrote about this in 2018, but I won’t repeat it

Link: Deliberate practice

Time management

Sensitive to time

I have three tables on my desk

1. The countdown is 40 minutes. Every time I arrive 40 minutes later, I have to take a break, which can be combined with the pomodoro technique.
2. A stopwatch. It is used to test the speed of the question, which is why I used to write the interview algorithm questions in 5 minutes. There is also the statistics of how long business functions need to be written, so as to facilitate the time of review and scheduling.

3. Cell phone Ihour keeps time. It is used to record how many hours of study, from quantitative change to qualitative change.

4. Planning and execution

As before, I will have an annual plan, a monthly plan, a weekly plan and daily tasks to be performed, and I will punch in and record what I have learned that day

5. Pay attention to diet

To keep my brain clear and lose weight, I eat light. Try not to eat high GI foods such as overly processed foods, rice, etc. Try to eat low GI foods. GI is actually an Acronym for Glycemic Index. It’s also translated as glycemic index. The main reason is that when your blood sugar is too high or too low, you become sleepy and your brain slows down. So to maintain a certain stability of blood sugar, can reduce fatigue, so that the efficiency is higher. Incidentally can achieve weight loss effect.

6. Taking more exercise. There are at least 2 times per week running | | swimming | | rolled iron

People who read my article feel that learning experience and the previous essay so like, and even do not change a map is not a water article.

“In fact, THE things I do have not changed, have been doing, change only the results.“