First, front-end interview summary

1. The difference between progressive enhancement and graceful degradation

Definition:

Graceful downgrading: Build the full functionality of the site from the start, then test and fix it for the browser

Incremental enhancement: Start by building the minimum features of the site and then add functionality for each browser.

The difference between:

The elegant downgrading view is that you should design your site for the most advanced and sophisticated browsers. Instead, schedule testing on browsers that are considered outdated or lacking in functionality towards the end of the development cycle and limit testing to mainstream browsers.

Progressive enhancement says to focus on the content itself.

To understand:

Graceful downgrading is the process of first implementing the entire site, including its functionality and effects, and then adding alternatives for browsers that don’t support all of its features, so that it degrades the experience in some way on existing browsers or older browsers without completely breaking down.

Progressive enhancement starts with the basic functionality supported by the browser, first preparing all the HTML and complete content in a clear and semantic way, and then adding the additional styling capabilities of the harmless base browser to the page in a non-intrusive way.

2. Browser compatibility problems

Fault 1: The external and internal patches of the default labels in different browsers are different

*{margin: 0; Padding: 0; }

Error 2: After the block property tag floats, the horizontal margin value is set. In IE6, the displayed margin is set to be larger. (Causes the following block to be pushed to the next line)

Solution: Add display: inline; Convert it to an inline property

Problem 3: Set a small height label (usually less than 10px). In Internet Explorer 6 and Internet Explorer 7, the height exceeds the preset height. (Reason: Browsers prior to IE8 gave tags a minimum default line height, even if the tag was blank.)

Workaround: Set overflow: Hidden for tags out of height; Or set line-height: less than the height you want.

Issue 4: The display: block attribute tag is set after the float layout, and the horizontal margin is set

Display: block; Display: inline; Display: table

Problem 5: Pictures have spacing by default

Solution: Use float to layout for IMG

Problem 6: The minimum label height setting min-height is incompatible

Solution: If we set the minimum height of a label to 200px, set it to: {min-height: 200px; Height: auto; ! important; Height: 200 px; Overflow: visible}

Issue 7: Transparency compatible CSS Settings

(Ie6 knows hacker _ and *, IE7 knows hacker *)

Problem 8: The serial number of OL in IE is all 1, and does not increase

Set style to {display:list-item}

3. How to optimize the files and resources of the website

1, reduce the number of HTTP requests images, we will we need multiple images can be combined into a single image (each HTTP request will produce a round trip from your browser to the server network process, and lead to delay to the server and the browser, we call it a delay), pictures can also set the lazy loading images

2. Use gulp, Webpack and other tools to package JS and CSS files into compressed files. Small images can be introduced into base64 when packaging, large images can be compressed, and HTML files can also be compressed

4. About browser kernel (Rendering engine)

1, JS interpreter: can also become A JS kernel, mainly responsible for processing JavaScript script programs

2, browser engine: also known as the browser kernel, rendering engine, is mainly responsible for obtaining page content, sorting information (such as CSS), calculating the display of the page, and then output display or printer.

Main browser kernel (rendering engine) :

      IE–Trident

      Mozila–Gecko

      Safari–Webkit

Chrome–Blink(Webkit offshoot)

     Opera–Blink

5. The difference between processes and threads

