50 web front-end interview questions

(1) Reduce network time

① Use DNS caching technology ② Reduce the size of files that need to be transferred ③ Speed up file transfer

(2) Reduce the number of requests sent

①Use browser cache ②Use merged image files

(3) Improve the concurrency of browser downloads

①Place the JS file at the end of the HTML document ②Use multiple domain names

(4) Let the page start displaying as soon as possible

① Place the reference to the style sheet at the beginning of the HTML document, and place the reference to JS at the end of the HTML document, so that the download and execution of the JS file will not prevent the display of other page elements after all pages are downloaded. From the user perspective, the download and execution time of the JS file will not be felt by the user at all.

2. The difference between cookie sessionStorage and localStorage

the difference:

Cookie data is always carried in the same-origin http request (even if it is not needed), that is, the cookie is passed back and forth between the browser and the server, while sessionStorage and localStorage do not automatically send the data to the server and are only saved locally. Cookie data also has the concept of path, which can limit 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; localStorage: is always valid and is saved even when the window or browser is closed, so it is used as persistent data; cookie: is only valid before the set cookie expiration time, even if the window Close or browser close

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

3. What is the difference between Canvas and SvG?

The difference between the two is as follows:

Once the Canvas is drawn, you cannot access the pixels or manipulate it; any shapes drawn using SVG can be remembered and manipulated, and can be displayed again by the browser.

Canvas is very beneficial for drawing animations and games; SVG is very beneficial for creating graphics (such as CAD).

Canvas runs faster because there is no need to remember things in the future; because SVG needs to record coordinates for subsequent operations, it runs slower.

In Canvas, related events cannot be bound to drawing objects; in SVG, related events can be bound to drawing objects.

Canvas draws a bitmap, so it is related to the resolution; SvG draws a vector image, so it has nothing to do with the resolution.

4. How to clear floats

The first way to clear floating elements is to add an empty div at the end of the same level of the floating element and add the style clear attribute.

The second method is to use the overflow attribute when a child element floats, which will forcefully wrap the floating content to achieve the effect of clearing the floating content.

The third method: Use pseudo-classes to clear floats: The after pseudo-class can use the second method to clear floats.

5. Talk about your understanding of static layout, adaptive layout, responsive layout, and elastic layout?

static layout

Description: Just set the length and width. The size will not change. No matter how big your screen is, it will be the same size. The resolution will not change.

Adaptive layout

Description: Maintain the original display method under different screen resolutions. The size of the element can be changed, but the presentation will not.

Responsive layout

Description: Display methods are different under different screen resolutions

Flexible layout (flex layout)

Description: A currently popular layout. It is difficult to implement some complex layouts using traditional layouts. It becomes very easy to implement them using flex layout.

6. JS method to determine data type

1、typeof

2、instanceof

3、constructor

4、toString

5. is Array determines whether it is an array

7. Array methods

push() adds at the end, join() converts array into string, pop() deletes at the end, unshift() adds first, shift() deletes first, sort() sorts, concat() merges arrays, slice() intercepts , splice() array update, indexOf() query from the beginning to the end, lastIndexOf() query from the end to the end, reverse() array reverse order

The map() method performs special processing on each element of the array and returns a new array.

The filter() method filters elements that meet the requirements in an array and returns a new array.

The some() method is used for array judgment. When one of the arrays meets the conditions, it returns true.

forEach This method is used instead of for loop to traverse the array

The return value of every is a Boolean value, which determines whether all the values in the array meet the conditions. If so, it returns true. If one does not meet the conditions, it returns false.

The return value of find and findLast is the corresponding value that meets the conditions. The latter traverses from back to front.

The includes method is used to determine whether an array contains a specified value. If it does, it returns true, otherwise it returns false.

8. String method

charAt() Returns the character at the specified position concat() Connects the string replace() Replaces split() Splits indexOf() The first occurrence from front to back lastindexOf() The first occurrence from back to front toLowerCase() Convert to lowercase toUpperCase( ) Convert to uppercase clice() String interception subString() String interception

