Although I have interviewed a lot of job seekers, but for the front end of the written test and interview, I think it can not reflect a person’s real ability, so I suggest you to practice the front end of the real technology. For the front end test questions, before also promised that the reader to a, the author has a general summary of this interview. There will be no more questions. Instead, we will focus on some real, growth-oriented technical articles and ways of thinking to help you improve your problem-solving skills.

preface

First of all, the author summarizes some growth models and learning routes for front-end domain learning, to provide you with some reference.

If your company’s front end is primarily vUE, you may need to be familiar with the following skills and knowledge points

  • vue
  • Vue-router Indicates route management
  • Vuex state management
  • Vue – CLI3 VUE project excellent scaffolding, can be configured with single page, multi page, SSR, pre-render technology pages
  • Vue-server-renderer Specifies the server rendering scheme
  • Vue – DevTools vUE development and debugging tools, easy to debug large complex projects
  • Antd-desigin-vue/Element UI is based on vUE’s third-party UI component library
  • Vxe-table excellent VUE table solution
  • Vue-multiselect VUE’s powerful multiselect drop-down component
  • Vuelidate is based on Vue’s powerful and lightweight validation library
  • Vuex-router-sync Keeps the vue-Router and vuex Store synchronized

If your company’s front end is based around React, you may need to be familiar with the following skills and knowledge points

  • react
  • react-router
  • React-thunk asynchronous Redux solution
  • Ant Design’s excellent and powerful React component library
  • React-json-view JSON display
  • React-quill rich text editor
  • Rc – color – color picker to pick
  • Qrcode. react qrcode generator
  • AntV data visualization solution
  • React-beautiful-dnd is based on the React drag library
  • Emoji – mart expression library
  • React-image-crop Image crop
  • Ant Motion animation
  • React-codemirror2 code editor
  • React-copy-to-clipboard Copy to the clipboard

So let’s get back to the main text.

The body of the

1. Introduce the new features of ES6

[答案]

  • Const and let
  • Template string
  • Arrow function
  • Default values for the arguments to the function
  • Spread/Rest operator
  • Binary and octal literals (to convert a number to an octal value by prefixing it with an 0o or 0o, used in binary0bor0B)
  • Object and array deconstruction
  • Classes in ES6
  • Promise
  • Set() and Map() data structures
  • Modules, such as import, export
  • for.. Of circulation

2. Introduce promises and their states

[答案]

Introduction: Promise is a solution to asynchronous programming that is more rational and powerful than the traditional solution of callbacks and events. A Promise is simply a container that holds the result of an event (usually an asynchronous operation) 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 so that various asynchronous operations can be handled in the same way. This is very depressing. This is very depressing. This is very depressing. Only the result of an asynchronous operation can determine the current state, which cannot be changed by any other operation.

3. Talk about your understanding of closures and their advantages and disadvantages

[答案]

Closures are functions that can read variables inside other functions. In essence, closures are the bridge that connects the inside of a function to the outside.

advantages

  • Logical continuity, to avoid writing additional logic separately from the current logic when the closure is used as an argument to another function call.
  • Prolong the life cycle of local variables, more encapsulation, protection of local variables.

disadvantages

  • Easy to cause memory overflow
  • Closures change the values of variables inside the parent function, outside of the parent function, and may result in changes to the variables in the parent function

4. React lifecycle

[答案]

  • DefaultProps -> constructor -> componentWillMount() -> render() -> componentDidMount()
  • In the operation of the phase componentWillReceiveProps () – > shouldComponentUpdate () – > componentWillUpdate () – > componentDidUpdate ()
  • Destruct phase componentWillUnmount()

5. What is the trigger condition componentWillReceiveProps

[the reference answer] componentWillReceiveProps calls upon receiving the new props

6. The difference between v-if and V-show in vue

[答案]

  • V-show Whether the condition is true or false, the tag is added to the DOM the first time it is rendered. To switch, run display: none; Style to show hidden elements, which does not have a significant performance impact.
  • V-if will not render the element on the page if the condition is false during the first render. When the condition is true, local compilation begins, dynamically adding elements to the DOM element. When the condition changes from true to false, local compilation begins and the elements are uninstalled, i.e. deleted. Performance is affected

7 small program inside the open page maximum number

Small program native page has a hierarchy limit, beyond a certain number of layers will not open a new page. Initially this was limited to no more than 5 storeys, and currently to no more than 10 storeys.

8. Select array Max (ES5, ES6)

[答案]

