2016－前端面试

1. Cookie、sessionStorage、localStorage的区别：

cookie: 存在浏览器端，默认大小为4kb，可以设置失效时间，默认诗浏览器关闭失效，每次向服务器发送http请求都被放在请求头中，

所以不能设置过大的cookie，不然会有性能问题。应用场景：用来保存用户的登陆信息；单点登录.

sessionStorage: 存储在浏览器端，默认大小为5M, 当浏览器关闭窗口失效，不参与服务器之间的通信。应用场景：购物车，html5游戏数据存储等。

localStorage: 存储在浏览器端，默认大小为5M，除非被清除，否则永远保存，不参与服务器之间的通信。应用场景：离线存储数据

安全性：存在 xss 攻击的问题，因为只要在浏览器端打开控制台就能修改，所以尽量不要存放一些敏感数据

2.  JSONP原理

主要是利用了 <script> 标签能够跨域请求的机制，动态创建 <scritp>  标签，然后执行约定好的 方法回调， 需要服务器端协助。

3. 简述css盒模型

画张图说明。

4.get和post请求的区别

http 请求方式：

get:  浏览器能够缓存请求，请求数据有长度限制，编码类型(encoding type) 为 application/x-www-form-urlencoded ，

数据类型只能限制为 ASCII 字符类型，查询字符串出现在地址栏，不安全

post：浏览器不能够缓存请求，请求数据没有长度限制，编码类型：application/x-www-form-urlencoded 或者 

   multipart/form-data (如果是二进制数据使用 multipart 编码)，数据类型没有限制，允许二进制数据。

   数据参数不会出现在地址栏，在请求体中，相对来说较安全，但如果是敏感性数据，最好还是加密处理。

head: 与 get 请求类似，不同在与服务器只返回 http 头部信息，没有页面内容

put：上传指定 url 的描述

delete：删除资源

options: 返回服务器支持的 http 方法

connect：转换为 透明 tcp/ip 隧道的连接请求

5. 说说类的创建、继承和闭包

类的创建：

(1) 构造函数的方式 

function Cat() {
        // 属性和方法, this 指向的是实例对象
        this.name = 'cat';
        this.sayName = function () {
             alert(this.name);
        }
    }

    // 类属性和方法， 扩展在 构造函数 Cat 上的 prototype 上面
    Cat.prototype.type = 'animal';
    Cat.prototype.sayType = function () {
        alert(this.type);
    };

    // 创建实例通过 new 关键字
    var cat = new Cat();
    cat.sayName();
    cat.sayType();

(2) 在 javascript 中类 即是对象，所以也可以下面这种方式

var Dog = {
        name: 'dog',
        sayName: function () {
            alert(this.name);
        }
    };

    var dog = Object.create(Dog);
    dog.sayName();

继承：

（1）构造函数绑定

function Animal() {
        this.species = 'animal';
    }

    function Cat(name, color) {
        // 在 new 对象时， this， 指代的是该对象实例
        Animal.call(this, arguments);
        this.name = name;
        this.color = color;
        this.sayHello = function () {
            alert(this.species + ', ' + this.name + ', ' + this.color);
        }
    }

    var cat = new Cat('dog', 'black');
    cat.sayHello();

（2）原型继承

function Animal() {}
    Animal.prototype.species = 'animal';
    Animal.prototype.sayHello = function () {
      alert(this.species);
    };

    function Dog(name, color) {
        this.name = name;
        this.color = color;
    }

    var F = function () {};
    F.prototype = Animal.prototype;
    Dog.prototype = new F();
    Dog.prototype.constructor = Dog;

    var dog = new Dog();
    dog.sayHello();

(3) 拷贝继承 略

闭包：在函数中定义函数

6.什么是 “use strict”? 使用它的好处和坏处是什么

表示浏览器将以 严格模式 来解析 js代码。

好处：

（1）消除 javascript 语法的一些不合理、不严谨之处、减少一些怪异行为

（2）消除代码运行 的一些不安全之处，保证代码运行的安全

（3）提高编译器效率，增加运行速度

坏处：

代码合并时，可能会出现问题。

6.一个页面从输入 URL 到页面加载完的过程中都发生了什么事情

（1）输入地址

（2）浏览器查找域名的 IP 地址：包括 DNS 具体的查找过程：浏览器缓存 -> 浏览器缓存 -> 路由器缓存

（3）浏览器向 web 服务器发送一个 HTTP 请求

（4）服务器的永久重定向响应

（5）浏览器跟踪重定向地址

（6）服务器处理请求

（7）服务器返回一个 HTTP 响应

（8）浏览器根据返回数据的类型，解析数据

（9）如果是 html 类型则渲染页面（包括图片、音频、视频、css、js 等资源 ）

（10）浏览器发送异步请求