Front-end Development Interview Questions Collection

How do you understand the semanticization of HTML structure?

1. When styles are removed or lost, the page can still present a clear structure.
2. Screen readers (if the visitor has visual impairments) will "read" your webpage entirely based on your markup.
3. Devices such as PDAs and mobile phones may not be able to render web pages like browsers on ordinary computers (usually because these devices have weaker support for CSS).
4. Search engine crawlers also rely on markup to determine the context and the weight of each keyword.
5. Whether your page is easily understood by crawlers is very important, because crawlers largely ignore markup used for presentation and only focus on semantic markup.
6. Facilitates team development and maintenance.

The strict mode and quirks mode of Doctype document declaration: how are these two modes triggered, and what is the significance of distinguishing them?

1. How to trigger the two modes

Adding an XML header declaration can trigger IE browser's Quirks mode. Once triggered, the browser parses just like IE5.5, with the same bugs and other issues as IE5.5, and its behavior (JavaScript) is also the same.

2. Triggering in IE6: Add an XML declaration before the XHTML DOCTYPE.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. Triggering in IE7: Add an HTML comment between the XML declaration and the XHTML DOCTYPE.

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. Can be triggered in both IE6 and IE7: Add an HTML comment at the head of the HTML 4.01 DOCTYPE document.

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5. Add at the top of the page `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">` , will trigger "quirks mode"

6. When no DTD declaration is used, or a DTD declaration below HTML4 (not including HTML4) is used, basically all browsers render using quirks mode.

From a front-end perspective, what do you think needs to be considered to do SEO well?

1. Understand how search engines crawl and index web pages.
2. Meta tag optimization.
3. How to select keywords and place them in web pages.
4. Understand the major search engines.
5. Major internet directories.
6. Pay-per-click search engines.
7. Search engine registration/submission.
8. Link exchange and link popularity.
9. Reasonable use of tags.

We know that CSS files can be introduced via external links. Please talk about the ways to introduce CSS via external links, and are there differences in performance among these methods?

There are three most commonly used ways to introduce CSS:

First: add in the head section<link rel="stylesheet" type="text/css" href="my.css.html"/>, to introduce an external CSS file.

Second: add in the head section

<style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>

Third: directly add in the page's tags.<div style="border:1px red solid;">

What is CSS Sprite? Discuss the pros and cons of this technique.

CSS sprites are called "css精灵" by many in China. It is a way of handling web page images. It allows you to include all the scattered images involved in a page into , reducing the number of requests to the server and improving access speed.

1. Advantages:

(1) Using CSS Sprites can effectively reduce the number of HTTP requests of a web page, greatly improving page performance. This is also the advantage of CSS Sprites and the main reason for their widespread dissemination and application.
(2) It solves the trouble of web designers in naming images. You only need to name one combined image rather than naming each small element, thus improving the efficiency of web page production.
(3) It is convenient to change styles. You only need to modify the color or style of one or a few images, and the style of the entire web page can be changed. It is also convenient to maintain.

2. Disadvantages:

(1) When merging images, you need to organically and reasonably merge multiple images into one image, and leave enough space to prevent unnecessary backgrounds from showing in the sections. These are okay; the most painful part is for adaptive pages on wide-screen, high-resolution monitors. If your image is not wide enough, the background can easily break.
(2) CSS Sprites are troublesome to develop. You need to use Photoshop or other tools to measure and calculate the exact position of each background unit. This is like needlework; it is not difficult, but it is very tedious.
(3) CSS Sprites are troublesome to maintain. If there is a slight change to the page background, you generally need to modify the merged image. If there is no need to change it, it is better not to touch it, so as to avoid modifying more CSS. If it cannot fit in the original position, you have to (preferably) add images further down. This way, the image size increases, and you also need to modify CSS.

Define a rounded corner (any size) recognized by webkit kernel browsers according to the CSS3 standard.

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

What are the inline elements? What are the block-level elements? What is the CSS box model?

Inline elements include: a b span I em img input select strong
Block-level elements include: div ul ol li dl dt dd h1 h2 h3 h4 p
Box model: margin border padding width

What three layers make up a front-end page? What are they respectively, and what are their roles?

A web page is divided into three layers, namely: structure layer, presentation layer, and behavior layer.

1. The structural layer of a web page is created by markup languages such as HTML or XHTML. Tags, that is, the words that appear in angle brackets, are responsible for the semantic meaning of the web page content. These tags do not contain any information about how to display the relevant content. For example, the P tag expresses the semantic meaning: "This is a text paragraph."
2. The presentation layer of a web page is created by CSS. CSS answers the question of "how to display the relevant content".
3. The behavior layer of a web page is responsible for answering the question "how content should react to events". This is the domain dominated by the JavaScript language and the DOM.

In HTML, what is the difference between the GET and POST methods for the action in a form?