// es5
Math.max.apply(null, arr);
// es6
Math.max(... arr);Copy the code

9. Maximum number of concurrent HTTP requests

Generally, HTTP clients have a limit on the number of concurrent connections to the same server. The maximum number of concurrent connections is six

10. How to optimize your website SEO

[答案]

  1. Website structure layout optimization: as simple as possible, advocate flat structure. In general, the less the structure of the website, the easier it is to be “spider” crawl, it is easy to be included.
  2. Img tags must have “Alt” and “title” attributes that tell the search engine where to navigate, so that the user can see the prompt text even if the image does not display properly.
  3. The important content HTML code in the first search engine to grab HTML content from the top to the bottom, using this feature, you can let the main code to read first, advertising and other unimportant code in the bottom.
  4. Control page size, reduce HTTP requests, and speed up site loading.
  5. Design the title, description, and keywords properly
  • Title title: only emphasize the key can, try to put the important keywords in the front, keywords do not repeat, try to do every page in the title title do not set the same content.
  • Meta Keywords Keywords of the page/website.
  • The meta description of the page should be a high summary of the content of the page, remember not to be too long, too many keywords, each page should be different.
  1. Write your HTML code semantically, conform to W3C standards, make your code as semantically as possible, use the right tags in the right places, and use the right tags to do the right thing. Let the reader source code and “spider” at a glance.
  2. If you want to link to another site, you need to add el=”nofollow” to tell the “spider” not to crawl because once the “spider” climbs the external link, it will not come back.
  3. Replace ICONS with IconFont
  4. CDN network cache is used to speed up user access and reduce server pressure
  5. Enable GZIP compression, browsing speed faster, search engine spider capture information will also increase
  6. SSR technology
  7. Pre-render technique

11. What are the HTTP status codes 403, 301, and 302

[答案]

When a visitor visits a web page, the visitor’s browser sends a request to the server where the page is located. When the browser receives and displays a web page, the server where the page is located responds to the browser’s request by returning a server header containing an HTTP status code.

  • 301 (Permanent move) The requested page has been permanently moved to the new location. When the server returns this response (a response to a GET or HEAD request), the requester is automatically forwarded to the new location
  • The 302 (temporary mobile) server is currently responding to requests from web pages in a different location, but the requester should continue to use the original location for future requests
  • 403 (Disabled) The server rejected the request

12. This section describes common methods used RESTful

There are four rest request methods, including GET, POST, PUT, and DELETE. Corresponding to obtain resources, add resources, update resources and delete resources.

12. React16.3 changes the life cycle

React16.3+ three obsolete life cycle functions

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

In its place are two new lifecycle functions

  • The static getDerivedStateFromProps (nextProps prevState) to replace componentWillMount, componentWillReceiveProps and componentWillUpdate
  • GetSnapshotBeforeUpdate (prevProps, prevState) replaces componentWillUpdate
class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Return the data as the third parameter of componentDidUpdate
    return {
      stateA: 'xxx'
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if(snapshot ! = =null) {
      console.log(snapshot.stateA)
    }
  }

  render() {}
}
Copy the code

13. Introduce the React high-level components

High Order Component (HOC) is an advanced technique used in React to reuse component logic. Instead of being part of the React API, HOC is a design pattern based on the React combinatorial features. Specifically, a higher-order component is a function that takes a component as an argument and returns a new component as a value. It is a pure function in itself and has no side effects.

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: '.this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wrap the input component in a container without modifying it. Good!
      return <WrappedComponent {. this.props} / >; }}}Copy the code

14. Cache associated HTTP request headers

[答案]

Headers field explain case
Expires The server tells the browser to cache the file and it will not change until the expiration date Expires: Mon, 1 Aug 2016 22:43:02 GMT
Cache-Control Since Expires is an absolute time and the client’s system time can be changed by the user, cache-control is a relative time Cache-Control: max-age=80
Last-Modified(response header) / If-Modified-Since (request header) After receiving the request, the server will compare the last modification time of the current file with the information of the request header. If there is no modification, it will directly return 304 to the browser instead of the actual resource. If there is a change, it returns 200 with the new resource content If-Modified-Since:Mon, 01 Aug 2016 13:48:44 GMT
Etag / If-None-Match After the first request, the response header contains the Etag as the time tag. The next request will carry the original Etag tag (changed to if-none-match in the request header) as the verification criterion. If the file is changed, the Etag will also change. The server compares if-none-match in the browser request header: returns 304 If they are the same, but not the actual resource. Returns 200 and the new resource If they are different.

