preface

As 2019 draws to a close, is it time to fight again for a better 2020? ‘It is a man who is ashamed to bear his shame. Jiangdong children more talented, comeback unknown ‘, those who failed in the autumn recruit, is willing to give up?!

This article summarizes my experience since 2019 and browse the articles, some popular interview questions, covering from CSS to JS to Vue to network and other front-end basic to advanced knowledge.

Summarizing the knowledge points involved in the interview questions is a promotion for myself, and I hope it can help students to have a better competitive ability in 2020.

  • Javascript article – Juejin. Im/post / 684490…
  • Es6 article – Juejin. Im/post / 684490…
  • Vue article – Juejin. Im/post / 684490…

Module One – Cascading Style Sheets

The concept of ‘flow’

‘Flow’ is one of the basic positioning and layout mechanisms in CSS. The default HTML layout mechanism is’ flow layout ‘, which is a top-down layout (such as block-level elements div) and left-to-right layout (such as inline elements span)

The box model

The elements are laid out on the page according to the rules of the box model, which is made up of content+ margin + border + padding

Box models can be divided into two types:

  • IE box model (weird box model)
    • width = border + padding + content
    • Width of a block = width + margin
  • W3C Box Model (Standard Box Model)
    • width = content
    • Width of a block = width + padding + border + margin

The default box model in Css is the W3C box model, and the conversion between the two can be done by setting the property box-sizing

box-sizing: content-box; // W3C box-sizing: border-box; // IE box model standardCopy the code

content

The content attribute is often ignored because it is simply the content, and for non-substituting elements such as divs, the content is the element inside the div. For a replacement element, the content is the replaceable part

Content often appears in the pseudo-element, the function is in CSS directly to generate content that can be displayed in the web page <! <h1>I am Title! </h1> h1:after { content:'I am content! '; } <! -- will render the I am Title! I am content! -->Copy the code

Margin | padding what is suitable for the occasion?

  • When to use margin: Leave space outside the border
  • When to use padding: Leave space inside the border

❗ Browser compatibility issues: In IE5.x,IE6, specifying a margin for a float box may cause the left margin to be twice as wide. This can be resolved by using padding or specifying the box as display:inline

Understanding and understanding of WEB standards and W3C

  • Tag closing, tag lowercase, not disorderly nesting, improve the search robot search odds
  • Using CSS and js script, outside the chain structure behavior of separation, with the page file download faster, content, content can be accessed by more users can be accessed by a wider range of equipment, less code and components easy to maintain, redesign is easy, do not need to change the content of the page, provide a printed version without the need for duplicate content, improve web site usability

How to understand the BFC specification?

Block formatting context (BFC) is an independent container that determines how its contents should be positioned and interact with other containers.

A page is made up of multiple boxes. The type of each box and the display property determine the layout of the box

Different types of boxes participate in different Formatting contexts, so elements inside boxes are rendered in different ways. So in a BFC, inner elements don’t affect outer ones, right

How do I trigger the BFC?

If you have a table with inline-block, table block, table- display, table- display, table- display, table- display, table- display, table- display - The overflow value is not visible (default) 5 -floatIs not none (default)Copy the code

BFC positioning scheme

1 - The internal boxes will be placed one by one in the vertical direction. 2 - The vertical distance of the box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap (notice in the vertical direction). 3 - The left margin of each element in the BFC will touch the left border of the containing block. 4 - When calculating the height of the BFC, floating elements will also participate in the calculationCopy the code

What are the Css selectors? Which attributes can be inherited?

The CSS selectors are as follows: -ID selector class selector Tag Adjacent selector (H1 +p) sub-selector (ul>li) descendant selector (LI A) Wildcard selector (*) attribute selector (a[rel ="XXX"]) -hover (:hover :first) -hover (:hover :first) -hover (:hover :first) -hover (:hover :first) -hover (:hover :first) Font-size, font-family, color, ul, li, dl, dt, dd; Non-inheritable styles: border, padding, margin, width, heightCopy the code

