【备战秋招Day 2】经典面试题5-8及在线编程题4-6答案

转载自IMWeb知乎团队，https://zhuanlan.zhihu.com/p/27879875

经典面试题

5.一次完整的HTTP事务是怎样的一个过程？

基本流程：a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

6.你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。

（2）SQL注入攻击

（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

7.ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax的特点

Ajax可以实现动态不刷新（局部刷新）

readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成

ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

8.什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

前端思考题

3、前端网页制作怎么克服不同分辨率的问题？

根据屏幕不同大小，缩小窗口出横向滚动条在所难免，但理想情况下，页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。具体要怎样实现呢？

4.是否该继续使用 <b>和 <i> 两个标签?

正方：

如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 <b> 标签，不该用 <strong>标签，读屏软件对 <b> 和<i> 标签有不同的发音，而 HTML5 规范中仍包含这两个标签。

反方:

这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用<strong>或<em>标签。

和事佬：

<b> 和 <i> 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 <strong> 或<em> 标签。只有在那些没有别的标签可用的场合，才可以考虑<b>和<i> 。

在线编程题

4.添加元素

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组。

/**
 * 普通的迭代拷贝
 * @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.删除数组第一个元素

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组

//利用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.添加元素

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组。

//利用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;
}