15. How to optimize the user experience

[答案]

  • Use skeleton screens or load animations before rendering to avoid large white screens
  • Use pre-render or SSR techniques to improve first screen loading time
  • Animation using CSS3 hardware acceleration, to avoid user operation animation lag
  • Computation-intensive services are handled using Web workers or JS fragments to avoid JS thread blocking
  • Page status monitoring to provide a feedback mechanism for users
  • Static resources use CDN cache or OSS service to improve user access speed
  • Avoid user operation error, provide a 404 page or error page

16. Understanding of PWA

[答案]

Progressive Web App: Progressive Web app. The advantages of the Web and App can be combined together: incremental, responsive, offline, app-like interaction, instant update, security, search engine retrieval, push, installation, and link. Its core technologies include App Manifest, Service Worker, Web Push, and so on.

17. Introduce cross-domain

[答案]

The Same Origin policy (SOP) is a convention. It is the most core and basic security function of browsers. Without the Same origin policy, browsers are vulnerable to XSS and CSFR attacks. Otherwise, communication between the two addresses will be deemed unsafe by the browser and blocked. To break through the limitations of SOP, we can use the following methods:

  • CORS Co-domain security policy CORS is a cross-domain resource request mechanism. It requires the current domain to add the access-control-allow-Origin tag in the response header to Allow the sites in the specified domain to Access the resources in the current domain
res.setHeader("Access-Control-Allow-Origin"."*"); 
If you want to enable PUT/DELETE, you need to add an "access-control-allow-methods" header to the server:
 res.setHeader(
    "Access-Control-Allow-Methods"."PUT, GET, POST, DELETE, HEAD, PATCH"
  )
Copy the code

  • HTML5 postMessage enables communication between domains using postMessage methods and onMessage events, where postMessage is used to send a message in real time to the receiving page

  • HTML5 WebSocket The WebSocket Protocol is a new HTML5 protocol. It realizes full-duplex communication between browser and server and allows cross-domain communication. It is a great implementation of Server push technology

  • JSONP is a “usage mode” for JSON, which takes advantage of the fact that script tags are not restricted by the same origin policy to request and return a piece of JSON data from a cross-domain server

  • The iframe format is either set to the same document.domain, or different domains pass data through window.name

  • Server agent

18. Where can access-control-allow-Origin be configured on the server

Response header Response header

19. How to solve THE CSRF XSS attack

[答案]

CSRF, cross-site request forgery, can cause attacks on users or websites by forging requests in the user’s name and sending them to the site under attack without the user’s knowledge. Preventive measures are as follows:

  • The server authenticates the HTTP Referer field, which records the source address of the HTTP request
  • Add a token to the requested address and validate it
  • Customize and validate attributes in the HTTP header

Write an array flattening function in js

[答案]

// reduce
function flatten(arr = []) {  
    return arr.reduce((result, item) = > {
        return result.concat(Array.isArray(item) ? flatten(item) : item)
    }, [])
}

/ / (toString | join) & the split (using toString or join of array, the array into a string)
function flatten(arr = []) {
  return arr.toString().split(', ').map(item= > Number(item))
}
Copy the code

What’s the difference between a Promise and a Callback

[答案]

Promises have easier to read code organization than callers (chained calls), better exception handling (just add a catch at the end of the call to the Promise), And the ability to process asynchronous operations in parallel (promise.all () promise.race (), etc.). The biggest problem with callbacks is what is often called callback hell, where once the business logic gets complicated, we have to use a lot of nested callback code with low maintainability.

22. How to achieve a high degree of adaptation

[答案]

  • Using absolute positioning, set the top,bottom properties
  • Using Flex layouts
  • float+ height:100%

23. Cookie, session, storage

[答案]

  • Cookies are stored on the browser side and sessions are stored on the server side
  • The security of cookie is weaker than that of session, and cookie is easy to be hijacked by a third party. In consideration of security, session should be used
  • Sessions are stored on the server. As the number of sessions increases, the server resources will be occupied
  • Cookie storage capacity is limited. A single cookie cannot store more than 4K data, and many browsers limit a site to store a maximum of 20 cookies. For sessions, the default size is usually 1M
  • Cookie, sessionStorage, and localStorage are stored in the browser and are affected by the same-origin policy
  • Cookie data is always carried in the same source HTTP request, while Storage is not carried in the request and only stored locally
  • In terms of Storage size, cookie is generally 4K, and Storage can reach 5M-10m
  • Data storage time: sessionStorage is only a session level storage, it is only valid until the current browser closed, not persistent; LocalStorage is always valid, even if the window or browser is closed, unless the user manually deletes it; The cookie is valid only before the specified expiration time
  • Scoped: sessionStorage is not shared across different browser Windows, even on the same page. LocalStorage and cookies are shared in all same-origin Windows
  • Storage supports the event notification mechanism, which can send the notification of data update to listeners. And it makes it easier to add, delete and check apis

