Web front-end written test questions 2 (with answers)

1. Several methods for judging variable types, and talk about the differences or limitations of these methods.

1. 语法：typeof 变量名 / typeof(变量名)
   返回值：返回数据类型的字符串:string、number、boolean、undefined、object(null也返回object)、   function、symbol
   注意：无论引用对象是什么类型 它都返回object

2. 语法：变量名 instanceof 对象类型
   返回值：返回一个布尔值，判断该变量名是否属于该类型
   注意：
      	  typeof null => object
      	  null instanceof object => false
      	  null instance null => 报错

3. 语法：toString.call();
   返回值：返回的类型类似于[object Number]、[object Function]...

4. 语法：变量名.constructor
   返回值：返回该变量名对应的数据类型

5. 语法：Object.getPropertyOf(变量名)
   返回值：返回的是该变量名对应的父类

2. Briefly describe the difference between src and href

1. The requested resource type is different

href is an abbreviation for hypertext reference, which is used to establish a connection between the current element and the document, and the commonly used tags are link and a.

src will download and apply the pointed resources to the current document. Commonly used tags include script, img, and iframe tags.

2. The results of the action are different

href is to establish a link between the current document and the reference resource; and src is to replace the current element.

3. Browsers parse differently

The resource referenced by href, the browser will recognize it as a css document, download the resource and will not stop processing the current document. When the browser resolves to src, it will suspend the download and processing of other resources, and directly download, compile, and execute the resources, and the same is true for pictures and frames, similar to applying the referred resources to the current content.

3. The difference between cookie, sessionStorage and localStorage

The cookie data is stored on the client's browser as a string, and the server can know the information. sessionStorage (session storage) and localStorage (local storage) are new storage objects in H5, which are stored locally in the form of objects (key-value).
The data saved by a single cookie cannot exceed 4k, and many browsers limit a site to save up to 20 cookies. sessionStorage and localStorage also have storage size limitations, but they are much larger than cookies and can reach 5M or more.
The cookie is only valid until the set cookie expiration time, even if the window or browser is closed. sessionStorage data is only valid until the current browser window is closed, so it is impossible to persist; localStorage is always valid, and the window or browser is closed, so it is used as persistent data. If you want to delete it, you can delete it manually.

Expansion: What is the difference between cookie and session?

The cookie data is stored on the client, and the server can know the information in it; the session data is stored in the server, and the client does not know the information in it.

The cookie saves a string, and the session saves an object.

Cookies are not very secure. Others can analyze cookies stored locally and cheat cookies. Considering security, sessions should be used.

The session will be saved on the server for a certain period of time. When the number of visits increases, it will take up the performance of your server, and cookies should be used in consideration of reducing server performance.

Therefore, it is recommended to store important information such as login information as a session; if other information needs to be retained, it can be placed in a cookie.

4. Convert the object into an array let obj = {a:1,b:2,c:3}

let obj = {
    a: 1,
    b: 2,
    c: 3
};
console.log(Object.entries(obj));//[['a', 1], ['b', 2], ['c', 3]]

5. Write down several classic this usage scenarios

1. Called as an object method

const obj = {
    a: 10,
    b: 0,
    get() {
        return this.a;
    }
};
console.log(obj.get());//10

2. Called as a function

function func() {
    console.log(this); //Window
};
func();

3. Called as a constructor

function Person() {
    this.x = 10;
    console.log(this); //Person {x:10}
};
const per = new Person();
console.log(per.x); //10

4. Call in call or apply, bind

const obj = {
    x: 10,
};
function func() {
    console.log(this); //{x: 10}
    console.log(this.x); //10
};
func.call(obj);
func.apply(obj);
func.bind(obj)();

6. How to understand closure? Pros and cons of closures? What to watch out for when using closures?

What are closures?

A closure is a function that has access to variables in the scope of another function. A common way to create closures is to create a function inside another function.

Advantages and disadvantages of closures

advantage:

Hiding variables to avoid global pollution;

Variables inside functions can be read.

shortcoming:

Closures cause variables not to be recycled by the garbage collection mechanism, resulting in memory consumption;

Improper use of closures may cause memory leaks.

What should be paid attention to when using closures?

Because closures carry the scope of the function that encloses them, they take up more memory than other functions. So it is possible to manually dereference the anonymous function in order to free the memory.

function func() {
    let n = 22;
    return function () {
        return {
            n: n,
        };
    };
};
//fn接收了一个匿名函数
const fn = func();
//调用函数
console.log(fn());//{n: 22}
console.log(fn().n);//22
//解除对匿名函数的引用，以便释放内存
fn = null;

7. How to add, insert, remove, replace, create, copy, find DOM nodes

添加：appendChild
插入：insertBefore
移除：removeChild
替换：replaceChild
复制：cloneNode
创建：createElement
查找：
    document.getElementById();
    document.getELementsByClassName();
    document.getElementsByName();
    document.getElementsByTagName();
    document.querySelector();
    document.querySelectorAll();
    document.documentElement();
    documeny.body;

8. Talk about the garbage collection mechanism you have learned

The garbage collector will periodically (periodically) find variables that are no longer used, and then release their memory. The cycle of each browser is different. There are two commonly used garbage collection mechanisms.

Mark Clear (General)

The browser will mark all reference variables, and then clear the global reference variables and closure marks. When executing js code, it will enter an execution environment. When leaving the current execution environment, the variables marked in the current execution environment will be cleared. Most browsers use this method.

Reference counting (IE7/8, Netscape Navigator3)

Every time a variable is referenced, it will be +1 in the reference count. If this value is assigned to another reference, then +1 will be added. On the contrary, if the variable that references this value references other variables, it will be -1. When When the reference count is 0, it will be cleared by the garbage collector.

The problem of reference counting --> (circular reference)

(Some parts of IE do not use native js objects, but use C++ simulated COM objects to simulate. Its garbage collection mechanism uses reference counting. When a reference cycle is generated, it will take up a lot of memory.)

Solution --> Manual dereference cycle

Manually set it to null after use. Setting a variable to null means cutting off the connection between the variable and its previously referenced value. When the garbage collector runs next time, these values will be deleted and the memory they occupy will be reclaimed.

9. Briefly explain how Ajax works

The working principle of Ajax is equivalent to adding an intermediate layer (AJAX engine) between the user and the server to make the user operation and the server response asynchronous. Not all user requests are submitted to the server, such as some data verification and data processing are handed over to the Ajax engine itself, only when it is determined that new data needs to be read from the server, the Ajax engine submits the request to the server on its behalf.

10. Briefly describe the rendering process of the browser

Parse HTML to build a Dom tree (Document Object Model, Document Object Model). DOM is a standard programming interface recommended by the W3C organization for processing Extensible Markup Language.
Build the rendering tree, the rendering tree is not equivalent to the Dom tree, because head标签或 display: noneelements like this don't need to be placed in the rendering tree, but they are in the Dom tree.
Layout the rendering tree, locate the coordinates and size, determine whether to wrap, determine position, overflow, z-index, etc., this process is called "layout" 或 "reflow".
Draw the rendering tree and call the underlying API of the operating system for drawing operations.

That’s all for today’s sharing~~

If there are any mistakes, welcome to correct them at any time.