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

This article mainly explains "what are the real questions in the front-end interview". The content in the article is simple and clear, and it is easy to learn and understand. let's follow the editor's train of thought to study and learn "what are the real questions in the front-end interview"?

1. Tell me about your understanding of dns-prefetch.

What is DNS-Domain Name System, the domain name system, as a distributed database for mapping domain names and IP addresses to each other.

DNS Prefetching

According to the custom rules, the browser parses the domain name that may be used later in advance to speed up the visit of the website. To put it simply, it is to resolve the domain name in advance to avoid delay.

Mode of use

This function has a default load condition, all a tag href will automatically enable DNS Prefetching, that is, your web page a tag href with the domain name, do not need to add link manual setting in the head. However, the default startup of the a tag does not work on HTTPS.

At this point, you need to use the http-equiv in meta to force the function to start.

To sum up.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

DNS Prefetching loads domain name resolution in advance, saving time for parsing. A tag href is available in chrome. Firefox includes a higher version of IE, but it does not work under HTTPS. Meta is required to enable the function.

This is an advance parsing of DNS, not a file cache like css,js, so don't confuse two different concepts.

If you directly redirect the js, or do the redirection on the server, it will not work if it is not manually set in the link.

What kind of website is more useful for this? for a website like taobao, your page references a lot of resources from other domain names. If your website, basically all the resources are under your own domain name, then this basically has no effect. Because DNS Chrome is visiting your website, it caches it for you.

Expand knowledge learning

Performance Optimization 1 under web (Network Direction)

2. What are the characteristics of the parameter passing length of get/post request

We often say that the size of get request parameters is limited, while the size of post request parameters is unlimited. This is a misstatement. In fact, the HTTP protocol has never specified what the request length limit for GET/POST is. The limitation on get request parameters is that the source and browser or web server, browser or web server limits the length of url. In order to clarify this concept, we must emphasize the following points again:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

The HTTP protocol does not specify length limits for GET and POST.

The maximum length of GET is displayed because browsers and web servers limit the length of URI.

The maximum length is different for different browsers and WEB servers.

To support IE, the maximum length is 2083byte. If only Chrome is supported, the maximum length is 8182byte.

3. Which SEO should be paid attention to at the front end?

1. Reasonable title, description, keywords: the weight of the search for the three items is reduced one by one, the title value emphasizes the key points, and the important keywords appear no more than 2 times, and the title of different pages should be different; description highly summarizes the content of the page, the length is appropriate, do not overpile keywords, different pages description is different; keywords lists important keywords

two。 Semantic HTML code, in line with the W3C specification: semantic code makes web pages easy for search engines to understand

3. Important content HTML code is put first: search engines crawl HTML from top to bottom, and some search engines have restrictions on crawling length to ensure that important content will be crawled.

4. Important content do not use js output: the crawler will not execute js to get the content