24. Describe some front-end performance optimizations you have done (JS native,React, vue)

[答案] the answer punched in on Tuesday

25. Understanding web security

[答案]

  • CSRF attack and defense

Cross-site request forgery can be understood as an attacker who steals the user’s identity and sends malicious requests in the name of the user, resulting in the loss of user privacy and property: 1. Log in to trusted websites and generate cookies locally; 2. Preventing dangerous website access without logging out: Key operations only accept POST requests, use verification code, detect Referer, use token(or JWT)

  • XSS attack and defense

Cross-site script attack is a common vulnerability in Web programs. The principle is that the attacker enters malicious scripts into the website with XSS vulnerabilities, and when other users browse the website, the scripts will be automatically executed, so as to achieve the purpose of the attack (stealing cookies, destroying the page structure, redirecting to phishing websites, etc.). The difference is that there are persistent XSS and non-persistent XSS. Persistent XSS is to plant the attacking script to the server, so that every user who accesses the XSS will be attacked by this XSS script. Non-persistent XSS is a malicious script wrapped in the URL parameters of the page, through the URL link to cheat users to visit, so as to attack. Prevention: HTML escape for user input and filter sensitive information

  • SQL injection and defense

By inserting SQL commands into forms and submitting or page request parameters, the server is eventually allowed to execute malicious SQL commands. Prevention: verify or limit the length of the user’s input; Convert special characters, do not use dynamically assembled SQL, and use separate, limited-permission database connections for each application. Encrypt private information

  • DDOS attack

Distributed Denial of Service (DDoS) attacks use client/server technologies to combine multiple computers as a platform to launch DDoS attacks on one or more targets.

26. With JS array random number, each return value is not the same

[答案]

function getUniqueItems(arr, num) {
  let temp = [];
  for (let index in arr) {
      temp.push(arr[index]);
  }
  let res = [];
  for (let i = 0; i<num; i++) {
      if (temp.length>0) {
          let arrIndex = Math.floor(Math.random()*temp.length);
          res[i] = temp[arrIndex];
          temp.splice(arrIndex, 1);
      } else {
        break; }}return res;
}
Copy the code

27. How to bind events with 10,000 Buttons on the page

Event delegate, bubble triggered

28. Why does Base64 improve performance and what are its drawbacks

[答案] advantages:

  • No additional requests
  • Suitable for very small or simple images
  • Can be used as a separate picture, such as background picture, etc
  • No cross-domain issues, no need to worry about caching, headers, or cookies
  • CSS file size increases, causing CRP(critical render path) blocking
  • Page parsing CSS generated CSSOM time increased

29. Introduce the WebP image file format

[答案]

WebP is an image file format that supports both lossy and lossless compression. According to Google’s tests, lossless compression reduces the size of WebP files by 45% compared to PNG files. Even when these PNG files are compressed by other compression tools, WebP still reduces the size of the file by 28%.

  • advantages
    • Smaller file size
    • Higher quality – compared to other compressed images of the same size in different formats
  • disadvantages
    • Encoding and decoding speed is relatively slow, there is certain compatibility

30. What is the difference between the Link tag and the A tag in the React-Router

[答案]

From the perspective of the rendered DOM, both are links, and both are A tags. The difference is: Link is a Link in the React-Router that realizes Route redirection. When used with a Route, the React-Router intercepts its default redirection behavior. Different from traditional redirection, the “redirection” behavior of Link only triggers the page content update corresponding to the matching Route. Without refreshing the entire page. The A tag is an HTML native hyperlink that jumps to another page or anchor element that the href points to. Jumping to a new page refreshes the page.

31. Introduce function currying and write a currying function

[答案]

Currying is a technique for converting a function that takes multiple arguments into a series of functions that take one argument. The Curryization function allows us to:

  1. Collecting arguments in sequence across multiple function calls, rather than collecting all arguments in a single function call.
  2. Return the result of function execution when sufficient arguments have been collected.

32. Introduce the whole process from input URL to page loading