• A program has at least one process, and a process has at least one thread. (A process is an application that runs in memory. Each process has its own memory space, and a process can have multiple threads.
• Multiprocess: Multiple programs running simultaneously in an operating system
• Multi-process: Running multiple tasks simultaneously in the same process

6. Optimization of front-end development

• Reduce the number of HTTP requests
• JS, CSS source compression
• Reduce DOM manipulation and inline style writing
• Reducing global variables
• Image preloading
• Enable GZIP compression

7. The difference between GET and POST

• Get requests can be bookmarked or saved in browser history; Post cannot
• Get requests can be cached by the browser, post can’t
• Get requests are limited by URL length (maximum URL length is 2048 bytes), so length is limited, post is not
• Get request can only transmit ASC | | characters, and no limitation for the post, can also transmit binary data
• Get: obtains resources on a specified server
• Post represents submitting data to be processed to a specified resource

8 the websocket.

Websocket, like HTTP, is an application-layer protocol. The most important use is to realize the full-duplex communication between the client and the server. When the server data changes, the client can be notified immediately

Different from HTTP: HTTP can only be initiated by the client, whereas Websocket is bidirectional

Websocket transmits packets that are small compared to HTTP, making it suitable for mobile use

Resources can be shared across domains without origin restrictions

Webpack’s take:

WebPack is a module packaging tool. You can use WebPack to manage your module dependencies and compile the static files required by the output modules. It can well manage and package HTML, Javascript, CSS and various static files (images, fonts, etc.) used in Web development, making the development process more efficient. Webpack has module loaders for different types of resources. The WebPack module packer analyzes the dependencies between modules and generates optimized and merged static resources.

9. HTTP status code

• A status code starting with 1XX: 1 indicates a temporary response
• 2XX: The request succeeded
• 3XX: The request was redirected
• 4XX: Request error, indicating that the request sent by the client is faulty
• 5XX: server error, indicating that the server has an error in processing the request

1. 301: Moved Permanently The document requested by the Permanently client is elsewhere, and the new URL is given in the Location header
2. 304: Not Modified The client has a cached document and makes a conditional request (typically providing an if-Modified-since header to indicate that the client only wants to update the document after a specified date). The server tells the client that the previously cached document can still be used.
3. 400: Bad Request Syntax error occurs in the Request
4. 401: Unauthorized Access Was denied. A client attempted to access a password-protected page with gastroscopy authorization
5. 403: Forbidden The resource is unavailable. The server understands the client’s request, but refuses to process it. Usually due to server file or directory permission Settings.
6. 404: Not Found The resource at the specified location could Not be Found.
7. 405: Method Not Allowed Request methods (such as GET, POST, and PUT) do Not apply to the specified resource. HTTP methods used to access the resource are Not Allowed.
8. 500: Internal Server Error The Server encountered an unexpected condition and could not complete the client request.
9. 502: The Bad Gateway server receives an invalid response when it functions as the NMS or agent.
10. 503: Service Unavailable The Service is Unavailable. The server fails to respond due to maintenance or heavy load.
11. 504: Gateway Timeout Indicates that the Gateway times out. The server acting as the proxy or Gateway cannot respond in time.

10. Several ways to cross domains

Cross-domain: Cross-domain does not mean that the request cannot be sent out. The request can be sent out, and the server can receive the request and return the result normally, but the result is blocked by the browser. Cross-domain communication is caused by the same origin policy. The same source can communicate with the same source, and the protocol, domain name, and port must be the same.

Three tags are allowed to load resources across domains:

1. Principle of JSONP

(use the

JSONP is created dynamically

JSONP implementation:

1. Inserts one dynamically into the current page
2. Jsonp callback functions are predefined in js code
3. Immediately after the request completes, the pre-specified JSONP callback is invoked and the data is passed to the callback in JSON format.

1. Browser request scripts are not restricted by the same origin rule

Example code:

function handleResponse (response) {

Alert (” Your IP address is “+response.ip); }

var script = document.createElement(“script”);

Script. The SRC = “freegeoip.net/json/?callb…” ;

document.body.insertBefore(script, document.body.firstChild);

Advantages and disadvantages: JSONP has the advantage of good compatibility and can solve the problem of cross-domain data access in mainstream browsers. The disadvantage is that supporting only the GET method is limited

2. CORS principle

CORS is the abbreviation of Cross-Origin Resource Sharing, and cross-domain Resource Sharing. The basic idea of CORS is to use a custom HTTP header for the browser to communicate with the server. The key to realize CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible

Just a few minor changes on the server side:

header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET");Copy the code

Such as: http://localhost:63342/ page to request http://localhost:3000/users/userlist pages, The userList page returns JSON string lattice {name:’Mr.Cao’,gender:’male’,career:’IT Education’} :

Router. get("/userlist", function (req, res, next) {var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'}; res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'}); res.write(JSON.stringify(user)); res.end(); ) ;Copy the code

3, websocket

1. Duplex communication, both browser and server can initiate requests
2. High communication efficiency, one link can be reused, eliminating the need to repeatedly shake hands

1. The implementation is complex, including both client and server
2. Browser Support Issues

JSON: IS a lightweight data interchange format.

1. Small amount of data, facilitating network transmission
2. Easy to parse, client and server both have basic parsing methods

11, closures

What is a closure

Closures are functions that have access to local variables in the scope of other functions

In JS, variable scope is belong to the scope of the function, the function scope will be clean after, memory, also will be retrieved, but because of the closure is built on a function within the function, because of its access to superior scope, even if the superior functions performed, the scope will not subsequently destroyed, then the child function – which is the closure, This gives you access to variables in the parent scope, and values in the scope are not destroyed even after the parent function has finished executing.

2. Considerations for using closures:

Because closures keep variables in a function in memory, they consume a lot of memory, so don’t overuse closures because they can cause performance problems for web pages and, in IE, can cause memory leaks. The solution is to remove all unused local variables before exiting the function, or assign them to NULL

12. Client storage

1, cookie, sessionStorage and localStorage difference

Storage time:

• Cookies can be manually set to expire at session level by default (valid in the current session, if the page or browser is closed, it will be deleted)
• The storage duration of sessionStorage is session level (valid in the current session, closed page or browser will be deleted)
• The storage duration of localStorage is permanent unless manually deleted

Storage size limits:

• Cookies are good for storing small amounts of data, around 4KB, depending on the browser limit
• Storage can store a large amount of data, in addition, it is limited by the size of the space, each browser implementation is also different

Operation method:

• Cookies exist as a document property, and there is no standard way to manipulate cookies directly
• Storage provides setItem(), getItem() and removeItem() methods, which are easy to operate and error-resistant

Cookie When sending an HTTP request, the local cookie is sent to the server as the HTTP header information

13, promise

1. What is promise

A Promise is simply a container that holds the result of an event that will end in the future. Syntactically, a Promise is an object from which to get messages for asynchronous operations. Promise provides a uniform API, and all kinds of asynchronous operations can be handled in the same way

14. Front-end modularization

Advantages of modularity:

• Resolving naming Conflicts
• Beneficial for maintenance

AMD is RequireJS to modular specification defined in the process of promoting advanced, asynchronous () define – define a module | | the require – the introduction of the need to load module

CMD is the SeaJS specification for the definition of modularity in the promotion process (deferred execution — synchronization)

CommonJS is put forward by the ES6 modular specifications, nodeJS modular development is to follow the CommonJS specification (synchronous) import – on-demand load module | | export – output the specified module

15. Synchronous and asynchronous

Synchronization: All operations are completed before the result is returned to the user

Asynchronous: Responds to the user without waiting for all operations to complete

Advantages of synchronization: Synchronization is performed sequentially, so you don’t execute the code below while the code above is still executing

Different disadvantages: Parsing is not as fast as asynchronous

Advantages of asynchrony: after receiving a task to the background, continue to receive the next task, who read out the first to execute the first

Disadvantages of asynchrony: Out of order, the above code may be executed before the above code is finished, which may result in an error.

16. The difference between heap and stack

1. The original data is stored in the stack, for example, simple data segments with small size and fixed size are frequently used data

2. Reference data types are objects stored in the heap, which occupy a large space and may affect performance if stored on the stack. Reference data types specify their location

17. Callback functions

A callback function, also known as a higher-order function, is a function passed as an argument to another function.

When to use the callback function:

When JS code executes from top to bottom, we need to use the callback function when we need to wait for an operation to finish before proceeding to the next operation.

JS is an interpreted scripting language that does not require precompilation.

18, This refers to

1. The this of a normal function points to the window
2. This refers to the object calling the function
3. The constructor this points to the new instance object, and the functions on the prototype object also point to the new instance object
4. The this in the timer points to the window
5. In strict mode this is undefined

Change the method to which this points

1. Call () can call a function, change the this pointer inside a function, and implement inheritance
2. Apply () can also call functions and change the this pointer. The value passed is an array and the return value is the function’s return value
3. The bind () method does not call the function, but it can change the this reference inside the function

Second, wechat small program

1. The directory structure of wechat applets

• Json project configuration file. The most commonly used configuration file is whether to enable HTTPS verification
• App.js sets some global basic data and so on
• App.js listens to and handles the applets life cycle, life global variables
• App.wxss sets common styles, introduces iconfont, etc
• Pages Indicates the registration applet page
• Index. json configures the current page title and imported components such as:

1. Pages: indicates the path of all pages
2. Network Settings (Network timeout)
3. Interface presentation (page registration)
4. Window: {background color, navigation style, default title}
5. At the bottom of the TAB

• Index.html page structure
• Logic of the index.js page. Data request and data processing, etc

2. How to encapsulate the data request of wechat applets

1. Put all interfaces in a single JS file and export it
2. Create a method in app.js that encapsulates the request data
3. Call the encapsulated request data in the child page

3. Applets life cycle

• OnLoad () is triggered when the page is loaded and is called only once to get the parameters in the current page path.
• OnShow () is triggered when the page is displayed/cut to the foreground, usually used to send data requests;
• OnReady () is called only once when the first rendering of the page is complete, indicating that the page is ready to interact with the view layer.
• OnHide () Triggered when a page is hidden or accessed in the background, for example, the bottom TAB is switched to another page or a small program is accessed in the background.
• OnUnload () is triggered when a page is unloaded, such as redirectTo or navigateBack to another page.
• OnPullDownRefresh () Pull-down refresh hook function the user will automatically walk into when they pull down refresh
• OnReachBottom () is the hook function that flips up to the bottom

4. Advantages and disadvantages of wechat applets

• Advantage:

  1. Easy to use, the basic component library is relatively complete, basically do not need to consider compatibility problems;
  2. The development document is more perfect, the development community is more active, support plug-in development;
  3. Good user experience: no need to download, can be opened by searching and scanning, fast opening, Android can be added to the desktop, similar to the original APP;
  4. The development cost is lower than APP;
  5. Provide good security for users (small program release strict review process)

• Disadvantage:

1. The page size cannot exceed 1M and pages of more than five levels cannot be opened.
2. Single style, some components are already formed, style can not be modified, such as: slide, navigation
3. Promotion area is narrow, can not share circle of friends, can only share to friends, nearby small program promotion
4. Relying on wechat, it is impossible to develop background management functions
5. Background debugging is troublesome, because the API interface must be HTTPS request and public address
6. In real tests, android and Apple performed very differently on certain features, such as the slow loading of Android’s location function

5, the difference between wechat small program and H5

1. Different operating environments (small programs run in wechat, H5 runs in browser);
2. Development costs vary (h5 needs to be compatible with different browsers);
3. Obtain different system permissions (system-level permissions can be seamlessly connected with small programs);
4. Smooth operation of the application in the production environment (H5 needs to continuously optimize the project to improve user experience)

6. The method of transferring data between pages of small programs

1. Use the global globalData variable in app.js for data passing (use getApp () directly)

   // app.js

   App({// global variable globalData: {userInfo: null}})

With wx.redirectTo and wx.navigateTo, you can put some of the data in the URL and fetch it when the new page onLoad is initialized

//pageA.js // Navigate wx.navigateTo({ url: '.. /pageD/pageD? name=raymond&gender=male', }) // Redirect wx.redirectTo({ url: '.. /pageD/pageD? name=raymond&gender=male', })Copy the code

3. Use local cache Storage

7. Login problems

Wx. login will get a code, hold the code to request our background will return a token, save the token each request with this value, generally also need to bring the user information, such as wechat nickname, wechat avatar, etc. The wx.getUserInfo user authorization is used

8. How to implement drop-down refresh

EnablePullDownRefresh Specifies the onPullDownRefresh hook function in the Page. When the pulldownRefresh condition is reached, the hook function is executed. Call wx.stopPullDownRefresh to stop the pull-down refresh

What is the difference between bindtap and catchtap

• Similarities: The first is as a click event function, is triggered when the click
• Difference: The main difference is that bindtap does not prevent bubbling while Catchtap does

NavigateTo (), wx.redirectto (), wx.switchtab (), wx.navigateback (), wx.relaunch ()

• Wx.navigateto () : Leave the current page and jump to a page in the app. But you can’t jumptabbarpage
• Wx.redirectto () : closes the current page to jump to a page in the application. But not allowed to jump totabbarpage
• Wx. switchTab() : Jumps toabBarPage and close all other nontabBarpage
• Wx.navigateback () closes the current page and returns to the previous page or multi-level page. throughgetCurrentPages()Get the current page stack and decide how many layers to return to
• Wx.relaunch () : Close all pages and open to a page within the app