Shock!!! Front-end 300 basic interview questions + answer, classification learning arrangement (conscience production) continue to update

Note: it takes half a month to re-learn the basics, finish learning, finishing finishing, summarizing and concluding, painful and happy.

(Questions and suggestions are welcome, and the name of the proposer will be attached after adoption)

HTML report

Talk about the title and Alt attributes

Both properties are displayed when the mouse is slid over the element
alt 是 imgUnique attributes, is the equivalent description of the picture content, the picture can not be displayed normally when the replacement text.
titleAttributes can be used for all tags except base, Basefont, head, HTML, meta, Param, script, and title.

Thanks for: the advance of the correction

What are the new features and elements removed from Html5

New elements:
- paintingcanvas
- Used for media playbackVideo and audioThe element
- Local Offline storage localStorage Data is stored for a long time. Data is not lost after the browser is closed
- sessionStorage Data is automatically deleted after the browser is closed
- Better semantically oriented content elements, such asArticle, footer, Header, nav, section
- Form control,Calendar, Date, Time, Email, URL, search
- The new technologyWebworker, Websocket, and Geolocation
Removed elements:
- Pure expressive elements:Basefont, BIG, Center, FONT, S, Strike, TT, U
- Elements that have a negative impact on usability:Frame, frameset, noframes
Support for new HTML5 tags:
- IE8/IE7/IE6 Supported bydocument.createElement Method to generate a label
- You can take advantage of this feature to make these browsers support itHTML5 The new label
- Once the browser supports the new tag, it also needs to add the default style for the tag

How do browsers manage and load Html5 offline storage resources

How to use:

Add one to the page header as belowmanifestThe properties of the;
incache.manifestFile authoring offline storage resources
In the offline state, the operationwindow.applicationCacheImplement requirements

When online, the browser finds the MANIFEST attribute in the HTML header and requests the MANIFEST file. If it is the first time to access the app, the browser will download the corresponding resource according to the contents of the MANIFEST file and store it offline. If the app has already been accessed and the resource has been stored offline, the browser will load the page using the offline resource. Then the browser will compare the new manifest file with the old manifest file. If the file has not changed, nothing will be done. The resources in the file are then re-downloaded and stored offline.

What are the disadvantages of iframe?

iframe Blocks the main pageOnloadThe event
Search engine searchers can’t decipher such pages,Is not conducive to SEO
iframeThe connection pool is shared with the main page, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected
useiframeThese two disadvantages need to be considered before. If needediframe It is better to passjavascriptDynamic toiframe addsrcProperty value, which gets around both of these problems

HTML W3C standard

Tag closure, tag lowercase, no disorderly nesting, use of external chain CSS and JS, structure behavior separation

Doctype? How to distinguish strict mode from promiscuous mode? What do they mean?

<! DOCTYPE>The declaration is first in the document, in html Tag before. Tell the browser’s parser what document type, specification to use to parse this document
Strict mode of typesetting andJSOperation mode is run to the highest standards supported by the browser
In promiscuous mode, pages are displayed in a loosely backward compatible manner. Emulate the behavior of older browsers in case the site doesn’t workDOCTYPENonexistent or improperly formatted documents will be rendered in promiscuous mode

What are HTML global attributes

class: Sets the class identity for the element
data-* : Adds custom attributes to an element
draggable: Sets whether elements can be dragged
id: element ID, unique within the document
lang: the language of the element content
style : inline CSS styles
title: Suggestion information about the element

The content property of a viewport