1. GET is used to retrieve data from the server, while POST is used to send data to the server.
2. GET adds the form data to the URL specified by the action in the form of variable=value, with the URL and the data connected by "?", and the variables connected by "&". POST places the form data in the form's data body and passes it to the URL specified by action in a way that corresponds variables with values.
3. Get is insecure because during transmission, data is placed in the request URL, and many existing servers, proxy servers, or user agents will record the request URL in log files and store it somewhere, so some private information may be seen by third parties. In addition, users can directly see the submitted data in the browser, and some internal system messages will also be displayed to the user. All Post operations are invisible to the user.
4. Get transmits a small amount of data, mainly because it is limited by URL length. Post can transmit large amounts of data, so only Post can be used for file uploads (of course, there is another reason that will be mentioned later).
5. Get restricts the values of the Form data set to ASCII characters. Post supports the entire ISO10646 character set.
6. Get is the default method of Form.

What is the difference between the id and class attributes of HTML elements?

id and class are two common attributes in web pages. They work together to make the whole page rich and colorful. When we define styles for an element, both can be used, but are there differences?

1. When writing in a CSS style sheet, the id selector prefix should be '#', and the class selector prefix should be '.'
2. The id attribute can only be used once in a page, while class can be used repeatedly.
3. As an element tag, id is used to distinguish different structures and content, while class, as a style, can be applied to any structure and content.
4. General principles in layout: id first determines the structure and content, then defines styles for it. class is the opposite: define the style first, then apply the style to different structures and content according to different needs on the page.
5. Current browsers allow multiple ids with the same attribute value to appear on the same page, and they usually display normally. However, when JavaScript uses id to control elements, errors may occur.
6. In practical applications, class is often used for text sections and page decoration, while id is mostly used for grand layouts and styles for design containing blocks or containing boxes.

What is Ajax?

Ajax is not a single technology; it is actually several technologies, each with its own unique features. Combined together, they become a powerful new technology. Ajax includes:

1. XHTML and CSS
2. Use the Document Object Model (DOM) for dynamic display and interaction.
3. Use XML and XSLT for data interchange and manipulation.
4. Use XMLHttpRequest for asynchronous data reception.
5. Use JavaScript to bind them together.

Which browsers have you tested your pages in? What are the rendering engines of these browsers? What browser compatibility issues are commonly encountered? Why do they occur? What are the solutions?

1. DOCTYPE affects CSS processing.
2. FF: After setting padding, div will increase its height and width, but IE will not. Therefore, you need to use !important to set an additional height and width.
3. FF supports !important, while IE ignores it. You can use !important to set special styles for FF.
4. Div vertical centering issue: vertical-align: middle; increase the line height to the same height as the entire div, line-height: 200px; then insert text, and it will be vertically centered. The disadvantage is that you need to control the content so it does not wrap.
5. The BOX model interpretation in Mozilla Firefox and IE is inconsistent, causing a difference of 2px. Solution: div{margin:30px!important;margin:28px;} Note that the order of these two margins must not be reversed. IE cannot recognize the !important attribute, but other browsers can.

HTML5 offline storage

An important feature of HTML5 is offline storage. The so-called offline storage is to save some resource files locally, so that subsequent page reloads will use local resource files, and the web application can continue to be accessed offline. At the same time, through certain methods (updating related files or using related APIs), operations such as updating and deleting offline storage can be performed.

HTML5 offline storage uses a manifest file to indicate which files need to be stored, using e.g.<html manifest='offline.manifest'>to introduce a manifest file. The path of this file can be relative or absolute. If you have many web applications and want to centrally manage manifest files, then a static file server is a good choice.

What are the pros and cons of iframes?

1. Disadvantages:

The biggest drawback of using a frame structure in web pages is that search engine "spider" programs cannot interpret such pages. When a spider program encounters a web page composed of several frames, it only sees the frames and cannot find links, so it thinks the site is a dead site and quickly turns away. This is nothing less than a disaster for a website. If you want to sell products, you need customers; to get customers, you must first let people visit your website, and to do that, you have no choice but to rely on search engines. You spend a lot of time, effort, and money to open an online store, but then deliberately prevent search engines from indexing you. That is like opening a retail store but painting all the windows black and not putting up any sign.

2. Advantages:

From the above, we can find that the disadvantage of using the iframe framework is that it cannot be crawled and captured by search engines. But everything has two sides. This shortcoming may also be its advantage. Taking advantage of this, we can use the iframe framework to display content on our site that needs to be viewed by our users but does not need to be crawled by search engines. In this way, iframe can truly play its role, and the code on our site can also be greatly simplified. For example, as mentioned above by the author, adding Weibo live broadcast information. We do not need to provide this Weibo information to search engines; what we need to provide is an interactive experience with visitors, as shown in the figure below. If we use the iframe framework to embed Weibo information, we can not only easily add the site's Weibo live broadcast platform, but also see that the code is very concise.

iframe is good in that it can display the original web page completely unchanged, but if used on the homepage, it is what search engines hate most. Then no matter how well your website is made, it will not rank well! If it is a dynamic page, using include is a bit better! But you must remove its <html><head><title><body> tags!

Advantages of frames

When reloading a page, you do not need to reload the entire page; you only need to reload one frame page within the page (reducing data transmission and increasing page download speed).
Makes it convenient to create navigation bars.