includes(): Returns a Boolean value indicating whether the parameter string is found. startsWith(): Returns a Boolean value indicating whether the parameter string is at the head of the original string. endsWith(): Returns a Boolean value indicating whether the parameter string is at the end of the original string. The repeat() method returns a new string, which means repeating the original string n times

padStart() and padEnd() accept two parameters. The first parameter is the maximum length for string completion to take effect, and the second parameter is the string used for completion. Add less and delete more

9. Array deduplication

Use ES6 Set to remove duplicates (most commonly used in ES6)

 function unique (arr) {
   return Array.from(new Set(arr))
 }

Use filters

 function unique(arr) {
   return arr.filter(function(item, index, arr) {
     //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
     return arr.indexOf(item, 0) === index;
   });
 }

Use for to nest for, and then splice to remove duplicates (most commonly used in ES5)

 function unique(arr){            
         for(var i=0; i<arr.length; i++){
             for(var j=i+1; j<arr.length; j++){
                 if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                     arr.splice(j,1);
                     j--;
                 }
             }
         }
 return arr;
 }

10. The difference between var let const

 ①var has variable promotion, let and const have no variable promotion
 ②Var is a global variable except inside functions. Let and const both belong to block-level scope.
 ③var can be defined repeatedly, which will overwrite the previous variables. let and const cannot be defined repeatedly and an error will be reported.
 ④Var has no temporary dead zone, while let and const have temporary dead zone.
 ⑤When var is declared as a global variable, it will be mounted to the window let, and const will not be mounted to the window.
 ⑥var and let are variables and const are constants

11. What exactly does the new operator do?

 ①new will create a new empty object in memory
 ②new will make this point to this object
 ③Execute the code in the constructor and add properties and methods to this new object
 ④new will return this new object (so the constructor does not need to return)

12. Let’s talk about this pointer in JavaScript

1. Ordinary function call, at this time this points to window

2. Constructor call, at this time this points to the instance object

3. Object method call, at this time this points to the object to which the method belongs

4. Through the event binding method, this points to the object of the bound event.

5. Timer function, at this time this points to window

13. Array flattening

 [1, [2, [3]]].flat(2)  // [1, 2, 3]

ES6 implementation:

 function flatten(arr) {
     while (arr.some(item => Array.isArray(item))) {
         arr = [].concat(...arr);
     }
     return arr;
 }

14. What is the event loop?

 ① Synchronous and asynchronous tasks enter different places, enter the main thread synchronously, enter the event list asynchronously and register functions
 ②When the specified thing is completed, the event list will move this function into the Event Queue
 ③ When the tasks in the main thread are empty after execution, the corresponding function will be read from the Event Queue and put into the main thread for execution.
 ④The above process will be repeated continuously, which is what we call the event loop

15.The difference between promise.all and promise.race

 ①Only when all states become fulfilled, the state of p becomes fulfilled. At this time, their return values form an array and are passed to p’s callback function.
 ② As long as one of p1, p2, and p3 is rejected, the status of p will become rejected. At this time, the return value of the first rejected instance will be passed to the callback function of p.
 ③As long as one promise status changes, the status of the outer promise will change, and the return value of the first changed promise will be passed to the return value of the outer layer.

16. Advantages and disadvantages of promise

 ① Asynchronous operations can be expressed as a synchronous operation process, avoiding nested callback functions. In addition, the promise object provides a unified interface, making it easier to control asynchronous operations.
 ② Promise cannot be canceled. Once established, it is executed immediately and cannot be canceled midway.
 ③If the callback function is not set, an error will be thrown internally and will not be reflected externally.
 ③When in the pending state, it is impossible to know which stage the current progress is (just started or about to be completed)

17. The difference between arrow functions and ordinary functions

 ①The this object in the arrow function body is the object where it was defined, not the object used.
 ②The arrow function has no arguments. If you want to use it, you can use rest instead.
 ③The arrow function cannot be used as a constructor and new cannot be used.
 ④The arrow function has no prototype and cannot be inherited.
 ⑤The arrow function cannot be used as a generator function, and the yield keyword cannot be used.

