Web front-end basic interview questions

Posted May 28, 20209 min read

1. What is the difference between the title and alt of

The alt attribute is the same as the title attribute:

They will all have a floating layer, showing the content related to the picture they set.

The difference between the alt attribute and the title attribute:

Alt attribute:1. When the picture can not be loaded, a piece of attribute content set by alt will appear in the place where the picture is not displayed. The purpose of this attribute is to display prompt information for unloaded pictures. Even when the network is poor, users can know the contents of the pictures, which is convenient for users to browse the web. At the same time, programmers can find problems faster when maintaining the website. 2. The search engine of the browser can obtain the picture through the text description of the alt attribute.

Title attribute:The title attribute can be used on any element. When the user moves the mouse over the element, the content of the preset title will be displayed, which plays a role in explaining the picture. In essence, it is the explanation and remarks of the picture. .

If the title attribute and alt attribute are set for the picture, only the content set by the title attribute will be displayed when the mouse is hovered or passed through the picture area.

2. Steps to enter URL from browser address bar to display page

The browser hands over the DNS domain name resolution based on the requested URL, finds the real IP, and initiates a request to the server;

The server returns the data after the background processing is completed, and the browser receives the files(HTML, JS, CSS, images, etc.);

The browser parses the loaded resources(HTML, JS, CSS, etc.) and builds the corresponding internal data structure

(Such as HTML DOM);

Load the parsed resource file, render the page, and finish.

3. HTTP status codes and their meanings

1XX:information status code

100 Continue to continue, generally when sending a post request, after sending the http header, the server

This information will be returned, indicating confirmation, after which specific parameter information will be sent

2XX:success status code

200 OK returns information normally

201 Created request was successful and the server created a new resource

202 Accepted The server has accepted the request, but has not yet processed it


301 Moved Permanently The requested page has been permanently moved to a new location.

302 Found temporary redirect.

303 See Other Redirect temporarily, and always use GET to request a new URI.

304 Not Modified Since the last request, the requested page has not been modified.

4XX:Client error

400 Bad Request server cannot understand the format of the request, the client should not try to use the same internal

Content to initiate a request.

401 Unauthorized The request is not authorized.

403 Forbidden Forbidden to visit.

404 Not Found cannot find a resource that matches the URI.

5XX:Server error

500 Internal Server Error The most common server-side error.

503 Service Unavailable The server cannot temporarily process the request(it may be overloaded or maintained).

4. What are the new features and elements of html5?

HTML5 is no longer a collection of SGML, mainly about the additions of functions such as image, location, storage, multitasking, etc.

Painting canvas

Video and audio elements for media playback

Local offline storage localStorage stores data for a period of time, and the data is not lost after the browser is closed

SessionStorage data is automatically deleted after the browser is closed

Semantic content elements, such as article, footer, header, nav, section

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

New technologies webworker, websocket, Geolocation

Elements removed:

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

Elements that negatively impact usability:frame, frameset, noframes

Support HTML5 new tags:

IE8/IE7/IE6 supports tags produced by document.createElement method

You can use this feature to make these browsers support the new HTML5 tags

After the browser supports the new label, you also need to add the default style of the label

Of course, you can also directly use a mature framework, such as html5shim

5. Please describe the difference between cookies, sessionStorage and localStorage?

