Share some examples of front-end interview questions

HTML

* What is the role of Doctype? How to distinguish between strict mode and mixed mode? What do they mean?

1. The declaration is placed first in the document, before the tag. This tag can tell the browser which HTML or XHTML specification the document uses

2. The so-called standard mode means that the browser parses and executes the code according to the W3C standard; the weird mode uses the browser's own method to parse and execute the code. Code, because different browsers parse and execute code differently, we call it weird mode.

3. Whether the browser uses standard mode or weird mode when parsing is directly related to the DTD declaration in your web page. The DTD declaration defines the type of standard document (standard mode parsing) document type, which will cause the browser to Use the corresponding method to load and display the web page, ignoring the DTD declaration, which will cause the web page to enter weird mode.

* Why do you only need to write in HTML5?

doctype is the abbreviation of document type. In the page, it is used to specify the version of xhtml (or html) used by the page. To create standards-compliant pages, an essential and key component is the doctype declaration. Only when a correct doctype is determined can the logo and css in xhtml take effect normally. html tells the browser that this file is an html format web page file.

The two together are the html5 standard web page declaration. The original one was a long string, but now it is in this concise form, supporting the mainstream of the html5 standard. Browsers all recognize this declaration.

* What are the inline elements? What are block-level elements? What are the void elements?

Inline elements include: a b span img input select strong (emphasis tone)

Block-level elements include: div ul ol li dl dt dd h1-h6 p

Well-known empty elements:

---

Little-known ones are:

Common block element(block element) address - address blockquote - block reference center - center-aligned block dir - directory list div - commonly used block-level container, also the main label of css layout dl - definition list fieldset - form control group form - Interactive form h1 - Headline h2 - Subtitle h3 - Level 3 title h4 - Level 4 title h5 - Level 5 title h6 - Level 6 title hr - Horizontal separator line isindex - Input prompt menu - Menu list noframes - frames optional content, (This block content is displayed for browsers that do not support frame) noscript - optional script content (this content is displayed for browsers that do not support script) ol - sorting form p - paragraph pre - formatted text table - table ul - non Sorted list (unordered list)

Common inline elements(inline element) a - anchor point abbr - abbreviation acronym - first letter b - bold (not recommended) bdo - bidi override big - large font br - line break cite - citation code - computer code (required when citing source code) dfn - definition field em - emphasis font - font setting (not recommended) i - italic img - image input - input box kbd - definition Keyboard text label - table label q - short quote s - strikethrough (not recommended) samp - define sample computer code select - project selection small - small font text span - common inline container, define blocks within text strike - strikethrough Line strong - Bold emphasis sub - Subscript sup - Superscript textarea - Multi-line text input box tt - Teletype text u - Underline var - Define variable

Variable element Variable The context determines whether an element is a block element or an inline element [1]. applet - java applet button - button del - delete text iframe - inline frame ins - inserted text map - image block (map) object - object object script - client script

Empty element Because the content of the HTML element is the content between the start tag and the end tag. And some HTML elements have empty content. (empty content), those HTML elements containing empty content are empty elements. The empty element [2] is closed in the opening tag. Example
is an empty element without a closing tag.

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

(1) link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, define rel connection attributes, etc.; while @import is provided by CSS and can only be used When loading CSS;