18.The difference between window.onload and $(document).ready()

 ①window.onload must wait until all content in the web page is loaded before execution
  $(document).ready() is executed after the DOM is loaded.
 ②Window.onload cannot write multiple pages on the same page
  $(document).ready()You can write multiple files on the same page
 ③Abbreviation window.onload none
  $(document).ready()==>(function(){})
  <br/>

19. How many page request methods are there?

get: Request specified page information and return the entity body. head: Similar to a get request, except that there is no specific content in the returned response, used to obtain the header. post: Submit data to the specified resource to process the request (such as submitting a form or uploading a file). The data is included in the request body. Post requests may result in the creation of new resources or modification of existing resources. put: The data transferred from the client to the server replaces the content of the specified document. delete: Request the server to delete the specified page. connect: The HTTP/1.1 protocol is reserved for proxy servers that can change the connection to a pipeline. options: Allows the client to view the server's performance. Trace: echoes requests received by the server, mainly used for testing or diagnosis.

20. What is cross-domain? How to solve?

This means that the browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy , which is a security restriction imposed by the browser on JavaScript.

Cross-domain solutions 1. Cross-domain via jsonp 2. Cross-domain document.domain + iframe 3. Location.hash + iframe 4. Cross-domain window.name + iframe 5. Cross-domain postMessage 6. Cross-domain resource sharing (CORS) 7. nginx proxy cross-domain

21. The entire process from the URL to the completion of loading of the entire page and display on the screen

 ①Enter address
 ②The browser searches for the IP address of the domain name
 ③The browser sends an http request to the web server
 ④The server’s permanent redirect response
 ⑤Browser tracking redirect address
 ⑥The server processes the request
 ⑦The server returns an http request
 ⑧The browser displays HTML
 ⑨The browser sends a request to obtain resources (videos, pictures, etc.) embedded in HTML

22. List more than 4 methods of website performance optimization

 ① Minimize the number of HTTP requests ② Preloading ③ Reduce the number of DOM elements ④ Reduce DOM access ⑤ Cacheable AJAX ⑥ Reduce the number of DNS lookups
 ⑦ Use external JavaScript and CSS ⑧ Cut down on JavaScript and CSS ⑨ Avoid jumps ⑩ Delay loading of content     
 ①Minimize the number of iframes ②Place the style sheet at the top ③Use <link> instead of @import ④Eliminate duplicate scripts ⑤Reduce cookie size, preferably use localStorage ⑥Optimize CSS Spirite

23.The difference between setTimeout, Promise, Async/Await

 This question mainly examines the differences between the three in the event loop. The event loop is divided into macro task queue and micro task queue.
 (1) The callback function of settimeout is placed in the macro task queue and executed after the execution stack is cleared;
 (2) The callback function in promise.then will be placed in the microtask queue of the corresponding macrotask, and will be executed after the synchronization code in the macrotask is executed;
 (3) The async function indicates that there may be an asynchronous method in the function, and await is followed by an expression. When the async method is executed, the expression will be executed immediately when await is encountered, and then the code following the expression will be placed in the microtask queue, so that Remove the execution stack and let the synchronization code execute first.
 <br/>

24.The difference between set and map

 ①The main application scenarios of Set and map are data reorganization and data storage.
 ②set is a data structure called a set, and map is a data structure called a dictionary.
 ③set itself is a constructor used to generate set data structures. The set object allows you to store a unique value of any type, whether it is a primitive value or an object reference
 ④Map is essentially a collection of key-value pairs. It is similar to a collection and can be traversed (forEach). There are many methods that can be converted to various data formats.

25. Write down all the loaders you know and their functions

 ①babel-loader: Processes js files and escapes syntax above es5
 ②css-loader: Helps webpack package and process CSS files
 ③style-loader: Insert the CSS code packaged by css-loader into the HTML file in the form of <style></style> tags
 ④less-loader: used to process compiled .less files and convert them into CSS file codes
 ⑤sass-loader: Load sass/scss and compile sass/scss into css
 ⑥url-loader: used to process images