Css selector priority

! Word-wrap: break-word! Important > inline style > id > class > tag < important > inline style > id > class > tag < important > inline style > id > class > tag 10, id selector: 100, inline style has the highest weight, which is 1000 3 - inherited style has the lowest priorityCopy the code

How is the Css weight calculated?

In general -! Important > Inline style > ID Selector > Class Selector > Tag Selector > Wildcard Selector

But how does an element choose its style when all of these selectors work on the same element?

There are two ways to calculate weights

  • Binary rule calculation
  • Calculated by 1,10,100,1000, etc

Overview of the full value of each selector

  • An inline styleWeight:1000
  • The ID selectorWeight:0100
  • Class selectorsWeight:0010
  • Label selector & Pseudo element selectorWeight:0001
  • Wildcards, sub-selectors, adjacent selectors, etcWeight:0000
  • Inherited styles have no weight

If the hierarchy is the same, the backward comparison is made. If the hierarchy is different, the weight of the higher hierarchy is significant

Css3 added pseudo-class pseudo-element

X :first-of-type → Select each <x> element x that belongs to the first <x> element of its parent :last-of-type → select each <x> element x that belongs to the last <x> element of its parent :only of type Select each <x> element x:only-child Select each <x> element x:nth-child(1) Select each <x> element belonging to the first child of its parent :enabled Each enabled element (used for form elements such as input) :disabled Controls the disabled state of a form control: Checked, checked boxes or check boxes are checked: Before adds content before an element (used to clear floats) : After adds content after an elementCopy the code

What’s the difference between Css pseudo-classes and pseudo-elements?

The pseudo-class selects the element based on the state of the current element, or the current characteristics of the element rather than the static tags such as di, class and attribute of the element. Since the state changes dynamically, when an element reaches a specific state, it may get the style of the pseudo-class. When the state changes, he loses the pattern again. Class :first child :link: visicon :hover :focus :lang Unlike pseudo-classes that operate on elements in a particular state, pseudo-elements operate at a deeper level than pseudo-classes and are therefore much less dynamic than pseudo-classes. It controls essentially the same content as the element, but it is an abstraction based on the element and does not exist in the document, so it is called a pseudo-element (:first-line :first-letter :befoe :after).Copy the code

Display Parsing of values

value describe
none The element will be hidden and not shown
inline The elements are set to be inline, lined up from left to right (no newlines before and after the elements)
block Elements are set to block-level elements, arranged internally by column (with a newline before and after the element)
inline-block The element is set to a block-level element within a row, and does not monopolize the block-level element in a row
list-item The element is displayed as a list
table Elements are displayed as a block-level table (similar to table) with a newline before and after the table
flex Element goes into Flex layout mode

Differences between inline, block, and inline-block

1 - Each block-level element starts on a new line, and every element after it starts on another line. 2 - The height, width, row height, and top and bottom margins of the element can be set. 3 - The width of an element, when not set, is 100% of the width of its parent container (the same as the width of the parent element) unless a width is set. Inline elements feature: 1 - on a line with other elements; 2 - The height, width, top and bottom margins of the element cannot be set; 3 - The width of an element is the width of the text or image it contains and cannot be changed. Inline-block An inline-block is an inline element and a block element. Inline-block elements: 1 - and all other elements are on one line; 2 - Element height, width, row height, and top and bottom margins can be set.Copy the code

What happens when I use display:inline-block? How to solve it?

Two display:inline-block elements are put together to produce a blank space.

When an element is formatted as an in-line element, the whitespace between the elements will be processed by the browser. The default white-space attribute in CSS is Normal (incorporating extra white space). The carriage return and line feed in the original HTML code will be converted to a whitespace character. The whitespace takes up a certain width, so there are gaps between inline-block elements

The solution

1 - Puts the end of the child element tag on the same line as the start of the next tag<div>
    <div>
        左
    </div><div>
        右
    </div>
</div>2 - Set font-size:0 for the parent element and correct font-size on the child element 3 - Set float:left for the child elementCopy the code

