vue

1. Life cycle

1. At what stage is data requested

2. At what stage does the element attribute get

2.API

1. Get the width and height API

2.computed watched methods

3. The component

1. Communication between components

4. Instruction

1.v-for

1. The key role

2. Bidirectional binding

1. Vue3.0

5. Write a

1. Es6 Proxy Handwritten bidirectional binding

2.Vue3 is implemented by reactive, effect and computed

TS

1. Object-oriented features

Abstract some behaviors of classes and describe the shapes of objects. Abstract common objects from different classes as interfaces, which are implemented separately by classes (Implement). Compared with object-oriented languages, more flexible interface types are added, including properties, functions, indexable and classes.

JS

1.es6

Mainly include:

  1. let const
  2. Deconstruction assignment
  3. String, re, numeric, function, array, object extension
  4. symbol
  5. The Set, the Map
  6. Promise
  7. Generator
  8. async
  9. class
  10. decorator
  11. module

1. The asynchronous

1. Promise + settimeout output

You can use await. The task package is in the promise

2. Serial simulation tasks
3. Eventloop, macro task, micro task, eventloop, code problem
  1. Macro tasks: Scrip (overall code), setTimeout, setInterval, IO, UI interaction
  2. Microtasks: promise. then, async/await
4. Js thread
  1. GUI rendering thread
    • Responsible for rendering browser interfaces, parsing HTML, CSS, building DOM trees and RenderObject trees, layout and drawing, etc.
    • This thread executes when the interface needs to be repainted or when some operation causes reflow
    • Note that the GUI rendering thread and the JS engine thread are mutually exclusive, the GUI thread is suspended (frozen) while the JS engine is executing, and GUI updates are stored in a queue until the JS engine is idle.
  2. JS engine thread
    • Also known as the JS kernel, it handles Javascript scripts. (For example V8 engine)
    • The JS engine thread is responsible for parsing Javascript scripts and running code.
    • Is there only one JS thread running on a Tab page (renderer process) at any time
    • Also note that the GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS execution takes too long, the page rendering will be incoherent and the page rendering load will block.
  3. Event trigger thread
    • Belongs to the browser, not the JS engine, and is used to control the event loop.
    • When the JS engine executes a code block such as setTimeOut (or other threads from the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), it adds the corresponding task to the event thread
    • When the corresponding event meets the trigger condition is triggered, the thread will add the event to the end of the queue to be processed, waiting for the JS engine to process
    • Note that due to the single-threaded nature of JS, the events in the queue must be queued up for the JS engine to execute (when the JS engine is idle).
  4. Timing trigger thread
    • The legendarysetIntervalwithsetTimeoutThe thread
    • Browser timing counters are not counted by JavaScript engines (because JavaScript engines are single-threaded, blocking threads can affect timing accuracy)
    • So timing is done by a separate thread and timing is triggered (when the timing is done, it is added to the event queue to wait for the JS engine to be idle)
    • Note that the W3C specification in the HTML standard requires that setTimeout intervals below 4ms be counted as 4ms.
  5. Asynchronous HTTP request threads
    • After the XMLHttpRequest connects, the browser opens a new thread request
    • When a state change is detected, if a callback function is set, the asynchronous thread generates a state change event and places the callback in the event queue. It’s executed by the JavaScript engine.
6. promise

  1. Because any return value that is not a promise is wrapped as a Promise object, i.e

    return new Error(‘error!!! Equivalent to ‘)

    return Promise.resolve(new Error('error!!! '))

7.async await

  1. Difference between async await and promise

    1. The syntax is simpler

    2. So we can’t catch an error in a promise’s then but we can only catch it with.catch

      While async/await can catch exceptions to both asynchronous and synchronous code

    3. Nesting the former is more convenient and concise

  2. Await blocks code, and perhaps subsequent asynchronous code does not depend on the former but still needs to wait for the former to complete, causing the code to lose concurrency

8. Asynchronous features of forEach

Let var const (block scope, dead range)

1.1 A variable declared by let and const is only valid within the block code in which it is located. Scope is implicitly intercepted and the concept of block-level scope is introduced.

1.2 Temporary dead zone, variable declaration is promoted but not assigned to undefined, cannot be used before declaration.

1.3 Repeated declarations are not allowed.

No variable promotion occurs

Block-level declaration, scoped within a block

Disallow redeclaring const must be initialized

Const can no longer be assigned but can modify object attributes

Temporary dead zone: The area between the top of the scope and before a variable is declared is called TDZ

3. Arrow and normal functions

  1. Arrow functions are anonymous and cannot be used as constructors or new
  2. Arrow functions do not bind arguments and use rest arguments instead
  3. The arrow function captures its context this value as its own this, which is fixed
  4. The arrow function does not define the this binding when the method is used

2. Apply colours to a drawing

1. What happens when the header JS script is executed

  1. Synchronous loading

    <script src="http://yourdomain.com/script.js"></script>
<script src="http://yourdomain.com/script.js"></script>
Copy the code

    The synchronization mode, also known as blocking mode, blocks subsequent operations on the browser and stops parsing until the load is complete. Synchronization is safe by default and is placed at the end of the body to reduce blocking

  2. Asynchronous loading

    Also known as non-blocking loading, the browser will continue to process the subsequent pages while downloading and executing js

    Async, the process of loading and rendering subsequent document elements takes place in parallel with the loading and execution of script.js (asynchronously). The script will be executed as soon as it is downloaded, and there is no guarantee that the script will be executed in order and completed before the onload event

    Defer declares that there will be no document.write and DOM changes in the script. The browser downloads other scripts with the defer attribute in parallel without blocking subsequent page processing

    Defer. The loading of subsequent document elements will take place in parallel (asynchronously) with the loading of script.js, but the execution of script.js will be completed after all elements have been parsed and before the DOMContentLoaded event is fired.

  3. Lazy loading

    The loading of JS is divided into download and execution. Asynchronously, the downloading problem is solved, but execution still blocks the browser.

    You can load and cache the JS content as an Image or Object and not execute it immediately, but execute it when first needed.

2. Blocking of page rendering

Download DOM parsing process to HTML file:

2. Add it to the resource file download list when you encounter CSS file link[rel = stylesheet], and continue parsing DOM 3. When encountering a JS script, ** pause **DOM parsing and download the script file immediately. 5. After the script is finished, continue parsing DOM 6. When the entire DOM is parsed, the DOMContentLoaded event is triggeredCopy the code

There is a problem here, if the JS is too large or has a problem, rendering will stop and block, which will cause a white screen for too long

Solutions:

  1. Js at the end

  2. Defer lazy loading

    Executed after the document has been parsed and before the DOMContentLoaded event has completed, it has the same effect as placing script at the end of the body. Last used in external reference files.

    1. Async Load asynchronously

    DOMContentLoaded is not affected by async and can be triggered before the script is loaded

3. Rearrange and redraw

