Preface

Author: Lingquan Han

Introducation:

This repo was summarized during the process of preparation for interviews, including common interview questions for software engineer(Front-end), Web engineer and UI engineer and so on. Hopefully, it is helpful for you. And please feel free to commit pr if you find problems or you want to add more content for this repo.

1. Table of Content

• 1. Table of Content

• 2. JavaScript

  • 2.1. forEach() VS map() VS (for..in) VS (for...of)

  • 2.2. What is a Closure?

  • 2.3. Hoisting -- just for no strict mode

  • 2.4. Key features of ES6

  • 2.5. What is Promise?

  • 2.5.1. Promise example

  • 2.6. Callback

  • 2.7. Callback vs Promises

  • 2.8. What is generator?

  • 2.9. Observable

  • 2.10. Comparison between Data structures

    • 2.10.1. Object VS Array

    • 2.10.2. Map vs Object

    • 2.10.3. Array VS Set

  • 2.11. Prototype

  • 2.12. Class inheritance VS prototype inheritance

  • 2.13. Inheritance in JavaScript

    • 2.13.1. based on example of MDN

    • 2.13.2. based on liaoxuefeng

  • 2.14. Debounce & Throttling

  • 2.15. Talk about 'this'

  • 2.16. Common Js functions

  • 2.17. arguments objects

  • 2.18. Event emitter

    • 2.18.1. When to use it?

  • 2.19. CommonJS, AMD, RequireJS, ES6 Modules

  • 2.20. How to implement a Queue by using JS?

  • 2.21. Some small but important details for JavaScript

    • 2.21.1. apply(), call(), bind()

    • 2.21.2. The way to judge the data type in js

    • 2.21.3. falsy values

    • 2.21.4. if (key in object) VS if (object.hasOwnProperty(key))

    • 2.21.5. !!(expression) in js

    • 2.21.6. Ways to judge if two object are same

    • 2.21.7. undefined and null

    • 2.21.8. function scope vs block scope

    • 2.21.9. Data type conversion

    • 2.21.10. Object Literals

    • 2.21.11. Arrow function

    • 2.21.12. Arrays are also objects in JavaScript

    • 2.21.13. Three native ways to list/traverse object properties:

    • 2.21.14. Using the Object.create method create object

    • 2.21.15. 'this' used in form

• 3. HTML

  • 3.1. HTML Semantic
  • 3.1.1. Why Semantic HTML is Important
  • 3.2. What is Iframe?
  • 3.3. Meta tag

• 4. HTML DOM

  • 4.1. DOM structure
  • 4.2. window.onload vs document.onload
  • 4.3. classlist of dom node
  • 4.4. innerHTML, innerText， textContent
  • 4.5. Repaint vs Reflow
  • 4.6. CreateDocumentFragment
  • 4.7. Tranverse Dom tree
    • 4.7.1. DOM API

• 5. CSS

  • 5.1. CSS preprocessor

    • 5.1.1. CSS preprocessor Pros and cons:

  • 5.2. pt, px, em, rem

    • 5.2.1. CSS3 to make shape

  • 5.3. SASS basic concepts

  • 5.4. Box model

  • 5.5. Position property

  • 5.6. float

  • 5.7. Clear float

  • 5.8. ways to hidden Elements

  • 5.9. Flexbox layout

    • 5.9.1. container:

    • 5.9.2. flex items:

  • 5.10. box-sizing properity

  • 5.11. inline element

  • 5.12. CSS Specificity Scoring

• 6. React

  • 6.1. Why use react framework?

  • 6.2. Lifecycle

  • 6.3. React Example

• 7. Redux

  • 7.1. Redux Basic

  • 7.2. Keys for Redux usage

  • 7.3. Redux-sagas

• 8. Http

  • 8.1. Features of Http

  • 8.2. Post VS Get

  • 8.3. http methods

• 9. Browser

  • 9.1. What is CORS?

  • 9.2. How to cross origin?

  • 9.3. Event delegation:

  • 9.4. Event flow

  • 9.5. Critical Rending Path

  • 9.6. Frame

• 10. General Web question

  • 10.1. Responsive Website

  • 10.2. SSR VS CSR

  • 10.3. ansyn vs defer

  • 10.4. Ways to improve website performance

  • 10.5. Cookie

  • 10.6. Cache

  • 10.7. Session

  • 10.8. Difference between Cache and Cookies

  • 10.9. What happends when browsing a web?

  • 10.10. Website accessibility consideration:

    • 10.10.1. define：

    • 10.10.2. specific method

• 11. Webpack VS Gulp

2. JavaScript

2.1. forEach() VS map() VS (for..in) VS (for...of)

1. Both they will call a provided function on each element in given array. However, the forEach() method doesn’t return anything (can not use break, continue), the map() method will return a new Array of the same size.
2. forEach() can be used by map, set and array, map just be used by array
3. for...in is used to iterate object, not good for iterate array, which may iterate over user-defined properties in addition to the array elements
4. The for...of statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on) The following example shows the difference between a for...of loop and a for...in loop. While for...in iterates over property names, for...of iterates over property values:

// an example
var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
   console.log("length is ",arr.length) //3
}

for (var i of arr) {
   console.log(i); // logs 3, 5, 7
}

2.2. What is a Closure?

• A closure is an inner function that has access to the outer function’s variables.
• Why use it?
  1. A closure lets us associate some data (the environment) with a function that operates on that data.
  2. for object data privacy, This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.
• sample code:

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15

2.3. Hoisting -- just for no strict mode

• A variable declared by ‘var’, can be accessed before its declaration
• Only the declaration hoisted, not the assignment! So it is hoisted with a value as ‘undefined’.
• Function expressions in JavaScript are not hoisted. But, Fucntion declaration could be hoisted

2.4. Key features of ES6

• block scoping with let keyword
• default parameters
• rest parameters: a prefix of three dots (...). The rest parameter allows us to represent an indefinite number of arguments as an array.we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.

  function multiply(multiplier, ...theArgs) {
    return theArgs.map(x => multiplier * x);
  }

  var arr = multiply(2, 1, 2, 3);
  console.log(arr); // [2, 4, 6]

• Spread Operator: consists three dots (...). The spread operator allows us to spread out elements of an array or a string.

• Object Literal: The object literal is one of the most popular patterns for creating objects in JavaScript because of its simplicity.

  1. computed property name
  2. ES6 allows you to eliminate the duplication when a property of an object is same as the local variable name by including the name without a colon and value.

    function createMachine(name, status) {
      return {
          name,
          status
      };
  }
  

• ES6 introduced a new construct for...of that creates a loop iterating over an iterable object such as an Array, a Map, a Set, or an object that implements the iterator.

• destructing assignment: that allows us to take an object or an array and destructure it into individual variables.

• Template Literals: a template literal uses backticks , it has the following features:

  1. Multiline string: a string that can span multiple lines.
  2. String formatting: the ability to substitute part of the string for the values of a variable or an expression.
  3. HTML escaping: the ability to transform a string so that it is safe to include in HTML.

• ES6 modules: export variables, functions, classes from a module and reuse them in other modules.

• introduce class and also extends and super key words:

  class Animal {
      constructor(type) {
          this.type = type;
        }
        identify() {
          console.log(type);
        }
      }
  

• Symbol: ES6 add