[答案]

  • Enter the URL in your browser’s address bar and press Enter.
  • The browser looks for a cache for the current URL and compares whether the cache has expired.
  • DNS resolves the IP address corresponding to the URL.
  • Establish a TCP connection based on IP (three-way handshake).
  • HTTP initiates the request.
  • The server processes the request and the browser receives the HTTP response.
  • Render the page and build the DOM tree.
  • Close the TCP connection (four waves).

33. What is the difference between bind, call and apply

[答案]

Call and apply have in common
  • Can change the context in which a function is executed, handing over a method from one object to another, and executing it immediately
  • The object that calls call and apply must be a Function
The difference between call and apply
  • The second argument to apply, which must be either an array or a class array, will be converted to a class array, passed into the function, and will be mapped to the corresponding arguments to the function, whereas call starts with the second argument and can take any argument
bind
  • The bind() method creates a new function, similar to apply and call, and can change the reference to this in the function body. The difference is that the bind method returns a function and needs to be called later to execute. Apply and Call are called immediately

34. What are the differences between ES6 maps and native objects

[答案]

Both object and Map store key-value pairs. Difference: The key type of object is string; Map keys can be of any type; In addition, object gets the key using object.keys (returns an array). Map gets the key using the Map variable.keys() (returns an iterator).

35. Talk about several solutions of H5 mobile terminal adaptation

[答案]

    1. Js to achieve a
(function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          var fontSize = 20;
          docEl.style.fontSize = fontSize + 'px';
          var docStyles = getComputedStyle(docEl);
          var realFontSize = parseFloat(docStyles.fontSize);
          var scale = realFontSize / fontSize;
          console.log("realFontSize: " + realFontSize + ", scale: " + scale);
          fontSize = clientWidth / 750 * 20;
          if(isIphoneX()) fontSize = 19;
          fontSize = fontSize / scale;
          docEl.style.fontSize = fontSize + 'px';
      };
  // Abort if browser does not support addEventListener
  if(! doc.addEventListener)return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);

  / / iphoneX judgment
  function isIphoneX(){
      return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)}}) (document.window);
Copy the code
    1. CSS @Media Media query (Implemented by Suning)
    1. Hand Amoy lib-flexible implementation

How to remove # in URL with JS

[答案]

  • Scenario 1: Simply changing the hash route to a History route can remove the hash #. In this case, the server needs to perform route redirection, such as nginx or Node redirection
  • Scenario 2: Simply remove #
