Recently, I have arranged the high frequency test questions on the front face and shared them with you to learn. If you have any questions, please correct me!

Note: 2021.5.21 has been updated to modify some errors in this article. Add a mind map, according to their own interview experience and the interview on the platform such as Niuker.com, the frequency of the interview questions will be roughly divided, can be targeted to review.

The following is a series of articles.

[1] “2021” high frequency front face test summary HTML article

[2] “2021” high-frequency front end of the CSS section

[3] 2021

[4] 2021

[5] “2021”

[6] “2021”

【7】 “2021” High-Frequency front end test questions summary

[8] “2021” high frequency front end test questions summary

[9] “2021” high frequency front end test question summary of computer network article

[10] “2021” high frequency front end test summary of browser principles

[11] the performance optimization of “2021” high frequency test paper summary

[12] “2021” high frequency front end of the handwritten code of the test summary

[13] “2021” high frequency front end test summary code output results

1. The difference between SRC and href

SRC and href are both used to refer to external resources. The difference between them is as follows:

  • SRC: a reference to a resource that is embedded in the current tag. SRC downloads the resource it points to and applies it to the document, such as a request JS script. When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, so the js script is usually placed at the bottom of the page.
  • Href: a hypertext reference that points to a web resource and links it to the current element or document. When the browser recognizes the file it is pointing to, it downloads the resources in parallel and does not stop processing the current document. This parameter is used on labels such as A and link.

2. Semantic understanding of HTML

Semantic refers to the choice of appropriate tags (code semantic) based on the structure of the content (content semantic). In layman’s terms, doing the right thing with the right label.

The advantages of semantics are as follows:

  • Machine friendly, with semantic text expressive rich, more suitable for search engine crawlers to crawl effective information, conducive to SEO. In addition, semantic classes also support screen reading software that automatically generates directories based on articles;
  • Developer friendly, using semantic tags to enhance readability, clearer structure, developers can clearly see the structure of the web page, facilitate the development and maintenance of the team.

Common semantic tags:

<header></header>The head<nav></nav>The navigation bar<section></section>Blocks (with semantic divs)<main></main>The main area<article></article>The main content<aside></aside>The sidebar<footer></footer>At the bottom of theCopy the code

3. The role of DOCTYPE

DOCTYPE is a standard common markup language (HTML) document type declaration in HTML5. Its purpose is to tell the browser (parser) what document type definition (HTML or XHTML) should be used to parse the document. Different rendering modes can affect how the browser parses CSS code or even JavaScript scripts. It must be declared on the first line of the HTML document.

There are two ways for the browser to render the page (available via Document.com patMode, for example, the finches official document type is CSS1Compat) :

  • CSS1Compat: Strick mode, the default mode in which the browser parses the rendered page using W3C standards. In standard mode, the browser renders the page to the highest standard it supports.
  • BackCompat: Weird mode (jumble mode) (Quick mode). The browser uses its own weird mode to parse the rendered page. In weird mode, pages are displayed in a looser backwards compatible manner.

4. The difference between defer and async in script tags

If there is no defer or async property, the browser immediately loads and executes the script. Instead of waiting for a subsequent load of document elements, it starts loading and executing once it has been read, thus blocking the loading of subsequent documents.

The differences among the three can be directly seen in the following figure:Blue represents the js script network loading time, red represents the JS script execution time, and green represents THE HTML parsing time.

As both the defer and async properties remove the external JS script file from the load asynchronously, neither of them will block the page parsing. The differences are as follows:

  • Execution order: Multiple tags with async attribute cannot guarantee the loading order; Multiple tags with the defer attribute, executed in the loading order;
  • Whether the script is executed in parallel: the async property indicates that the loading and execution of subsequent documents are carried out in parallel with the loading and execution of JS scripts, namely asynchronous execution; The defer property, the loading of the subsequent document and the loading of the JS script (which is only loaded and not executed at this point) take place in parallel (asynchronously). The JS script is not executed until all elements of the document have been parsed, but before the DOMContentLoaded event triggers execution.

5. What meta tags are commonly used

Meta tags are defined by the name and content attributes, which describe the attributes of the web document, such as the author of the web page, description of the web page, keywords, etc. In addition to the HTTP standard, some names are fixed as common usage, but developers can also customize names.

Meta tags: (1) Charset, which describes the encoding type of an HTML document:

<meta charset="UTF-8" >
Copy the code