Every face must ask in the middle of the plan

Horizontal center
  • Inline elements: text-align:center
  • Block-level elements (width determined)
Margin :0 auto 2. Margin-left: negative width /2 {width:100px; position:absolute; left:50%; margin-left:-50px }Copy the code
  • Block-level elements (width unknown)
Display :table + margin auto 2. Display :inline-block + text-align:center 3. Transform {position: absolute; left: 50%; transform: translateX(-50%); {display:flex; justify-content:center; }Copy the code
Vertical center
  • line-heightSuitable for text-only content in the center
  • Parent element SettingsRelative positioning, child element SettingsAbsolute positioning, the label passes throughmarginAchieve adaptive centering
  • Universal flex
{
    display:flex;
    align-items:center;
}
Copy the code
  • Parent element SettingsRelative positioning, child element SettingsAbsolute positioningThrough thetransformRealize the center
  • Parent element Settingsdisplay:table+ child element Settingsvertical-align:middle
Vertical horizontal center
  • Universal Flex (personal recommendation)
{
    display:flex;
    justify-content:center;
    align-items:center;
}
Copy the code
  • Position + transform (width and height unknown)
Parent element {position:relative; } child element {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }Copy the code
  • Position + margin (width and height determined)
Parent element {position: relative; } child element {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }Copy the code
  • Absolute positioning sets each direction to 0 and passesmargin:autoAchieve vertical horizontal center (known width and height)
Parent element {position: relative; } child element {width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }Copy the code

Understand positioning position

The Position attribute has a total of 5 and attribute values, as follows

  • relativeRelative positioning, positioning relative to its own position
Many people do not know what is the meaning of their own position, in fact, can be understood like this: the current position of its own fixed, based on the location of the positioningCopy the code
  • absoluteAbsolute positioning, relative topositionDon’t forstaticThe first parent element of
  • fixedFixed positioning. Positioning relative to the browser window
  • inheritInherit from the parent elementpositionAttribute values
  • staticThe default value, that is, no location, is still a document flow

Now, one thing to notice about positionabsoluteWhich parent is the location relative to

Css3 has added a new positioning attribute – sticky, which acts like relative and fixed. Elements are positioned relative until they cross a certain threshold and fixed after that.

What is a floating layout? What are the advantages and disadvantages?

Float layout – When an element is set to float, it can be moved left to right until its outer edge touches the border of the box that contains it or another floating element.

The floating element is removed from the normal document flow and can be thought of as floating above the normal document flow. The document flow no longer has the element

advantages

It works well in the context of text blending, where text can wrap around the image. When the element floats, it has the characteristics of a block-level element (width and height can be set), but it is different from inline-block

  • floatYou can set the direction in the horizontal sort, whileinline-blockDo not
  • inline-blockThere will be gaps
disadvantages

Float causes an element to break away from the document flow, causing the parent element height to collapse if it is highly adaptive

Clear floating (often meet test questions)
  • Clear floats with pseudo-class selectors (key mode)
<div class="Parent">
    <div class="Float"< div style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;"' '; /* set add children to block level elements */ display: block; /* Set the height of the child element to 0 */ height: 0; */ limit: hidden; /* limit: hidden; /* Set clear: both */ clear: both; }Copy the code
  • The parent element is addedoverflowProperty, or set the height (the idea is to trigger the parent ELEMENT BFC)
<div class="Parent" style="overflow:hidden"<div class="Float"></div>
</div>
Copy the code
  • Add extra labels
<div class="Parent"> // Add an extra tag and add the clear property <div style="clear:both"></div>
    <div class='Float'></div>
</div>
Copy the code

▲ Note: After the element float is set, the display value of the element becomes a block

What happens when position is superimposed on top of the display, overflow, float features?

- display: specifies the type of box that the element should generate (the sorting method of child elements). - position: specifies the positioning type of the element -floatPosition: Absolute/fixed has the highest priority. When position is set to Absolute or fixed,floatInvalid, display needs to be adjustedfloat/ Absolute Locating elements, can only be block elements or forms (block/table)Copy the code

Elite Layout – Flex layout

This layout provides a more efficient way to lay out, align, and allocate space for items in the container. It has no directional restrictions and is free for developers to manipulate

Application scenarios: Mobile terminal development, Android, iOS

Container Properties (6)

  • flex-directionDetermine the axis direction (container alignment direction)
flex-direction: row | row-reverse | column | column-reverse;
Copy the code
  • flex-wrapIf an axis does not fit, define a newline rule
flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code
  • flex-flowShort for flex-direction and flex-wrap
flex-flow: <flex-direction> || <flex-wrap>;
Copy the code
  • justify-contentDefines container alignment on the main axis
justify-content: flex-start | flex-end | center | space-between | space-around;
Copy the code
  • align-itemsDefine how containers are aligned on cross axes
align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code
  • align-contentDefine the alignment of multiple axes. This property does not work if the container has only one axis
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code

Project Attributes (6)

  • orderDefines the order in which items are arranged. The smaller the value, the higher the order. The default value is 0
  • flex-growDefines the magnification ratio of the project, which defaults to 0 (that is, no magnification if there is room left)
  • flex-shrinkDefines the scale by which the project will shrink, which defaults to 1 (that is, the project will shrink if space runs out)
  • flex-basisDefines the main axis space occupied by the project before excess space is allocated. Default is auto (project size)
  • flexIs short for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] This property has two shortcut values: auto(1, 1 auto) and None (0, 0 auto). It is recommended to use this property rather than write three separate properties because the browser will deduce the relative valuesCopy the code
  • align-selfAllows individual items to have a different alignment than other items that can be overriddenalign-itemsProperty, which defaults toautoInherits from the parent elementalign-itemsProperty, if there is no parent element, is equivalent tostretch)
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code

