The segmentfault.com/a/119000001 before… Have seen this article, recently idle down to do to play once, if wrong, also please be corrected

Tencent side

  • 1. How browsers work

    • The user interface – including the address bar, back/forward buttons, and the bookmark browser engine – is used to query and manipulate the rendering engine
    • Render Engine – Render interface :Firefox, Chrome, and Safari are built based on two rendering engines. Firefox uses Geoko, Mozilla’s own rendering engine, while Safari and Chrome both use WebKit.
    • Network – used to make network calls, such as HTTP requests 
UI backend – used to draw basic components such as composite selection boxes and dialogs, with a common interface that is not specific to a platform, and the underlying user interface of the operating system
    • JS interpreter – Interprets and executes JS code
    • Data storage – In the persistence layer, the browser needs to store various kinds of data like cookies on the hard disk

  • 2. Use Web security as an example

    • xss
    • https
    • Mixed content
    • Same Origin policy 

  • 3. A status code
    • 1 xx information
    • 2 xx success
    • 3 xx redirection
    • 4XX Client error
    • 5XX Server error
  • 4. The homologous
    • With the port
    • With the domain name
    • With the agreement

  • 5. Object inheritance

    • All inheritance is based on archetypes (Prorotypes), and there are a lot of ways to inherit because the JS inheritance mechanism is not explicitly specified
      • Prototype chain inheritance 
          Child.prototype = new Parent();Copy the code
      • Prototype inheritance 
          Child.prototype = Parent.prototype;
  Child.prototype.constructor = Child;Copy the code
      • Copy inheritance (extend)
      • call,apply

  • 6. What are the history and new features of ES6?

    • .
  • 7. Promise
    • , understand the promise promise main usage scenarios, several states (pending, fulilled, rejected)

  • 8. Event model

    • DOM0 level modeldiv.onclick = fn()
    • DOM2 level modeladdEventListener(eventType, handler, useCapture)
    • IE Event ModelattachEvent( "eventType","handler")

  • 9. Common compatibility problems (mobile /PC)

  • 10. Performance optimization
    • Reducing HTTP requests
    • Static resource compression
    • The CDN to accelerate
    • Reducing global variables
    • The script tag is placed after the body

Tencent two face (machine test) similar baidu search prompt box, compatible with major browsers, available keyboard control. 
 reluctantly suppress out, but hung up, made some low-level mistakes, show lack of experience. 
 Interviewers suggest reading more books and writing more components.

Ali side

  • 1. The principle of Ajax
    • create => open => send => onchange
  • 2. Browser parsing process
    • Process: parse HTML => build DOM tree -> build render tree -> layout render tree -> Render tree
  • 3. Center vertically
    • flex
    • line-height, text-center
    • postion , margin
    • display: table, vertical-align: middle
    • position, top:0, bottom: 0
  • 4. Data type judgment
    • typeof
    • instanceof
    • toString
  • 5. Route implementation
    • location.hash+hashchange
    • history.pushState()+popState
  • 6. Data is stored locally
    • localStorage
    • indexDB
    • cookie
    • seesionStorage
  • 7. Cross domain
    • jsonp
    • cors
  • 8. Bidirectional data binding Advantages and disadvantages of one-way data binding
    • Bidirectional binding, which automatically manages state, is ideal for scenarios where there is user interaction, less code, and debugging becomes more complex and difficult to track as the project gets larger
    • One-way binding is stateless and relatively easy to debug, avoiding the problems that arise when the complexity of a program increases. Of course, it’s not as fun to write code as two-way binding

Ali 2 face

  • 1. Wireless performance optimization
    • Up here, same problem
  • 2. Tap event, Touch
    • Tap is an event encapsulated in the Zepto library that can replace the Click event on mobile to avoid the 300ms problem
    • Touch is a gesture event on a mobile terminal, such as TouchStart, TouchEnd, and TouchMove
  • 3. Data storage
    • Flip up, have the same problem sohu side
  • 1. The Dom manipulation
    • Add, delete, change, check, such as:
      • document.elementById
      • document.querySelectAll
      • document.appendChild
      • docuemnt.removeChild
      • .
  • 2. Move layout scheme
    • Rem, Em
    • flex
    • The percentage
    • media query
  • 3. Front-end and back-end collaboration
    • .
  • 4. Native Ajax implementation process
    • If you go up, you have the same problem
  • 1. Single-linked list inversion 
      function ReverseList(pHead) {
      var pre = null;
      var next = null;
      while(pHead ! = null) { next = pHead.next; pHead.next = pre; pre = pHead; pHead = next; }return pre;
  }Copy the code

  • 2. The fast row

      const quickSort = (arr) => {
      if(arr.length < 1) return arr;
      let inx = Math.floor(arr.length/2);
      let pivot = arr.splice(inx,1)[0];
      let left = [];
      let right = [];
      for(let i=0; i<arr.length; i++){
      if(arr[i] < pivot){
          left.push(arr[i])
      }else{
          right.push(arr[i])
      }
      }

      return quickSort(left).concat(pivot,quickSort(right))
  }Copy the code
  • 3. Instant messaging (except Ajax and Websocket)
    • Comet technology: Web – end real-time communication technology based on HTTP long connection
    • SSE: The server sends events, using long links to communicate
  • 4. How does server proxy forwarding handle cookies (nginx)
 
      proxy_cookie_domain localhost example.org;
  proxy_cookie_domain ~\.([a-z]+\.[a-z]+)$ The $1;
  proxy_cookie_path /one/ /;
  proxy_cookie_path / /two/;Copy the code
  • 5. Object inheritance
    • proto
    • prototype
    • Object
  • 6.this
    • Constructor call
    • The apply, use the call
    • Object method call
    • Ordinary function calls
  • 7. Pros and cons of the REM layout 