<meta name="viewport" content="" />Width the width of the viewport [device - width | pixel_value] width if directly set pixel_value numerical, most of the android mobile phone does not support, but the ios support; Height - the height of the viewport (range from 223 to 10000) user - scalable [yes | no] whether to allow scaling of initial - scale [number] initialization ratio > (range from 0 to 10) Minimum-scale Maximum-scale maximum scale-target-densityDPI values are as follows (It is generally recommended to set medium loudness density or low pixel density, the latter to the specific value dPI_value, -- DPI_value is usually 70-400// number of pixels per inch -- device-dPI Default pixel density -- high-DPI high pixel density -- medium-dpi medium pixel density -- Low-dpi Low pixel densityCopy the code

Side question: how to deal with the mobile 1px rendering 2px?

Local treatment:

mateIn the tagviewportProperties,initial-scaleSet to 1
remAccording to the design standards, plus useTransfrome scale (0.5)It can be doubled;

Global processing:

mate In the tagviewportProperties,initial-scaleSet to 0.5
remFollow the design standards

Meta related

<! DOCTYPEhtml> <! --H5 standard declaration, using HTML5 docType, case insensitive -->
<head lang="En"> <! -- standard way to write lang attributes -->
<meta charset='utf-8'> <! Declare the character encoding used in the document -->
<meta http-equiv="X" - UA - Compatible content="IE=edge,chrome=1 /"> <! -- Use the specified document mode in the specified browser first -->
<meta name="Description" content="Contains a maximum of 150 characters" /> <! -- Page description -->
<meta name="Keywords" content="/"> <! -- Page keywords -->
<meta name="The author" content="The name, email@gmail.com"/ > <! -- Page writer -->
<meta name="Robots" content="The index, follow" /> <! -- Search engine crawl -->
<meta name="Viewport" content="The initial scale=1, maximum-scale=3, minimum-sc
<meta name="Apple -- mobile web app - title" content="Title"> <! - the iOS devices begin -- >
<meta name="Apple -- mobile web app - capable" content="Yes" /> <! -- Whether to enable WebApp full-screen mode after adding to the home screen, delete apple's default toolbar and menu bar -->
<meta name="Apple -- mobile web app - the status bar - style" content="Black" />
<meta name="The renderer" content="Its"> <! -- Enable webKit in 360 browser -->
<meta http-equiv="X" - UA - Compatible content="IE=The edge"> <! Avoid compatibility mode in IE -->
<meta http-equiv="Cache-control" content="No - siteapp" /> <! -- don't let Baidu transcode -->
<meta name="HandheldFriendly" content="True"> <! -- Optimized for handheld devices, mainly for older browsers that don't recognize viewports -->
<meta name="MobileOptimized" content="320"> <! -- Microsoft's old browser -->
<meta name="Screen -" orientation" content="Portrait"> <! -- UC forced portrait -->
<meta name="X5 -" orientation" content="Portrait"> <! --QQ forced portrait screen -->
<meta name="Full screen" content="Yes"> <! --UC mandatory full screen -->
<meta name="X5 - fullscreen" content="True"> <! --QQ mandatory full screen -->
<meta name="Browsermode" content="Application"> <! UC Application Mode -->
<meta name="X5 - page - mode. content="App"> <! -- QQ application mode -->
<meta name="Msapplication - tap - highlight" content="No"> <! -- Windows Phone Settings page does not cache -->
<meta http-equiv="Pragma" content="No - cache">
<meta http-equiv="Cache-control" content="No - cache">
<meta http-equiv="Expires" content="0">
Copy the code

Learn more about reference: https://blog.csdn.net/kongjiea/article/details/17092413

What are the advantages of div+ CSS over the Table layout

It’s easier when you change it just change itcssFile.
Page loading speed, clear structure, simple page display.
Expression is separated from structure.
Easy to optimize(seo)Search engines are friendlier and it’s easier to get ahead.

Difference between SRC and href

srcTo replace the current element,hrefUsed to establish a link between the current document and the referenced resource.
src issource “, referring to the location of the external resource, which will be embedded in the document where the current tag is; In the requestsrc A resource downloads and applies the resource it points to to a document, for examplejs The script,imgPictures andframeElements such as

When the browser parses the element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as images and frames, similar to embedding the pointed resource in the current tag. Is that why you put js scripts at the bottom and not at the head

Href is Hypertext Reference
link href="common.css" rel="stylesheet"
css
link
css
@import

CSS article

The difference between link and @import

link 是 HTMLWay,@import 是CSSway
linkMaximum support for parallel downloads,@importToo much nesting leads to serial downloads, FOUC (document style transient failure)
link Can be achieved byrel="alternate stylesheet" Specifying candidate styles
The browser tolink Support earlier than@import, you can use@importHide styles from older browsers
@importMust precede style rules that can be set incssFile references other files
In general:linkBetter than@import ，linkAnd a higher priority

What does the BFC do

Create a rule:
- The root element
- Float element (floatDon’t value for none ）
- Absolute positioning element (position Values forabsolute 或 fixed ）
- displayValues forInline-block, table-cell, Table-caption, flex, inline-flexOne of the elements
- overflowDon’t value forvisible The elements of the
role
- You can include floating elements
- Not overridden by floating elements
- Block parent and child elementsmarginfolding

Several ways to clear floats

The parentdivdefineheight
Empty the enddivThe label clear:both
The parentdivDefining pseudo class:after 和 zoom
The parentdivdefineoverflow:hidden
The parentdivAlso float, need to define the width
At the end addbrThe labelclear:both

Css3 added pseudo class – pseudo element

p:first-of-type Selects each <p> element that belongs to the first <p> element of its parent element.
p:last-of-type Selects each <p> element that belongs to the last <p> element of its parent element.
p:only-of-type Select each <p> element that belongs to a <p> element unique to its parent element.
p:only-child Selects each <p> element that belongs to a unique child of its parent element.
p:nth-child(2) Select each <p> element that belongs to the second child of its parent element.
:enabled Enabled form elements.
:disabled Disabled form elements.
:checked A single or check box is selected.
::before Add content before the element.
::after Adding content after an element can also be used for clearing floats.
::first-line Add a special style line to the first line.
::first-letter Add a special style to the first letter of the text.

Thanks: CAI Deyao’s correction I believe you can see the difference between them,

The pseudo-class syntax is a:, which is intended to compensate for CSS’s regular class selectors
Pseudo-element syntax is two: it is an element generated by a virtual container created out of thin air

IE box model, W3C box model

W3C box model: Content, padding, margin, border;
- box-sizing: content-box
- width = content width;
IE box model: The content section of IE calculates the border and padding;
- box-sizing: border-box
- width = border + padding + content width

Display: Inline-block when a gap is not displayed?

Remove the blank space
use marginnegative
usefont-size:0
letter-spacing
word-spacing

Does the inline element float:left become a block-level element?

Inline elements become more inline-block when set to float (inline block-level elements, elements with this property have both inline and block-level properties, the most obvious difference being that their default width is not 100%), Padding-top and padding-bottom, or width and height, will work for inline elements

If you need to write animation manually, what is the minimum time interval you think, and why?

The default frequency of most monitors is 60Hz, which means 60 refreshes per second, so the minimum interval is theoretically 1/60*1000ms = 16.7ms

CSS weights and calculation rules

! important> Inline Style > ID > Class Property, Property selector or pseudo class selector > Tag selector

As mentioned in CSS REFACTORING, the algorithm process depends on the values of A, B, C, and D. What is ABcd?

symbol	calculation
A (Inline style)	A=1 if you have inline style and 0 if you don’t
B (number of occurrences of ID selector)	There are two levels of ID selector B=2
C (number of occurrences of class selectors)	1 class selector, 1 attribute selector, 2 pseudo-class selector C=4
D (number of occurrences of labels and pseudo-class selectors)	2 label selectors, 1 pseudo-class selectors D=3

li /* (0, 0, 0, 1) */ ul li /* (0, 0, 0, 2) */ ul ol+li /* (0, 0, 0, 3) */ ul ol+li /* (0, 0, 0, 3) */ h1 + *[REL=up] /* (0, 0, 1, 1) */ ul ol li.red /* (0, 0, 1, 3) */ li.red.level /* (0, 0, 2, 1) * / a1, a2, a3, a4, a5, a6, a7, a8.. A9 a10. A11 / * * / (0, 0, 11, 0) # x34y / * (0, 1, 0, 0) * / li: first - child h2. The title / * (0, 0, 2, 2) */ #nav .selected > a:hover /* (0, 1, 2, 1) */ html body #nav .selected > a:hover /* (0, 1, 2, 3) */Copy the code

Finally, starting from A, layer by layer, A => B =>C =>D whichever style is larger takes precedence over the previous style, which is why some nested multi-layer styles can be overwritten.
Style names also have the proximity rule, so that what works on the current tag overwrites the inherited style
The final combination of these conditions is the CSS weight problem and calculation rules

Thanks: captain _ correction

Stylus/sass/less difference

All have five basic features of “variable”, “mix”, “nested”, “inheritance” and “color mix”
Sass 和 LESSThe grammar is more rigorous,LESSBe sure to use curly braces “{}”,Sass 和 StylusHierarchy and nesting relationships can be indicated by indentation
SassThere is no notion of global variables,LESS 和 Stylus There is a concept of scope similar to that of other languages
SassIs based onRubyLanguage, whileLESS andStylus Can be based onNodeJS NPMAfter downloading the corresponding library to compile; This is also why Sass installation sometimes error, need to install Python script

Advantage: need not I say more, who use who know, true sweet.

What is the difference between rGBA () and opacity?

rgba() 和 opacityBoth can achieve transparency, but the biggest difference is thisopacityThe transparency applied to the element, and everything inside the element,
whilergba()Applies only to an element’s color or its background color. (Children of rGBA transparent elements do not inherit transparency!)

Horizontal middle method

Element is an inline element and sets the parent elementtext-align:center
If the element width is fixed, you can set it to left or rightMargin for the auto;
If the element is absolutely positioned, set the parent elementThe position is relative, the element setleft:0; right:0; margin:auto;
useflex-boxLayout, specifyjustify-contentProperties forcenter
displaySet totabel-ceil

Vertical center method

Set the display mode to table,display:table-cell, while settingVertial - align: middle
useflexLayout, set toThe align - items: center
Set in absolute locationbottom:0,top:0 , and set themargin:auto
Set when absolute position is fixed heightTop: 50% margin - topThe value is a negative half of the height
The text is vertically centeredline-height 为 height value

The browser article

Browser kernel understanding

It mainly consists of two parts:Rendering engine,Js engine
Rendering engine:Responsible for getting the content of the page (HTML CSS IMG…) , and calculate how the web page will be displayed, and then output to a monitor or printer. Browser kernels interpret the syntax of web pages differently, so the rendering effect is also different
Js engines:Parse and execute javascript to achieve dynamic web pages
At the beginning, there was no clear distinction between rendering engine and JS engine. Later, JS engine became more and more independent, and the kernel tended to only value rendering engine
IE : tridentThe kernel
Firefox: geckoThe kernel
Safari : webkitThe kernel
Opera: used to beprestoThe kernel,OperaNow switch toGoogle - Chrome 的 BlinkThe kernel
Chrome:Blink (based onwebkit ，Google and Opera SoftwareJoint development)

HTTP request scenario

Thanks: Suggestions for progress come from hard work

GetMethod: Get data usually (view data)- view
POSTMethod: Submit data to the server usually (create data)-create
PUTMethod: Submit data to the server usually (update data)-update, withPOSTIt’s a very similar approach, it’s submitting data, butPUTSpecifies the location of resources on the server, often used to modify data
HEADMethod: Request only the header information of the page
DELETEMethod: Delete the resource on the server
OPTIONSMethod: Used to get the currentURLSupported request modes
TRACE Method: Used to activate a remote application-layer request message loop
CONNECTMethod: Convert the request link to transparentTCP/IPThe passage of

The HTTP status code

1XX: Indicates the information status code
- 100 continueIn general, when sending a POST request, the server will return this information after the HTTP header has been sent, indicating confirmation, and then send specific parameter information
2XX: Indicates the success status code
- 200 ok Normal return message
- 201 created The request succeeds and the server creates a new resource
- 202 accepted The server has received the request but has not yet processed it
3XX: redirect
- 301 move per The requested web page has been permanently redirected
- 302 found Temporary redirection
- 303 see other Temporarily flush redirects and always request new urls using GET
- 304 not modifiedThe requested page has not been modified since the last request
4XX: Client error
- 400 bad requestThe server does not understand the format of the request, and the client should not attempt to initiate the request again with the same content
- 401 unauthorizedRequest not authorized
- 403 forbidden Blocking access
404 not foundCan’t find a resource that matches the URL
5XX: Server error
- 500 internal server error The most common server-side errors
- 503 service unacailable The server is temporarily unable to process requests (possibly overloaded live maintenance)

What happens when you enter the URL from the browser address bar?

Basic version

1. Browser based on request URLtoDNS Domain name resolution, find the realIP To initiate a request to the server;
2. The server returns data to the background and the browser receives the file(HTML, JS, CSS, images, etc.);
3. Browser to loaded resources(HTML, JS, CSS, etc.)Carry on the grammar analysis, establish the corresponding internal data structure(e.g. HTML DOM);
4. Load the parsed resource file, render the page and finish.

A detailed version

1. Receive the message from the browserurlTo enable network request threads (this part can expand the browser mechanism and the relationship between processes and threads)
2. Start the network thread until it emits a completeHTTPRequests (this section involves DNS queries,TCP/IP Request, five layer Internet protocol stack, etc.)
3. Received the request from the server to the corresponding background (this part may involve load balancing, security interception and internal processing of the background, etc.)
4. Backstage and front deskHTTPInteraction (this section includesHTTP Header, response code, message structure,cookieAnd so on knowledge, can mention the static resourcescookie Optimization, as well as encoding decoding, e.ggzipCompression, etc.)
5. Separate cache issuesHTTPCache (this section includesHTTP cache header.ETag, catchcontrolEtc.)
6. The browser receives the message HTTP Packet parsing process (parsing html – Lexical analysis and then parsing into dom Tree, parsing,cssgeneratecss Rule tree, merge intorenderThe tree, and thenLayout, paintingRendering, composition of composite layers,GPUDrawing, processing of external chain resources,The loaded and DOMContentLoadedEtc.)
7.CSSVisual formatting model (rules for rendering elements, such as inclusion blocks, controller boxes,BFC , IFC, etc.)
8.JSEngine parsing process ( JS The interpretation stage, the preprocessing stage, the execution stage generates the execution context, VO , scope chain, recycle mechanism, etc.)
9. Others (can expand different knowledge modules, such as cross-domain,webSecurity,hybridPatterns, etc.)

Detailed Upgrade version

1. Enter a value in the address box of the browserURL
2. Check the cache. If the requested resource is in the cache and fresh, go to transcoding
- 2.1 If the resource is not cached, initiate a new request
- 2.2 If it is cached, check whether it is fresh enough and provide it to the client directly. Otherwise, verify with the server.
- 2.3 There are usually two tests for freshnessHTTPHead controlExpires 和 Cache-Control ：
  - 2.3.1 HTTP1.0provideExpires, the value is an absolute time to indicate the cache fresh date
  - 2.3.2 HTTP1.1increasedCache-Control: max-age=, the value is the maximum fresh time in seconds
3. Browser parsingURLGet protocol, host, port,path
4. Browser assemble oneHTTP (GET)The request message
5. The browser obtains the hostThe IP address, the process is as follows:
- 5.1 Browser Cache
- 5.2 Local Cache
- 5.3 hosts file
- 5.4 Router Cache
- 5.5 ISP DNS Cache
- 5.6 Recursive DNS Query (Inconsistent IP Addresses May Occur Due to Load Balancing)
6. Open onesocketWith the targetThe IP address, the port establishes a TCP connection.Three-way handshakeAs follows:
- 6.1 The Client Sends a PacketTCP SYN=1, Seq=XPackage to the server port
- 6.2 Server Send BackThe SYN = 1, ACK = x + 1, Seq = YThe corresponding package
- 6.3 Client SendingACK = Y + 1, Seq = z
7.TCPSend after the link is establishedHTTPrequest
8. The server receives the request after parsing, will forward the request to the server program, such as virtual host useHTTP HostThe header determines the requested server
9. Check the serverHTTPWhether the request header contains the cache validation information, if the validation cache is fresh, return the corresponding status of 304, etc
10. Develop reasonable procedures to read the complete request and prepare itHTTPAccordingly, operations such as database queries may be required
11. The server forwards the packetTCPThe link is sent back to the browser
12. The browser receives the messageHTTPAnd then turn it off as appropriateTCPThe four-way handshake to close a TCP connection is as follows:
- 12.1 Sending by the Active PartyFin=1,ACK=z,Seq=xmessage
- 12.2 Passive SendingACK=X+1,Seq=Ymessage
- 12.3 Passive SendingFin=1,ACK=X,Seq=Ymessage
- 12.4 Sending by the Active PartyACK=Y,Seq=x message
13. The browser checks the corresponding status code
14. If the resource is cacheable, cache it
15. Decode the corresponding
16. Decide what to do according to the resource type
Analytical 17.HTMLDocumentation, buildDOMTree, download resources, buildCSSOMTree, execute JS scripts, these operations in strict order each month
Build a DOM tree:
- 18.1 Tokenizing: Parsing character streams into tags according to the HTML specification
- 18.2 Lexing: Lexical analysis converts tags into objects and defines attributes and rules
- 18.3 DOM Construction: Organize objects into DOM trees based on HTML tag relationships
19. When encountering images, stylesheets and JS files during parsing, start downloading
20. BuildCSSOMTree:
- 20.1 Tokenizing: character stream is converted to tag stream
- 20.2 Node: Creates nodes based on tags
- 20.3 CSSOM: the node creates the CSSOM tree
1. According to theDOM tree and CSSOM treeBuilding a Render tree
- 21.1 fromThe DOM tree, traverses all visible nodes, invisible nodes include: 1)script , meta So the tag itself is not visible. 2) Nodes hidden by CSS, such as display: None
- 21.2 For each visible node, find the appropriateCSSOMRule and apply
- 21.3 Publish the content and computing styles of visual nodes
22. Js parsing is as follows
- 22.1 Creating a BrowserThe Document objectAnd parseHTML, add the parsed elements and text nodes to the documentDocument. The readystate is loading
- 22.2 HTML parser encountered noAsync and defer's script, add them to the document, and then execute inline or external scripts. These scripts execute synchronously, and the parser pauses while the script is downloaded and executed. So it worksdocument.write()Inserts text into the input stream. Synchronous scripts often simply define functions and register event handlers that can iterate and manipulate scripts and their previous document contents
- 22.3 When the parser encounters SettingsScript for async propertyStart downloading the script and continue parsing the document. The script is executed as soon as it is downloaded, but the parser does not stop for it to download. Do not use asynchronous scriptsdocument.write()They have access to their script and previous document elements
- 22.4 When the document is parsed,Document. ReadState into interactive
- 22.5 allDefer the scriptIt is executed in the order in which it appears in the document. Deferred scripts have access to the entire document tree and are prohibiteddocument.write()
- 22.6 The browser is inDocumentObject on fireDOMContentLoaded event
- 22.7 At this point, when the document is fully parsed, the browser may still be waiting for content such as images to load and for all asynchronous scripts to load and execute.Document. readState becomes complete, and the window fires the load event
23. Display the page (the page will be displayed gradually as the HTML is parsed)

Cookies, sessionStorage and localStorage

cookieData stored (usually encrypted) on a user’s local terminal by a web site to identify the user
cookieData is always carried in the same HTTP request (even if it is not needed) and is passed back and forth between the browser and the server (optimization point)
sessionStorage 和 localStorageData is not automatically sent to the server and is stored locally
Storage size:
- cookieThe data size cannot exceed 4K
- SessionStorage and localStorageAlthough there is a storage size limit, it is much larger than cookies, reaching 5M or more
Term time:

LocalStorage stores persistent data. Data is not lost after the browser is closed unless the data is deleted

SessionStorage data is automatically deleted after the current browser window is closed

Cookie The cookie set remains valid until the expiration time, even if the window or browser is closed

Browser cache

Browser caches are divided into strong cache and negotiated cache. When a client requests a resource, the process for obtaining the cache is as follows

Let’s start with some of this resourcehttp headerDetermine whether it matches the strong cache. If it matches, the cache resources are directly obtained from the local server without sending requests to the server.
When the strong cache does not hit, the client sends a request to the server, and the server sends a request through anotherrequest headerVerify that the resource matches the negotiated cache, called httpThen verify that, if a match is hit, the server will request back, but does not return the resource, but tells the client to directly get the resource from the cache, the client will get the resource from the cache after receiving the return;
Strong and negotiated caches have in common that the server does not return the resource if the cache is hit; The difference is that the strong cache does not send requests to the server, but the negotiated cache does.
When the negotiation cache also dies, the server sends the resource back to the client.
whenctrl+f5When the page is forced to refresh, it is loaded directly from the server, skipping the strong cache and negotiated cache.
whenf5When the page is refreshed, the strong cache is skipped, but the negotiated cache is checked.

Strong cache cache – consultation: this is a rather fine article: https://juejin.cn/post/6844903763665240072#heading-5

JS article

A few basic conventions for writing JavaScript

Do not declare multiple variables on the same line
Please use = = = / is! = = to comparetrue/false Or numerical
Use object literals instead new Array This form
Do not use global functions
SwitchStatement must containdefaultbranch
If Statements must use braces
for-inVariables in loops should be usedletThe keyword is explicitly scoped to avoid scope contamination

Closure that cannot be wound around

Closures are functions that can read variables inside other functions
A closure is a function that has access to variables in the scope of another function. The most common way to create a closure is in a
A closure can be used to break the scope of a chain of action by creating another function within a function and accessing its local variables through another function
Closure features:
- Function nested inside function
- Inner functions can refer to outer parameters and variables
- Parameters and variables are not collected by the garbage collection mechanism
Advantages: Encapsulation and caching can be realized
Disadvantages: memory consumption, improper use of memory overflow,
Solution: Delete all unused local variables before exiting the function

Explain your understanding of scope chains

The purpose of a scope chain is to ensure that the variables and functions that are accessible in the execution environment are in order. Variables in a scope chain can only be accessed up, and variables can only be accessed towindowThe object is terminated, and the scope chain is not allowed to access variables down.
Simply put, scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions

JavaScript prototype, prototype chain? What are the characteristics?

Each object initializes a property within it, which isprototype(Prototype), when we access the property of an object, if the property does not exist inside the object, then it will goprototypeLook for this property, this propertyprototypeYou’ll have your ownprototype“, and so on and so on, which is what we usually call the concept of prototype chain
Relationship:instance.constructor.prototype = instance._proto_
Features:JavaScriptObjects are passed by reference, and each new object entity we create does not have a copy of its own prototype. When we modify the stereotype, the object associated with it inherits that change and when we need a property,JavascriptThe engine looks to see if the property exists in the current object, and if it does not, it looks for itPrototypeIf the object has this property, and so on and so forth, all the way to the retrievalObjectBuilt-in objects

Please explain what event delegation/event proxy is

The event agent(Event Delegation), also known as event delegation. isJavaScriptCommon techniques for binding events commonly used in. As the name implies, “event broker” refers to delegating the events that need to be bound to the parent element, allowing the parent element to listen for events. The principle of event broker is as followsDOMElement events bubble up. The advantage of using event brokers is that you can improve performance
Can greatly save memory footprint and reduce event registration, such as intable On agent ownedTd clickThe event was great
It is possible to add a child object without binding it again

How does Javascript implement inheritance?

Tectonic inheritance
Prototype inheritance
Examples of inheritance
Copies of the inheritance
The prototypeprototype Mechanism orThe apply and callMethod is simple to implement, it is recommended to use the constructor and prototype hybrid mode

function Parent(a){
this.name = 'wang';
}
function Child(a){
 this.age = 28;
}
Child.prototype = new Parent();// Inherits Parent from the prototype
var demo = new Child();
alert(demo.age);
alert(demo.name);// Get inherited attributes
Copy the code

Talk about understanding This object

this Always point to the direct caller of a function (not the indirect caller)
If you havenewKey words,thisPoint to thenewThe object that came out
In the event, thisPoint to the object that triggered the event, and in particular, IE In theAttachEvent in thisAlways point to a global objectWindow

The event model

W3CThe occurrence of an event defined in
capturing), Target stage (
targetin ), bubbling stage (
bubbling )