26. Project structure of mini program

 ①-project.config.json: Project configuration file. For example, set the name of the project, set the appid, etc.
 ②-app.js: Mini program logic processing (global js). For example, when the applet is loaded and executed, the code
 ③-app.json: public configuration of the mini program. For example, the page of the mini program, whether there is a tabBar, etc.
 ④-app.wxss: Mini program public style (global css). The styles written here can be used by all pages
 ⑤-pages: Store mini program pages
     -index: the name of the page
         -index.js: Logical processing file of index page (partial js)
         -index.json: Configuration file of index page
         -index.wxml: The page structure of the index page (equivalent to HTML)
         -index.wxss: style of index page (local css)
     -Other pages

27.How webpack optimizes performance

①Build performance : The higher the build performance, the higher the development efficiency. Reduce module parsing, optimize loader performance, limit loader applications, cache loader results, multi-thread packaging, and enable hot replacement. ②Transmission performance: Focus on the network in this regard . The total transfer volume, as well as the number of files, subcontracting, manual subcontracting, custom subcontracting, module size optimization, code compression, lazy loading, gzip, auxiliary tools ③ Running performance: mainly refers to the running efficiency of js on the client . Running performance

28.The difference between loader and plugin

LoaderThe essence is a function in which the received content is converted and the converted result is returned. Because Webpack only knows JavaScript, Loader becomes a translator, performing preprocessing work on translating other types of resources.

PluginIt is a plug-in. Based on the event flow framework Tapable, plug-ins can extend the functions of Webpack. Many events will be broadcast during the life cycle of Webpack running. Plugin can listen to these events and change the output results at the appropriate time through the API provided by Webpack.

LoaderConfigured in module.rules as the parsing rules of the module, the type is an array. Each item is an Object, which contains attributes such as test (type file), loader, options (parameters), etc.

PluginConfigured separately in plugins, the type is an array, each item is an instance of Plugin, and the parameters are passed in through the constructor.

29.What is hot update?

The page can update our saved content in real time instead of needing to be refreshed manually.

The principle of hot update: after saving, compare it with the previous content. If the comparison finds that there are modifications, the modified content will be updated. If there is no updated content, then we will keep the previous content unchanged.

30. Write down all the loaders and functions you know

babel-loader: processes js files and will escape the syntax of es5 or above css-loader: helps webpack package and process CSS files style-loader: wraps the CSS code packaged by css-loader with the <style></style> tag The form is inserted into the HTML file less-loader: used to process the compiled .less file and convert it into CSS file code sass-loader: load sass/scss, and compile sass/scss into css url-loader: used to process images

31.How webpack implements preloading

When declaring import, use webapck's built-in instruction webpackPrefetch: true to preload the specified resource.

Preloading: Wait until other resources are loaded and the browser is idle, then secretly load the resources set to preload.

 import(webpackChunkName:'test' ,webpackPrefetch:true"./test").then(({test}) => {
             console.log('test加载成功')
             test()
 })

32. The uses and differences of five routes (wx.switchTab, wx.reLaunch, wx.redirectTo, wx.navigateTo, wx.navigateBack)

1. wx.switchTab (jump to homepage): Jump to the tabBar page, and close all other non-tabBar pages to jump to the homepage.

2. wx.reLaunch (close all page jumps): Close all pages and open to a page within the application.

3. wx.redirectTo (Close current page jump): Close the current page and jump to a page in the application, but it is not allowed to jump to the tabBar page.

4. wx.navigateTo (retain page jump): retain the current page and jump to a page in the application, but cannot jump to the tabbar page.

5. wx.navigateBack (page return): Close the current page and return to the previous page or multi-level page. You can get the current page stack through getCurrentPages and decide how many levels need to be returned.

33.The role of setData