5. Use less iframe (search engines don't crawl content in iframe)

6. Non-decorative pictures must be added with alt

7. Improve website speed (website speed is an important indicator of search engine ranking)

4. Implement a website where the page operation does not refresh the whole page, and can respond correctly when the browser moves forward and backward. Give your technical implementation plan?

The first step is to implement the browser forward and backward without refresh by using pushState + ajax. When an ajax call is successful, we add a state record to the history object.

Second, a state record contains the url, title, and content attributes, and the state object can be obtained in the popstate event, and we can pass the data using content. Third, we respond to the browser's forward and backward operations by listening for the _ window.onpopstate event.

There are two problems with using pushState, one is that there is no record when opening the home page, we can use replaceState to replace the record of the home page, and the other question is that when a page is refreshed, it will still request data from the server, so if the requested url needs a back-end fit, it will be redirected to a page.

More reference: http://blog.chenxu.me/post/detail?id=ed4f0732-897f-48e4-9d4f-821e82f17fad

5. How to optimize the slow loading speed of the first screen of SPA applications?

The common JS library is introduced outside the script tag to reduce the size of app.bundel, let the browser download resource files in parallel, and improve the download speed.

When routing is configured, pages and components are introduced by lazy loading to further reduce the size of the app.bundel and load the corresponding js file when a component is called

Insert loading or skeleton screen prerender-spa-plugin into root to enhance user experience

If you have a page in webview, you can preload the page

Independently package the common Bundle of asynchronous components to improve reusability & cache hit ratio

Static file local cache, there are two ways: HTTP cache, setting response headers such as Cache-Control,Last-Modified,Etag, and Service Worker offline cache.

Use with PWA

SSR

Insert loading or skeleton screen prerender-spa-plugin into root

Use Tree Shaking to reduce the volume of business code for more reference: https://github.com/LuckyWinty/fe-weekly-questions/issues/69

6. What is the purpose of creating Reflect objects?

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Put some square methods (such as Object.defineProperty, on the Reflect object) that clearly belong to the inner part of the language of the Object object.

Modify the results returned by some Object methods to make them more reasonable.

Let the Object operations become functional behaviors.

The method of the Reflect object corresponds to the method of the Proxy object. As long as it is the method of the Proxy object, the corresponding method can be found on the Reflect object. This allows the Proxy object to easily call the corresponding Reflect method to complete the default behavior as the basis for modifying the behavior.

That is, no matter how Proxy modifies the default behavior, you can always get the default behavior on Reflect.

7. What is the internal attribute [[Class]]?

All objects with a typeof return value of "object" (such as an array) contain an internal attribute [[Class]] (we can think of it as an internal classification rather than a traditional object-oriented class). This property cannot be accessed directly, usually through Object.prototype.toString (..) To check it out. For example:

Object.prototype.toString.call ([1 object Array 2 and 3]); / / "[object Array]" Object.prototype.toString.call (/ regex-literal/i); / / "[object RegExp]"

In most cases, the internal [[class]] property of an object corresponds to the built-in native constructor that created the object, but not always. two。 The [[class]] attribute of the base type value

Although native constructors such as Null () and Undefined () do not exist, the internal [[class]] properties are still "Null" and "Undefined".

Console.log (Object.prototype.toString.call (null)); / / [object Null] console.log (Object.prototype.toString.call (undefined)); / / [object Undefined]

Other basic types of values are different:

Console.log (Object.prototype.toString.call ("abc")); / / [object String] console.log (Object.prototype.toString.call (42)); / / [object Number] console.log (Object.prototype.toString.call (true)); / / [object Boolean]

Primitive type values are automatically wrapped by their respective encapsulated objects, so their internal [[class]] properties are "String", "Number", and "Boolean", respectively. 3. Encapsulated object

Since the base type value does not have properties and methods such as .length and .toString (), it needs to be accessed by wrapping the object, so the Javascript engine automatically wraps a wrapper object for the base type value.

/ / encapsulated object wrapper var b = 'abc'; cons is generally not straight ole.log (b.length); console.log (b.toUpperCase ()); ````js then uses encapsulated objects (that is, creating basic type values through new operation), giving priority to using basic type values such as "abc" and "42" rather than new String ("abc") and new Number (42). 4. Unwrap if you want to get the primitive type value in the encapsulated object, you can use the valueOf () function. ````js / / unpacking the object var s = new String ("abc"); var n = new Number (42); var b = new Boolean (true); console.log (s.valueOf ()); console.log (n.valueOf ()); console.log (b.valueOf ())

8. What is a heap? What is a stack? What are the differences and connections between them?

The concepts of heap and stack exist in data structures and operating system memory. In the data structure, the access mode of the data in the stack is first in and then out. The heap is a priority queue, which is sorted by priority, and the priority can be determined by size. Complete binary tree is an implementation of heap. In the operating system, memory is divided into stack area and heap area. Stack memory is automatically allocated and released by the compiler to store the parameter values of the function, the values of local variables, and so on. It operates in a manner similar to the stack in the data structure. The memory in the heap area is allocated and released by the programmer, and if the programmer does not release it, the program may be reclaimed by the garbage collection mechanism at the end of the program.

For more information, please refer to: "what is a heap?" What is a stack? What is the difference and connection between them? "

9. What is the difference between isNaN and Number.isNaN functions?

After the function isNaN receives the parameter, it attempts to convert the parameter to a numeric value. Any value that cannot be converted to a numeric value will be returned to true, so the input of a non-numeric value will also return true, which will affect the judgment of NaN.

The function Number.isNaN first determines whether the input parameter is a number, and if it is a number, it continues to determine whether it is NaN. This method is more accurate for NaN.

10. Under what circumstances does implicit casting of Boolean values occur?

1) if (..) The conditional judgment expression in the statement. (2) for. ;. ;. The conditional judgment expression in the statement (the second) 3) while (..) And do..while (..) The conditional judgment expression in the loop. The conditional judgment expression in (4)? (5) the Operand to the left of the logical operators | | (logical OR) and & & (logical and) (as a conditional expression).

11. What is the difference between undefined and undeclared?

Variables that have been declared in scope but have not yet been assigned are undefined. In contrast, variables that have not yet been declared in scope are undeclared. For references to undeclared variables, the browser reports a reference error, such as ReferenceError: b is not defined. But we can use typeof's security mechanism to avoid error reporting, because for the undeclared (or not defined) variable, typeof returns "undefined".

twelve。 How to encapsulate a javascript type judgment function?

Function getType (value) {/ / cases where the data is null (value = null) {return value + ";} / cases where the data is a reference type if (typeof value =" object ") {let valueClass = Object.prototype.toString.call (value), type = valueClass.split (") [1] .split ("); type.pop () Return type.join (") .toLowerCase () } else {/ / judgment data is the basic data type and function return typeof value}} Thank you for your reading. The above is the content of "what are the real questions of front-end interview?" after the study of this article, I believe you have a deeper understanding of what the real questions of front-end interview are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.