Web front-end basic interview questions
Posted May 28, 2020 • 9 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.
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.
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.
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
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
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
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?
Opera:Formerly presto kernel, Opera now uses Google-Chrome's Blink kernel
Chrome:Blink(based on webkit, jointly developed by Google and Opera Software)
//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
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;
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 elementsWhen 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 documentThen 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
13, The difference between link and @import
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
Shadows and reflections
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
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.
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)