(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;

(3) import It is proposed by CSS2.1 and can only be recognized by IE5 or above, and link is an XHTML tag, so there is no compatibility issue;

(4): The difference when using DOM to control the style. When using JavaScript to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom.

(5): @import can introduce other style sheets into css again. For example, you can create a main style sheet and introduce other style sheets into the main style sheet.

* Please introduce your understanding of the browser kernel?

It is mainly divided into two parts: rendering engine (layout engineer or Rendering Engine) and JS engine.

Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing the information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to the monitor or printer. Different browser kernels will have different grammatical interpretations of web pages, so the rendering effects will also be different. All web browsers, email clients, and other applications that edit and display web content require the kernel.

JS engine: parses and executes javascript to achieve dynamic effects on web pages.

At first, the rendering engine and the JS engine were not clearly distinguished. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

* What are the common browser kernels?

There are four common kernels:

Trident: The kernel used by IE browser. This kernel program was first introduced in IE4 in 1997. It was adopted by Microsoft based on the Mosaic code and is still used in the current IE9. Trident is actually an open kernel, and its interface kernel design is quite mature, so many browsers have emerged that use the IE kernel instead of IE (such as Maxthon, The World, TT, GreenBrowser, AvantBrowser, etc.).

Gecko: The kernel started to be adopted by Netscape 6, and later Mozilla FireFox also adopted this kernel. The characteristic of Gecko is that the code is completely open, so , it has a high degree of development, and programmers all over the world can write code for it and add functions. The origin of the Gecko engine has something to do with IE. As mentioned earlier, IE did not use W3C standards, which caused dissatisfaction among some developers within Microsoft; they founded Mozilla together with some employees of Netscape, which had stopped updating at that time. The kernel was rewritten based on the Mosaic kernel, and Geckos was developed. But in fact, the browser with Gecko core is still Firefox (Firefox) with the most users, so it is sometimes called Firefox core. In addition, Gecko is also a cross-platform kernel and can be used in Windows, BSD, Linux and Mac OS X.

Presto: The kernel currently used by Opera, which was first used in Opera7 in 2003. The characteristic of this engine is that the rendering speed has been optimized to It is the ultimate browser core that is currently recognized as having the fastest web browsing speed. However, the price is the sacrifice of web page compatibility. In fact, this is a dynamic kernel. The biggest difference from the previous kernels is script processing. Presto has a natural advantage. All or part of the page can be re-parsed in response to script events. In addition, the kernel has the fastest speed when executing Javascript. According to tests under the same conditions, the time required for the Presto kernel to execute the same Javascript is only about 1/3 of the Trident and Gecko kernels (the Trident kernel is the slowest, but the two There is not much difference). Unfortunately, Presto is a commercial engine, which greatly limits the development of Presto.

Webkit: Apple's own kernel, which is also the kernel used by Apple's Safari browser. The Webkit engine includes the WebCore typesetting engine and the JavaScriptCore parsing engine, both of which are derived from KDE's KHTML and KJS engines. They are free software, licensed under the GPL treaty, and support the development of BSD systems. Therefore, Webkit is also free software and open source. In terms of security, it is not restricted by IE and Firefox, so Safari browser is still very safe in China. Google's chrome also uses webkit as the kernel. The WebKit kernel is also widely used in mobile phones. For example, the Browser kernel engine used by Google's Gphone, Apple's iPhone, etc. are all based on WebKit. The same goes for IE edge of win 10...

* What are the new features of html5 and what elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

HTML5 is no longer a subset of SGML. It is mainly about the addition of images, location, storage, multitasking and other functions.

Painting canvas;

Video and audio elements for media playback;

Local offline storage localStorage long-term storage of data, the data will not be lost after the browser is closed;

SessionStorage data is automatically deleted after the browser is closed;

Better semantic content elements, such as article, footer, header, nav, section;

Form controls, calendar, date, time, email, url, search;

New technologies webworker, websocket, Geolocation;

Removed elements:

Pure performance Elements: basefont, big, center, font, s, strike, tt, u;

Elements that negatively impact usability: frame, frameset, noframes;

--Compatible: 1 .IE8/IE7/IE6 supports tags generated by the document.createElement method. Use this feature to allow these browsers to support HTML5 new tags. 2. Use the html5shim framework

- Distinguishing: The way of DOCTYPE declaration is an important factor in distinguishing HTML and HTML5 marks. In addition, it can also be distinguished based on the new structural and functional elements.

* Briefly describe your understanding of HTML semantics?

Semantic HTML is written HTML code that conforms to the structure of the content (content semantics) and selects appropriate tags (code semantics), which can make it easier for developers to read and Write more elegant code that is well parsed by browser crawlers and machines.
　1. Semanticization is beneficial to SEO and helps search engine crawlers better understand our web pages, thereby obtaining more effective information and increasing the weight of the web pages.
　2. When there is no CSS, the structure of the web page can be clearly seen and the readability is enhanced.
　3. It facilitates team development and maintenance. Semantic HTML can make it easier for developers to understand, thereby improving the team's efficiency and coordination capabilities.

　4. Support browser rendering for multiple terminal devices.

* How to use HTML5 offline storage? Can you explain the working principle?

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. In offline situations You can continue to access web applications, and at the same time, through certain methods (updating related files or using related APIs), you can update and delete offline storage and other operations;

How to use: HTML5 mentioned above The offline storage is based on a newly created .appcache file. Through the parsing list on this file to store resources offline, these resources will be stored like cookies. Later, when the network is offline, the browser will display the page through the data stored offline.

(1) Add a manifest attribute to the page header as below;

(2) Write offline storage resources in the cache.manifest file;

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

(3) When offline, operate window.applicationCache to implement requirements.

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

When online, the browser finds that the html header has the manifest attribute, and it will request the manifest file. If it is the first time to access the app, Then the browser will download the corresponding resources based on the contents of the manifest file and store them offline. If the app has been accessed and the resources have been stored offline, the browser will use the offline resources to load the page, and then the browser will compare the new manifest file with the old manifest file. If the file has not changed, no operation will be performed. , if the file changes, the resources in the file will be re-downloaded and stored offline.

When offline, the browser directly uses the resources stored offline.

* Please describe the difference between cookies, sessionStorage and localStorage?

Common ground: are all saved on the browser side and have the same origin.

Difference: Cookie data is always carried in the http request from the same origin (even if it is not needed), that is, the cookie is passed back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server, but only save it locally. Cookie data also has the concept of path, which can restrict cookies to only belong to a certain path. The storage size limit is also different. Cookie data cannot exceed 4k. At the same time, because each http request carries a cookie, cookies are only suitable for saving very small data, such as session identifiers. Although sessionStorage and localStorage also have storage size limits, they are much larger than cookies and can reach 5M or more. The data validity period is different, sessionStorage: is only valid until the current browser window is closed, and naturally cannot be maintained permanently; localStorage: is always valid, and is saved even when the window or browser is closed, so it is used as persistent data; cookies are only set in the cookie It remains valid until the expiration date, even if the window or browser is closed. Different scopes, sessionStorage is not shared in different browser windows, even on the same page; localStorage is shared in all same-origin windows; cookies are also shared in all same-origin windows. Web Storage supports an event notification mechanism that can send notifications of data updates to listeners. Web Storage's api interface is more convenient to use.

* What are the advantages and disadvantages of iframe?

Advantages of iframe:
1.iframe can display the embedded web page intact.
2. If there are multiple web pages referencing iframe, then you only need to modify the content of the iframe to change the content of each page called, which is convenient and fast.
3. If the web page has the same header and version in order to unify the style, it can be written as one page and nested with iframe, which can increase the reusability of the code.
4. If you encounter slow-loading third-party content such as icons and advertisements, these problems can be solved by iframe.
Disadvantages of iframe:
1. It will generate many pages and is not easy to manage.
2. The iframe frame structure can sometimes be confusing. If there are many frames, up, down, and left and right scroll bars may appear, which will distract visitors and lead to poor user experience.
3. The code is complex and cannot be indexed by some search engines. This is very critical. Current search engine crawlers cannot process the content in iframes well, so using iframes will be detrimental to search engine optimization.
4. Many mobile devices (PDA phones) cannot fully display the frame and have poor device compatibility.
5.iframe frame pages will increase the http requests of the server, which is not advisable for large websites.

After analyzing so much, Ajax is basically used instead of iframe, so iframe has gradually withdrawn from front-end development.

* What is the function of Label? How is it used? (Wrap with for or )

label label defines the label (marker) for the input element. The
label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on the text inside the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.
There are two attributes in Label that are very useful, one is FOR and the other is ACCESSKEY.
FOR attribute :
Function: Indicates the HTML element to be bound to the Label tag. When you click this tag, the bound element will gain focus.
ACCESSKEY attribute:

Function: Indicates the hotkey to access the element bound to the Label tag. When you press the hotkey, the bound element will gain focus.

* How to turn off the auto-complete function in HTML5 form?

The autocomplete attribute specifies whether the form should have autocomplete enabled.
Autocomplete allows the browser to predict input to a field. When the user starts typing in a field, the browser should display options to fill in the field based on the values ​​previously typed. <form autocomplete="on/off">
on Default. Specifies that autocomplete functionality is enabled.

off specifies that the autocomplete feature is disabled.

* How to achieve communication between multiple tabs in the browser? (Alibaba)

The upcoming SharedWorker API can be used in iframes Even transfer data within browser tabs or windows. It's been implemented in Chrome a few years ago and Firefox a while ago, but it's still elusive in IE and Safari.
(Need to find an elegant solution for the following application scenario: Suppose a person visits your website. He logs in, opens a second tab and chooses to log out in that tab. At this time, the person he opened The first tab page still appears to be "logged in", but at this time all his operations will either redirect to the login page, or directly drive him crazy. A more attractive solution is to judge. Whether the user has logged out and make corresponding changes to the page. For example, a dialog box can be displayed to prompt the user to re-authenticate, or the original login view can be displayed.)
This function can be implemented through the WebSocket API, but this is somewhat complicated. Making a fuss out of a molehill. After all, there is no way to kill a chicken with a big knife, so I started looking for some other methods of cross-tab communication. The first thing I thought of was to use cookies to periodically check whether the user is logged in through setInterval. I'm not happy with this solution because it wastes many CPU cycles checking a condition that may never be met. At this time, I thought it would be better to just use "comet" (also known as polling), server-side events, or WebSockets.
I was still surprised when I found out that I was riding a donkey to find a donkey, because the answer is localStorage all along!

Did you know that localStorage will trigger an event? Specifically, whenever an item is added, modified, or deleted in another browsing context, it triggers an event. In practice, this means that no matter which browser tab accesses localStorage, all other tabs can listen to this event through the window object. Whenever a tab modifies localStorage, it will affect the rest of the tabs. All tags trigger events. This means that as long as we assign a value to localStorage, we can communicate across browser tabs.

* How is webSocket compatible with low-end browsers? (Ali)

(WebSocket protocol is a new protocol in HTML5. It realizes full-duplex communication (full-duplex) between the browser and the server. In the browser, only through http It can achieve one-way communication. Comet can simulate two-way communication to a certain extent, but the efficiency is low and requires good support from the server. The socket and xmlsocket in flash can achieve true two-way communication. Through flex ajax bridge, it can be These two functions are used in javascript. It is foreseeable that if websocket is implemented in the browser, it will replace the above two technologies and be widely used.)
WebSocket is currently the "only" browser Socket standard, which is accessed through the API provided within the browser. Lower version browsers do not have the WebSocket standard, which means that these browsers do not allow users to implement Socket communication through them. The way to solve compatibility is to prepare A backup solution for Ajax + Server-side Script. For example, Ajax + PHP Socket.
Other solutions: Adobe Flash Socket, ActiveX HTMLFile (IE), based on multipart encoding

Send XHR, based on long polling XHR.

* What are the uses of the Page Visibility API?

Use the value of visibilityState to detect whether the page is currently visible, as well as the time when the web page was opened, etc.;

When the page is switched to other background processes, automatically pause the music or Video playback;

* How to implement a circular clickable area on the page?

(1) map+area or svg

(2) border-radius

(3) Does pure js implementation require a point? Simple algorithm on the circle, obtaining mouse coordinates, etc.

* Achieve drawing a 1px high line without using borders, maintaining the same effect in Quirksmode and CSSCompat modes of different browsers.