(2) Keywords, page keywords:

<meta name="keywords" content="Keywords" />
Copy the code

(3) Description:

<meta name="description" content="Page Description Content" />
Copy the code

(4) Refresh, page redirection and refresh:

<meta http-equiv="refresh" content="0; url=" />
Copy the code

(5) Viewport, suitable for mobile terminal, can control the size and proportion of viewport:

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

The content parameter has the following types:

  • width viewport: width (numeric /device-width)
  • height viewport: height (numeric /device-height)
  • initial-scale: Initial scale
  • maximum-scale: Indicates the maximum scaling ratio
  • minimum-scale: Indicates the minimum scale
  • user-scalable: Whether to allow user scaling (yes/no)

(6) Search engine index mode:

<meta name="robots" content="index,follow" />
Copy the code

The content parameter has the following types:

  • all: Files will be retrieved and links on the page can be queried;
  • noneFiles will not be retrieved, and links on the page will not be queried;
  • index: Files will be retrieved;
  • follow: Links on the page can be queried;
  • noindex: The file will not be retrieved;
  • nofollowLinks on the page cannot be queried.

6. What’s new with HTML5

1. Semantic labels

  • Header: Defines the header (header) of the document;
  • Nav: The part that defines navigation links;
  • Footer: Defines the footer (bottom) of a document or section;
  • Article: Define the content of the article;
  • Section: Defines a section (section) in a document.
  • Aside: Define content outside of the content it is in (side);

2. Media labels

(1) Audio

<audio src=' ' controls autoplay loop='true'></audio>
Copy the code

Properties:

  • Control panel
  • Autoplay Autoplay
  • Loop = ‘true’

(2)

<video src=' ' poster='imgs/aa.jpg' controls></video>
Copy the code

Properties:

  • Poster: Specifies that the video has not been fully downloaded or that the user has not clicked on the cover that appears before playing. By default, the first pin of the current video file is displayed. Of course, you can also specify the poster by yourself.
  • Control panel
  • width
  • height

(3) Source tag Because browsers support different video formats, in order to be compatible with different browsers, you can specify the video source through source.

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>
Copy the code

3. The form

Form type:

  • Email: Verify that the current email address is valid
  • Url: Verify URL
  • “Number” : only enter the number, other input can not, and the upper and lower arrow, Max attribute can be set to the maximum value, min can be set to the minimum value, value is the default value.
  • Search: after the input box will be provided with a small fork, you can delete the input content, more user-friendly.
  • Range: Can be provided with a range where Max and min can be set as well as value, where the value attribute can be set to the default value
  • Color: Provides a color picker
  • Time: time, minute, and second
  • Data: Select the date
  • Datatime: Time and date (currently only supported by Safari)
  • Datatime -local: date and time control
  • Week: week control
  • Month: month control

Form properties:

  • Placeholder: hint
  • Autofocus: Automatically obtains focus
  • Autocomplete = “on” or autocomplete= “off” To use this property there are two prerequisites:
    • The form must have been submitted
    • You must have a name attribute.
  • Required: The input field cannot be empty and must have a value to be submitted.
  • Patte =”^(+86)? \d{10}$”
  • Multiple: Multiple files or email addresses can be selected
  • Form =” ID of form form”

Form events:

  • Oninput Fires this event whenever the content of the input box in the input changes.
  • Oninvalid This event is triggered when validation fails.

4. Progress bar and metric

  • The progress TAB: indicates the progress of the task (not supported by IE and Safari), Max indicates the progress of the task, and value indicates how much has been completed
  • Meter property: used to display remaining capacity or remaining inventory (not supported by IE and Safari)
    • High /low: Specifies the range to be considered high/low
    • Max /min: specifies the maximum/minimum value
    • Value: Specifies the current measurement value

Setting rule: min < low < High < Max

DOM query operations

  • document.querySelector()
  • document.querySelectorAll()