The setData function is used to send data from the logic layer to the view layer (asynchronous), and at the same time change the corresponding value of this.data (synchronous)

34.wx: The role of key

If the position of the items in the list changes dynamically or new items are added to the list, and you want the items in the list to maintain their own characteristics and status, you need to use wx:key to specify the unique identifier of the items in the list.

35. Life cycle of mini program

First of all, the life cycle function of the applet is app.jscalled inside, and App(Object)the function is used to register an applet. Accepts a Objectparameter to specify the life cycle callback of its applet; generally there are life cycle callback functions onLaunchsuch as monitoring applet initialization, onShowmonitoring applet display, onHidemonitoring applet hiding, etc.

1. When the user opens the mini program for the first time, onLaunch is triggered (only triggered once), and the mini program program begins to initialize.

2. After the mini program code is initialized, trigger the onShow method and monitor the mini program display. At this time, we can see the page.

3. When the mini program enters the background from the foreground, the onHide method is triggered. When we switch to other mobile programs (from Baidu APP to QQAPP mobile program), the application switch is placed in the background and runs.

4. When the mini program enters the foreground display from the background, the onShow method is triggered. When we switch back to the mobile program, the application switches to the foreground (from QQAPP to Baidu APP mobile program) and runs.

5. When a script error occurs in the applet, or the api call fails, the onError method will be triggered with error information.

36. Page life cycle

data	Initial data of the page
onLoad	After the program initialization is completed, onload is triggered when the page is loaded for the first time, and it will only be triggered once.
onShow	Life cycle function--monitor page display
onReady	Life cycle function--listen to the completion of the initial rendering of the page
onHide	Life cycle function--listen to page hiding
onUnload	Life cycle function--listen for page unloading
onPullDownRefresh	Page-related event processing function--monitoring user pull-down actions
onReachBottom	Handling function for page pull-down event

37. How does the WeChat applet realize data sharing between pages?

① Use component template template to pass parameters ② Use global variables to implement data transfer let App = getApp() ③ Transfer between components, bind attributes ④ Local cache (Storage) ⑤ Five types of route transmission

38.The difference between bindtap and catchtap

bindtap event binding does not prevent bubbling events catchtap event binding can prevent bubbling events

39. The difference between independent subcontracting and ordinary subcontracting of small programs

Ordinary subcontracting: must depend on the main package to run, and can reference public resources in the main package

Independent subcontracting: can run independently without downloading the main package, and cannot reference public resources in the main package.

40.What are the open-type attributes of button?

contact: open customer service session bindcontact: callback

share: trigger user forwarding

getPhoneNumber: Get the user’s mobile phone number bindgetphonenumber: callback

getUserInfo: Get user information bindgetuserinfo: callback

openSetting: Open the authorization setting page. The difference between independent subcontracting and ordinary subcontracting of the applet

41.The difference between commonjs and ES6 modules

1. The module import and export syntax of the two is different. Commonjs uses module.exports, exports exports, and require imports; ES6 uses export and import.

2. Commonjs loads modules at runtime, while ES6 determines module dependencies during static compilation.

3. ES6 will raise all imports to the top during compilation, and commonjs will not raise require.

4. What commonjs exports is a value copy, and the loading result will be cached. Once the value is modified internally, it will not be synchronized to the outside. ES6 is an exported reference, and internal modifications can be synchronized to the outside.

5. The top-level this in commonjs points to the module itself, while the top-level this in ES6 is undefined.

42. The difference between the applet wx.setStorageSync and wx.setStorage

 (1) Function: Store data in the specified key in the local cache. Will overwrite the original content corresponding to the key. Unless the user actively deletes it or it is cleared by the system due to storage space reasons, the data will always be available. The maximum data length allowed to be stored in a single key is 1MB, and the upper limit of all data storage is 10MB.
 (2) Difference: wx.setStorageSync is a synchronous cache wx.setStorage is an asynchronous cache
     ① Using asynchronous cache, the program will execute downward regardless of success or failure.
     ② Use synchronous cache. Only when the cache is successful, the program will be executed downwards.
     ③Asynchronous caching has better performance and better user experience
     ④ Synchronized cached data is more secure