Tencent Alloy Team

One side (record two, everything else is ok)

  • What are the ways to achieve animation 

    • CSS3
    • JS frame animation, timer,requestAnimateFrame
    • Canvas animation
    • SVG
    • The picture
  • Web security
    • HTTPS encryption process and certificate usage
      • Configure the certificate on the server -> Transmit the certificate -> parse the certificate on the client -> transmit encrypted information -> decrypt information on the server -> Transmit encrypted information -> decrypt information on the client
    • XSS several forms, preventive means, filter what characters?
      • In the form of
        • Data enters a Web application from an unreliable link
        • Dynamic content without filtering out malicious code is sent to web users
      • Precautions,
        • Distrust any user input (filtering, escaping)
        • Use HTTP headers to specify the type
      • The filtering characters
        • <,>,”,&quot
    • XSRF Principles, Examples, Precautions (Laravel tokens)
    • Sql injection
      • The front-end maliciously submits SQL code to tamper with the server’s SQL execution code
  • Performance optimization
    • Code optimization (HTML, CSS, JS)
    • Network performance optimization:
      1. Cache Cache mandatory Cache and negotiated Cache
      2. CDN principle and application
      3. Gzip for HTTP compression
  • Context object

  • Design patterns (ask to say how to implement, apply, pros and cons):


    • The singleton pattern

      • Definition: Produces a unique instance of a class

      • Implementation:

          const createMask = ()=>{
      let mask = null;
      return ()=> mask || document.appendChild(document.createElement('div'))
  }

  const mask = createMask();Copy the code
      • Advantages:
        1. Provides controlled access to a unique instance
        2. Avoid multiple occupancy of shared resources
        3. Saving System Resources
      • Disadvantages:
        1. Expandability of
        2. The heavy duty
    • The factory pattern
      • Definition: When creating an object, you do not need to specify the specific light on which the object is created
      • Implementation: 
          const Example = function(name,age){
      this.name = name || 'Tom',
      this.age = age || '18'
      this.say = function(){
          console.log(`name:${this.name},age:${this.age}`)}}Copy the code
      • Advantages:
        1. Clear structure, effective packaging change
        2. The implementation is shielded from the caller, who cares only about the product’s interface
        3. Reduce coupling
      • Disadvantages:
        1. To add a new class, you need to rewrite the factory class

    • Publish and subscribe model

      • Definition: Defines a one-to-many dependency between objects so that when each object changes state, all dependent objects are notified and updated automatically.

      • Implementation:

          const Example = {};
  Example.clientList = [];
  Example.listen = function(fn){
      this.clientList.push(fn)
  }
  Example.trigger = function() {for(let i=0,fn; fn=this.clientList[i++]){
          fn.apply(this,arguments)
      }
  }

  Example.listen(function(message){console.log(message) // I posted a message, at which point the subscriber will receive the message}) example.trigger (message){console.log(message) // I posted a message, at which point the subscriber will receive the message})function(){
      console.log('I'm Posting a message, and the subscriber gets the message.')})Copy the code
      • Advantages:
        1. Uncoupling in time
        2. Decoupling between objects
        3. Support broadcast communication
      • Disadvantages:
        1. If an observation object has many direct and indirect observers, it can take a long time to notify all of them
        2. If there is a cyclic dependency between the observer and the observing target, the observing target will trigger a cyclic call between them, possibly causing the system to crash
        3. The observer model doesn’t have a mechanism for the observer to know how the object being observed has changed, just that the object being observed has changed. Right
  • Cross-domain (cause)
    • The json principle
      • There is no cross-domain vulnerability in using script tag to communicate with the third party. The third party’s response data is JSON, so it is called JSONP (JSON PADDING).
    • How to set CORS
      • Allows origin to be specified for communication by changing the Response Headers setting whitelist
    • Nginx proxy 
        location / {
      proxy_pass  xxx
  }Copy the code
  • What framework source code have you read?
  • How to write a CSS library, what to look for?
    1. Always the class name takes precedence
    2. Component code is put together
    3. Use a consistent class namespace
    4. Maintain strict mappings between namespaces and file names
    5. Avoid style leaks outside the component
    6. Avoid style leakage within components
    7. Abide by component boundaries
    8. Loosely integrate external styles