The object they choose can be a tag, a class (you need to add a dot), or an ID(you need to add a #)

6. The Web store

HTML5 provides two new ways to store data on the client:

  • LocalStorage – Data store with no time limit
  • SessionStorage – Data store for a session

7. Other

  • Drag and drop: Drag and drop is a common feature of grabbing an object and then dragging it to another location. Set elements to be drag-and-drop:
<img draggable="true" />
Copy the code
  • Canvas: The Canvas element uses JavaScript to draw an image on a web page. A canvas is a rectangular area that you can control every pixel of. Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.
<canvas id="myCanvas" width="200" height="100"></canvas>
Copy the code
  • SVG: Scalable vector graphics (SVG) is used to define vector-based graphics for use on the Web. It uses an XML format to define graphics so that images can be enlarged or resized without loss of quality. It is a World Wide Web Consortium standard
  • Geolocation is used to locate a user’s position. ‘

Summary: (1) Added semantic tags: Nav, Header, footer, aside, Section, article (2) Audio and video tags: Audio, video (3) Data storage: LocalStorage, sessionStorage (4) Canvas, Geolocation, WebSocket (5) Input tag added attributes: Placeholder, AutoComplete, AutoFocus, Required (6) History API: go, forward, back, PushState

The removed elements are:

  • Pure expressive elements: Basefont, big, center, font, S, strike, TT, U;
  • Elements that negatively affect usability: frame, frameset, noframes;

7. What does the img srcset attribute do?

Reactive pages often use images that vary according to screen density. This is where the srcset attribute of the img tag is used. The srcset property is used to set img to automatically load different images with different screen densities. The usage is as follows:

<img src="image-128.png" srcset="image-256.png 2x" />
Copy the code

Using the above code, we can load image-128. PNG when the screen density is 1x, and image-256. PNG when the screen density is 2x.

According to the above implementation, the image address should be set for different screen densities. The current screen densities are 1x, 2X, 3X, and 4x. If each image is set to 4 images, the loading will be slow. Hence the new SRCSET standard. The code is as follows:

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />
Copy the code

Where srcset specifies the image address and the corresponding image quality. Sizes is used to set the size threshold of the image. For the W unit in srcset, it can be understood as picture quality. If the visible area is less than the value of this mass, it can be used. The browser automatically selects the smallest available image.

Sizes syntax is as follows:

sizes="[media query] [length], [media query] [length] ... "
Copy the code

Sizes indicates 128px by default, 340px if the viewport width is larger than 360px.

8. What are the inline elements? What are the block-level elements? What are the void elements?

  • The inline elements are:a b span img input select strong;
  • Block-level elements are:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;

An empty element is an HTML element with no content. Empty elements are closed in the opening tag, i.e. empty elements have no closing tag:

  • Common examples are:<br>,<hr>,<img>,<input>,<link>,<meta>;
  • Rare examples are:<area>,<base>,<col>,<colgroup>,<command>,<embed>,<keygen>,<param>,<source>,<track>,<wbr>.

9. Talk about Web workers

In HTML pages, if the state of the page is not corresponding when the script is executed, the page does not become corresponding until after the script is executed. Web Worker is js that runs in the background, independent of other scripts, and does not affect the performance of the page. And the result is passed back to the main thread via postMessage. In this way, when complex operations are performed, the main thread is not blocked.

How to create a Web Worker:

  1. Check browser support for Web Workers
  2. Create web Worker file (JS, return function, etc.)
  3. Create the Web Worker object

10. How to use HTML5 offline storage and how does it work

Offline storage means that the site or application can be accessed normally when the user is not connected to the Internet, and the cached files on the user’s machine can be updated when the user is connected to the Internet.

** Principles: **HTML5 offline storage is based on a new.appCache file caching mechanism (not storage technology), using the parse list on the file to store resources offline, these resources will be stored like cookies. Later, when the network is offline, the browser displays the data stored offline

(1) Create a manifest file with the same name as HTML and add the manifest attribute to the page header:

<html lang="en" manifest="index.manifest">
Copy the code

(2) Write resources to be stored offline in the cache.manifest file:

CACHE MANIFEST #v0.11 CACHE: js/app.js CSS /style.css NETWORK: resourse/logo.png FALLBACK: / /offline.htmlCopy the code
  • CACHE: indicates the list of resources that need to be stored offline. Since the pages containing the manifest file are automatically stored offline, you do not need to list the pages themselves.
  • NETWORK: Indicates that the resources listed below can be accessed only when they are online. They are not stored offline, so they cannot be used offline. However, if a resource is the same in the CACHE and NETWORK, the resource will be stored offline, which means the CACHE has a higher priority.
  • FALLBACK: if access to the first resource fails, then the second resource will be used to replace it. For example, this file indicates that if access to any of the resources in the root directory fails, then offline.

(3) When the window. ApplicationCache is in offline state, perform offline cache operations.

How to update the cache:

(1) Update the manifest file

(2) Through javascript operations

(3) Clear the browser cache

Notes:

(1) Browser capacity limits for cached data may vary (some browsers set a limit of 5MB per site).

(2) If the manifest file, or one of the internally listed files, cannot be downloaded properly, the entire update process will fail, and the browser will continue to use all the old cache.

(3) The HTML referencing the manifest file must be the same as the manifest file, in the same domain.

(4) Resources in the FALLBACK must be the same as the manifest file.

(5) When a resource is cached, the browser directly requests the absolute path to access the resource in the cache.

(6) Even if the manifest attribute is not set for other pages in the site, the requested resources will be accessed from the cache if they are in the cache.

(7) When the manifest file changes, the resource request itself will trigger the update.

11. How does the browser manage and load HTML5 offline storage resources?

  • In the online case, the browser finds the MANIFEST attribute in the HTML header, and it requests the manifest file. If it’s the first time you visit the page, the browser downloads the corresponding resources based on the contents of the manifest file and stores them offline. If the page has been accessed and the resources have been stored offline, then the browser will use the offline resources to load the page, and then the browser will compare the new manifest file with the old one, and if the file hasn’t changed, it won’t do anything, and if the file has changed, The resources in the file are redownloaded and stored offline.
  • When offline, the browser directly uses the resources stored offline.

12. What is the difference between title and h1, b and strong, I and em?

  • The strong tag has semantics and is used as an emphasis, while the B tag does not. The B tag is simply a bold tag. The characters between the b tags are set to bold, the strong tag is used to enhance the tone of the characters, and search engines are more focused on the strong tag.
  • The title attribute has no clear meaning and only indicates that it is a title, while H1 indicates a clear hierarchy of titles, which has a great impact on the crawl of page information
  • I the content is displayed in italics, and em indicates stressed text

13. What are the advantages and disadvantages of iframe?

The iframe element creates an inline frame (that is, an inline frame) that contains another document.

Advantages:

  • Used for slow loading content (such as ads)
  • You can make scripts downloadable in parallel
  • Communication across subdomains can be achieved

Disadvantages:

  • The iframe blocks the onLoad event on the home page
  • Cannot be identified by some search engine lines
  • It produces a lot of pages and is not easy to manage

14. What is the function of label? How to use it?

Label defines the relationship between form controls: When the user selects the label label, the browser automatically shifts its focus to the form control associated with the label.

  • Usage method 1:
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
Copy the code
  • Usage method 2:
<label>Date:<input type="text"/></label>
Copy the code

15. The difference between Canvas and SVG

(1) SVG: SVG Scalable Vector Graphics is a language for 2D Graphics based on extensible Markup Language (XML) descriptions. SVG being XML-based means that every element in the SVG DOM is available and you can attach Javascript event handlers to that element. In SVG, every drawn graph is treated as an object. If the attributes of an SVG object change, the browser can automatically reproduce the graphics.

Its characteristics are as follows:

  • Resolution independent
  • Support for event handlers
  • Best for applications with large rendered areas (such as Google Maps)
  • High complexity slows down rendering (and any application that overuses the DOM is not good)
  • Not suitable for gaming applications

(2) Canvas: Canvas is a Canvas, which is used to draw 2D graphics through Javascript and is rendered pixel by pixel. When its position changes, it is redrawn.

Its characteristics are as follows:

  • Resolution dependent
  • Event handlers are not supported
  • Weak text rendering capability
  • The ability to save the resulting image in.png or.jpg format
  • Best suited for graphics-intensive games where many objects are frequently redrawn

Note: A vector graph, also known as an object-oriented image or drawing image, is mathematically defined as a series of points connected by lines. Graphic elements in a vector file are called objects. Each object is a self-contained entity with properties such as color, shape, outline, size, and screen position.

16. What does the head tag do, and which of them is essential?

The header of a document describes various properties and information about the document, including the title of the document, its location in the Web, and its relationship to other documents. Most document headers contain data that is not actually shown to the reader as content.

The following tags are available in the head section: , ,
,

Where

defines the title of the document, which is the only required element in the head section.

17. Document declaration (Doctype) and<! Doctype html>What does it do? How to distinguish strict mode from promiscuous mode? What do they mean?

What a document declaration does: A document declaration tells the browser what version of HTML the current HTML document is written in, so that the browser can parse it correctly according to the declared version.

Function of:
allows the browser to go into standard mode and parse the rendered page using the latest HTML5 standards; If you don’t, the browser will go into promiscuous mode, and we need to avoid that.

Differentiation between strict mode and promiscuous mode:

  • Strict mode: Also known as standard mode, refers to the browser according toW3CStandard parsing code;
  • Promiscuous mode: Also known as weird mode or compatible mode, this means that the browser parses the code in its own way. Promiscuous mode often mimics the behavior of older browsers to prevent older sites from not working;

Distinction: A DTD in a web page directly affects whether a strict or browsing schema is used, and the use of A DTD is closely related to the distinction between the two approaches.

  • If the document contains strictDOCTYPE, then it is usually rendered in strict mode (Strict DTD — Strict schema);
  • Contains the transitionDTD 和 URI 的 DOCTYPE“Is also presented in strict mode, but with transitionsDTDwithoutURI(uniform resource identifier, which is the last address declared) causes the page to render in promiscuous mode (Transitional DTD with URIs – strict schema; Transition DTD without URIs — promiscuous mode);
  • DOCTYPENonexistence or incorrect form can cause documents to be rendered in promiscuous mode (DTD does not exist or is incorrectly formatted — promiscuous mode);
  • HTML5There is noDTDSo there is no distinction between strict mode and promiscuous mode,HTML5There are relatively loose methods, implemented as far back compatibility as possible (HTML5 is not rigid or promiscuous).

In short, strict mode allows browsers to implement a standard compatibility model that keeps old sites running.

18. What causes garbled characters in browsers? How to solve it?

Causes of garbled characters:

  • The web source code isgbkWhile the Chinese characters in the content areutf-8Coded so that it appears when the browser openshtmlGarbled, and vice versa;
  • htmlWeb code isgbkWhile the program calls the render from the database isutf-8The content of the code will also cause garbled code;
  • The browser cannot automatically detect the web page code, resulting in garbled web pages.

The solution:

  • Use software to edit HTML web content;
  • If the page setting code isgbk, and the database store data in the encoding format isUTF-8At this time, the program needs to query the database data display data forward program transcoding;
  • If the browser appears garbled web pages, find the conversion code menu in the browser to convert.

19. The difference between progressive enhancement and graceful degradation

(1) Progressive Enhancement: It mainly rebuilds pages for browsers of lower versions, ensures basic functions, and then improves and adds functions in terms of effect and interaction for advanced browsers to achieve better user experience. (2) Graceful degradation: Build full functionality at the beginning, and then for the lower version of the browser compatibility.

Differences between the two:

  • Elegant downgrading starts with a complicated status quo and tries to reduce the supply of user experience; Progressive enhancement starts with a very basic, working version and builds on it to adapt to the needs of future environments.
  • Downgrading means looking back, while gradual enhancement means looking forward while keeping its roots in the safe zone.

Elegant degradation is the idea that websites should be designed for the most advanced and sophisticated browsers. Instead, schedule testing on browsers deemed “obsolete” or feature-missing at the end of the development cycle and limit testing to previous versions of major browsers (IE, Mozilla, etc.). Under this design paradigm, older browsers were thought to provide a “poor, but passable” browsing experience. You can make small adjustments to suit a particular browser. But since they are not the focus of our attention, other than fixing the big bugs, the differences are simply ignored.

The “incremental enhancement” view is to focus on the content itself. Content is an incentive to build a website. Some sites display it, some collect it, some seek it, some operate on it, and some even contain all of the above, but the same thing is that they all involve content. This makes “progressive enhancement” a more logical design paradigm. This is why It was immediately adopted by Yahoo to build its “Graded Browser Support” strategy.

20. Talk about the HTML5 Drag API

  • Dragstart: The body of the event is the element being dragged and is triggered when the drag and drop of the element is started.
  • Darg: The body of the event is the dragged element and is triggered when the dragged element is being dropped.
  • Dragenter: The body of the event is the target element and is fired when the element is dragged into an element.
  • Dragover: The event body is the target element and is triggered when it is dragged and moved within an element.
  • Dragleave: The body of the event is the target element and is triggered when the drag and drop element is removed from the target element.
  • Drop: The event body is the target element and is fired when the target element fully accepts the element being dragged and dropped.
  • Dragend: The body of the event is the element to be dragged and is triggered at the end of the entire drag operation.