43.What are the differences between Form's Submit submission and ajax request? How to submit Form form data using ajax?

 ①Ajax submission is performed asynchronously, and the web page does not need to be refreshed, while the Form form needs to be refreshed when submitted.
 ②Ajax must be implemented with JS, but Form is not required.
 ③Ajax requires utility programs to process data. Form submission is automatically completed based on the form structure and does not require code intervention.
 
 ①Serialize Form form data
 ②Find Form submission through window

44. The difference between WeChat mini program and H5

 ① Different operating environments (mini programs run on WeChat, H5 runs on the browser)
 ② Development costs are different (H5 needs to be compatible with different browsers)
 ③ Obtaining system permissions is different (system-level permissions can be seamlessly connected with mini programs)
 ④Invisible speed process applied in the production environment (H5 needs to continuously optimize the project to improve user experience)

45. Name the UI components commonly used in mini programs

 View container components: view, swiper, swiper-item
 Basic content components: text, icon, rich-text
 Form components: button, from, CheckBox, input
 Navigation component: navigator
 Media component: image

46.What are the ways to lazy load JS?

1. JS’s lazy loading helps to improve the loading speed of the page. 2. defer and async, dynamic creation of DOM (most commonly used), asynchronous loading on demand 3. JSdefer: delay script. Download immediately, but delay execution (delay until the entire page is parsed before running), and execute the scripts in the order they appear. 4. async: asynchronous script. It will be executed immediately after downloading, but it is not guaranteed to be executed in the order in which the scripts appear.

47. Introduction to routing`history`

The history object saves the user's online history, starting from the moment the browser window is opened. For security reasons, developers cannot know the URLs that users have browsed. However, through the list of pages visited by the user, it is also possible to go back and forward without knowing the actual URL.

48. Talk about the implementation of asynchronous programming ?

Callback

Advantages: simple and easy to understand Disadvantages: not conducive to maintenance, high code coupling

event listening

Advantages: easy to understand, multiple events can be bound, and multiple callback functions can be specified for each event. Disadvantages: event-driven, the process is not clear enough. Publish/subscribe (observer mode) is similar to event listening, but can be done through the 'Message Center' , to know how many publishers and subscribers there are now

Promise object

Advantages: You can use the then method to write in a chain; you can write callback functions when errors occur Disadvantages: It is relatively difficult to write and understand

Generator function

Advantages: data exchange and error handling mechanism inside and outside the function body Disadvantages: inconvenient process management

async function

Advantages: built-in executor, better semantics, wider applicability, returns Promise, clear structure Disadvantages: error handling mechanism

49. The difference between Jsonp and Ajax

Ajax belongs to the same origin policy, while Jsonp belongs to the non-original origin policy. The principles are different: 1.Ajax: new XMLHttpRequest 2.jsonp: dynamically create script tags, add src attributes, the front end passes a callback to the background, and the background returns function calls, and the front end When the returned function is called and then parsed, the return values are different: 1. Ajax returns an object 2. jsonp returns a string. The request methods are different: Ajax has multiple request methods - (get, post, delete, put, patch) jsonp: only get

50. Tell me about your understanding of Javascript scope?

Scope refers to the area in the program where variables are defined. This location determines the life cycle of the variable. Popularly understood, scope is the accessible range of variables and functions, that is, scope controls the visibility and life cycle of variables and functions.

Before ES6, there were only two types of scope in ES: global scope and function scope.

Objects in the global scope can be accessed anywhere in the code, and their life cycle follows the life cycle of the page. Function scope is the variables or functions defined inside the function, and the defined variables or functions can only be accessed inside the function. After the function execution ends, the variables defined inside the function will be destroyed. Block-level scope appears in ES6. Block-level scope is a piece of code wrapped in a pair of curly braces, such as functions, judgment statements, loop statements, and even a single {} can be regarded as a block-level scope.