Bubble events: When you use event bubbles, child elements fire first and parent elements fire later
Capture events: When you use event capture, the parent element fires first and the child element fires later
DOMEvent flow: Supports both event models: capture and bubble events
Stop bubbling: inW3cIn the usestopPropagation()Methods; Set in Internet ExplorercancelBubble =true
Block capture: Prevents the default behavior of the event, for example click - a After the jump. inW3c In the usepreventDefault()Method, set under IEwindow.event.returnValue = false

What exactly does the new operator do?

Create an empty object andthisThe variable refers to the object and also inherits the function’s prototype
Properties and methods are added tothisObject referenced
The newly created object is created bythisReferenced, and finally returned implicitlythis

Ajax principle

AjaxThe principle is simply to add an intermediate layer (AJAX engine) between the user and the server, throughXmlHttpRequestObject makes an asynchronous request to the server, gets data from the server, and usesjavascriptTo operateDOMAnd update the page. Asynchronize user actions and server responses. One of the most critical steps is getting the request data from the server
Ajax The process only involvesJavaScript, XMLHttpRequest, and DOM. XMLHttpRequestisajaxThe core mechanics of

How to solve cross-domain problems?

Learn about the same-origin policy of the browser
/SOP (Same Origin Policy)Introduced by Netscape in 1995, it is the core and most basic security feature of browsers. Without the same origin policy, browsers are vulnerable to it
XSS, CSFRSuch attacks. By homology we mean
Protocol + Domain name + PortThey are the same. Even if two different domain names point to the same IP address, they are not identical

