bzdww

Get answers and suggestions for various questions from here

[Prepare for the autumn trick Day 2] classic interview questions 5-8 and online programming questions 4-6 answers

cms

Classic interview questions

5. What is a process of a complete HTTP transaction?

Basic process: a. Domain name resolution

b. Initiate TCP's 3 handshakes

c. Initiate an http request after establishing a TCP connection

d. The server responds to the http request and the browser gets the html code.

e. The browser parses the html code and requests the resources in the html code

f. The browser renders the page to the user


6. What you have learned about web attack technology

(1) XSS (Cross-Site Scripting): An attack that is performed by running an illegal HTML tag or JavaScript in a registered user's browser through a Web site with a security vulnerability.

(2) SQL injection attack

(3) CSRF (Cross-Site Request Forgeries): The attacker forces certain status updates such as unintended personal information or setting information to the completed authenticated user by setting traps.


7. What is ajax? Ajax's interaction model? What is the difference between synchronous and asynchronous? How to solve cross-domain problems?

1. Improved user experience through asynchronous mode

2. Optimized the transfer between the browser and the server, reducing unnecessary data round trips and reducing bandwidth usage

3. Ajax runs on the client, taking on some of the work that was originally performed by the server, reducing the server load under large users.

Ajax features

Ajax can achieve dynamic non-refresh (local refresh)

The readyState attribute state has five values: 0 = uninitialized, 1 = start 2 = send, 3 = receive, 4 = complete


Disadvantages of ajax

1, ajax does not support the browser back button.

2. Security Issues AJAX exposes the details of interacting with the server.

3. Support for search engines is weak.

4. Destroy the abnormal mechanism of the program.

5, not easy to debug.


8. What is graceful degradation and progressive enhancement?

Progressive enhancement: Build pages for lower-level browsers to ensure the most basic functions, and then improve and add features for advanced browsers to achieve better user experience.

Graceful degradation of graceful degradation: Build complete functionality from the start, and then compatible with lower-version browsers.

The difference: a. Elegant downgrade starts with a complex situation and tries to reduce the supply of user experience. b. Progressive enhancement starts with a very basic, functional version and is constantly expanding to meet the needs of the future environment. Downgrading (functional attenuation) means looking back; while progressive enhancement means looking ahead while ensuring that its roots are in safety.


Front-end question

3. How to overcome the problem of different resolutions in front-end web page production?

Depending on the size of the screen, it is inevitable to shrink the window out of the horizontal scroll bar, but ideally, the page should be able to adapt to different client browsers and resolutions. There are usually three other situations in practice: layout adaptation, visual adaptation, and content adaptation. How to achieve it?

4. Should I continue to use the <b> and <i> tags?

Square:

If you just want to make a word bold, and the word doesn't emphasize the important meaning, you should use the <b> tag, not the <strong> tag, the screen reader for the <b> and <i> tags. There are different pronunciations, and the two tags are still included in the HTML5 specification.

Opposition:

The purpose of these two tags is to set the text to bold or italic. From a semantic point of view, any decorative things should be implemented using CSS. If you want to emphasize a word, you should use the <strong> or <em> tag.

peacemaker:

The <b> and <i> tags should not be used to decorate the style of the text, and these visual modifications should be handled by CSS. If you want to emphasize a word or statement, you should use the <strong> or <em> tag. <b> and <i> can only be considered if there are no other tags available.


Online programming

4. Add elements

Add the element item to the end of the array arr. Do not modify the array arr directly, the result returns a new array.

/**
 * 普通的迭代拷贝
 * @param arr
 * @param item
 * @returns {Array}
 */
var append = function(arr, item) {
    var length = arr.length,
        newArr = [];
 
    for (var i = 0; i < length; i++) {
        newArr.push(arr[i]);
    }
 
    newArr.push(item);
 
    return newArr;
};
 
/**
 * 使用slice浅拷贝+push组合
 * @param arr
 * @param item
 * @returns {Blob|ArrayBuffer|Array.<T>|string}
 */
var append2 = function(arr, item) {
    var newArr = arr.slice(0);  // slice(start, end)浅拷贝数组
    newArr.push(item);
    return newArr;
};
 
/**
 * 使用concat将传入的数组或非数组值与原数组合并,组成一个新的数组并返回
 * @param arr
 * @param item
 * @returns {Array.<T>|string}
 */
var append3 = function(arr, item) {
    return arr.concat(item);
};


5. Delete the first element of the array

Delete the first element of the array arr. Do not modify the array arr directly, the result returns a new array

//利用slice
function curtail(arr) {
    return arr.slice(1);
}
//利用filter
function curtail(arr) {
    return arr.filter(function(v,i) {
        return i!==0;
    });
}
//利用push.apply+shift
function curtail(arr) {
    var newArr=[];
    [].push.apply(newArr, arr);
    newArr.shift();
    return newArr;
}
//利用join+split+shift    注意!!!:数据类型会变成字符型
function curtail(arr) {
    var newArr = arr.join().split(',');
    newArr.shift();
    return newArr;
}
//利用concat+shift 
function curtail(arr) {
    var newArr = arr.concat();
    newArr.shift();
    return newArr;
}
//普通的迭代拷贝
function curtail(arr) {
    var newArr=[];
    for(var i=1;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}


6. Add elements

Add the element item to the index of the array arr. Do not modify the array arr directly, the result returns a new array.

//利用slice+concat
function insert(arr, item, index) {
    return arr.slice(0,index).concat(item,arr.slice(index));
}
//利用concat +splice
function insert(arr, item, index) {
    var newArr=arr.concat();
    newArr.splice(index,0,item);
    return newArr;
}
//利用slice+splice
function insert(arr, item, index) {
    var newArr=arr.slice(0);
    newArr.splice(index,0,item);
    return newArr;
}
//利用push.apply+splice
function insert(arr, item, index) {
    var newArr=[];
    [].push.apply(newArr, arr);
    newArr.splice(index,0,item);
    return newArr;
}
//普通的迭代拷贝
function insert(arr, item, index) {
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    newArr.splice(index,0,item);
    return newArr;
}