This interview question is I from each big god arrange interview question extract, only for my personal study reference

If there are any mistakes or loopholes in the title, please point them out in the comments section and I will correct them

What’s new in HTML5

  • Canvas drawing
  • SVG drawing
  • geolocation
  • The local store

How to understand HTML semantics

  • Add the codereadability
  • Make search engines easier to read (SEO)

Block elements & inline elements

Common block elements are:

<div>, <p>, <h1>... <h6>、
<ol>, <ul>, <dl>, <table>、
<address>, <blockquote> 、<form>
Copy the code

(1) Always start with a new line

(2) Height, line height, margins and margins can be controlled.

(3) The width is 100% of the container by default

(4) Can accommodate inline elements and other block elements

Common inline block elements are:

<img>, <input>, <td>
Copy the code

(1) and adjacent inline elements (inline blocks) are on a line, but there are gaps between them.

(2) The default width is the width of its own content.

(3) Height, line height, margins and margins can be controlled.

Box model width calculation

OffsetWidth = (content width + inside margin + border), no margin

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
}
/*
	offsetWidth值为100+20+2=122px
*/

Copy the code

Note: What if I make offsetWidth equal to 100px

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
    /* Tells the browser that the border and margin values you want to set are contained within width, automatically counting width*/
	box-sizing:border-box;
}
Copy the code

How can I easily implement a triangle

  1. So first we need to set the width to 0
  2. Next we can set the border
  3. Because the width is 0, the border will be concave inwards, and form the effect of the picture above, below, left and right
  4. Finally, just set the three blocks to transparent color to achieve the desired effect (including removing the bottom border but missing the bottom part).