Classic layout case – three column layout

Three column layout – left and right containers fixed, middle containers adaptive

Three-column layout is very common in practice, is also the CSS interview routine, there are three ways to achieve:

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right"> < div style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;" } .left{ flex-basis:200px; background: green; } .main{ flex: 1; background: red; } .right{ flex-basis:200px; background: green; } position + margin-left,. Right {position: absolute; top: 0; background: red; } .left{ left: 0; width: 200px; } .right{ right: 0; width: 200px; } .main{ margin: 0 200px ; background: green; } The third wayfloat + margin
.left{
    float:left;
    width:200px;
    background:red;
}
.main{
    margin:0 200px;
    background: green;
}
.right{
    float:right;
    width:200px;
    background:red;
}
Copy the code

What are the new features of Css3?

  • A variety ofcssThe selector
  • Rounded cornersborder-radius
  • Multi-column layouts
  • Text effect
  • Linear gradient
  • The 2 d transformation
  • The transitiontransition
  • animationanimation
  • flexlayout
  • rotatingtransform
  • Media queries

How do browsers parse Css selectors?

CSS selectors resolve from right to left to avoid parsing all elements

Overflow attribute anatomy

- auto: Indicates that the scroll bar appears when the child element content is larger than the parent element. - visible: indicates that the overflow content appears outside the parent element. - hidden: indicates that the overflow content is hiddenCopy the code

How does full-screen scrolling work? What CSS properties are required?

Suppose there are 5 full-screen pages to be displayed, then the height will be 500%, but we can only show 100%. The rest of the content can be positioned on the Y-axis by transform or by margin-top

Involving the CSS properties overflow: hidden | transition: all 1000 ms ease

What is responsive design? What is the principle of responsive design? How to compatible with lower version IE?

Responsive design means that a website can accommodate multiple terminals, rather than developing a new version for each terminal

Principle through media query test different device screen size to do processing

Compatible with lower versions of IE, the page header must have a meta declared viewport

<meta name= "viewport" content= "width=device-width, initial-scale=1.maximum-scale=1, user-Scalable =no" >Copy the code

