[Front-end interview questions] 2023 front-end interview questions - HTML

There are always ups and downs in a person's life. It will not always rise like the rising sun, nor will it always be miserable. Repeated ups and downs are training for a person. Therefore, those who are floating above do not need to be proud; those who are sinking below do not need to be pessimistic. We must be frank and humble, optimistic and enterprising, and move forward. ——Konosuke Matsushita

Hello everyone, my name is Jiang Chen. In today's Internet environment, everyone must have felt it to some extent. In this impetuous society, only by constantly maintaining one's character can one perceive different gains and encourage each other.

A collection of the latest interview questions in 2023, so be prepared at all times.

This article was first published on WeChat public account: Wild Programmer Jiang Chen

Everyone is welcome to like, collect and follow

Please add image description

Article list

What is meta viewport used for and how to write it?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

The purpose is to prevent users from zooming the page on the mobile terminal.

Explain the meaning of each word

with=device-width sets the width of the layout viewport to the width of the device screen resolution
initial-scale=1 The initial scaling ratio of the page is the width of the screen resolution
maximum-scale=1 specifies the maximum scale that the user can zoom in to
minimum-scale=1 specifies the maximum scale that the user can zoom out

What is the reason for browser garbled characters? How to solve it?

Encoding format mismatch

When the browser opens a web page, it needs to decode it according to the encoding format of the web page source code. If the encoding format of the web page does not match the encoding format of the browser, garbled characters will appear. For example, if the encoding format of the web page is UTF-8, and the encoding format of the browser is GB2312, then garbled characters will appear.

Web page encoding error

When writing a web page, if there is a coding error, it will also cause garbled characters when the browser opens the web page. For example, when writing HTML code, if you forget to specify the encoding format for Chinese characters, garbled characters will appear.

Missing font

Some web pages use special fonts. If the font is not available in the browser, the corresponding characters will not be found, resulting in garbled characters.

What are the advantages and disadvantages of iframes?

advantage

You can display a page or content independently on the page without conflicting with other elements of the page.
The same page or content can be reused in multiple pages, which can reduce code redundancy.
Loading is asynchronous, and the page can be displayed without waiting for the iframe to load.
Easily achieve cross-domain access

shortcoming

Search engines may not be able to correctly parse content in iframes
Will block the onload event of the main page
Sharing the connection pool with the main page affects page parallel loading

HTML5 new features

Semantic tags
Enhanced form (for example, you can specify whether the type is color, date or url, etc. through the type attribute of input)
Media element tags (video, audio)
canvas,svg
svg drawing
Geolocation (navigator.geolocation.getCurrentPosition(callback))
Drag and drop API (set the attribute draggable value to true for the label element to enable dragging of the target element)
Web Worker (can start a sub-thread to run scripts)
Web Storage(即 sessionStorage 与 localStorage)
Websocket (two-way communication protocol, allows the browser to receive requests from the server)
dom query (document.querySelector() and document.querySelectorAll())

How to draw graphics using Canvas element in HTML5?

The Canvas element allows drawing graphics and animations on web pages using JavaScript. Here is a simple example of drawing a rectangle:

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

In this example, the element document.getElementById()is obtained using the method Canvasand getContext(“2d”)the 2D drawing context is obtained via .
Then, fillStyleset the fill color using the property fillRect()method to draw a rectangle.

What is data-attribute?

Before JavaScript frameworks became popular, front-end developers often used data-properties to store extra data in the DOM itself. There were no other hacks at the time (such as using non-standard properties or extra properties on the DOM). This is done to store custom data into the page or app for which there is no other more appropriate attribute or element.

Now, the use of data-attributes is discouraged. One reason is that users can modify data by easily modifying attribute values by leveraging inspect elements in the browser. The data model is best stored in JavaScript itself, using the data binding provided by the framework to keep it updated with the DOM.

Please describe the differences between cookies, sessionStorage and localStorage.

	cookie	localStorage	sessionStorage
initialized by whom	Client or server, the server can use `Set-Cookie`request headers.	client	client
Expiration	manual setting	never expires	When the current page is closed
Whether it remains unchanged within the current browser sessions (browser sessions)	Depends on whether expiration time is set	yes	no
Whether to send to the server with every HTTP request	Yes, Cookies will `Cookie`be automatically sent to the server through the request header	no	no
Capacity (per domain)	4kb	5MB	5MB
access permission	any window	any window	current page window

Please describe the difference between script, script async and script defer.

<script>- HTML parsing is interrupted, the script is extracted and executed immediately. After execution ends, HTML parsing continues.
<script async>- The script extraction and execution process is parallel to the HTML parsing process, and the script execution may be completed before the HTML parsing is completed. It can be used when the script is independent from other scripts on the page async, such as for page statistical analysis.
<script defer>- The script only extracts the process in parallel with the HTML parsing process, and the execution of the script will occur after the HTML parsing is completed. If there are multiple deferscripts containing , the execution order of the scripts will be based on the position where they appear in the document, from top to bottom.

NOTE: For srcscripts without attributes, asyncthe and deferattributes will be ignored.

Why is it better to place the CSS link tag between the heads? Why is it best to place the JS script tag just before the body? Are there any exceptions?

Putting <link>the tags <head></head>between is required by the specification. In addition, this approach allows the page to be rendered gradually, improving the user experience. Placing the style sheet near the bottom of the document prevents many browsers, including Internet Explorer, from rendering the page progressively. Some browsers block rendering to avoid redrawing elements on the page when the page style changes. This practice prevents users from being presented with a blank page or unstyled content.

Place <script>the tag exactly </body>before

The script blocks HTML parsing during download and execution. Put <script>the tag at the bottom to ensure that the HTML is parsed first and the page is presented to the user as soon as possible.

The exception is when your script contains document.write(). But now, document.write()its use is not recommended. Also, placing <script>the tag at the bottom means that the browser cannot start downloading the script until the entire document （document）has been parsed. Perhaps a better approach to this would be <script>to use deferthe attribute and put it <head>in .

What is progressive rendering?

Progressive rendering is a technique used to improve web page performance (especially increasing user-perceived loading speed) to render pages as quickly as possible.

This technology was more common in previous times when internet bandwidth was smaller. Today, with the prevalence of mobile terminals and the often unstable mobile networks, progressive rendering still has a place in modern front-end development.

Some examples:

Lazy loading of images – the images on the page will not be loaded all at once. When the user scrolls the page to the image section, JavaScript will load and display the image.
Prioritize display content (tiered rendering) - In order to render the page to the user as quickly as possible, the page only contains the basic minimum amount of CSS, scripts and content, and then other resources and content can be loaded using lazy loading scripts or listeners / DOMContentLoadedevents load.
Asynchronous loading of HTML fragments - When the page is rendered in the background, the HTML is split and sent to the browser in chunks through asynchronous requests.