<! DOCTYPEhtml>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		.box{
			width: 0;
			border-top: 100px solid transparent;
			border-left:100px solid transparent ;
			border-right:100px solid transparent ;
			border-bottom: 100px solid # 999;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="box"></div>
</body>
</html>
Copy the code

How to draw a sector

It’s the same implementation as the triangle, but with rounded edges

<! DOCTYPEhtml>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		.box{
			width: 0;
			border-top: 100px solid transparent;
			border-left:100px solid transparent ;
			border-right:100px solid transparent ;
			border-bottom: 100px solid # 999;
			border-radius: 100px;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="box"></div>
</body>
</html>
Copy the code

Margin longitudinal overlap problem

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Margin longitudinal overlap problem</title>
    <style>
        p{
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <p>aaa</p>
    <p></p>
    <p></p>
    <p></p>
    <p>bbb</p>
</body>
</html>

Copy the code

From aaa to BBB 15px + (10px + 15px)*3+10px = 100px

But the distance between AAA and BBB is actually 15px

  • Margin-top and margin-bottom of adjacent elements overlap
  • Blank content<p> </p>

How does the top left right bottom of the margin set to negative?

Margin-top left is the translation element itself

Margin-right bottom pans other elements

  • Margin-top and margin-left are negative values, and elements move up and left
  • Margin-right is a negative value, and the right element moves to the left, not affecting itself
  • Margin-bottom negative value, the bottom element moves up, not affecting itself

What is landing?

What is BFC?

The BFC is a completely independent space (layout environment), so that the child elements in the space do not affect the layout of the outside

Block Formatting Context, or BFC

It is a separate rendering area that defines the layout of a normal flow block box within that area

Different BFC areas, they render without interfering with each other

The element that creates the BFC is isolated from its interior and exterior, and internal rendering does not affect the exterior

  • The height of the element that creates the BFC calculates the height of the floating element
  • Creates the BFC element whose border box does not overlap the floating element
  • The element that creates the BFC does not merge margins with its children

How do I trigger BCF?

Common trigger methods :

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

BFC的使用 ?

Solve height collapse

Usage scenario: Solve height collapse

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			border: 1px solid red;
			/* The parent box triggers the BFC, which automatically calculates the height of the floating element */
			overflow: hidden;
		}
		.temp{
			float: left;;
			width: 100px;
			height: 100px;
			background-color: #008c8c;

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="temp"></div>
	</div>
</body>
</html>
Copy the code

Margin overlaps

Usage scenario: Solve the problem of margin overlap

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.con{
            /* Parent box triggers BFC, if not, margins merge */
			overflow: hidden;
		}
		.box{
			width: 100px;
			height: 100px;
			margin: 50px;
			background-color: #008c8c;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box"></div>
	</div>
	<div class="con">
		<div class="box"></div>
	</div>
</body>
</html>
Copy the code

Protects elements from being overwritten by floating elements

Usage scenario: Protect elements from being overwritten by floating elements

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.con{
			width: 200px;
			height: 200px;
			background-color: red;
			/* Triggers the BFC, whose border box does not overlap with the floating element */
			overflow: hidden;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: #008c8c;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="con"></div>
</body>
</html>
Copy the code

Clearfix by hand (Clear float)

		xxx::after{
			content: ' ';
			display: block;
			clear: both;
		}
Copy the code

What are the properties of position?

  • Static: There is no special location. The object follows the normal document flow. Attributes such as top, right, bottom, and left will not be applied.

  • Relative: Objects follow the normal document flow, but will be offset within the normal document flow based on properties such as top, right, bottom, and left. And the cascade is defined by the Z-index property.

  • Absolute: The object is removed from the normal document flow and is located using top, right, bottom, and left attributes. The cascade is defined by the ZIndex property.

  • Fixed: The object is removed from the normal document flow. The object is positioned with the top, right, bottom, and left attributes as the reference point of the window. When the scroll bar appears, the object will not scroll. And the cascade is defined by the Z-index property.

  • Sticky: Similar to “relative” and “fixed”, “Relative” is applied before the viewport is rolled to the threshold, and “fixed” is applied after the viewport is rolled to the threshold, which is determined by top.

What is the implementation of center alignment?

Horizontal center

The inline/inline – block elements:

text-align:center;
Copy the code

Block elements:

margin:0 auto;
Copy the code

Absolute elements:

left:50%;
margin-left: Half the element width (negative);Copy the code
left:0;
right:0;
margin:0 auto
Copy the code
left:50%;
transform:translate(-50%.0)
Copy the code
display:flex;
justify-content:center
Copy the code

Vertical center

The inline elements:

line-height: is the same value as heightCopy the code

Absolute elements:

top:50%;
margin-top: half element height (negative);Copy the code
top:0;
bottom:0;
margin:auto 0;
Copy the code

Elastic flex:

display:flex;
align-items:center
Copy the code

Horizontal and vertical center

Left and right cannot be more than half the width of their relative element minus their own width,

Otherwise, the absolute location element takes precedence over the left value (if the document flow is left to right), but the top and bottom values do not.

position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
Copy the code

How to use CSS to implement single-line multi-line text overflow processing *

Single-line text overflow

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Implement single-line and multi-line text overflow</title>
    <style>
        .box{
            width: 100px;
            white-space: nowrap;/* Do not change careers */
            overflow: hidden;/* Hide */ if it exceeds
            text-overflow: ellipsis;/* If it exceeds the limit, it will be marked */
        }
    </style>
</head>
<body>
    <div class="box">
        ukdkasldaskajhas83182903812iewsa213sjansn
    </div>
</body>
</html>
Copy the code

Multiline text overflow

<! DOCTYPEhtml>
<html lang="en">
<head>
    <title>Implement single-line and multi-line text overflow</title>
    <style>
        .box{
            width: 100px;
            display: -webkit-box;/* Display objects as elastic stretchable box models */
            -webkit-box-orient: vertical;/* align */ 
            -webkit-line-clamp:3;/* go to 3 lines */
            overflow: hidden;/* Hide */ if it exceeds
            word-break: break-all;/* Cast */
        }
    </style>
</head>
<body>
    <div class="box">
        ukdkasldaskajhas831829038238901237982199312iewsa213sjansn
    </div>
</body>
</html>
Copy the code

What is REM and the difference between PX, EM, REM, VW/vH?

rem

Rem is all length relative to the root < HTML > element. The usual practice is to give HTML elements a font size, and then the length of other elements is rem, often used in responsive layouts

em

The em element is the font size relative to the element

vw/vh

Viewport Width and Viewport Height, the Width and Height of the window, equal to 1% of the Width and Height of the screen, however,

% is better for width and Vh for height.

px

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor

General computer resolution {1920 * 1024} and other different resolutions

1920 * 1024 is a total screen width of 1920 pixels, the latter is a height of 1024 pixels

What’s the difference between Transition and animation?

  • Transition: Used for transition effects, no frame concept, only start and end states, low performance overhead
  • Animate: Used for animation, frame concept, can be repeatedly triggered and have intermediate states, high performance overhead, active trigger

Use an element to show and hide?

display:none;

  1. Structurally: Elements disappear completely on the page, take up no space and are unclickable;
  2. Inheritance: Parent set display: None Child elements can’t be displayed no matter how you set them
  3. Performance: will cause the browserRedraw rearrangement.High performance consumption

opacity: 0;

  1. Structurally: Elements disappear on the page and take up spaceYou can click on the;
  2. Any setting of opacity:0 for the parent element cannot be displayed;
  3. Performance: Reconstruction layer, low performance consumption

visibility:hidden;

  1. Structurally: when an element disappears, the space it occupies remains; Unable to click on
  2. Inheritance: Visibility: Hidden will inherit quilt elements, but child elements can be setvisibility: visible;To unhide.
  3. Performance: only causes the browserredraw, the performance consumption is relatively small

Height, width and other box model attributes are 0

  1. The margin,border, padding,height, and width of the elements affect the box model properties set to 0
  2. If an element has child elements or content, you should also set themoverflow:hiddenTo hide the child element

What is SPA?

Single Page Web Application (SPA) : SPA is a special Web application that loads a single HTML page and dynamically updates the page as the user interacts with the application.

It limits all activities to a Web page and only loads the corresponding HTML, JavaScript, and CSS when the Web page is initialized.

Once the page is loaded, SPA will not reload or jump the page because of the user’s operation, but use JavaScript to dynamically transform THE HTML (div is switched to show and hide), so as to realize the interaction between UI and users.

In SPA applications, there is no full page refresh after the application loads.

Instead, the presentation logic is preloaded and depends on view switches in the content Region to present the content.

** Advantages: ** Good user experience, good front and rear end separation.

Disadvantages:

  • 1. Bad for SEO.
  • 2. The initial loading takes more time.
  • 3. Navigation is not available. If you must navigate, you need to move forward and backward.

Redraw and rearrange

1, redrawn

Redraw is the behavior of the browser triggered by changes in the appearance of an element (such as changes to properties such as visibility, outline, and background). The browser will redraw the element according to its new properties to make it look new.

2, rearrangement,

One of the more obvious changes in rearrangement can be interpreted as the need to recalculate the render tree. Common actions that trigger rearrangements:

  • Changes in the geometry of DOM elements
  • Structural changes to the DOM tree (such as addition, subtraction, movement of nodes)
  • Get some attributes (e.g. OffsetTop, offsetLeft, offsetHeight, offsetWidth, clientWidth, clientHeight, etc.)
  • Changing some of the styling of the element (such as resizing the browser window)

The difference between the two

  1. Redrawing does not lead to rearrangement, and does not necessarily follow rearrangement.
  2. In practice, the number of rearrangements should be minimized and the impact of rearrangements should be reduced. There are several methods:
  • Combine multiple changes to style attributes into one operation
  • Take an element that needs to be rearranged multiple times out of the document flow with its position attribute set to absolute or fixed so that its changes do not affect other elements
  • Manipulate the node in memory several times before adding it to the document
  • If you want to perform complex operations on an element, you can hide it by setting its display property to None until the operation is complete
  • Cache variables when you need to frequently retrieve property values that cause browser rearrangements

Front-end performance optimization solution

1. Reduce DOM manipulation

2, before deployment, image compression, code compression

3. Optimize JS code structure and reduce redundant codes

4. Reduce HTTP requests and set HTTP cache properly

5. Use content delivery CDN acceleration

Static resource caching

7. Image lazy loading

Browser kernel understanding

It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine.

Rendering engine: Takes the content of a web page (HTML, XML, images, etc.), collates information (such as adding CSS, etc.), calculates how the page should appear, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.

Javascript engine: parse and execute javascript to achieve the dynamic effect of web pages. At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

What are the common browser kernels?

  • Trident kernel: IE,360, Maxthon, Sogou, Window of the World, Tencent, etc.[also known as MSHTML]
  • Gecko kernel: Netscape6 and above version, FF, MozillaSuite/SeaMonkey, etc
  • Presto kernel: Opera7 and above.[Opera kernel: Presto, now: Blink;]
  • Its kernel: Safari, Chrome, etc.[Chrome: Blink (WebKit offshoot)]

There are a large number of images on a page, and the loading is very slow. How do you optimize the loading of these images to give users a better experience

  • (1) Lazy loading of pictures, you can add a scroll bar event in the invisible area of the page to judge the distance between the position of the picture and the top of the browser and the distance between the page, if the former is less than the latter, the first loading.
  • (2) If it is a slide, album, etc., you can use the image preloading technology to download the previous and last pictures displayed at present.
  • (3) If the picture is too large, you can use a specially coded picture. When loading, a particularly compressed thumbnail will be loaded first to improve the user experience.
  • (4) If the image display area is smaller than the real size of the image, the image compression is carried out on the server side according to business needs, and the size of the image compression is consistent with that of the display.

How to optimize SEO

1. Reasonable title, description and keywords: the weight of the three items is reduced one by one, and the title value can be emphasized; Description of the page content is highly summarized, can not be too piled up keywords; Keywords List key keywords.

2, semantic HTML code, in line with W3C specifications: semantic code makes it easy for search engines to understand web pages

3, important content HTML code in the front: search engines grab HTML order from top to bottom, to ensure that important content will be captured

4. Don’t export important content with JS: crawlers don’t execute JS to get content

5. Use iframe sparingly: Search engines do not capture iframe content

Alt must be added to non-decorative images

7, improve website speed: website speed is an important indicator of search engine ranking.

What is the difference between the title and Alt attributes on the IMG tag?

Alt: When the image is not displayed it is represented by text

Title: Provides information for this property

What is the difference between using link and @import when importing page styles

1. Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS (simple information aggregation, a content packaging and delivery protocol widely adopted on the Internet based on XML standards), REL connection attributes and other functions. @import is provided by CSS and can only be used to load CSS;

2. When the page is loaded, link will be loaded at the same time; The CSS referenced by **@import waits until the page is loaded;

3. Link is an XHTML tag with no compatibility issues. @import is only recognized in IE5;

4. Link supports the use of JavaScript to control DOM modification styles; @import is not supported.

How to implement communication between multiple tabs in the browser *

Complex content, to be added later

What is the difference between the cookies, sessionStorage and localStorage?

Cookies are data stored (usually encrypted) on a user’s Client Side by a website to identify the user.

Cookie data 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.

SessionStorage and localStorage do not automatically send data to the server and only store data locally.

Storage size

Cookie data size cannot exceed 4K.

SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more.

Prison time

LocalStorage stores persistent data. Data will not be lost after the browser is closed unless the data is actively 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

How to deal with 1px rendering 2px on mobile

The viewport attribute of the meta tag is set to initial-scale of 1 rem according to the design standard, and the transfrome scale(0.5) is doubled.

Set the viewport attribute in the meta tag to 0.5 rem for initial-scale

How does the browser render the page?

Parsing HTML files to create DOM trees

From top to bottom, any style (link, style) and script will block (external styles do not block subsequent loading of external scripts).

Parsing the CSS

Priority: browser default Settings < user Settings < external style < inline style < style in HTML;

Building a Render tree

Combine CSS with DOM to build Render Tree

Layout and drawing

Layout and draw, Repaint and reflow

Weight and priority of the CSS

The weight

Starting at 0, an inline style +1000, an ID selector +100, an attribute selector, class or pseudo-class +10, an element selector, or pseudo-element +1, and wildcards +0

priority

Weight the same, write in the back to cover the front use! Important reaches the maximum priority, use all! If the value is important, the priority is higher