Under construction…… I interviewed two companies and found that I was not ready. I learned a little every day to get ready for the desired offer. At the same time, also want to give a little help to the small partner in the interview.

tips

Prepare according to post and working years

Interview questions are based on job requirements and years of service. The interviewer may ask questions about your work experience or basic knowledge. Just prepare according to your actual situation, don’t be hard on yourself.

Learn more about the depth of your resume

To prepare for the interview, you should fully understand the deep knowledge of the technology involved in the resume and avoid asking three questions. Be prepared for this consciously. In ordinary work, I just use technology, but I don’t learn deeply. Interview preparation is also based on what others have summarized. I should build my knowledge base based on my resume, otherwise knowledge is endless and will never be finished.

The interview questions

test

Ask functional requirements before testing, such as whether in-place modifications are allowed.

  • Functional test: Normal input
  • Extreme tests: [], arrays of only one element, already ordered arrays, especially large arrays
  • Invalid input: Incorrect parameters are entered

algorithm

Prepare simple algorithms, think clearly before you start coding, consider time and space complexity, input values and output values, variables to use. Communicate that to the interviewer, and then code it. Note the naming, brevity, integrity, and robustness of the code. The following is a simple classification of topics. Unmarked titles are leetcode titles. The classification criteria are data structure and problem solving methods, and the two categories have crossover.

The hash

O(1) time to find the element. Used to judge weight and count times

Physical structure – Array

Arrays are suitable for small character set situations, such as lowercase English letters, only ASCII, large character set objects. Note that the characters are converted to charCodeAt as array subscripts

  • Determine if a character is unique
Physical structure – Objects
  • Query the number of occurrences of elements. Finger 03. Duplicate number in array.
    1. The sum of two Numbers
  • Remove duplicate nodes from the linked list

string

  • String operations often start at the end, because there is enough space at the end without worrying about overwriting the original character.

The sword points to the test 05 replace the space

The list

Notice the pointer movement in the loop

Remove nodes
  • Remove duplicate linked list nodes. Each time you determine whether pre. Next needs to be deleted, pre is the front node when deleted.
Split list
  • Split linked lists. For completeness of thought, what if the split before list is empty, and the next node at the end of the after list is null
List for peace
  • List summation, note that the length of the two lists is different, as well as the maintenance of carry
How fast a pointer
recursive

Recursive space: Space taken per recursion * number of recursions

  • A recursive solution that returns the penultimate KTH node helps you understand recursion

The tree

To distinguish the concept

  • Binary search tree (binary search tree, binary sort tree). The values of all nodes in the left subtree are less than or equal to the root node, and the values of all nodes in the right subtree are greater than the root node. Each node of a binary search tree is in an interval. We can determine whether the tree is a binary search tree by recursively passing the endpoint value of the interval and checking whether each node is in this interval. Legal binary search tree
  • Balanced binary trees. The depth difference between the left and right subtrees of all nodes is less than 1.
  • Full binary tree
  • Complete binary tree: A full binary tree has several leaf nodes removed from the lowest layer, and the remaining leaves are concentrated in the leftmost position of the layer.
  • Mirror…
  • Middle order traversal, (binary search tree), first order traversal
  • Word Lookup tree (TRIE) : Each node stores characters

Bit operation

  • Multiplying by 2 is the same thing as moving to the left one place
  • Get a certain bit: move 1 to the left by I bits to get the form 00010000, and the original digit and, all other bits get 0, the result is 0 if the I bit is 0, and the result is not 0 if the I bit is 1.
  • Transpose: shift the 1 bit to the left by I to obtain the form 00010000, with the original digit or, other bits are not affected, the I bit becomes 1
  • Clear 0: reverse to set. If you move the 1 to the left by I, you get 00010000, and if you invert it, you get 11101111, which is the same as the original place, the other bits are not affected, and the I bit becomes 0
  • Update: First clear 0, then set 1. You don’t have to put a 1 when you write a 0. The above idea originated in 0001000 form.

mathematics

  • A prime number

Dynamic programming

It is difficult to solve in 45 minutes, so there are fewer interviews. The idea is to use caching to avoid double-counting. Space for time.

Double pointer