throughjsonpCross domain

var script = document.createElement('script');
script.type = 'text/javascript';
// Pass the parameter and specify the callback execution function as onBack
script.src = 'http://www..... :8080/login? user=admin&callback=onBack';
document.head.appendChild(script);
// The callback executes the function
function onBack(res) {
 alert(JSON.stringify(res));
}

Copy the code

document.domain + iframeCross domain

/ / parent window: (http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
 document.domain = 'domain.com';
 var user = 'admin';
</script>

/ / child window: (http://child.domain.com/b.html)
document.domain = 'domain.com';
// Get the variables in the parent window
alert('get js data from parent ---> ' + window.parent.user);
Copy the code

nginxAgent cross-domain
nodejsMiddleware proxies cross domains
The backend sets the secure domain name in the header information

Share your understanding of AMD and Commonjs

CommonJSIs a specification for server-side modules,Node.jsThis specification was adopted.CommonJSGauge loading mode

The block is synchronous, which means that subsequent operations cannot be performed until the load is complete. The AMD specification loads modules asynchronously and allows you to specify callback functions

AMDThe recommended style returns an object as a module object,CommonJS Style through on

Module. exports or exports property assignment to expose module objects

The seven basic data types of js

Undefined, Null, Boolean, Number, String, Bigint, Symbol

This section describes the built-in objects in JS

Object 是 JavaScript The parent object of all objects in
Data encapsulation class object:Object 、 Array 、 Boolean 、 Number 和 String
Other objects:Function, Arguments, Math, Date, RegExp, Error

JS which methods define objects

Object literals:var obj = {};
Constructor:var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

What do you think is good about jQuery source code

jqueryThe source code is encapsulated in the self-executing environment of an anonymous function, helping to prevent global contamination of variables and then passing throughwindowObject parameter that can be enabledwindow Object is used as a local variablejquery In the access window Object, the scope chain does not have to be pushed back to the top-level scope, making access fasterwindowObject. Again, passing inundefined Parameter to shorten the searchundefinedIs the scope chain of
jquery Encapsulate some stereotype properties and methods injquery.prototype In order to shorten the name, also assigned tojquery.fn That’s a very graphic way to write it
There are some array or object methods that you can use a lot,jQuerySave it as a local variable to speed up access
jquery The implementation of chain calls can save code, return the same object, can improve code efficiency

Null, undefined difference

undefinedIndicates the value does not exist.
undefined : is a primitive value for “none” or “missing value”, that is, there should be a value here, but it is not defined yet. Returns when attempting to readundefined
For example, when a variable is declared but not assigned, equalsundefined
nullIndicates that an object has been defined with a value of “null”.
null Is an object (empty object, without any properties or methods)
For example, as a parameter of a function, the parameter of the function is not an object.
In the validationnullWhen, be sure to use === because == cannot be distinguishedNull, and undefined

Talk about your understanding of ES6

New template string (isJavaScriptProvides simple string interpolation.
Arrow function
for-of (Used to iterate over data – for example, values in an array.)
argumentsObjects can be perfectly replaced by indeterminable and default arguments.
ES6 willpromiseObject incorporated into the specification, provided nativePromise Object.
increasedLet and constCommand to declare variables.
And then there is the introductionmoduleModule concept

ES more new grammar: nguyen half-stretching ES introduction: https://es6.ruanyifeng.com/#docs/style

Object-oriented programming ideas

The basic idea is to use objects, classes, inheritance, encapsulation and other basic concepts to program design
Easy to maintain
Easy extension
The reuse and inheritance of development work are high, and the repetitive workload is reduced.
Shorten the development cycle

How to determine an array from JS

instanceofThe operator is a property used to test whether an object is in its stereotype chain stereotype constructor

var arr = [];
arr instanceof Array; // true
Copy the code

isArray

Array.isArray([]) //true
Array.isArray(1) //false
Copy the code

constructorProperty returns a reference to the array function that created the object, which returns the corresponding constructor of the object

var arr = [];
arr.constructor == Array; //true
Copy the code

Object.prototype

Object.prototype.toString.call([]) == '[object Array]'
// Write a method
var isType = function (obj) {
 return Object.prototype.toString.call(obj).slice(8, -1);
 //return Object.prototype.toString.apply([obj]).slice(8,-1);
}
isType([])  //Array
Copy the code

The implementation of asynchronous programming

The callback function
- Advantages: Simple and easy to understand
- Disadvantages: Poor maintenance, high code coupling
Event listening (in time-driven mode, depending on whether an event occurs or not)
- Advantages: Easy to understand, multiple events can be bound, and each event can specify multiple callback functions
- Disadvantages: Event driven, process is not clear
Publish/subscribe (Observer mode)
- It’s like event monitoring, but you can see how many publishers and subscribers there are through the message center
Promiseobject
- Advantages: Can be usedthenMethod, the chain writing method; Can write error callback function;
- Cons: Relatively difficult to write and understand
Generatorfunction
- Advantages: data exchange in and out of functions, error handling mechanism
- Disadvantages: process management is not convenient
asyncfunction
- Benefits: built-in actuators, better semantics, wider applicability, return isPromiseThe structure is clear.
- Cons: Error handling mechanism

Know the direction of native Javascript

Data types, operations, objects, Function, inheritance, closures, scope, prototype chain, events, RegExp, JSON, Ajax, DOM, BOM, Memory leak, Cross-domain, asynchronous loading, template engine, front-end MVC, Routing, modularity, Canvas, ECMAScript

Sort quickly scrambles arrays

var arr = [1.2.3.4.5.6.7.8.9.10];
arr.sort(() = > Math.random() - 0.5)
// If sort return is greater than or equal to 0, it does not swap places
// [5, 8, 4, 3, 2, 9, 10, 6, 1, 7]
Copy the code

Array deduplication

ES6 Set
forcycleindexOf
forcycleincludes
sort

Detailed operation to: https://juejin.cn/post/6844904035619700750

JS native drag node

Bind nodes that need to be draggedmousedown , mousemove , mouseupThe event
mousedownAfter the event is triggered, drag begins
mousemoveIs required to passEvent. ClientX and clientYGet the drag position and update the position in real time
mouseupWhen, the drag ends
Note the browser boundary values and set the drag range

Deep copy, shallow copy

All assignments to the underlying data types are deep copies
This is often used to make a recursive deep copy of a reference data type
Shallow copy:Object.assignOr extend the operator
Deep copy:JSON.parse(JSON.stringify(object))Deep recursion
- Limitations: undefined will be ignored, functions cannot be serialized, objects cannot be looping referenced

More detailed information: https://juejin.cn/post/6906369563793817607 * *

Throttling stabilization

Throttling: Performed at regular intervals, usually at high frequency triggers, to reduce the frequency. — such as: mouse slide drag
Anti – shake: trigger continuously for a period of time, do not execute, until the last time to execute beyond the specified time. Such as:inputFuzzy search

Introduce more throttling, stabilization, details: https://juejin.cn/post/6844903592898330638

Variable ascension

When you perform
JSWhen you write code, it generates an execution environment, either in a function or in a global execution environment, the code in a function generates a function execution environment, and that’s the only two execution environments

Variables are promoted because functions and variables are promoted. The usual explanation for promotion is to move the declared code to the top, but there’s nothing wrong with that and it’s easy to understand. But a more accurate explanation would be that there are two phases to generating an execution environment. The first stage is the creation stage,
JS The interpreter finds variables and functions that need to be promoted, and allocates them space in memory ahead of time. For functions, the entire function is stored in memory, and variables are only declared and assigned a value of
undefinedSo in the second phase, the code execution phase, we can use it directly ahead of time

b() // call b second
function b() {
 console.log('call b fist')}function b() {
 console.log('call b second')}var b = 'Hello world'

Copy the code

Js single-threaded

Single thread – Only one thread can do one thing
Reason – AvoidDOMRender conflict
- The browser needs to renderDOM
- JSYou can modifyDOM structure
- JSExecute when the browserDOM Render will pause
- Two pieces ofJSNor can both be executed at the same timeDOMConflict.)
- webworkerMultithreading is supported, but not accessibleDOM
Solution – Asynchronous

Tell me about the event loop

First of all,
js It is single-threaded and its main task is to handle user interactions, which are nothing more than responses
DOMAdd, delete and change, using the form of event queue, an event loop only processes one event response, making the script execution relatively continuous, so there is an event queue, used to store the event to be executed, then the event queue events from where
pushThey came in. That’s what another thread called the event touch thread does, and its role is mainly in timing the trigger thread, asynchronously
HTTPThe callback function that requests a thread that satisfies a specific condition
pushGo to the event queue and wait
js When the engine is idle, of course
jsThere are priorities in engine execution. First of all
jsThe engine executes the main task of the JS thread in an event loop and then looks for microtasks
Microtask (promise)If yes, perform the microtask first. If not, go to find the macro task
Macrotask (setTimeout, setInterval)To perform

A more detailed introduction to: https://juejin.cn/post/6844903598573240327

Describe this

this , the context in which the function is executed, can be passed
Apply, call, bindchange
thisPointing to. For anonymous functions or functions called directly, this points to the global context (the viewer is
Window, NodeJS is global), the rest of the function call, that’s who calls it,
this Just point to someone. Of course,
es6The arrow function, the point of the arrow function depends on where the arrow function is declared, where it is declared,
this It points to where

Ajax, AXIos, fetch difference

Ajax:

Itself is directed at MVCProgramming, do not conform to the present front-end MVVM The wave of
primordialXHR The development,XHRIts own architecture is not clear. It already existsfetch Alternatives to
JQueryThe whole project is too big for pure useajaxI’m going to introduce the wholeJQueryVery unreasonable (take personalized package scheme can not enjoyCDNService)

Axios:

Created from the browserXMLHttpRequest
fromnode.jsahttp request
support Promise API
Intercept requests and responses
Transform request and response data
Cancel the request
Automatic conversion JSON data
Client support preventsCSRF/XSRF

Fetch:

Only network request error, 400, 500 are regarded as successful requests, need to be encapsulated to handle
Here forcookieThe processing is special for different browser pairscredentialsIs not the same as the default value, which makes the defaultcookieIt becomes uncontrollable.Details go to MDN
Come without its ownabort Cannot timeout control, can be usedAbortControllerResolve cancellation request issues.

Thank you: Mr. Sun Elk, thank you

There is no way to monitor the progress of requests natively, whileXHRcan

More fetch knowledge: Ruan Yifeng Fetch

Optimize the article

SEO optimization

reasonableTitle, description, keywords: The weights of the search terms decrease one by one,titleValue to emphasize the focus can be, important keywords do not appear more than 2 times, and to the front, different pagestitle Be different;description The page content is highly summarized, the length is appropriate, not excessive stacking keywords, different pagesdescription Make a difference;keywordsJust list the key words
The semantic HTMLCode, W3C compliant: Semantic code makes it easy for search engines to understand web pages
Important content HTML Code comes first: search engine crawls HTMLThe order is from top to bottom, and some search engines have restrictions on the length of the crawl to ensure that important content will be captured
Don’t use important contentjsOutput: Crawlers do not execute JS to get content
To use lessiframe : Search engines don’t crawliframe The contents of the
Non decorative pictures must be added alt
Improve site speed: Site speed is an important indicator of search engine ranking

Server optimization

To reduceHTTPRequest, merge file, Sprite map
To reduceDNSQuery, using cache
To reduceDomNumber of elements
useCDN
configurationETagHTTP caching
Using componentsGzipThe compression
To reducecookieThe size of the

CSS optimization

Place the style sheet at the top of the page
useless scssexpression
uselink Do not apply@importThe introduction of the style
The compressioncss
It is prohibited to usegif Image to realizeloadingEffects (reduced CPU consumption, improved rendering performance)
useCSS3 Code instead ofJSAnimation (avoid redrawing, rearranging and backflow as much as possible)
For some small ICONS, it can be usedbase64Bit encoding to reduce network requests.
Page header<style> <script>Blocks the page; (Because the JS thread and the Renderer thread are mutually exclusive in the Renderer process)
Set when many styles need to be setclassName Not directlystyle

Js aspects

Place the script at the bottom of the page
willjs External introduction
The compressionjs
useEslintGrammar testing
To reduceDomThe operation of the
Proficient in using design patterns
It is prohibited to useiframe Block the parent documentonloadEvents)
Page hollowHref and SRCBlocks the loading of other resources on the page
Web pageGzip, CDNHosting,dataCache, image server

Webpack optimization point

Code compression plug-in UglifyJsPlugin
Server enablementgzipThe compression
Load resource files on demand require.ensure
To optimize thedevtool In thesource-map
strippingcssFile, packaged separately
The removal of unnecessary plug-ins is usually the result of the same set of configuration files for the development and production environments
The development environment does not do meaningless work such as extractioncss Compute file hashes, etc
configurationdevtool
Optimizing the search path at build time indicates whether a directory needs to be built or not

Other optimization points

Why is it more efficient to use multiple domain names to store website resources?

CDNBetter caching
Break the browser concurrency limit
savecookiebandwidth
Save the connection number of the main domain name and optimize the page response speed
Prevent unnecessary security problems