前端面试知识点(7)——前端进阶2

1、手写jsonp的实现

基础：script标签可以跨域获取脚本
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
进阶：动态生成script标签，并拼接url填入获取脚本并执行

$(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });

jQuery实现：

$(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //请求php的参数名
            jsonpCallback: "jsonhandle",//要执行的回调函数
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });

返回的脚本格式：

jsonhandle({
    "age" : 15,
    "name": "张三",
})

2、跨域资源共享（CORS）

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。目前浏览器都支持，请求发送开发者无法感知不同。

两种请求：

简单请求：
（1) 请求方法是以下三种方法之一：

HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
2.其他的为非简单请求

方式：

简单请求直接发出，头部增加Origin字段
非简单请求预检后发出（增加一次http查询请求）
预检请求包括Origin、Access-Control-Request-Method、Access-Control-Request-Headers字段

服务端设置：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

3、求一个链表的倒数第k个节点

先取一个指针，右移，当其指向第k个节点时，新声明一个指针指向head，两个指针同时右移，当第一个指针指向null时，第二个指针指向倒数第k个节点

4、http请求报文

请求行： 1 请求方法 2 请求URL 3 HTTP协议及版本
请求头： 4 客户端信息（cookie、user-agent、connection等）
请求体： 5 参数

5、http相应报文

响应行： 1 报文协议及版本 2 状态码及描述
响应头： 3 服务端信息（server、content-type、date等）
响应体： 4 数据

6、HTTP/2

采用二进制格式而非文本
多路复用，而非有序并阻塞（只需一个连接即可并行）
压缩报文头
服务器可以将响应主动“推送”到客户端缓存中

7、垂直居中

单行文字垂直居中，设置line-height
多行文字垂直居中，父元素display为table，子元素display为table-cell并设置vertical-aligh为middle
不定高度块居中，使用flex布局（justify-content水平，align-items垂直）
定高块居中，使用绝对定位

8、原型及原型链

简单理解就是原型组成的链，对象的__proto__是它的原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__向上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

只有函数有prototype,对象是没有的；但是函数也是有__proto__的，因为函数也是对象。函数的__proto__指向的是Function.prototype。

9、new操作符干了什么

var obj = {}
obj.__proto__ = Base.prototype
Base.call(obj)

10、闭包

闭包可以使局部变量长贮内存，构建单例，可以用闭包构建新的函数。

实现一个暴露内部变量，而且外部可以访问修改的函数（get和set，闭包实现）：

function demo () {
    var value = 0
    let get = function () {
        console.log(value)
    }
    let set = function (val) {
        value = val
    }
    return {
        get,
        set
    }
}

11、快排的时间复杂度？

nlogn

12、网站性能优化？

减少http请求数
减少资源的主机名数（减少DNS查询）
css放上方，js放下方
避免重定向
压缩js和css
使用CDN......
使用水滴图