The two-pointer method is commonly used for arrays, linked lists, note the topic in place, and sort keywords.

  • A fast or slow pointer in a linked list. Find the middle point. 141. Check for rings. 142. Find the beginning of the loop.
  • One pointer in the linked list goes first. Delete the penultimate node of the linked list.
  • Fast or slow Pointers in an array. This is common for modifying arrays in place. 26. Delete duplicates from sorted array. Note that the sorted array duplicates are next to each other. 27. Remove elements. 283. Move zero.
  • Left and right Pointers to arrays. 167. Sum of two numbers – Enter an ordered array. Note that the input array is incremented. Binary search.

The sorting

Ask questions about time and space complexity, data volume, etc.

Quick sort

One element per trip. The average time complexity is O(nlogn). In the worst case, the array is already ordered and the first element is taken each time, resulting in a very uneven partition with O(n squared) time. The space complexity depends on the height of the recursion tree, average O(logn), worst degenerate to bubble sort, tree is inclined tree, tree height O(n).

Merge sort

A typical application of divide-and-conquer. Divide and merge. Order n for each merge, logn times of merge. Total time complexity O(nlogn)

Radix sort

Take advantage of the finite number of integers. Group numbers in the ones place and then in the tens place. Each grouping takes O(n), an integer k bits. Total time complexity O(kN).

next greater number

To get the next larger number, you need to know the information about the next element, so you scan the input array from back to front. Anything smaller than me goes off the stack, and then the current element goes on the stack, and I decrement the stack. For the current element, the top of the stack is next greater number. The current element is pushed and waits for the next round of comparisons.

Time to optimize

The time and space complexity of string stitching are O(n square). You can emulate a Java stringBuffer, which is pushed by an array, storing the result, and eventually converting it to a string. String compression

network

The response code

  • 301 permanent redirect
  • 302 Temporary redirect
  • 304 unmodified, using browser cache
  • 100 configuration
  • 200 success

Instant communication technology

Instant communication means that the server can instantly reflect data updates to the client. Polling. The client requests the server at regular intervals, and the server responds regardless of data updates. The client receives the response and compares the last data to see if it is updated. Without updates, the request is invalid and wastes resources. And there may be delays in data updates.

var xhr = new XMLHttpRequest(); setInterval(function(){ xhr.open('GET','/user'); xhr.onreadystatechange = function(){ }; xhr.send(); }, 1000).Copy the code

Long polling. The server receives the request and holds the connection. Respond when the data is updated and disconnect. The client receives the response and sends the request again.

function ajax(){
        xhr.onreadystatechange = function(){
              ajax();
        };
    }
Copy the code

Polling and long polling, where the browser requests the server and the server responds passively, have high concurrency problems.

Long connection implementation mode iframe stream. Embed a hidden IFrame in the page, set the SRC attribute of the hidden iframe to a request for a long connection or use the XHR request, and the server can continuously input data to the client. The progress bar shows that the load is not complete.

Websocket. After the connection is established, the server and client are on equal footing and can send data to each other without any difference between request and response. Full duplex.

Let ws = new websocket ('ws://127.0.0.1:5000/vote'); ws.send(uid) ws.onmessage = function (event) { let data = JSON.parse(event.data); }Copy the code

What is the difference between websocket and socket?

Websocket is an application layer protocol, socket programming interface. Websocket at layer 7, TCP at layer 4. Websocket Multiple clients connect to the same server. Messages between the two clients need to be forwarded by the server. The socket can interact with each other through P2P without the need for third-party forwarding. TCP itself is full-duplex

Websocket handshake process:

  • 1. Establish HTTP connection
  • 2. The browser sends requests to the server through HTTP to change the protocol to Websocket
  • 3, the server HTTP response, change is allowed. Then communicate with webSocket protocol
  • 4. Data is transmitted through TCP

What’s the difference between WebSocket and HTTP?

Similarities: Based on TCP Difference: HTTP one-way, the server can only passively wait for the client to force data. Stateless, need to carry identity information. Websocket full duplex. Websocket relies on HTTP for handshake. After the connection is established, HTTP statelessness is avoided.

Meaning of TCP three-way handshake