A cookie is data that is stored on the user s local terminal(Client Side) by a website to indicate the user s identity(usually


Cookie data is always carried in the same-origin HTTP request(even if it is not needed), and the record will be back and forth between the browser and the server


sessionStorage and localStorage will not automatically send data to the server, only save locally

Storage size:

Cookie data size cannot exceed 4k

Although sessionStorage and localStorage also have limitations on storage size, cookies are much larger and can reach 5M or more


LocalStorage stores persistent data, and the data is not lost after the browser is closed, except for actively deleting data

sessionStorage data is automatically deleted after the current browser window is closed

The cookie set cookie is valid until the expiration time, even if the window or browser is closed

6. What are the internal elements? What are the block-level elements? What are the void elements? What is the difference between inner elements and block-level elements?

The inner elements are:a b span img input select strong

Block-level elements are:div ul ol li dl dt dd h1 h2 h3 h4 p

Empty element:

Inner elements cannot be wide or exclusive.

Block-level elements can be set wide and exclusive

7. What is the difference between Canvas and SVG?

The elements of each graphic drawn by svg are unique DOM nodes, which can be easily bound to events or used to modify them. canvas output is the entire canvas

The graphics output by svg is a large number of graphics. You can modify the parameters later to freely zoom in and out without distortion and sawing. The canvas output scalar canvas, just like a picture, it will be distorted or sawed when zoomed in

8. How to realize a circular clickable area on the page?



Pure js implementation requires a simple algorithm for obtaining a point on the circle, obtaining the coordinate coordinates, etc.

9. What is the kernel of the browser?

IE:trident kernel

Firefox:gecko kernel

Safari:webkit kernel

Opera:Formerly presto kernel, Opera now uses Google-Chrome's Blink kernel

Chrome:Blink(based on webkit, jointly developed by Google and Opera Software)

10, viewport

//width sets the width of the viewport, a positive integer, or the string device-width

//device-width device width

//height sets the viewport height. Generally, the width is set, and the height will be automatically parsed. You don't need to set it

//initial-scale default scaling example(initial scaling example), it is a number, you can take a small number

//minimum-scale allows the user to zoom in to the smallest example, which is a number, with a small number

//maximum-scale allows the user to scale the maximum example, is a number, can take a small number

//Whether user-scalable allows manual scaling

How to deal with the problem that mobile 1px is rendered as 2px

Local processing

The viewport attribute in the mate tag, initial-scale is set to 1

rem according to the standard of the design draft, plus the use of transfrome's scale(0.5) to reduce the size;

Global Processing

The viewport attribute in the mate tag, the initial-scale is set to 0.5

rem can follow the design standard

11. Briefly describe the difference between src and href

src is used to replace the current element, and href is used to make a connection between the current document and the referenced resource.

src is the abbreviation of source, and it points to the location of external resources. The pointed content will be embedded into the current label in the file.

In the location; when requesting the src resource, the resource pointed to by it will be downloaded and applied to the file, such as js script,

img image and frame elements

When the browser parses this element, it will pause other

Download and processing of resources, until the resources are loaded, compiled, and executed, and elements such as pictures and frames

The same is true, similar to embedding the pointed resource into the current label. This is why the js script is put at the bottom

The part is not the head

href is an abbreviation of Hypertext Reference, which points to the location of network resources, construction and current elements(anchor

Point) or the link between the current document(link), if we add in the document

Then the browser will recognize the file as css

File, it will download the resource in parallel and will not stop processing the current file. This is why it is recommended to use link

To load css in the form, not using the @import way

12, the difference between display:none; and visibility:hidden;

display:none; will make the element completely disappear from the rendering tree, and do not occupy any space when rendering;

visibility:hidden; will not let the element disappear from the rendering tree, the renderer element continues to occupy the space, but the content is not available

display:none; is a non-inherited attribute, the grandson node disappears because the element disappears from the rendering tree, and cannot be displayed by modifying the grandson node attribute; visibility:hidden; is an inherited attribute, the grandson node disappears due to inherited hidden, by setting visibility:visible; can make grandchildren explicit

Modifying the display of elements in a regular stream will usually cause file rearrangement. Modifying the visibility attribute will only cause redrawing of this element.

The screen reader will not read display:none; element content; will read visibility:hidden; element content

1 . Link is HTML format, @import is CSS format

2 . Link Maximum support for simultaneous downloads, @import too much nesting leads to string downloads, FOUC(file style


3 . Link can specify candidate styles through rel = "alternate stylesheet"

4 . Browser support for link is older than @import, you can use @import to hide styles for browser

5 . @Import must be before the style rules, you can use other files in the css file

6 . Overall:link is better than @import

14. Clear floating methods, advantages and disadvantages of each

Level div defines height

Add an empty div tag at the end to clear:both

Preliminary div defines pseudo-classes:after and zoom(recommended)

Level div defines overflow:hidden

The div also floats, you need to define the width

Add br tag at the end to clear:both

15, What are the new features of css3

Added various CSS selectors

Round border-radius

Multi-column layout

Shadows and reflections


Linear gradient

Rotate transform

16. What are the new pseudo-classes in CSS3?

p:first-of-type selects each of the

elements belonging to its


p:last-of-type selects each

element that belongs to the last

element of its element.

p:only-of-type selects each

element that belongs to its unique


p:only-child selects each

element that belongs to its only element.

p:nth-child(2) selects each

element that belongs to the first subelement of its element.

:after Add content before the element, can also be used to clear the float.

:before Add content after the element.

:enabled The enabled form element.

:disabled Form elements that have been disabled.

:checked The radio box or check box is selected.

17. How is the CSS priority algorithm calculated?

! important is greater than everything> Inline 1000> id 100> class 10> tag 1;

18. Introduce a standard CSS box model? What is different about the box model of the lower version of IE?

There are two types, IE box model and W3C box model;

Box model:content(content), padding(padding), border(margin), border(border);

Distinction:the ontent part of IE takes into account the border and padding;

19. If you need to write animations manually, how long do you think the shortest time interval is, and why?(Ah)

The default frequency of most monitors is 60Hz, that is, 60 refreshes per second, so the theoretical minimum interval is-1/60 \ * 1000ms = 16.7ms

20. How to beautify CheckBox

Hide the original

:checked +

21. What is the difference between the transparency effect of rgba() and opacity?

Both rgba() and opacity can achieve transparency, but the biggest difference is that opacity is used for elements and the transparency of all content within the element.

Rgba() is only used for the color of the element or its background.(Sub elements that set rgba transparent elements will not inherit the transparency effect!)

22, \ ["1", "2", "3" ]. Map(parseInt) What is the answer

\ [1, NaN, NaN ]Because parseInt requires two parameters(val, radix), where radix represents the radix used for parsing.

The map passed 3(element, index, array), the corresponding radix is invalid and the analysis failed.

23, closure

Closures are functions that can read variables inside other functions

A closure is a function that has access to another function as a variable in a domain. The most common way to create a closure is in a

Create another function within the function, access the local variable of this function through another function, and use closures to break through the chain of action

Characteristics of closures:

.Re-nesting functions within functions

.Internal functions can refer to outer parameters and variables

.Parameters and variables are not recycled by the garbage collection mechanism

Tell me about your understanding of closures

The main reason for using closures is to design private methods and variables. The advantage of closure is that it can avoid the pollution of global variables

The point is that closures will be resident in memory and will increase the amount of memory used. Improper use can easily cause memory leaks. In js, the function is

Closures, only functions produce the concept of domains of action

There are two most useful uses of closures. One is to read the variables inside the function, and the other is to keep these variables in memory all the time.

Another use of closures is to encapsulate the private properties and methods of objects

Benefit:Capable of packaging and caching, etc .;

Badness:It is the problem of consuming memory and improper use will cause memory overflow

Points to note when using closures

Closures will cause the variables in the function to be saved in memory, and the memory consumption is very large, so you can't misuse closures, otherwise it will cause network performance problems and may cause memory leaks in IE

The solution is to delete all unused local variables before exiting the function

24. Introduce the basic data types of js

Undefined, Null, Boolean, Number, String

25. How to use CSS to achieve hardware acceleration?

The CSS properties that generally trigger hardware acceleration are transform, opacity, and filter. In order to avoid 2D animation, repaint operations at the beginning and end, generally use transform:translateZ(0)