Disadvantages of frames

It produces many pages and is not easy to manage.
Not easy to print.
The browser's back button becomes invalid.
The code is complex and cannot be indexed by some search engines.
Most small mobile devices (PDA phones) cannot fully display frames.
Pages with multiple frames increase HTTP requests to the server.
Because of the many disadvantages above, it does not conform to the concept of standard web design and has been abandoned by standard web design.

Tip: Currently, all the advantages of frames can be fully implemented with Ajax, so there is no need to use frames anymore.

The principle of the CSS box model

1. The scope of the W3C box model includes margin, border, padding, and content, and the content part does not include other parts.
2. The scope of the IE box model also includes margin, border, padding, and content. The difference from the standard W3C box model is that the content part of the IE box model includes border and padding.

The difference between CSS display:none and visibility:hidden

visibility:hidden hides the element, but retains its position when browsing.
display:none treats the element as non-existent and does not load it.

What is jQuery?

jQuery is a reusable JavaScript library written in JavaScript.

The JavaScript code for setting UI text without using jQuery is as follows:

document.getElementById("txt1").value = "hello";

The JavaScript code after using the jQuery class library is as follows:

$("#txt1").val("Hello");

It can be seen that the JavaScript code after using the jQuery class library is significantly more concise, and it better fits the characteristics of the IT industry: short, simple, and fast.

What is the relationship between jQuery and JavaScript? Will jQuery replace JavaScript?

JavaScript: It is the most popular scripting language on the Web.
jQuery: It is an excellent JavaScript framework. It is a lightweight JS library. It is compatible with CSS3 and also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).

jQuery is not meant to replace JavaScript. Using jQuery makes Web development simple.

How do you use the jQuery library?

Download the jquery.js file from jquery.com (the latest jQuery version V1.11.1 or V2.1.1). jQuery's file naming rule, such as "jquery-1.4.1.js", where 1.4.1 is the version number of the JS file.

Before developing a web program, the required JavaScript is included, as shown in the code below:

<script src="../code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

What is CDN (Content Delivery Network)?

When developing web pages, one of the most considered issues is the page response on the client computer: the shorter the time, the better the user experience.

One of the key factors limiting user experience is the size of web files downloaded by the browser, including *.html, images, *.js, *.css and other files.

In order to maximize reuse and save bandwidth, CDN came into being: its basic idea is to avoid as much as possible the bottlenecks and links on the Internet that may affect data transmission speed and stability, making content transmission faster and more stable. Its purpose is to enable users to obtain required content nearby, solve Internet congestion, and improve the response speed of users accessing websites.

How do you use jQuery CDN?

(1) It is recommended to use the official CDN nodes, the usage code is as follows:

<script src="../code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

(2) There is also the jQuery CDN provided by Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

(3) Microsoft also provides jQuery CDN nodes:

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

How can you automatically access the website's jQuery file when the CDN network is inaccessible?

Generally, CDN network nodes are reliable. But occasionally they may fail. Therefore, to provide double insurance, you can check whether loading CDN fails, and then automatically load the jQuery on the website. The sample code is as follows:

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js.html' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

What is the difference between the same version of jQuery.js and jQuery.min.js files?

Same: The two files provide the same jQuery functionality, that is, there is no difference in function calls.
Different: The jQuery.js file is suitable for programmers to read. The jQuery.min.js file is compressed and all spaces are removed to save bandwidth and space, making the file smaller for network transmission, but not suitable for programmers to read.

When should you use jquery.js, and when should you use jquery.min.js?

In development and debugging scenarios: use the jQuery.js file, because you want to debug and be able to see the JavaScript code.
In production deployment environment: use the jQuery.min.js file, which can reduce network bandwidth and speed up page loading.

What is the jQuery.vsdoc.js file?

The *.vsdoc.js file is used in Microsoft's development environment Visual Studio to conveniently obtain jQuery IntelliSense. When you enter a jQuery function, it will automatically prompt the function type, function usage instructions, function parameters, etc. If you use jQuery to develop web programs under VS, the vsdoc.js file will greatly improve development efficiency.

How do you explain the basic syntax of jQuery?

The syntax structure of jQuery can be divided into four parts:

1. By default, all jQuery commands start with a "$" symbol.
2. Next is the selection of HTML elements. For example, below we select an HTML text box by ID "txt1".
3. Then separated by a dot (.). This operator separates the element and the element's action (function).
4. Finally, what function (action) to apply.

In jQuery, what does the "$" symbol represent?

In jQuery, the "$" symbol is an alias for jQuery, and the default jQuery library starts with $.

Why use jQuery.noConflict()?

There are many libraries similar to jQuery, such as MooTools, Backbone, Sammy, Cappuccino, Knockout. Some of these libraries also use the $ symbol. If used together, it will cause naming conflicts.

To solve this conflict, you need to use jQuery.noConflict(), so that you don't rely on the default $ symbol. For example:

jQuery.noConflict();  
(function($){

})(jQuery);

Can multiple document.ready events be loaded in the same page?

Yes.