The client and server tell each other the start sequence number to ensure the order of packets. If the handshake is made twice, the connection is established, resulting in a previously invalid request to establish the connection. Also, the starting sequence number of the server message is not confirmed, making TCP unreliable.

The reason for TCP’s four waves

TCP is full-duplex. An active disconnection request simply means that I can’t send data, but I can still receive data. The passive may have more data to send, so sending an ACK and then disconnecting means I’m not sending any more data.

The framework

MVVM

The Model – View – the ViewModel. The ViewModel connects the View to the Model through two-way data binding. Implementations include compile template compilation, Observer data hijacking, Watcher Observer, and Dep dependent subscribers.

  • Compile to compile the template, including compiling text, compiling instructions, and adding the update function to watch’s update method.
  • The Observer overwrites get, set, collect dependencies (watcher), and joins the Dep to listen for data changes. Trigger the notify of the Dep.
  • The Dep is part of the Observer that stores the Watcher and informs Watch to call Update when the data is updated
  • Watcher receives notification from the Observer and executes the update method in Complie. Watcher is a bridge between the Observer and complie. On the one hand, watcher adds itself to the Dep dependent subscriber and establishes relations with the observer, on the other hand, watcher’s update method triggers compile’s update method.

Vue responsive principle

Reactive means that as the input changes, the output changes. Start by implementing a simple response on your own. Recommend video

let price = 10; let num = 2; let total = total = price * num; // 20 num = 3; console.log(total); // Expect 30Copy the code

To achieve this effect, you simply execute the function with the output value again when the input changes.

let storage = []; let target = function(){ total = price * num; } function record(){ storage.push(target); } function replay(){ storage.forEach(run=>run()); } record(); target(); console.log(total); //20 num = 3; replay(); console.log(total); / / 30Copy the code

The array Storge is used to store functions that get output values. The function is recorded before the first call, and the function stored in Storge is called again when input changes.

class Dep{ constructor(){ this.subscribers = []; } depend(){ if(target! ==null && ! this.subscribers.includes(target)) this.subscribers.push(target); } notify(){ this.subscribers.forEach(sub => sub()); } } let dep = new Dep(); dep.depend(); target(); console.log(total); num = 3; dep.notify(); console.log(total);Copy the code

Class, dep.depend() record function, includes detection, so does not add repeatedly. Dep.notify () is called again.

let data = { price: 10, num: 2, } let target = null; class Dep{ constructor(){ this.subscribers = []; } depend(){ if(target! ==null && ! this.subscribers.includes(target)) this.subscribers.push(target); } notify(){ this.subscribers.forEach(sub => sub()); } } Object.keys(data).forEach(key => { const dep = new Dep(); let internalValue = data[key]; Object.defineProperty(data, key, { get(){ console.log(`get ${internalValue}`); dep.depend(); return internalValue; }, set(newVal){ console.log(`set ${newVal}`); internalValue = newVal; dep.notify(); } }) }) function watcher(func){ target = func; target(); target = null; } watcher(()=>{ data.total = data.price * data.num; }); console.log(data.total); data.num = 3; console.log(data.total);Copy the code

Watcher assigns the function to Target and executes target to get the first output value. Iterating through data’s properties, overwriting getters and setters for each property with Object.defineProperty, hijacking data fetching and changes, logging functions for get, setting new values for set and re-executing.

Now understand the reactive expression in VUE. This part of the content refers to the Vue responsive principle, adding a little of my own understanding. Responsiveness in VUE requires that when the source data changes, where the data is used is updated automatically. Templates, for example, compute properties. In order to implement this feature

  • Listen for data change ratio
  • Know where to use raw data
  • Notify those places of updates when data changes

The first two can be overridden with getters and setters using data hijacking, Object.defineProperty. Wherever the source data is used, the value is definitely fetched and GET is called, so GET knows where the source data is being used. Set can listen for data changes.

Where the source data is used is where the source data is relied on, and knowing where the source data is used is collecting dependencies. After collecting dependencies, find a place to store them. Introduce the subscriber Dep class.