Layout: adaptive filling

There is a fixed height div with two divs inside, one 100px high and the other filling the remaining height

Position :relative; , div requires a high degree of self-applicability using position: Absolute; top:100px; bottom:0; left:0

Solution 2 uses flex layout, highly adaptive div using Flex :1

What is the difference between RGBA() and Opacity?

  • opacityTransparency applied to an element and to all content within the element
  • rgba()Only works on the element’s color or background color (children of elements that are set rGBA transparent do not inherit the transparency effect)

What is the difference between the px | em?

Both px and EM are units of length. The difference is that the value of px is fixed, and the value of em is not fixed, and the value of em inherits the font size of the parent element. So unadjusted browsers will fit: 1em=16px. So 12px = 0.75em 10px = 0.625emCopy the code

How do I move elements on the Z-axis?

  • translate3d(x,y,z)
  • translateZ(z)

What are the introduction methods of Css? What’s the difference between importing via link and @import?

The Css can be imported in four modes: inline, inline, external, and import

In addition to loading CSS, external link can also define RSS, REL and other properties, no compatibility issues, support using javascript to change the style

@import is provided by CSS and can only be used to load CSS. There is no support for changing styles via javascript

▲ When the page is loaded, the link will be loaded at the same time, while @import needs to wait until the page is loaded, and there may be no style page

Create a triangle using pure Css

Create a div with no height or width. Set one of the borders to be a triangle and the other borders to be transparent

{
    width:0px;
    height:0px;
    border-top:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid # 000;
}
Copy the code

Display: None and visibility:hidden what is the difference?

  • display:noneHide the corresponding element and no more space is allocated in the document layout (resulting in rearrangement)
  • visibility:hiddenHide the corresponding elements, leaving the original space in the document layout (resulting in redrawing)

How do browsers parse Css selectors?

Css chooses to parse from right to left to avoid parsing all elements

How to center a background image horizontally and vertically?

Background-position :center;Copy the code

What’s the difference between putting the style tag after the body and before the body?

The page loads from top to bottom, with the style loaded first, of course

Since the browser parses the HTML document line by line, parsing the style sheet at the end of the page can cause the browser to stop rendering and wait until it loads and parses the style sheet. This can cause white space (so it’s better to put the style tag before the body).

What are the common Css compatibility problems?