1. The concept

  1. Backflow always causes redrawing, redrawing does not necessarily cause backflow

  2. Operations that cause backflow:

    1. Page first render

    2. The browser window size changes

    3. Element size position changes, element content changes

    4. Element font size changes

    5. Add or remove visible DOM elements

    6. Activate CSS pseudo-classes (such as hover)

    7. Query some properties or call some methods

      Such as: offsetLeft and offsetTop, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height Width and Height

2. Optimize

  1. Rearranging and redrawing is essentially reducing the number of operations on the Render Tree

  2. CSS:

    1. Avoid table layouts
    2. Change the class as far down the DOM tree as possible
    3. Avoid setting multiple inline styles
    4. Avoid USING CSS expressions
    5. Animating elements out of the document stream, reducing the size of the render tree that flows back (fixed absolute, etc.)

  3. Js:

    1. Avoid manipulating styles too often and override the style property at once

    2. To avoid frequent DOM manipulation, create a documentFragment on which to apply DOM manipulation and then add it to the document

    3. Avoid frequently reading properties that cause redraw backflow. If you want to read them, you can cache them once instead of reading them every time

    4. You can modify the CSS directly by modifying the className or cssText

      // It's a bad way to write
    var left = 1;
    var top = 2;
    ele.style.left = left + "px";
    ele.style.top = top + "px";
    // A better way to write it
    ele.className += " className1";
Copy the code

  4. Browser optimization:

    The browser has rearrangement optimization: the browser maintains a queue, and all operations that cause backflow and redraw are put into this queue. When the number of operations in the queue reaches a certain number or a certain interval, the browser will empty the queue and do batch processing at once, turning it into a redraw backflow

3. Data types

1. What are the basic data types

Elaborate on symbol and bigint

2. Undefined, null

3. What are the methods for determining data types

4. How to judge arrays (Instanceof, ToString, ispropertyof, isArray)

  1. arr.constructor === Array
  2. arr instanceof Array
  3. Object.prototype.toString.call(arr) === ‘[Object Array]’
  4. isArray

5. The difference between references and values

  1. Raw values are stored on the stack, and direct values are stored directly at the variable access location
  2. A reference value is an object stored in the heap, and the value stored in a variable is a pointer to the memory address where the object is stored
  3. The difference in memory allocation results in different access mechanisms
  4. Copying variables is different. You have a shallow copy and a deep copy
  5. Pass parameters, values, and addresses

4. The prototype chain

The constructor new is an instance whose __proto__ refers to the prototype object and whose prototype refers to the prototype object. To re-add the same method to all instances, add it to the instance’s prototype object.

Instanceof is the same address that determines whether an instance object’s __proto__ and the prototype constructor that generated the instance refer to.

1. Determine the output

Es5 inheritance and parasitic combination inheritance

5. The closure

Function execution creates a new private scope to protect variables from outside interference, a mechanism called closures

Can be used for anti – shake throttling

  1. A closure is a function that has access to a local variable in the scope of another function
  2. Can be used to mimic block-level scopes, leaving local variables in memory for later access and avoiding global variables
  3. Memory consumption is high and will not be destroyed immediately, because the chain of scopes of anonymous functions still refers to the live object after execution

1. Determine the output

6. Handwritten

1.api

1. Realize the promise. All
2.map
3.call apply bind
4.instanceof
5.new

Blog.csdn.net/LL187811327…

www.ucloud.cn/yun/95431.h…

Blog.csdn.net/LL187811327…

New does several things

  1. The freshman became an object
  2. The new object implicit stereotype is linked to the function stereotype
  3. Call the function to bind this
  4. Return a new object
6. Use Reduce to simulate a map

2. Deep copy

3. Mr Currie

4. Array de-duplication (including objects, nested objects)

5. The asynchronous

1. A concurrent controller for one task requires two tasks to be executed each time
2. Use promise to implement sleep
3. Design an asynchronous function call
4. Use promise1 second output 1,2 seconds output 2…

7. api

1.filter map some every slice splice sort

8.ajax

1. Advantages and disadvantages

  1. You can communicate with the server without refreshing the page

  2. Allows partial page content to be updated based on user events

  3. Optimized transfer between browser and server, reducing unnecessary data round-trip and burden

  4. Improved user experience through asynchrony

  5. The Ajax engine runs on the client side, taking over some of the work that would otherwise be done by the server and reducing the load

  6. The XMLHttprequest object

    Express server code

    / / the server
/ / 1. Introduce the express
const {request,response} = require('express');
//2. Create application objects
const express = require('express');
const app = express();

//3. Create routing rules
app.get('/server'.(request,response) = >{
   const data = {name: 'athaoo'};
   response.setHeader('xx');JSON.stringify(data);
   response.send(data);
});
Copy the code
  7. / / 1. The statement
const xhr = new XMLHttprequest();
//2. Initialize with method and URL
xhr.open('GET'.'127.0.0.1:8000 /');
//3. Set the request header
xhr.setRequestHeader('Content-type'.'application/x-www-form-urlencoded');
//4. Send request
xhr.send();
//5. Bind events and accept responses
xhr.onreadyStatechange = () = >{
  if(xhr.status === 4) {if(xhr.status >=200 && xhr.status < 300) {console.log(xhr.response); }}};Copy the code

disadvantages

