Shulou(Shulou.com)06/03 Report--

This article introduces what are the front-end interview questions, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. The difference between title and alt in tag attributes

A:

Title is to set the content to be displayed when the mouse moves over the picture, while alt is the prompt text that appears when the picture is not displayed properly. In addition, alt is also used to optimize the picture in seo.

2. Several methods of hiding elements

A:

1.display:none

2.visibility:hidden

3.opacity:0

4.position:absolute

Left:-10000px

3. What are the data types in JavaScript

A:

There are five simple data types (also known as basic data types) in JavaScript: Undefined, Null, Boolean, Number, and String. There is also a complex data type-Object,Object is essentially made up of an unordered set of name-value pairs.

4. Answer the types of the following output

A:

Alert (typeof (null)); / / objectalert (typeof (NaN)); / / numberalert (typeof (undefined)); / / undefinedalert (typeof ("undefined")); / / stringalert (NaN = = undefined); / / falsealert (NaN = = NaN); / / false

5. Use jquery and native js to get the contents of the element

A:

JS:document.getElementById ("div1") [xss_clean]; document.querySelector ("# div1"). InnerText;JQ:$ ("# div1"). Html ()

6. Encapsulate a compatible way to add listening events with native js

A:

Function addEvent (obj,event,fn) {/ / Modern: addEventLister does not need to add on / / ie:touchEvent needs to add on if (window.addEventListener) {obj.addEventListener (event,fn);} else {obj.attachEvent ("on" + event,fn);}}

7. Cross-domain understanding and solutions

A:

The simple understanding of cross-domain is that the front-end requirements under the current server directory are called cross-domain requests for backend services under non-local servers (this domain name). Cross-domain request it is impossible for us to use ordinary ajax requests. Generally speaking, web pages located in server1.example.com cannot communicate with servers that are not server2.example.com, or if you want to get server2.example.com under server1.example.com, you have to use cross-domain requests.

Cross-domain solution and solution: request through script tag, or cross-domain through jQuery

8. The principle of Ajax

A:

The principle of Ajax is simply to send asynchronous requests to the server through the XmlHttpRequest object, get data from the server, and then use javascript to manipulate the DOM to update the page.

XMLHttpRequest is the core mechanism of ajax. It was first introduced in IE5. It is a technology that supports asynchronous requests. To put it simply, javascript can make requests and process responses to the server in a timely manner without blocking the user. Achieve the effect of no refresh.

9. What is the $() in the jQuery library

A:

The $() function is used to wrap any object into a jQuery object, and you are then allowed to call several different methods defined on the jQuery object. You can even pass a selector string to the $() function, which returns a jQuery object containing an array of all matching DOM elements.

10. What is the difference between the _ window.onload event of JavaScript and the ready function of jQuery

A:

The main difference between JavaScript's _ window.onload event and jQuery's ready function is that the former not only waits for DOM to be created, but also waits for all external resources, including large images, audio, and video, to be fully loaded. If it takes a lot of time to load images and media content, users will feel a significant delay in the execution of the code defined on the _ window.onload event.

On the other hand, the ready () function of jQuery only waits for the DOM tree, not for images or external resources to load, which makes it faster to execute. Another advantage of using jQuery $(document). Ready () is that you can use it multiple times in a web page, and the browser will execute them in the order in which they appear on the HTML page, whereas for onload technology, it can only be used in a single function. Given this benefit, it is better to use the ready () function of jQuery than the _ window.onload event of JavaScript.

11. Encapsulate a function that can get elements to the top and leftmost of the page with native js, and then encapsulate the same function with JQ

A:

Native:

Function offset (obj) {var l = 0; var t = 0; while (obj) {lumped obj.offsetLeft; obj = obj.offsetParent;} return {left:l,top:t};}

JQuery:

$(). Offset (). Left;$ (). Offset (). Top

12. How to implement an EventEmitter

A:

There are three main steps: define a subclass, call the constructor, and inherit EventEmitter

Var util = require ('util'); var EventEmitter = require (' events'); function MyEmitter () {EventEmitter.call (this);} / / Constructor util.inherits (MyEmitter, EventEmitter); / / inherit var em = new MyEmitter (); em.on ('hello', function (data) {console.log (' data received from event hello:', data);}) / / receive the event and print it to the console em.emit ('hello',' EventEmitter is so convenient to deliver messages!')

13. How to copy a file through stream

A:

Var fs = require ("fs"); var rs = fs.createReadStream ("1.jpg"); var ws = fs.createWriteStream ("2.jpg"); rs.pipe (ws)

14. How to understand the synchronization and asynchronism of node

A:

The "synchronous mode" is the mode of the previous paragraph, and the latter task waits for the end of the previous task before it is executed. The execution order of the program is consistent with the order of the tasks and synchronized. "Asynchronous mode" is completely different, each task has one or more callback functions (callback), after the end of the previous task, not the execution of the next task, but the implementation of the callback function, the latter task is executed without waiting for the end of the previous task, so the execution order of the program and the order of the tasks are inconsistent and asynchronous.

15. Use node to build a server and process post requests made to "/ post" to get the data transferred by post requests (excluding file uploads)

A:

Var http = require ("http"); var queryString = require ("querystring"); var server = http.createServer (function (req,res) {if (urlObj.pathname = "/ post") {var str = ""; req.on ("data", function (chunk) {str+=chunk;}); req.on ("end", function () {var query = queryString.parse (str); console.log (query);}) res.end ("the address you requested is" + urlObj.pathname);}) Server.listen (8080)

16. Use node to simulate the client to initiate the request

A:

Var http = require ("http"); var request = http.request ({host: "localhost", port: "8080", path: "/ request", method: "post"}, function (res) {res.on ("data", function (chunk) {console.log (chunk.toString ());}); request.write ("user=zhang&pass=111"); request.end ("request ends"); / / end this request

17. The meaning and principle of picture preloading

A:

Preloading pictures is a good way to improve the user experience. Images are pre-loaded into browsers, which is very beneficial to picture galleries and websites where pictures account for a large proportion. It ensures that pictures are released quickly and seamlessly, and can also help users get a better user experience when browsing the content of the site.

Example code:

/ / obj.imgArr image array / / obj.loadingProgress loading progress / / obj.loadingOver loading result (function () {var imgObjs = []; loadingFn = function (obj) {var index = 0; for (var I = 0; I)

< obj.imgArr.length; i++) { var imgObj = new Image(); imgObj.onload = function() { index++; imgObjs.push(this); if (obj.loadingProgress){ obj.loadingProgress(index, this); } if (index >

Obj.imgArr.length-1) {obj.loadingOver (imgObjs);}} imgObj.src = obj.imgArr [I];} console.log (obj);}

18. What are the three layers of the browser page, what are they, and what is their function?

A:

Browser page composition: structure layer, presentation layer, behavior layer

They are: HTML, CSS, JavaScript

Function: HTML to achieve the page structure, CSS to complete the page performance and style, JavaScript to achieve some client functions and business.

19. What is semantic HTML?

A:

Intuitive understanding of tags, for the search engine crawling is good, with the right tags to do the right thing!

Html semantics is to make the content of the page structured, easy to parse to browsers and search engines, display in a document format without style CCS, and is easy to read. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is beneficial to SEO. Make it easier for people who read the source code to block the site, making it easy to read and maintain and understand.

20. CSS center (including horizontal center and vertical center)

A:

Horizontal center setting:

1. Inline element

Set up text-align:center

2.Flex layout

Set up display:flex;justify-content:center; (flexible use, support Chroime,Firefox,IE9+)

Vertical center settings:

1. Single-line text with a highly determined parent element (inline element)

Set height = line-height

two。 Multiline text with highly determined parent elements (inline elements)

A: insert table (insert the same way as horizontal center), and then set vertical-align:middle

B: set display:table-cell first and then vertical-align:middle

Block-level element centering scheme

Horizontal center setting:

1. Block element with fixed width

Set the left and right margin value to auto

two。 Variable width block element

A: add the table tag (complete, including table, tbody, tr, td) outside the element, write the element in td, and then set the value of margin to auto

B: set the displa:inine method for this element

C: parent element settings position:relative and left:50%, child elements settings position:relative and left:50%

Vertical center settings:

Use position:absolute (fixed) to set the properties of left, top, margin-left, margin-top

With the position:fixed (absolute) attribute, margin:auto must not be forgotten

Use the display:table-cell property to center the content vertically

Use the new property of css3, the transform:translate (xperiary) attribute

Using: before element

21. What are the new features of CSS3?

A:

CSS3 to achieve fillet (border-radius: 8px), shadow (box-shadow: 10px)

Add special effects (text-shadow), linear gradient (gradient), transformation (transform) to text

Transform:rotate (9deg) scale (0.85 meme 0.90) translate (0pxmaire 30px) skew (- 9degdeg0deg); / / rotate, scale, position, tilt

Also added more CSS selectors, multi-background, rgba, etc.

22. What is the event delegation?

A:

Use the principle of event bubbling to make your own triggered event and its parent element instead of execution!

23. What is elegant degradation and gradual enhancement?

A:

Elegant downgrade: Web sites work in all newer browsers, and if users are using older browsers, the code checks to see if they work. Due to the unique box model layout problem of IE, the hack practice for different versions of IE has been gracefully degraded, adding candidates for browsers that do not support features, so that the experience of some form of degradation on older browsers will not fail completely.

Progressive enhancement: start with the basic features supported by all browsers, gradually add features that are supported only by newer browsers, and add additional styles and features that are harmless to the underlying browser. When browsers support them, they are automatically rendered and functioning.

24. What are JavaScript prototypes and prototype chains? What are the characteristics?

A:

The prototype object is also a common object, which has its own implicit proto property, and the prototype may also have its own prototype. If the prototype of a prototype object is not null, we call it prototype chain.

A prototype chain is a (limited) chain of objects that inherit and share properties.

25. How to prevent event bubbles and default events

A:

Stop bubbling:

Modern browser: e.stopPropagation

Lower version browser: e.cancelBubble=true

Block default events:

Modern browser: e.preventDefult ()

Lower version browser: return false

26. IOS the method of realizing automatic audio and video playback in Apple and Wechat

A:

/ / normally, this can be played automatically, but some weird iPhones cannot document.getElementById ('audio'). Play (); / / document.addEventListener ("WeixinJSBridgeReady", function () {document.getElementById (' audio'). Play (); document.getElementById ('video'). Play ();}, false) can only take effect on the WeixinJSBridgeReady of iPhone Weixin JSAPI.

27. Explain the differences between GET/POST

A:

GET request, the requested data will be appended to the URL to? Split the URL and transmit data, and multiple parameters are connected with &. URL is encoded in ASCII rather than uniclde, which means that all non-ASCII characters are encoded and then transmitted.

POST request: the POST request places the requested data in the body of the HTTP request packet.

Therefore, the data requested by the GET is exposed in the address bar, while the POST request is not.

About the size of the transmitted data

In the HTTP specification, there are no restrictions on the length of URL and the size of data transmitted. However, in the actual development process, for GET, the length of URL is limited by specific browsers and servers. Therefore, when using GET requests, the transmission of data is limited by the length of the URL.

For POST, it is not limited in theory because it is not passed by URL, but in practice, each server will specify a limit on the size of the data submitted by POST, and Apache and IIS have their own configurations.

About security

Get is the default method of Form, and its security is relatively low.

28. Describe the difference between cookies,sessionStorage and localStorage

A:

SessionStorage and localStorage are provided by HTML5 Web Storage API and can easily save data between web requests. With local data, you can avoid passing data back and forth unnecessarily between the browser and the server.

SessionStorage, localStorage, and cookie are all data stored on the browser side, in which the concept of sessionStorage is very special, introducing the concept of a "browser window". SessionStorage is the data that always exists in a classmate of the same origin (or tab). That is, as long as the browser window is not closed, even if you refresh the page or enter another page of the same origin, the data still exists. When the window is closed, the sessionStorage is destroyed. At the same time "independent" open different windows, even on the same page, the sessionStorage object is also different. The cookies is sent to the server. The other two won't.

Microsoft pointed out that Internet Explorer 8 increased the limit of cookie to 50 per domain name, but IE7 also seems to allow 50 cookie per domain name. Firefox is limited to 50 cookie per domain name. Opera is limited to 30 cookie per domain name. Firefox and Safari allow cookie up to 4097 bytes, including name name), value (value), and equal sign. Opera allows up to 4096 bytes of cookie, including first name (name), value (value) and equal sign. Internet Explorer allows cookie to be up to 4095 bytes, including: first name (name), value (value), and equal sign.

Difference:

Cookie:

The storage capacity of each domain name is relatively small (different browsers, approximately 4K)

The storage capacity of all domain names is limited (different browsers, approximately 4K)

There is a limit on the number of browsers.

Will be sent to the server with the request

LocalStorage:

Permanent storage

The storage capacity of a single domain name is relatively large (5MB is recommended, different browsers)

The total quantity is unlimited.

SessionStorage:

Valid only in Session

More storage (there is no limit recommended, but in fact it varies from browser to browser)

29. What's the difference between image and canvas when dealing with pictures?

A:

Image describes pictures in the form of objects.

Canvas draws the picture on the canvas through a special API.

30. In the responsive layout, do you use two different pictures to fit the big screen and the ultra-small screen, or do you compress one picture to adapt to different terminals to explain why?

A:

It is best to use two pictures of different sizes to fit the large screen and the ultra-small screen, so that you can load the response pictures according to the screen size of different devices, reduce the network traffic consumption of ultra-small screen devices, and speed up the response speed. at the same time, it prevents the distortion caused by the insufficient resolution of the picture under the large screen.

What are the front-end interview questions to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.