function dropHash(url) {
  let i = url.indexOf(The '#')
  return i > - 1 ? url.replace(/#/g.' ') : url
}
Copy the code

37. What’s the difference between Redux state manager and variables mounted to Windows

Redux provides a standardized API and usage for handling state by developing a set of strict specifications. It is suitable for large projects and multi-person projects. Although the code is a bit complicated to write, the overall flow of data is clear, easy to track problems and maintain later, and supports state backtracking. However, the variable management of Window is chaotic, and improper maintenance will cause variable pollution, which is not suitable for the development of medium and large projects.

Pros and cons of Webpack and Gulp

[答案]

gulp webpack
positioning Task flow-based automated packaging tool Modular packaging tools
advantages Easy to learn and understand, suitable for multi-page application development Can modular package any resource, suitable for any module system, SPA single-page application development
disadvantages It is not suitable for single page or custom module development It is cheap to learn, complex to configure, and bulky to package js code compiled through Babel

39. Why does JSONP not support post

[答案]

The browser’s same-origin policy restricts documents or scripts loaded from one source from interacting with resources from another source. Jsonp cross-domain is essentially through dynamic script tags, and is essentially access to static resources, so it can only be GET requests

40. Talk about the difference between stack and heap, the difference between stack and heap in garbage collection, and how to store stack and heap

[答案]

1. In terms of definition and access mode:

  • A stack is memory that is automatically allocated. It is automatically released by the system. It is characterized by “LIFO “(Last in, first out). Data storage can only be stored from the top one by one, when you take out from the top one by one,js basic data types (Undefined, Null, Boolean, Number and String). Basic types occupy small, fixed sizes in memory, and their values are stored in stack space and accessed by value
  • The heap is dynamically allocated memory and does not automatically release memory of any size. It is characterized by “unordered” key-value” storage mode. Such as js objects, arrays. Reference types occupy large space and their sizes are not fixed. The stack memory stores objects whose addresses point to the heap memory. Access is by reference

2. From the perspective of js data access process:

The stack memory holds the access address of the object, and the heap memory allocates space for this value. The values are not fixed in size, so they cannot be stored in stack memory. But the memory address size is fixed, so you can keep the memory address in the stack memory. Thus, when querying variables of reference types, the memory address is read from the stack and then the value in the heap is found from the address.

3. Stack memory and heap memory are associated with garbage collection mechanism and the way to clear:

  • Garbage collection mechanism: JavaScript has an automatic garbage collection mechanism, which will identify which variable objects are no longer in use through the tag-clearing algorithm, and destroy them. The developer can also manually set the value of the variable to NULL (XXX = NULL) in the code to clean up, breaking the chain of references so that the next garbage collection can be effectively collected. Second, after the function completes, variables declared by the function’s local environment are destroyed by garbage collection when they are no longer needed (ideally, closures prevent this process). The global environment will be off the stack only when the page exits, dereferencing variables. Therefore, engineers should try to avoid creating global variables in the global environment, if you need to use, be sure to manually clear the flag when not needed to free memory.
  • Stack memory and heap memory are usually associated with garbage collection mechanisms. Stack memory and heap memory are distinguished in order to minimize the amount of memory used by the program. When a method is executed, it creates its own stack. Variables defined in the method are put into the stack memory one by one. As the method is executed, the stack of the method is destroyed. Therefore, all variables defined in a method are placed in stack memory; When we create an object, the object is stored in the run-time data area for reuse (because of the high memory cost of object creation), which is called heap memory. Will not end with the method of objects in the heap memory and destruction, even after the method, the object may also be another reference variables referenced, this object is not destroyed, only when there is no reference to an object variables refer to it, the system of garbage collection mechanism will be collected in the process of recycling loop.

41. How is let block scope implemented in ES6

[答案]

Block scope can be implemented through closure self-executing functions

42. This section describes the sorting algorithm and quick sorting principle

[答案]

Sorting algorithms are: bubble sort, Hill sort, quick sort, insertion sort, merge sort, heap sort, bucket sort and so on.

How quicksort works:

By sorting the sort of data will be divided into two independent parts, all the data in one part is smaller than all the data in the other part, and then according to this method, the two parts of the data are quickly sorted, the whole sorting process can be recursive, in order to achieve the whole data into an ordered sequence.

43. Talk about the priority of node file lookup

Load from file module cache > Load from native module > Load from file

44. How do WebViews and natives communicate

[答案]

  • Use Android’s native JavascriptInterface to conduct JS and Java communication
  • UrlRouter(an internally-implemented framework that intercepts urls written by the front end and executes the corresponding logic if the protocol of the UrlRouter is met)
  • Prompt /console/alert interception in WebView, usually using Prompt to avoid side effects
  • API injection, obtain JavaScript environment context through Native, and directly add methods on it, so that JS can directly call

45. How do I manage the pM2 process? How do I solve the process crash problem

[答案]

  • You can run the pm2 start command to start a process, pm2 stop command to stop a process, pm2 list command to view the process list, pm2 monit command to view the CPU usage of each process, and pm2 restart command to restart an application
  • Max_memory_restart specifies the maximum amount of memory that can be automatically restarted if a process fails.

46. Can Vue detect changes in assigning a value directly to an array item? Why?

The array listener in vue is not implemented via object.defineProperty. ‘push’, ‘pop’,’shift’,’unshift’,’splice’, ‘sort’,’reverse’, etc.

  • Change an array or object using vue’s set method
  • By changing the array itself such as splice, pop, shift, etc
  • With the deep copy, deconstruct the operators

conclusion

The interview is only the first step to enter the company, how to go well, it needs their own continuous efforts and learning, so don’t indulge in shortcuts, take a step to learn technology. Years ago, I summarized my technology growth and plans for 2019, hoping to continue to share true front-end technologies with you.

The last

If you want to learn more about H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join us in the public account “Interesting Talk front-end” to learn and discuss, and jointly explore the boundary of the front-end.

recruitment

The company needs 2-3 engineers familiar with React due to the New Year’s enrollment. Please contact me if you are interested

More recommended

  • 2 years of vUE project practical experience summary
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • “Front-end combat summary” the use of pure CSS website skin and focus diagram switch animation
  • “Front-end combat summary” using CSS3 to achieve cool 3D rotation perspective
  • Add a loading progress bar to your site using pace. Js
  • The Application of design Pattern of “Summary of Front End Actual Combat” — Memorandum Pattern
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • Write a mock data server using nodeJS in 5 minutes
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • Cartesian product is implemented and applied in javascript