class Dep { constructor () { this.subs = []; } addSub (sub) { if(sub && ! This.subs.push (sub); this.subs.push(sub); this.subs.push(sub); } notify () { this.subs.forEach((sub) => { sub.update(); }}})Copy the code

There can be many dependencies, and the observer Watcher is introduced to manage dependencies. Each dependency is a Watcher instance. The Dep stores the Watcher instance. When the data changes, the notify method of Dep is called, and the Dep notifies all watcher to update the data, recalculate the output value, and update the view. Watcher does all the dirty work, and Dep only needs to store dependencies and notify updates. The observer model is used.

class Watcher { constructor(obj, key, Target = this this.cb = cb this.obj = obj this.key = key this.value = obj[key] dep.target = null} update() {this.value = this.obj[this.key] // Define a cb function, which is used to update this.Copy the code
function observe (obj) { Object.keys(obj).forEach(key => { defineReactive(obj, key, Obj [key])}) function defineReactive (obj, key, value) {observe(value); // Add object.defineProperty (obj, key, {get: Function reactiveGetter () {// Add Watcher to subscription if (dep. target === null) {new Watcher(obj, key, cb); Dp. addSub(dep.target) // Add} return value; }, set: function reactiveSetter (newVal) {observe(newVal) // If assignment is an object, also recurse if (newVal! == value) { value = newVal; }}} class Vue {constructor(options) {this._data = options.data; observer(this._data); }}Copy the code

Each attribute in data has a target DEP. When get, watcher is added to the subscription, when set, a new value is set, and the DEP tells Watcher to update, get the new value (via GET), and trigger the view update.

When a JS Object is passed as vue’s data option, Vue hijabs data retrieval and modification by iterating through the observer, calling Object.defineProperty() for each attribute, overwriting the GET and set methods. To access data,get is called, and the dependencies collected in GET are added to the Dep. The deP informs Watcher when the data changes, and watcher gets the new value, triggering a view update.

Two-way data binding

It’s a summary of the responsive principle and MVVM. Reactive: Object.defineProperty()+ observer mode. MVVM: Observer, Compile and Watcher.

Vue life cycle

Remember four key words: create, mount, update, destroy.

  • BeforeCreate: Data and methods are unavailable before the instance is created
  • Created: The instance is created, the Data Observer is completed, and the event is registered. Not yet mounted, so EL is not available.
  • BeforeMount: The EL value is generated HTML, but the data is not rendered on the DOM
  • Mounted: Data is rendered in the DOM
  • BeforeUpdate: Data is updated and views are not updated
  • Updated :DOM rerenders ready for DOM-dependent operations
  • BeforeDestroy: An instance is still available before it is destroyed
  • Destroyed: Instance destroyed. The subinstance is destroyed and the event listener is removed

See the lifecycle of a Vue 2.0-Vue instance

Vue non-parent component communication

eventBus

Start with a new vUE instance and export it

import Vue from 'vue';  
export default new Vue(); 
Copy the code

Emit, publish in the component that delivers the message

Bus.$emit('getTarget', event.target);
Copy the code

The component that receives the message listens on, subscribes

Bus.$on('getTarget', target => {  
            console.log(target);  
        });  
Copy the code

EventBus is a global VUE instance for both components, and the event of this instance is called to trigger emit and the event listener on to communicate, respectively.

vuex

It’s time to use Vuex when you don’t understand how values are passed between components. Vuex from the beginning to the beginning this article is very good. The summary is as follows:

State can be understood as a front-end database that stores shared data. Getters are used for fetching data, mutations are used for storing data, and actions are used for processing data before storing data. All these are combined into a store.

Action is used for methods and getters for computed. Mutation dispatches via action.

Vue single-page application routing implementation principle

Refer to VUE: Implementation principle of Routing Routing means how the road should be followed, how to reach the destination, or given a road and want to know where the road goes. In the case of HTTP requests it is the URL that gets the page. Front-end single-page applications can update pages without making HTTP requests, depending on front-end routing. The implementation methods include

  • window.location.hash
  • History is a new method in H5

Different implementations can be controlled by passing different values to the mode parameter in vue-Router.

Window.location. hash is the part of the URL after # and #. This part is used to guide browser behavior and is not sent to the server, so you can take advantage of this to change the address and then change the page without asking. Updating the page with a hash is an implementation of front-end routing. Every change to the hash is recorded in the browser history.

H5 provides the new methods pushState() and replaceState() for history. When they are called to modify the history, although the URL has changed, the request is not made immediately, but the POPState event is triggered, so you can listen for popState.

PushState can change the URL, as long as it is the same origin as the current URL. Hash can only change the # part. PushState Sets the URL to be the same as the current URL and can still be added to the history stack. The new hash value must be different from the current value to be added to the history.

The History mode also has its drawbacks. The ideal scenario for a single-page application would be to load index.html only on initial entry, with subsequent web requests via Ajax and no URL requests for the page. But you get the user typing enter in the address bar. Hash does not modify the URL, so it has no effect on the request. History mode modifies the URL that has no corresponding page in the back end and returns 404. You can return index.html on the back end for this routing case, and 404 for the rest of the error URL.

The virtual DOM is not necessarily fast

  • Native DOM manipulation and encapsulation of the framework

No framework wrapper is likely to be faster than native DOM operations, because the framework wrapper DOM operations need to deal with all the upper-layer apis and are universal. Manual optimization can be found for any framework encapsulation operation. But in real development, you can’t manually optimize everything. The framework provides the best performance without having to do manual optimization. This is a balance between maintainability and performance. Even if the VUE uses the virtual DOM, synchronize some changes to the virtual object first and then to the real DOM. Among them, the real DOM is changed or the native API is used to manipulate the DOM, or the whole page is reflow inevitably. If these update operations cannot be packaged together to update the real DOM, the virtual DOM is completely lost and becomes more redundant.

This is where the value of the framework comes in. In VUE, if multiple data changes are observed in the same event cycle, vUE opens an asynchronous update queue and buffers all data changes that occur in the same event cycle. Then in the next event loop ‘TICK’, vue flushes the queue and performs the actual work. This allows multiple data changes to be batch updated into the virtual DOM object, diff differences, and synchronized to the real DOM on the page.

Design patterns

Publish and subscribe model

Use the public account to understand, the public account is the publisher, the subscriber is the user. After the user subscribes to the public account, the public account will publish new information to the user. Users can also unsubscribe. Here is a simple implementation of the publish subscribe pattern. PubSub needs to implement three functions: subscribe, publish and unsubscribe.

class PubSub{ constructor(){ this.handleBars = {}; Subscribe (eventName, handle){if(! this.handleBars.hasOwnProperty(eventName)){ this.handleBars[eventName] = []; } if(typeof handle == 'function'){ this.handleBars[eventName].push(handle); }else { throw new Error('need callback') } } publish(eventName, ... args){ if(this.handleBars.hasOwnProperty(eventName)){ this.handleBars[eventName].forEach(handle =>{ handle.apply(null, args); }) } } unsubscribe(eventName, handle){ if(this.handleBars.hasOwnProperty(eventName)){ this.handleBars[eventName].forEach((item, index) =>{ if(item === handle){ this.handleBars[eventName].splice(index, 1); } }) } } } let sub = new PubSub(); function func1(type){ console.log(`${type} func1`); } function func2(type){ console.log(`${type} func2`); } function func3(type, data){ console.log(`${type} func3 data ${data}`); } sub.subscribe('ready', func1); sub.subscribe('ready', func2); sub.subscribe('complete', func3); setTimeout(()=>{ sub.unsubscribe('ready', func1); console.log(sub.handleBars) sub.publish('ready', 'ready'); sub.publish('complete', 'complete', 123); }, 1000).Copy the code

The PubSub class maintains a handleBars object that stores various event callbacks. Each subscription, if the object does not have the property, initializes the property as an array. Then add the callback to the array. Here are the values handleBars stores. When published, the callback corresponding to this event is executed. To unsubscribe is to remove the event’s corresponding callback from handleBars. Subscribe, publish, and unsubscribe correspond to store, execute, and delete.

ƒ Func3 {ready: Array[1], complete: Array[1] 0: ƒ Func3 ()Copy the code

When you subscribe, you pass in the event type and callback function to subscribe to. Unsubscribe is similar;

sub.subscribe('ready', func1);
sub.unsubscribe('ready', func1);
Copy the code

Publish events and send parameters. The first parameter is the event type, and the first parameter is the pass data.

sub.publish('ready', 'ready'); 
Copy the code

Observer model

class Observer{ constructor(fn){ this.update = fn; } } class Subject{ constructor(){ this.observers = []; } addObserver(observer){ if(! this.observers.includes(Observer)){ this.observers.push(observer); } } removeObserver(observer){ this.observers.forEach((item, index) => { if(item === observer){ this.observers.splice(index, 1); } }) } notify(){ this.observers.forEach(item => { item.update(); }) } } let subject = new Subject(); function func(){ console.log('update') } let observer1 = new Observer(func); subject.addObserver(observer1); subject.notify(); subject.removeObserver(observer1); subject.notify(); console.log(subject.observers); / / []Copy the code

The target stores the observer. Differences between observer and publish/subscribe:

  • The target knows which observers exist, and the publisher does not know or care about the existence of subscribers.
  • The observer is notified by the target when the event occurs, and the observer updates (). The publisher does not notify the subscriber, but the dispatch center (handleBars) does.

Publish/subscribe patterns such as dependency collection and update in vUE responsive implementations

Behavioral interviews

Ask questions

How did the project team work with American colleagues? How to communicate? The opportunity to train in the United States? How many people in the group, how to divide the labor? What project are you working on now?

The system design

Answer process: ask the function of clear system first, limit condition, give a big framework first, give details again.

scalability

Performance problem: Slow scalability for a single user Problem: Fast service for a single user but slow scalability for a heavy load (multiple users and large amount of data) : Increasing resources improves performance in proportion. Or to introduce redundancy to improve reliability, the added resources do not affect performance.

Vertical scaling

Spend money on better servers, but it’s limited. Money is not enough, and current technology can only provide current equipment.

Horizontal scaling

Instead of buying a top-of-the-line device, buy several generic devices.

Latency and throughput

  • Delay: The time taken to perform an operation
  • Throughput: The number of operations performed per unit of time
  • Our goal is to achieve maximum throughput with acceptable latency

Consistency and availability

  • Consistency: Read operations can return the results of the latest write operations
  • Availability: Returns results within response time
  • Zone fault tolerance: Ensures consistency or availability even when network partitions occur due to network faults

According to CAP theory, one of the three must be sacrificed to ensure the other two. Distributed system will certainly have many nodes, and the network is not reliable, network node failure must be considered, so the fault tolerance of partitions must be guaranteed. After USER A writes X to server1 and server2, the network between user A and server2 becomes faulty. To ensure availability, data read by B and C are inconsistent. To ensure consistency, B and C need to wait for a period of time, during which they cannot get the results. Note that sacrificing consistency sacrifices real-time consistency, but ensures that the data eventually reaches a consistent state.

Consistency pattern

  • Weak consistency may or may not read newly written data. Common in voip, video chat, real-time multiplayer games. There may be a brief out-of-sync or a delay of a few seconds. If you lose several seconds during a call, you cannot hear the voice after you reconnect the call.
  • Final consistency The newly written data can be read after some time. Data is not updated in real time, it is updated asynchronously, such as email,DNS. Final consistency is often used in systems that seek usability
  • Strong consistency Enables new data to be read immediately and replicated synchronously. Common in file systems, relational databases.

failover

Redundancy is required for availability and to avoid single points of failure. The failover operation varies according to the redundancy function.

  • Switching from working to standby (master/slave switchover)

The standby server is not working. The active server sends heartbeat signals to the standby server. When the heartbeat communication is interrupted, the standby server switches to the IP address of the active server and provides services.

  • Dual-work switchover (master master switchover)

Both servers work, spreading the load between them. Fast switching.

  • Disadvantages of failover

Additional hardware is required to implement failover. If data is not written to the standby server, the working server breaks down and data is lost.

DNS

www.baidu.com parsing process:

  • Check the browser cache. If no, go to the next step
  • OS cache, host file, missed go to the next step
  • Router cache, failure to go to the next step
  • Local DNS server cache. If no, go to the next step
  • The local DNS server makes a request to the root DNS server, and the root DNS server returns the address of the com. top-level DNS server.
  • The local DNS server sends a request to the TOP-LEVEL domain server, and the top-level domain server returns the address of the Baidu.com domain server
  • The local DNS server sends a request to the Baidu.com DNS server. The secondary DNS server finds the IP address of the WWW host and returns
  • The local DNS server caches the result and returns it to the client
  • Client cache, using IP to initiate requests

CDN

Caches static resources such as videos, images, HTML, CSS, and JS to a closer place so that users can share resources and shorten response time. Online game accelerator is to set up a high bandwidth machine room, with both ends of the high-speed road instead of a section of dirt road.

  • CDN push. The server actively pushes the content to the CDN to relieve the pressure on the target server. The disadvantage is that there is delay.
  • CDN pull. On first access, pull content from the server, return, cache.

The reverse proxy

Hide a client, such as an Internet access tool, from a forward proxy. The reverse proxy hides the server and forwards the request to the server. The benefits are numerous:

  • Cache, provide CDN function
  • Security: The user knows only the IP address of the reverse proxy
  • Scalability, users only know the IP address of the reverse proxy, internal servers can be added, reduced, and modified configuration
  • The inside is relatively secure, so we can encrypt and decrypt it here. The internal server does not need to perform such time-consuming operations.

Load balancer

Share a single heavy workload or multiple concurrent requests. Load balancers can hide internal servers. The DNS only knows the IP address of the load balancer, but the private IP address of the internal server is not known externally.

If every server stores the same content, there are data synchronization issues. Resources can be stored by category. Such as picture server, video server, HTML server, such changes always happen on the same server, and this server, such as picture server can do the corresponding optimization. Another way is that the internal server does not store user-specific information, but stores it in a common database.

  • Four level swap. The TCP connection is established between the client and server. The destination IP address of the packet needs to be changed.
  • Seven level swap. Select a server based on the packet content at the application layer. In this case, TCP connections are established between the load balancer and the client and between the server and the load balancer.

How to achieve load balancing

  • DNS returns IP addresses. DNS can use round Robin to return IP addresses in a round-robin manner. But there may be a server that keeps getting heavy users.
  • Load balancer can also be scheduled using round Robin. If the resources on each server are the same, this breaks the session, causing the user to log in again and the shopping cart to be inconsistent because the second visit is to a different server. Solution 1: A dedicated Session Server is deployed and all other servers obtain sessions from the Session Server. Solution 2: Load balancer stores the ID of the server that the user accesses, and the corresponding cookie, so that the user knows which server to go to next time.
  • Load balancing is for scalability and redundancy
  • The load needs to be balanced at three levels: external requests to the Web Server, Web Server to the platform layer, and platform layer to the database

The platform layer

Add a platform layer between the Web Server and the database to separate business functions from the Web Server, and only change the platform layer when changing the API.

RAID

What if the disk is broken? Disk array. The RAID1 solution provides a mirror disk for backup. If the working disk fails, the mirror disk takes over the service and another disk is inserted as a new mirror disk. The service is not interrupted during the backup.

The cache

Caching is easy to read, not easy to write. When you write, you cache a bunch of HTML files, modify fonts, modify a lot of files.

  • Caching of disks. The disk address of the cache file in RAM. If the initial access fails, the disk access is slow. Record the address in the hash table and check the hash table next time. Over time the hash table gets bigger and bigger, so you need to delete records, for example with A FIFO
  • It can be cached at multiple levels. Browser, server, database, CDN, memory cache
  • Memory cache, such as redis,memcached. Data in RAM, faster than disk. Due to small memory, you need to use the least recently unused algorithm to weed out data.

Caching strategies

  • Cache mode. Caches do not interact directly with storage. The application performs the following operations:

If the data is not matched, the memory will be queried. The data will be stored in the cache and returned to the client. If the cache expires, set the TTL

  • Direct write mode. The application uses the cache as its primary data store, the read and write cache. Read quickly. The application writes modified data to the cache, which synchronously writes the data to the database. Returns the result. Synchronous write causes slow operation.

  • Write back. Data is asynchronously written from the cache to the database

Troubleshoot single points of failure

Work-backup Dual-working remote backup. If one data center fails, the DNS returns the IP address of the other data center

The database

Relational database

SQL. Use tables to store data items. Relational databases require ACID, atomic operations, and strong consistency.

  • Master and slave replication: read and write master database, read slave database, load balancing and backup.

Master library replication replicates writes to multiple slave libraries, and a tree of slave libraries copies data to more slave libraries. The main library is offline and the system can run in read-only mode.

  • The main master replicates

Both main libraries are responsible for reading and writing. The master inventory is having consistency issues, or synchronous write delays

  • The common shortcoming of both: duplication. Data is lost when the master library fails before copying newly written data to other nodes. The more slave libraries read, the higher the write cost.
  • The joint. According to the function of the database is divided, such as product database, user database. Can write in parallel, improve load capacity. Reduce replication latency.
  • shard

Spread the data across multiple databases. Each database is just a subset of the data. The advantages are the same as those of federation, reducing read and write pressure, reducing replication, and improving cache hit ratio.

NoSQL non-relational database

Emphasizes usability over consistency, and therefore ultimate consistency. ACID cannot be implemented. Including key value type database, document type database, graph database.

SQL is used for structured data (user name, password, address). SQL is used for unstructured data, and NoSql is used for large amount of data. Such as social data, buried data, logs, shopping carts (temporary data).

Server Architecture

Load balancer Connects all servers, and there should actually be one more to avoid a single point of failure.

Task queue

The client initiates time-consuming operations without blocking the client. The task is put into the task queue and processed asynchronously by a worker. During that time, the client can return some results that look like the task has been completed. If you send a tweet, the tweet appears immediately on your current account, but other people have to wait some time to see the tweet.

High concurrency processing methods

  • HTML static
  • All levels of cache
  • CDN
  • Load balancing
  • SQL database cluster in master/slave mode
  • Image server. Separating images from pages prevents the server from crashing because of images. And can also be on the picture server to do targeted optimization.

High concurrency processing can be handled from the client and server levels. The front-end is to do the request can not be sent to the server, and the back-end strategy is to divide and conquer, to improve the processing speed of a single request.

The front end

  • Cache: 5M localStrong, strong cache and negotiation cache
  • Merge request
  • Compress resources and reduce traffic
  • Asynchronous request, batch data acquisition
  • Throttling, request only once every 5 seconds

The back-end

  • CDN
  • Split to different platform servers based on services
  • Load balancer, cluster, distributed architecture
  • Dedicated static servers for pictures, videos, etc
  • HTML static

The database

Database cluster for read/write separation

redis

Data structures in memory are stored in the system, so they can be used as caches, databases, message queues. Supports mapping of keys to five data types.

Front-end Anomaly Monitoring

Reference Tencent CDC (Cdc.tencent.com/2018/09/13/… Front-end anomaly monitoring consists of four steps: front-end anomaly collection and uploading to the server, server storage anomaly, machine analysis or manual visual analysis, and alarm or early warning.

The reason for the error

Code error, slow network, system error (out of memory)

Abnormal collection

Adopt? who did what get which exception in which environment.

  • User information: user status, permissions, which terminal to log in to.
  • Behavior information: operation, upload data, back end return data, time, page
  • Exception information: Exception level, DOM node operated by the user
  • Environment: Network environment, device model, client version, and API version

Use requestId to uniquely identify each request, which involves request messages, database operations, cache operations involved, service requests, and response messages.

Exception handling

Global capture is easy to manage, supplemented by single point capture. Window. onerror global capture, try… Catch Single point catch

Abnormal record

When an exception occurs, the root of the exception may be far away. So record every action the user takes.

Abnormal level

Urgency, importance distinction

Report the plan

Front-end storage, IndexedDB browser database, noSQL-like key-value pair storage reporting scheme:

  • Real-time reporting
  • The batch report
  • Block reporting, abnormal related operations, remove the repeated in the batch reporting. Block reporting is slower than real-time reporting
  • Users actively report, you can slow down the upload

Compression scheme: Gzip

Abnormal storage

There is a dedicated log server on the back end. The access layer is responsible for screening and processing the information before transferring it to the message queue.

Abnormal analysis

User latitude, time latitude (before and after exceptions), performance latitude, environment latitude, scene backtracking.

Abnormal repair

The front-end code is compressed and released. The uploaded stack information needs to be restored to the source code to locate exceptions. Upload sourcemap to the log server and use sourcemap to decode the stack information. This requires sourcemap to correspond to the version of the production code