1. Rollback cannot be performed without browsing history 2. Cross-domain problems exist (same-origin policy) 3. 4. SEO is unfriendly (crawlers can't crawl) and has weak support for search enginesCopy the code

Ajax, Petch, Axios

3. Cross-domain problems

1. Same-origin policy

Homology: Security policy proposed by Netscape

The protocol, domain name, and port number must be the same

Ajax follows the same origin policy by default

2. Resolve cross-domain problems

  1. JSONP

    1. An unofficial scheme that only supports GET requests

    2. Jsonp uses the cross-domain capabilities of sciPT tags to send requests

    The principle is to create a script tag on the fly

    Tags such as IMG, link, iframe, and Script all naturally have cross-domain capabilities

        let script = document.createElement('script');
    script.src = 'http://127.0.0.1:8000/xxx';
    document.body.appendChild(script);
Copy the code
    1. Use of JSONP:Copy the code

  2. CORS

    1. Official cross-domain solution

    Do not need to do any special operations on the client side, completely processed in the server, you can handle all kinds of requests

    Response. setHeader(‘ access-Control-allow-origin ‘,’*’); response.setHeader(‘ access-Control-allow-origin ‘,’*’);

3. Prevent cross-domain requests from others

The difference between cORS simple request and precheck request

How do I prevent others from using JSONP or cross-domain request interfaces

  • The server is whitelisted, and those not whitelisted are directly blocked
  • Setting cookies samesite

9. Recycling

This is the most common way of collecting garbage in JavaScript. When a variable enters the execution environment, such as declaring a variable in a function, the garbage collector marks it as “entering the environment” and marks it as “leaving the environment” when the variable leaves the environment (the function ends execution). The garbage collector marks all variables stored in memory at run time, then removes variables in the environment and variables referenced by variables in the environment (closures), Reference counting is a common memory leak in lower versions of Internet Explorer, often because it uses reference counting for garbage collection. Reference counting strategy is to track the number of each value is used, when declaring a variable and will be a reference type assigned to the variable when the value of the reference number is, if it is the value of a variable into another, this is worth reference number minus 1, when the value of citations to 0, show that no variables in use, This value can no longer be accessed, so it can be reclaimed, so that the garbage collector will clean up the space occupied by the zero reference value at run time. In IE, although JavaScript objects are garbage collected through token clearance, BOM and DOM objects are garbage collected through reference counting, which means that there will be circular reference problems as long as BOM and DOM are involved.

V8 garbage collection

  1. Objects are classified into active and inactive objects

  2. The New generation recycler: Scavenge

    Copy algorithms from-space and to-space

  3. Old generation recycling: Mark Sweep, Mark merge Mark-Compact

  4. The pause

    Garbage collection is carried out in The JS engine. In order to avoid The inconsistency caused by The JS application logic and The garbage collector memory competition, garbage collector will suspend The main thread, which is called full stop-the-world. The new generation execution block and The old generation execution is slow

10. Event delegate, event bubble, event capture

  1. Js event flow: The complete event flow includes capture phase, target phase, and bubble phase

  2. Event delegate: Using event bubbling, you can specify a single event handler to handle all events of a certain type

    Do not use event delegate, need to traverse each li button, access multiple times low performance.

    Benefits of use:

    1. Binding only one event eliminates frequent DOM access and provides high performance
    2. Dynamically bind events. When a new DOM is generated, there is no need to bind events repeatedly. The code is clear and concise
    3. Reduce memory consumption

    Note: Nesting deep can also cause performance degradation when bubbling through a large number of ancestor elements.

    Scene:

    If the number of LI labels is large, add events to UL

11. The virtual dom

1. The diff algorithm

12. The object-oriented characteristics of JS

Cold knowledge

  1. ForEach (), filter(), reduce(), every() and some() all skip empty Spaces.

    Map () skips the empty space but keeps the value

    Join () and toString() treat empty Spaces as undefined, while undefined and null are treated as empty strings.

    ES6 will treat empty space as undefined

HTML, CSS,

1. Layout

1.flex

1. The flex center
2. Flex: 1

2. Two-column layout

  1. Flex parent set width for flex column, column FLEX :1
  2. float
  3. position absolute

3. Three-column layout

  1. Position fixes both sides of the page, and the middle body is selected with margin
  2. Float: Float the left and right parts of the document, and use a margin for the middle part of the document after it leaves the flow
  3. Flex: Wrap the three columns with the container and set the display of the container to Flex, set the width of the left and right parts to fixed, set the flex in the middle to 1, and set the left and right values to fixed, so the middle is adaptive
  4. The holy grail:

2.grid

3. Center

1. The vertical
Level 2.
  1. Setting text-align to the parent sets the horizontal center of the inline children
  2. The element itself sets margin: 0 auto, which is useful for setting the width of elements
3. Center horizontally and vertically
  1. For unknown size elements, the parent element is relative, the child element is absolute, LRTB is 0, margin:auto
  2. Margin = absolute margin = absolute margin
  3. Absolute position is used for boxes with clear width and height. TRLB is set to 0
  4. Flex centers the parent element with flex and context-content and align-items as center

2. Common attributes

1.box-sizing

2.display: none visibility: hidden opacity

3.rem

3. The range of new features

4.BFC

  • A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements.
  • The region of the BFC does not overlap with the element region of other floats.
  • When calculating the height of the BFC, the floating child element also participates in the calculation.

Float elements, float values other than None; 2. Position (Absolute, fixed); 3, display as one of the following inline-block, table-cell, table-caption; 4, Overflow for visible (hidden, auto, scroll)

Often used to solve the following problems:

  1. Collapsing Margins

    The top box is set to gin-bottom, and the bottom box is set to gin-top, with the largest total margins instead of the sum

  2. Let a container with no height set contain floating elements

  3. Prevent text from wrapping

5.float

1. How about the width of the floating element

2. Eliminate floating

2. The parent element plus Overflow: Hidden/Auto becomes BFC. The siblings of the floating element are still affected, but the siblings of the parent element are not affected. The parent element defines the pseudo-classes :after and zoom(solve ie6 7) css. clearfix{*zoom:1; /* Trigger ie hasLayout */}. Clearfix :after{content: ""; display: block; /* Make the generated elements appear as block-level elements, occupying the remaining space; */ clear: both; visibility:hidden; /* Make generated content invisible, and allow content that might be covered by generated content to be clicked and interacted with; */ height:0; /* Avoid generating content that breaks the height of the original layout. * /}Copy the code

6.position

7. Box model

8. Selector priority

Important inline > > ID > > tags | pseudo class | attribute selection > false object > > wildcard inheritance

handwritten

1. The triangle

Width and height set to 0. 4 sides transparent set to one side color

2. 0.5 px border

3. Width-adaptive search box (flex available)

The browser

1. Request interaction between TAB pages

2. How does the browser request (through which native interfaces) Ajax, FETCH, axios

3. Methods to improve page loading performance

4. Front-end routing DOM principle

Meter network

1. What happens after entering the URL

Find strong cache -> Build request -> DNS resolution -> Establish TCP connection -> Send HTTP request -> Response (200/304 negotiated cache) -> Build DOM tree -> Build CSSOM tree -> Claim Layout tree -> Build Layer tree -> Generate draw list -> Generate blocks -> Display

  1. DOM\CSSOM\js should be optimized for the first rendering as soon as possible

  2. The difference between defer and Async is that JS loads asynchronously

2. The DNS query

3. The cache

1. Negotiation cache Strong cache

    1. Mandatory caching: The process of searching the browser cache for the result and deciding whether to use the cached result according to the cache rules of the result. There are three types of mandatory caching:

      1. If the cache result and cache id do not exist, the cache is invalidated and the request is directly sent to the server
      2. The cache result and cache id exist, but the result is invalid. If the cache is forced to become invalid, the negotiated cache is used
      3. Exists and is not invalid, force the cache to take effect, directly return the result

      Forcible caching: The Cache rule is returned to the browser in the HTTP header of the HTTP response packet and the request result. The fields that Control forcible caching are Expires and cache-Control. Cache-conctrol has a higher priority than Expires.

      1. Expires

        Expires is a field in the HTTP/1.0 control cache whose value is the expiration date of the result cache that the server returns for that request. If the client time is less than this value, the cached results are used.

      2. Cache-Control

        HTTP/1.1 replaces Expires because EX compares client-side events to events returned by the server and forces the cache to expire if errors occur for some reason, such as a different time zone or an inaccurate time on one side.

      3. The difference between:

        Expires is a fixed value, not a random, “10 years from now.

        To set this life, set the max-age of cache-control

      4. Features: Suitable for static resources, even set to never expire

    2. Negotiate the cache

      After the cache is forcibly invalidated, the browser sends a request to the server with the cache id. The server decides whether to use the cache procedure based on the cache ID

      1. The negotiated cache takes effect and 304 is returned, indicating that the resource is not updated. The browser cache obtains the requested cache result

    3. If the negotiation cache fails, 200 and the request result are returned, indicating that the resource is updated. The request result is returned again, and then the request result and the cache id are stored in the browser cache

      The negotiated cached field is also returned to the browser along with the HTTP header of the response message and the request result: Last-modified/if-modified-since and Etag/if-none-match, where Etag/if-none-match has a higher priority than last-modified/if-modified-since.

      1. Last-modified returns the time when the resource file was Last Modified on the server when the server first responded to the request

      2. If-modified-since indicates that when the client initiates the request again, it carries the last-Modified value returned from the Last request. This field tells the server the time when the resource was Last Modified and asks whether the file has been Modified

      3. Etag is a unique identifier (generated by the server) that returns the current resource file when the server responds to a request

        Hash generated by the index section, size, and last modification time of the file. The next time the client requests it, it sends the ETag to the server, which compares it to the ETag of the current file to determine whether the resource has been modified. If they do not match, the 200 status code, the new Etag, and the resource are returned to the client. If the match is successful, 304 is returned and the client uses local resources.

      4. If-none-match indicates that when the client initiates the request again, it carries the unique Etag value returned by the last request. The value of this field tells the server the unique Etag value returned by the last request

      5. Features:

    4. Conclusion: The mandatory-cache takes precedence over the negotiated Cache. If mandatory-cache (Expires and cache-control) is valid, the Cache is used directly, and If not, the negotiated Cache (last-modified/if-modified-since and Etag/if-none-match) is used. The server decides whether to use the negotiation cache. If the negotiation cache is invalid, the request cache is invalid, and the request result is obtained again and stored in the browser cache. If it takes effect, return to 304 and continue to use the cache

    Cache location:

    1. service worker

    2. memory cache

    3. Disk Cache

    4. Push Cache

      The push cache is the content of HTTP2, and is used only when the above three caches fail to be hit.

    Requests that cannot be cached:

    1. The HTTP header tells the browser through some fields in cache-Control that the request does not need to be cached

  2. Dynamic requests whose input content is determined based on cookies and authentication information cannot be cached

    1. HTTPS encrypted requests cannot be cached
    2. POST requests cannot be cached
    3. The HTTP response header does not contain last-Modified /Etag or cache-Control /Expires requests

2. Cookie, localStorage, and sessionStorage

1. In common

Thing in common:

It’s all saved on the browser side and same-origin

The difference between the three:

  1. Data life cycle
    1. Cookies can be set to expire after the browser is closed by default
    2. Localstorage is permanently saved unless it is cleared
    3. Sessionstorage is valid only in the current session and becomes invalid after the page or browser is closed
  2. Data storage size
    1. Cookies around 4 k
    2. The last two are generally 5MB
  3. Communicates with the server
    1. Cookies are carried in HTTP headers each time, and using them too much can cause performance problems
    2. Cookies are essential for interacting with the server
    3. The latter two are only stored in the client and do not participate in the communication with the server. WebStoraeg is only created to store data locally
  4. Ease of use
    1. Cookies need to be wrapped by the programmer
    2. The latter two can accept native interfaces or can be repackaged to better support Object and Array
2. The characteristics of

  1. The characteristics of the cookie

    HTTP is a stateless protocol, and cookies allow it to record stable state information

    Extremely high scalability and availability

    1. Control the size of session objects stored in cookies through good programming.

    2. Use encryption and secure transmission technology (SSL) to reduce the possibility of cookie cracking.

    3. Store insensitive data only in cookies, so there will be no significant loss even if it is stolen.

    4. Control the lifetime of cookies so that they do not last forever. The thief probably got hold of an expired cookie.

  2. sessionStorage

    1. Data stored on a local session can be accessed only on the same page. After a session ends, the data is destroyed

  3. localStorage

    1. Persistent local storage, unless data is actively deleted
3. Distinction and security

Both are sessions used to track the identity of the browser user

Cookies are special information sent by the server to the client. They are stored in the client as text and are carried with each request

Session: When a session object is created after receiving a request, the system checks whether the client request contains a session ID. If yes, the system returns a session object based on the SESSION ID. If no, a new session object is created and the session ID is returned to the client in the response. The sessionID is usually stored to the client as a cookie.

  1. Storage: Cookies are stored on the client’s browser and session data is stored on the server

  2. Security: Other people can parse cookies stored locally and spoofy them. For security purposes, session can be used. Because the sessionID is stored in the cookie, to attack the session, you must first break the cookie. SessionID is encrypted

  3. Efficiency: Sessions remain on the server for a certain amount of time. Cookies should be used to reduce server performance when the number of accesses increases

  4. Size: A single cookie can hold no more than 4K of data, and many browsers limit the number of cookies stored on a site to 20

  5. Application Scenarios:

    1. Cookies:

      1. Determine whether the user has logged in to the website, so that the next login can be automatic
      2. Save information such as the time of the last login
      3. Save the page you last viewed
      4. Browse the count

    2. session

      The session is used to store each user’s proprietary information, and the values of the variables are stored on the server side. The sesionID is used to distinguish between different clients

      1. Shopping cart in online shopping mall
      2. Saves user login information
      3. Put some data into the session for different pages of the unified user
      4. Prevent unauthorized login

  6. Disadvantages:

    1. Cookies:
      1. The size is limited, only 4K
      2. Users can manipulate cookies to limit their functionality
      3. Low security
      4. Some states cannot be saved to the client
      5. Cookies are sent to the client on every access, wasting bandwidth
    2. The session:
      1. The more things a session holds, the more it uses up memory on the server, which can be stressful for sites with a large number of people online
      2. Depend on cookies (sessionids are stored in cookies)
      3. Overuse of session code is not maintainable

  7. Token of cookies

Conclusion:

Important information such as login information is stored as session

The others are put in cookies

4.HTTP

1. Http1.0/1.1

  1. Cache handling: HTTP1.0 uses last-modified/if-modified-since as the cache judgment criteria; HTTP1.1 introduced cache-control, Etag/ if-none-match, and so on
  2. Error status handling: HTTP1.1 added 24 error status response codes
  3. Range request: HTTP1.1 introduces the range header in the request header to allow only a portion of the resource to be accessed. The return code is 206 to facilitate resumable breakpoints
  4. HOST header: HTTP1.0 assumes that each server is bound to a unique IP address, so the URL in the request message does not pass a HOST name. HTTP1.1 supports the Host header for both request and response messages, and a 400 error is reported without the Host header field in the request message. Hosts can send requests to different sites on the same server
  5. Persistent connections: http1.1 default persistent connections, Connection: keep-alive, TCP connections are not closed by default and can be reused by multiple requests
  6. Pipelining: Http1.1 introduced a pipelining mechanism in which the client can send multiple requests simultaneously over the same TCP connection, but the server can process one response before processing the next, still blocking.

2. HTTPS compared with HTTP

  1. Based on secure SSL/TSL, using port 443 HTTP is 80
  2. HTTP works at the application layer and HTTPS works at the transport layer
  3. HTTPS takes longer
  4. The client first requests and verifies the public key from the server, and then uses the public key to encrypt and transfer to negotiate the generation of private keys (asymmetric encryption). Both parties use the private keys to encrypt communication content (symmetric encryption).
  5. Process:
    1. The client sends a request: provides the supported protocol version and encryption method
    2. The server responds: Confirm the protocol version and encryption method of communication between the two parties and provide the server certificate (including certificate issuer CA, certificate validity period, public key, etc.).
    3. Client response: The browser looks for the built-in trusted certificate issuer CA in the operating system and compares it with the certificate issuer CA returned by the server. Take out the public key in the certificate and generate a new random number, which is encrypted with the public key and sent to the server.
    4. Server response: The server uses its private key to decrypt the random number sent by the client. The client and the server use three random numbers to generate the private key according to the agreed encryption method
    5. Session communication: The client and server use the private key to encrypt the communication. This process is plain HTTP, but the private key is used to encrypt the content.

3.http2

Resolved http1.1 performance issues

  1. Binary framing:

    Http1.1’s header information is text (ASCLL encoded), and the data body can be either text or binary

    Http2’s headers and data bodies are binary, collectively known as frames

  2. The data flow:

    • Flow: A flow is a virtual channel in a connection that can carry bidirectional messages; Each stream has a unique integer identifier (1, 2… N);

    • Message: A logical HTTP message, such as a request, response, etc., consisting of one or more frames.

    • Frame: The smallest unit of HTTP 2.0 communication. Each frame contains the frame header and at least identifies the stream to which the current frame belongs. It carries certain types of data, such as HTTP headers, loads, and so on

      Http2 packets are not sent in order, so packets are marked. Data flow ids must be marked when packets are sent to distinguish them. The data stream ids sent by the client are odd, and the data stream ids sent by the server are even. Both the client and the server can send signals to cancel the data stream halfway through. The only way to cancel the data stream for HTTP1.1 is to close the TCP connection. HTTP2 can cancel a request and leave the TCP connection open.

  3. Multiplexing:

    Http2 can be multiplexed, the same domain can use the same connection, the same connection can be sent in parallel multiple requests and responses, multiple requests and responses do not affect each other

    Both the client and the server can send multiple requests and responses at the same time, avoiding queue blocking and setting priorities for requests.

  4. Header compression: HTTP protocol does not have state, each request must attach all information, will have duplicate fields. HTTP2 introduces a header compression mechanism, on the one hand, the header is compressed and then sent, on the other hand, the client and server maintain the same header table and generate index numbers, can avoid sending the same field, only send index numbers to speed up.

  5. Server push: HTTP2 allows the server to send resources as clients without permission. Generally, the client receives the webpage after parsing THE HTML source code to find the static element to send a request, and HTTP2 anticipating the client request webpage is likely to request static resources, it will take the initiative to send to the client

4.http3

Http2 solves many of the old problems, but the huge problem remains that the underlying support is TCP

TCP uses multiplexing, but if a packet is lost in a connection, it will be retransmitted, resulting in blocking. For HTTP1.1, establishing multiple TCP connections will mitigate this effect.

  1. Udp-based QUIC protocol

    1. 0RTT Implements 0RTT secure handshake to quickly establish a connection

    2. Native implementation of multiplexing, a single data stream can ensure orderly delivery without affecting other data streams

    3. Encrypted authentication packets

      The TCP header is not encrypted or authenticated, and is easily tampered, injected, and monitored

    4. Forward error correction mechanism

      Each packet contains the data of other packets in addition to its own content, sacrificing the upper limit of the data that can be sent by each packet, but reducing the data retransmission caused by packet loss

5. HTTP status codes and differences

Status code The English name describe
100 Continue To continue.The clientShould proceed with its request
200 OK The request succeeded. Typically used for GET and POST requests
201 Created Has been created. The new resource was successfully requested and created
202 Accepted Has been accepted. The request has been accepted, but processing is not complete
300 Multiple Choices A variety of options. The requested resource can include multiple locations, and a list of resource characteristics and addresses can be returned for user terminal (e.g., browser) selection
302 Found Temporary move. Similar to 301. But resources are moved only temporarily. The client should continue to use the original URI
304 Not Modified Unmodified. The requested resource is not modified, and the server does not return any resources when it returns this status code. Clients typically cache accessed resources by providing a header indicating that the client wants to return only resources that have been modified after a specified date
400 Bad Request Client request syntax error, server cannot understand
403 Forbidden The server understands the request from the requesting client, but refuses to execute the request
404 Not Found The server could not find the resource (web page) based on the client’s request. With this code, a web designer can set up a personalized page that says “the resource you requested could not be found.
500 Internal Server Error The server had an internal error and could not complete the request
501 Not Implemented The server did not support the requested functionality and could not complete the request

6. HTTP request packets

    1. Request line, request header, blank line, body

      1. Request line: method, code, protocol
      2. Request headers: host, cookie, Content-Type, user-agent, Accept, accept-encoding, accept-language, authorization, etc
      3. Response header: protocol and response code
      4. Response headers: content-type, content-Length, content-encoding, etc

    2. Request message:

      When the POST and PUT methods are used, the client usually transfers data to the server, and the data is stored in the request packet. For example, if the request format is SET to JSON, set the content-type to JSON

    3. Response message:

      1. The status line

      2. HTTP header (general information header, response header, entity header) Response header fields: Server, Connection, etc

      3. Response message body

        The text information returned by the server to the browser, HTML, CSS, JS, and other files are stored here

      Common header field:

      1. Date: indicates the time when a packet is created
      2. Transfer-encoding: Indicates the Transfer Encoding mode of the packet body

      Request header field:

      1. Host: indicates the Host number and port number of the server that requests resources
      2. Accept: Indicates the media type that can be processed
      3. Accept:-Charset: indicates the accepted character set
      4. Accept-encoding: Indicates the acceptable content Encoding
      5. If- modified-since: If- modified-since: If- modified-since

    Response header field:

    1. Accept-ranges: The acceptable range of bytes

    2. Location: THE URI to redirect the client to

    3. Server: indicates the installation information of the HTTP Server

    4. ETag: the matching information of the resource entity header field (the header of the entity part of the request message and the response message)

      Allow: HTTP methods supported by resources 6. Content-type: Type of the entity main class 7. Content-encoding: 9. Content-length: specifies the number of bytes of the entity body 10. Content-range: specifies the location Range of the entity body 7Copy the code

7. The HTTP method

  1. GET
  2. POST
  3. PUT Transfers the file. The packet body contains the file content and saves it to the URI
  4. HEAD Obtains the packet HEAD, which is similar to GET but does not return the packet body. It is used to verify whether the URI is valid
  5. DELETE Deletes a file. In contrast to the PUT method, the file at the URI location is deleted
  6. OPTIONS Queries the HTTP method supported by the URI

8. How to use get and POST

(1) GET is to get data from the server, and POST is to send data to the server.

(2) Different generation modes:

Get: enter the URL. Hyperlinks; The method attribute in the Form is get; Method is empty in the Form Form.

There is only one type of Post: Method in the Form Form is Post.

(3) Data transmission mode: The request data transmitted by Get is placed after the URL in the key-value mode, which can be directly seen in the URL. Split the URL from the transmitted data, connecting the transmitted parameters with &, for example: login.action? Name = user&password = 123. So the security is poor.

The POST method places the parameters of the request in the request header and space. The request data field is the body of the request (request body) separated by ampersand. The request line contains no parameters, and no additional parameters are attached to the URL. So high security.

(3) Limitation of sending data size: Usually GET request can be used to obtain lightweight data, while THE content data volume of POST request is relatively large.

The Get: 1 ~ 2 KB. The size of the data submitted by the GET method directly affects the LENGTH of the URL. However, there is no restriction on the LENGTH of the URL in the HTTP protocol specification. The restriction is influenced by the support of the client or server.

Post: No requirement. There are no limits in the POST HTTP protocol specification, but only the capabilities of the server’s handler.

(4) The security of submitted data: POST is more secure than GET. Get security is poor, but Post security is high.

By submitting data via GET, the user name and password will appear in clear text on the URL, if the login page has a browser cache, or if someone else is looking at the browser’s history

You can get the user’s account number and password. Security will be poor.

9. How to understand the statement that HTTP is based on byte streams

1. What is the problem with HTTP based on subsections

10. What if HTTPS is attacked by man-in-the-middle

XSS and CSRF attacks

XSS cross Site Script attack refers to the attack that the attacker injects malicious scripts on the website, so that users can conduct malicious operations when browsing and using the web page. The injected scripts include CSS and HTML in addition to JavaScript.

It is divided into three types: reflection type (non-persistent), storage type (persistent), DOM type.

  1. reflective

    Generally, the attacker induces users to click on malicious links, submit forms and other operations, so as to achieve the purpose of injecting scripts. Malicious scripts are placed in THE URL address, and clicking on them will attract users

  2. Storage type

    Generally, the attacker submits malicious code as the input data to the server, and then the server stores the data in the database. When a user requests the data, the server returns the data as malicious code, thus XSS attack occurs

    More common is to post on the forum, comment, and then inject malicious code into it, when the user clicks on the post, it will be attacked.

    Measures:

    1. Filter input and output results and escape as necessary
    2. Gold uses the POST method and limits the path length when using GET
    3. Using HttpOnly prohibits a hacker from accessing a user’s cookie data through a script, but cannot completely prevent it because sending an HTTP request does not require an active cookie retrieval

  3. The DOM model

    Generally, after injecting malicious scripts, the attacker modifies the page elements, obtains DOM data and then executes the attack. For example, the submission of the user’s login form is replaced by the attacker’s server to obtain the user’s login information.

XSS precautions:

  1. CSP content security policy. Major browsers implement CSP. Add content-Security-Policy HTTP headers to a page and configure values that specify that the browser can only execute code from a specific source
  2. By setting HttpOnly, the browser disallows the page’s JS script from accessing cookies with the HttpOnly attribute
  3. The front end checks, escapes, and filters user input, and creates a whitelist of trusted characters and HTML tags. Only secure characters and HTML tags are allowed to exist. XSS filter generally checks special characters such as < > and filters or encodes them if they exist
  4. The front-end logic is easy to be bypassed, and the back-end also needs to check and filter the data, and encode and escape the output

CSRF cross Site Request Forgery

It is common for an attacker to induce users to open a phishing site for some action. For example, when user A visits web site B, hacker C seduces user A to visit malicious web site D, and dangerous web site D has illegal operations to request web site B, thus realizing the attack. While browsers are subject to the same origin policy, IMG, IFrame, Script, and SRC do not have the same origin restriction, and cross-site requests can be made by dynamically adding these tags.

  1. CSRF can initiate requests in many ways: image URL, hyperlink, form submission, etc.
  2. Unlike XSS attacks, CSRF attacks are generally launched on third-party websites.
  3. CSRF only uses HTTP requests to automatically carry the user’s Cookie information to pass authentication, but does not obtain the Cookie information.
  4. CSRF is to request the page API to implement illegal operations, XSS is to implant JS scripts into the current page

The CSRF protection

For replay attacks, there is no way to deal with the front end, mainly on the back end.

  1. The Referer field

    In the HTTP request header, there is a Referer field, which records the source address of the HTTP request. The server checks this field to determine whether the request is from a valid address. However, it should be noted that the Referer field is added by the browser, so there is a possibility of tampering, and the effect is not good.

  2. Verification code mechanism

    Generally, CSRF attacks users by sending requests without their knowledge. Therefore, the authentication mechanism can be used to force users to interact with the website, such as sending verification codes to users’ mobile phones or email addresses, or requiring users to complete puzzles or fill in verification codes. But authentication is not good for the user experience, and not all operations can be authenticated.

  3. Token (often used)

    The reason for the success of CSRF attack is that the attacker can completely forge the user’s request. The attacker does not need to know the speech over information and directly takes cookies to pass security verification.

    After the user logs in, the server issues a random token, which can be buried in the page or stored in the sessionStorage. Then the client sets an interceptor to add the token to all requests, and the server sets an interceptor to check whether the request has the token. CSRF cannot obtain the token because of the same origin policy (the protocol, domain name, and port are the same as each other).

    let xhr = new XMLHttpRequest();
let token = sessionStorage.getItem('csrfToken');
xhr.setRequestHeader('CSRF-Token', token);
Copy the code

    Note that the token must be stored on the server, and the server must read and verify the token.

The Samesite property of the cookie defends against CSS and CSRF

  1. Strict completely forbids third-party cookies. Cookies are carried only when the web url matches the target
  2. Lax is the default and does not send third-party cookies in most cases, except for get that navigates to the target URL
  3. None close samesite

Common differences

(1)CSRF vulnerability is more harmful than XSS vulnerability.

(2) XSS can do everything CSRF can do.

(3)XSS has limitations, while CSRF has no limitations.

(4)XSS is for the client, while CSRF is for the server.

(5)XSS uses legitimate users to obtain their information, while CSRF is forged as legitimate users to initiate requests.

6. TCP UDP

1. How does TCP ensure reliable transmission

Sequence number, checksum, acknowledgement acknowledgement (ACK), retransmission control, connection management, window control, flow control, congestion control

  1. Traffic control: Each side of a TCP connection has a fixed size of cache space. The TCP receiver allows the sender to send only the data that can be accepted by the cache of the receiver. When the receiver does not have time to process the data of the sender, the sender can be prompted to reduce the sending rate to prevent packet loss. TCP uses a variable-size sliding window protocol for flow control

  2. ARQ protocol: The basic principle is to stop after sending a packet, wait for confirmation, and then send the next packet after receiving confirmation. TCP does not use this protocol

  3. TCP is pipelined

    1. Verification, serial number, confirmation, retransmission

    2. Verification: add false header, binary inverse sum for verification.

    3. Serial number: The byte stream is divided into packet segments. Each packet segment has an ordered number to ensure orderly transmission

    4. Acknowledgement: Returns the acknowledgement packet after receiving the packet segment. Both parties determine whether the packet is successfully sent and which segment to send next by checking the required sequence number of the packet. TCP uses cumulative acknowledgment, that is, the segment after the first missing segment is received

    5. Timeout retransmission: TCP sender will retransmit if no acknowledgement is received within the specified time. The retransmission time RTTs adopts the adaptive algorithm (weighted average round trip time).

      Redundant ACK: The sender sends 1, 2, 3, 4, and 5 packets. After receiving 1, the receiver returns 1 for all 3, 4, and 5 packets (that is, the first byte with the acknowledgement number 2) if no 2 is received.

2. Differences between TCP and UDP

Udp is connectionless. Udp is delivered with maximum effort, that is, reliable delivery is not guaranteed, so the host does not need to maintain complex connection state. Udp is packet-oriented and does not split or merge the packets transmitted from the application layer. Therefore, network congestion does not reduce the sending rate of the source host (useful for real-time applications, such as live broadcasting and real-time conferences). 5. Udp supports one-to-one, one-to-many, many-to-one, and many-to-many communication. Shorter than TCP's 20-byte header TCP 1. TCP Connection-oriented 2. TCP Byte Stream Oriented, which treats packets from the application layer as byte streams and splits the byte stream into data blocks of different sizes. Add TCP header 3. Each TCP can only be delivered by two endpoints, one to one 4. TCP provides reliably delivered services. Data transmitted over TCP is error-free, not lost, not duplicated, and arrives sequentially. Reliability depends on timeout retransmission and flow control. 5. TCP provides full-duplex communication. TCP allows applications on both sides of the communication to send data at any time. Both ends of the TCP connection are configured with send and receive caches. 6. TCP Classic application layer protocols: FTP file transfer protocol SSH remote login protocol HTTPCopy the code
3. TCP reuse in HTTP3.0
4. TCP traffic control

  1. The goal is to match the send rate with the extract rate of the receiving application

  2. Working mechanism: sliding window mechanism:

    The receiver dynamically adjusts the size of the sending window of the sender according to the size of its own receiving cache, that is, RWND of the receiving window (the sender is notified by setting the window field of the confirmation message segment). The sending window of the sender depends on the minimum value of RWND of the receiving window and CWND of the congestion window

    TCP sets a persistent timer for each connection. As long as one party receives the zero-window notification from the other party, it starts the persistent timer. If the timer expires, it sends a zero-window detection message segment, and the receiver returns the current window value after receiving it, avoiding deadlock situations.

5. TCP congestion control

Flow control is point-to-point, end-to-end, while congestion control is a global issue.

Assumptions:

  1. Data is sent in one direction and confirmation only in the other direction

    1. The receiver always has enough cache space, so the size of the send window depends on congestion

      Receiving window Indicates the receiving capability of the receiving window

      Congestion window reflects current network capacity

** How does the sender detect congestion ** 1. A segment timed out (lost event) : ** Congestion ** 2. Network congestion (the cache of a router is full and discarded)(high probability) 3. Transmission errors occur at all levels and fail verification and are discarded (low probability). Once timeout occurs, congestion is considered. Three repeated ACKS for a certain segment: ** Slight congestion ** Repeated ACKS indicate that the network is lost. If an ACK can be received, the network still has some transmission capacity, indicating that the network is about to become congested.Copy the code
Slow start

The CWND start value of the congestion window is 1, the maximum packet segment length is MSS, and the threshold for slow start ssthRESH is 16

Congestion avoidance

When CWND reaches SSTHRESH, it increases linearly and does not increase exponentially until network congestion occurs.

Characterized by:

When ack is received, CWND = CWND +1

At each RTT, CWND = CWND + 1

After congestion (timeout)

  1. Immediately use CWND /2 as the new SSTHRESH value (at the same time change CWND to 1 and restart the slow start) and generally follow the principle of increasing addition and decreasing multiplication
Fast retransmission

Minor congestion occurs (3 redundant ACKS are received)

  1. Set ssthRESH to half

    1. CWND is set to the value of SSTHRESH

  2. Enter Fast Recovery

    This avoids a slow start

Fast recovery

It usually happens in fast retransmission, and after receiving three repeated Acks the network is not that bad

So after CWND = CWND /2, sshTHRESH = CWND, CWND = sshthresh + 3*MSS

conclusion

CWND <sshthresh slow start, window grows exponentially

CWND >sshthresh Congestion avoided, window grows linearly

CWND /2 CWND =threshold+3 when 3 duplicate ACK threshold Settings are received

When the timeout event occurs, timeout, threshold= CWND /2, CWND =1MSS indicates the slow startup

6. TCP header

7. Shake hands

1. The process

  1. Three-way handshake

    2. The client sends a request packet segment, SYN=1, and specifies the initial packet segment number seq=x
    3. The server returns an acknowledgement packet, SYN=1,ACK=1, the initial sequence number of the server seq= Y,ACK= X +1(the sequence number of the packet to be received next time), and the server allocates the receive cache
    4. The client returns a SYN=0,ACK=1, SEq = X +1, ACK= Y +1

  2. Four times to wave

2. The client sends a connection release packet and stops sending data. FIN=1 and SEq = U

  1. The server returns an acknowledgement packet with ACK=1, SEq = V, ACK= U +1

  2. After data transmission is complete, the server sends a connection release packet. FIN=1,ACK=1, SEQ = W,ACK= U +1

  3. The client sends back an acknowledgement message and waits for a timer 2MSL before shutting down completely.

    Cause: If the server does not receive the LAST acknowledgement packet from the client, the server retransmits the connection packet. After the client receives the acknowledgement packet, the server retransmits the acknowledgement packet. If the packet is terminated prematurely, the server remains in the last-ACK state.

2. What are the attacks in the three-way handshake

  1. SYN flood attacks occur at the transport layer. The attacker sends a large number of TCP SYN packets and does not acknowledge the ACK packets sent by the server. As a result, many half-connected TCP packets are generated, occupying a large number of server resources, and causing a crash. The solution is syn-cookie

The operating system

1. Processes and threads

1. How do multi-processes and multi-threads interact respectively
2. The difference between processes and threads

  1. Threads are the smallest unit of program execution, while processes are the smallest unit of resources allocated by the operating system.

  2. Processes create threads, create PCBS to hold resources and content, and a process is made up of one or more threads, threads are different execution paths of code in a process.

  3. Processes are independent of each other, but threads in the same process share the program’s memory space.

  4. Scheduling and switching: Thread context switching is much faster than process context switching

3. Process status: Ready, Running, or blocked
4. Process scheduling algorithm

Process scheduling algorithm:

  1. Batch system

    1. First come, first served

      It’s good for long assignments, bad for short assignments, because short assignments have to wait

    2. Short work priority

      Long operations may starve to death, waiting for short operations to be completed

    3. Minimum remaining time is preferred

      Schedule in the order with the shortest estimated remaining time

  2. Interactive system

    1. Time slice rotation

    2. Priority scheduling

    3. Multistage feedback queue

      Think of it as a combination of time slice rotation and priority

5. Synchronize processes
  1. A critical region
  2. Synchronization and mutual exclusion
  3. A semaphore
6. Interprocess communication
  1. Anonymous pipe
    1. Only between father and son
    2. Supports only half duplex communication, that is, one-way alternating transmission
  2. FIFO, also called named pipe
    1. Removed the restriction that pipes can only be used in parent-child processes
    2. Often used to pass data in C/S
  3. The message queue
    1. Message queues exist independently of the read-write process, thus avoiding the difficulties of opening and closing synchronous pipes in FIFO
    2. FIFO synchronization blocking is avoided and the process does not need to provide its own synchronization method
    3. The reading process can choose to receive the message, which is read randomly
  4. A semaphore
    1. Counter used to provide multiple processes with access to shared data objects
  5. Shared storage
    1. To allow multiple processes to share a given storage area, semaphores are required to synchronize access to the shared storage

2. A deadlock

  1. A deadlock is a phenomenon in which two or more processes are waiting for each other during execution because they are competing for resources and cannot proceed without external forces. In this case, the system is in a deadlock state or a deadlock occurs in the system. These processes that wait for each other forever are called deadlock processes. Two sheep cross a single log bridge

  2. Necessary conditions:

    1. Mutually exclusive: A resource can only be used by one process at a time
    2. Request and Hold: A process that already has a resource can request new resources
    3. Non-preemption: Allocated resources cannot be forcibly preempted and can only be released
    4. Loop wait: A loop consisting of two or more processes, each waiting for the next process to release resources

  3. Treatment methods:

    1. The ostrich policy

      Just ignore it. It’s not expensive

    2. Deadlock detection and recovery

      1. Instead of trying to prevent deadlocks, recover when they occur
      2. Recovery can be achieved by preempting, rolling back, and killing processes

    3. Deadlock prevention

      1. Break the mutex condition

        1. Some resources do not need to be mutually exclusive to break conditions
        2. Some hardware can be accessed simultaneously

      2. Break possession and wait conditions

        You can request all the resources you need before all processes start executing

        However, it may not be possible to retrieve all required resources before the job is executed,

        And the runtime has to wait for all resources to be satisfied

      3. Break the non-preemption condition

        Processes that already possess resources release all resources and need to reapply, which can be costly

      4. Failure loop condition

        By numbering resources, processes can only request resources in numbered order

        Resource utilization and system throughput have been improved, but resources are still wasted. Stable serial numbers limit the increase of team members

    4. Deadlock avoiding

      1. Checks when a process requests resources to determine whether a deadlock occurs
      2. Banker algorithm, request resources through matrix judgment can be in the safe state

engineering

1. Design patterns

1. Singleton mode

2. Factory mode

3. Release the subscriber model

4. Observer mode

2. Functional programming

3.webpack

project

1. Most complicated thing I’ve ever written

2. Highlights, difficulties and areas worth improvement

  1. The styling

    Box nesting, component reuse, shadows, Overflow, Layout, Flex

  2. design

  3. To optimize the

  4. eslint

  5. tsx

  6. Window:

  7. Vuex implements login authentication, which has asynchronous problems

  8. Focus on specification, communication, commit, Rebase, collaboration and modularization

3. The difference between Vue and native JS

Process oriented, object oriented; The MVVM pattern

4. What optimizations have you used

Such as caching

5. Technology stack

Vue,es6,ts,tsx

npm yarn git

algorithm

1. Dynamic planning

1. Minimum common substring

2. Rainwater access

3. Stair climbing problems

4. Question of islands

5. Maximum sum of contiguous subarrays

6. Simple tree DP

2. Unclassified

1. Base conversion

2. Array element is the maximum number of jumping steps, and judge whether the array can jump to the end

3. Sum of three numbers

4. String expression, computed result (with two stacks of numbers and symbols)

5.leetcode 149

6. The problem of topK

7. Sort version numbers

8. Find most elements

Given an array of size N, find most of the elements. Most elements are those that occur more than n/2 times in the array. You can assume that the array is non-empty and that a given array always has most elements. // Input :[3,2,3] Output: 3 // Input :[2,2,1,1, 2,2] Output: 2

9. Rectangle intersection problem

10. Js 0.1+0.2=0.3 problem

11. Identify the parallelogram

12. Monotonous stack weight removallabuladong.gitbook.io/algo

3. The greedy

1. The teacher divides the cookies and the students want different amounts of cookies

4. bfs

1. TopK problem (BFS + fast sorting)

5. The tree

1. The path from the root of a binary tree to the leaf node is called a path. The sum of the values of each node on the path is the path and the value

2. Search for the sum of binary tree paths

3. Check whether the binary trees are equal

6. Sorting, data structure

Stability of 1.

  1. Stable: incoming, bubbling, selection (see condition), merge
  2. Unstable: fast row, heap row, selection (see conditions)

2. Fast merge of heap and stack linked queue

1. Simulate queues with two stacks
2. Perform big top heap on arrays [44, 91, 93, 30, 21, 9, 89]The sortingAfter, then delete the maximum value after the arrayThe sortingThe order is
3. Linked list types
4. Delete the last KTH number in the linked list

4. Handwritten binary search

5. Sort with n complexity

6. In the case of time complexity O(n), 1-100 outputs are not repeated randomly

7. The string

1. String regularization algorithm

2. Give O(n) string deduplication algorithm

3. Large numbers add and subtract leetcode2

4. The longest string without repetition

intelligence

1. Tiger eats sheep

2. Chameleon problem

There are chameleons with white, grey and black colors on the island. When two chameleons with different colors meet, they will change into a third color at the same time. Is it possible that the number of chameleons with three colors is 10, 14 and 15, respectively, and they will change into a chameleon of the same color?

3. Coin toss odds

Two people flip a coin in turn, one of them flips first, and the one who flips heads first wins, and the probability of both people winning.

other

1. How did you learn it

2. What books have you read and when do you use them

3. Tell me about the internship