*{margin:0; *{margin:0; padding:0px; } -IE6 double spacing BUG - set the height tag to be smaller (usually less than 10px), in IE6,IE7 the height is higher than the height set by setting overflow:hidden; Or you can set the line height to be less than the height that you set. -ie, you can get custom properties using the same method as getting general properties, You can also use getAttribute() to get custom attributes. By default, Chrome will force text less than 12px to be 12px by adding the CSS attribute -webkit-text-size-adjust: None; The hover style does not appear after the hyperlink is accessed, because the hyperlink that has been clicked no longer has the hover and active properties. The solution is to change the array properties of the CSS properties: L-v-h-a A :link{} → A :visited{} → A :hover{} → A :active{} -ie Through the condition - pNG24 bit image appears in the background of IE6 browser, the solution is to make PNG8Copy the code

How to optimize the Css to improve performance

  • Avoid transition constraints
  • Avoid descendant selectors
  • Avoid chained selectors
  • Use compact syntax
  • Avoid unnecessary namespaces
  • Avoid unnecessary duplication of styles
  • Use names that have semantics
  • Avoid using! important
  • Simplify the rules as much as possible
  • Fixed parsing errors
  • Avoid using multiple type selectors
  • Remove an empty CSS rule
  • Use the display attribute correctly
Width, height, margin, padding, and inline should not be used after inlinefloat; Should not be used after inline-blockfloat; Vertical-align should not be used after blockCopy the code
  • Don’t abuse the float
  • Don’t abuse web fonts
  • Do not declare too much font-size
  • Use id selectors sparingly
  • Do not define too many styles for the H1-H6
  • Do not double define H1-H6
  • A value of 0 does not require any units
  • Standardize the various browser prefixes
  • Follow the box model rules

Module One extra – HyperText Markup Language

Document parsing type

There are two document types of HTML

  • Weird model (default) → The browser resolves it in its own way
  • Standard mode → According toW3Cstandard

How to avoid weird browser patterns – by declaring the document’s parse type

What are the Meta criteria? Which attribute values are available

Meta provides some Meta information (name/key) to the page, which is good for SEO

  • Attribute values
    • name→ Used to describe a website
    • http-equiv– > noname, you can take the value of this attribute (content-type.Expires (period).refresh.set-cookie.contentProperty is associated with an HTTP request header
    • content→ Value in name/value, which can be any valid string
    • scheme→ Used to specify the scheme to use to translate attribute values

What is HTML semantics

  • First of all,HtmlSemantic can be more of a pagestructuredProvides a series of tags with structural significance, such asheader.footerAnd so on, make the structure more clear, conducive to the browser’s parsing
  • Second, even in the absence ofcssIn the case of style, the page is also displayed in a document structure that is easier to read
  • Because search engine crawlers will also rely onHtmlTag to determine the context and the weight of each keyword, and thereforeSEO
  • In the end,HtmlSemantic is easier to read, maintain, and understand

Common browser kernel

  • -webkit- → webkitThe kernel (Chrome)
  • -moz- → GeckoThe kernel (fixfox)
  • -o- → OperaThe kernel (Opera)
  • -ms- → TridentThe kernel (IE)

A brief introduction to the understanding of the browser kernel

The browser kernel is divided into two main parts:

  • Rendering engine: Converts code to a page
  • Js engine: Parse and executeJavaScriptCode to achieve dynamic page effects

What new features have been added to Html5? What elements were removed?

  • Html5New features:
    • canvas
    • audio/video
    • Better execution for local offline storage
    • localStorageLong-term storage of data, data is not lost after the browser is closed (manual deletion only)
    • sessionStorageIt is automatically deleted after the browser is closed
    • Semantically better tags
    • New Form controls
    • New communication technologies (WebWorker.WebSocket)
  • Html5Remove elements that are pure phenotypes, and elements that have a negative impact on usability

Since IE6/7/8 supports document.createElement to create elements, you can use this method to make the browser compatible with the new Html5 tag

Which Html5 tags can optimize SEO

  • title
  • meta
  • Semantic tags →header.footer.article.aside

What’s the difference between defer/async?

  • Defer load→ Wait until the entire page is rendered (DOM structure is completely generated, and other scripts are executed) to execute, multipledeferThe scripts are loaded in the order they appear (Loading after rendering)
  • Async Indicates asynchronous loading→ Once loading is complete, the rendering engine will stop loading, and then execute the script. After script execution, continue rendering (blocking rendering), multipleasyncLoading order cannot be guaranteed (When it's loaded, execute)

How to achieve communication between multiple tabs in the browser?

  • By calling thelocalStorage
  • usecookie + setInterval

Where does caching work for JavaScript requests in general?

  • DNSThe cache
  • CDNThe cache
  • Browser cache
  • Server cache

What is an iframe?

Iframe is an inline framework and a very common way to embed web pages

Pros and cons of iframe

  • iframeadvantages
    • iframeThe embedded web page can be displayed intact
    • If there are multiple page referencesiframe, only need to be modifiediframeThe content of the
    • If you encounter slow-loading third-party content such as ICONS and ads, you can use theiframeTo solve the
  • iframedisadvantages
    • Will produce a lot of pages, not easy to manage, at the same timeonloadblocking
    • iframeFrameworks can sometimes be confusing and give a poor user experience
    • Code structure becomes complex, affecting search engines
    • iframeFrame pages will add servershttprequest

What apis Html provides

  • Full screen scrollFullscreen API
  • Page visibilityPge Visibility API
  • Access the camera and microphonegetUserMedia API
  • The batteryBattery API
  • Preload web contentLink prefetching