前端面试一面一锅炖

一面：
页面布局类。
css盒模型
dom事件类
HTTP协议。
原型链类。
面向对象
通信类
前端安全类。
前端算法类

页面布局类

1. 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
   方案： 第一浮动，第二绝对定位，第三个flexbox弹性布局。第四种：表格布局。第五种：网格布局
   CSS布局 -- 圣杯布局 & 双飞翼布局

css盒模型

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
盒子模型（标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

dom事件类

前端面试题之DOM事件

HTTP协议。

HTTP协议【详解】——经典面试题
HTTP与HTTPS的区别
ipv4和ipv6的区别

原型链类。

前端面试（5）——原型链类
前端系统复习之原型链篇

面向对象

JS面向对象（封装 继承 多态）

1. 封装 -- 就是有些私有的属性和方法，用户只能通过公有方法去访问这些私有属性

封装又叫隐藏实现(先装后封的过程)，把属性和方法封装起来。一般当你需要隐藏一些属性和方法时，就可以将这些属性和方法封装起来，然后通过一个外部可以调用的特定接口（也可以说是一个公共的方法）进行调用。

function Person(name , age , sex){
    this.name = name ; //共有变量 
    var age = age ;  //私有变量
    var sex = sex ; //私有变量
    this.show = function (){
        console.log(age+"===="+sex);
    }
}
var person = new Person('Sunshine',18,'女');
console.log(person.age);    // undefined
console.log(person.name);   // Sunshine
console.log(person.show());     // 18====

this指向的都是共有的属性和方法，而直接通过var声明的则属于私有变量（即外部不可访问变量），然后通过一个共有的show方法将私有的age和sex输出。当然show方法也要通过this声明才可以哟，否则的话show方法也是不可访问的。

封装的好处:

• 提高了数据的安全性 -- 别人不能够通过 变量名.属性名 的方式来修改某个私有的成员属性
• 操作简单 -- 封装后，多个调用者在使用的时候，只需调用方法即可，调用者不需要再进行判断
• 隐藏了实现 -- 实现过程对调用者是不可见的，调用者只需调用方法即可，不知道具体实现过程;也使整个软件开发复杂度大大降低。
• 封装使得对代码的修改更加安全和容易。将代码分成了一个个相对独立的单元。
• 封装还避免了命名冲突的问题。

2. 继承
   JS实现继承的几种方式

3. 多态
   多态就是构造函数根据传入的变量不同，对同一方法，有不同的返回结果

function Math(){
    function zero(){
        return 10;
    }
    function one(num){
        return 10+num;
    }
    this.add = function(){
        switch(arguments.length){
            case 0:
                return zero();
                break;
            case 1:
                return one(arguments[0]);
                break;
        }
    }
}
var math1 = new Math();
console.log(math1.add());//10
console.log(math1.add(10));//20

通信类

1. 跨域 同源策略及限制
   跨域：跨域主要是浏览器同源策略，有协议，域名，端口号三个原因, 协议、域名、端口，如果有任何一部分不同，则源不同。

浏览器是根据请求中的origin头，如果origin是服务器认识的，那就正常返回，还会带上Access-control-Allow-Origin,如果没有这个，那么浏览器就会判定请求不合法。

同源策略：限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意软件的关键安全机制。

限制方面：（这个源的文档没有权利去操作另一个源的文档）

• cookie,localstorage和IndexDB无法读取
• DOM无法获得
• Ajax请求不能发送（Ajax请求只适合同源策略，跨域就不行）

2. 前后端通信

• Ajax（同源下的通信，不支持跨域）
• WebSocket（不受同源策略限制，支持跨域）
• CORS（支持跨域通信，也支持同源通信）——跨域资源共享（cross-origin resource sharing）

3. 前端跨域通信的几种方式
   JSONP、Hash、postMessage、webSocket、CORS

4. ajax
   是一种异步请求数据的技术，实现页面局部刷新，对于改善用户的体验和程序性能很有帮助

5. JSONP
   原理：ajax请求受同源策略的影响，不允许进行跨域请求，而scrip标签src属性中的链接却可以访问跨域的JS脚本，利用这个特性，服务器端不再返回JSON格式的数据，而是返回一段调用某个函数的JS代码，在src进行了调用，这样实现了跨域。

iframe,img等等拥有src属性的都是可以可以进行不受同源策略的限制
过程： 创建一个script标签，只支持get，将src设置为目标请求，插入到dom中，服务器接受该请求并返回数据，一般放在callback函数中，不仅仅是script可以，img,link,iframe都可以

• iframe优点：跨域完毕之后DOM操作和互相之间的JavaScript调用都是没有问题的
  缺点：1.若结果要以URL参数传递，在结果数据量很大的时候需要分割传递。
• script 优点：可以直接返回json格式的数据，方便处理
  缺点：只接受GET请求方式
• img优点：可以访问任何url，一般用来进行点击追踪，做页面分析常用的方法
  缺点：不能访问响应文本，只能监听是否响应
• link等其他html标签，只能说html标签任性，不受同源策略限制
  缺点：只支持GET这一种单一的请求方式

ajax和jsonp

• ajax和jsonp这两种技术在调用方式上“看起来”很像，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery框架都把jsonp作为ajax的一种形式进行了封装；
• 但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
• ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
• jsonp是一种方式或者说非强制性协议，不一定非要用json格式来传递，字符串都行

6. Hash（url的#后面的内容就叫Hash）
   Hash做跨域通信的基本原理：Hash的改变，页面会不断刷新

url的 ？后面的内容叫search。search的改变会导致页面刷新，因此不能做跨域通信。

如：场景:页面A通过iframe或frame嵌入了跨域的页面B，现在A给B发消息，怎么操作？

// A页面中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + "#" + 'jsonstring';

B页面中：
window.onhashchange = function(){
  var data = window.location.hash; //通过onhashchange方法见监听，url中的hash是否发生变化
}

7. postMessage()方法——H5新增方法，可用来做跨域通信
   HTML5为了解决跨域，引入了一个全新的接口：window.postMessage, window.opener.postMessage(‘Nice to see you’, ‘http://aaa.com’)就可以把’Nice to see you’传递到aaa.com中啦;

场景：窗口A（http:A.com）向跨域的窗口B（http:b.com）发送信息。
在A窗口：向B窗口发送数据：
window.postMessage('data','http://B.com'); //这里的window是B窗口的window对象

在B窗口中操作：

  window.addEventListener('message',function(event){//这里的window是A窗口的window对象
    console.log(event.origin);  //获取url。这里指：http://A.com
    console.log(event.source);  //获取A window对象
    console.log(event.data);    //获取传过来的数据
  },false);//冒泡

8. webSocket 标准, 不受同源策略的限制
   WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信.运用Origin字段，表示该请求的请求源（origin），即发自哪个域名。因为服务器可以根据这个字段，判断是否许可本次通信。

var ws = new WebSocket("wss://echo.websocket.org");  //创建WebSocket对象
ws.onopen = function(evt) {   
  console.log("Connection open ...");
  ws.send("Hello WebSockets!");   //发出请求
};

ws.onmessage = function(evt) { //接收消息
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {   //关闭连接
  console.log("Connection closed.");
};     

HTTP的缺陷：通信只能由客户端发起。
WebSocket特点:

• 客户端和服务端可以主动向彼此发送消息
• 建立在TCP之上，服务器端比较容易实现
• 与HTTP协议有良好的兼容性
• 数据格式比较轻量，性能开销小，通信高效
• 可发送文本，也可发送二进制数据
• 没同源限制，客户端可与任意server通信
• 协议标识符为WS/WSS，server网址就是URL（WS：未加密；WSS加密）

9. CORS——W3C标准，可以理解成是既可以同步也可以异步的ajax
   是跨源AJAX请求的根本解决方法,相比JSONP只能发GET请求，CORS允许任何类型的请求，CORS通信与同源的AJAX通信没有差别，只要服务器实现了CORS接口，就可以跨源通信 2种：简单请求和非简单请求

简单请求： 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，
头信息之中，增加一个Origin字段，本次请求来自哪个源（协议 + 域名 + 端口） 本次请求来自哪个源（协议 + 域名 + 端口），Access-Control-Allow-Origin

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。
请求用的请求方法是OPTIONS检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。J
SONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

fetch是一个比较新的API，用来实现CORS通信

fetch('/some/url',{
  method:'get'
}).then(function(response){
  // ······
}).catch(function(err){
  //errer，等价于then的第二个参数
});

CORS允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了ajax只能同源使用的策略。
CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE不能低于IE10.

• 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie
• window.name浏览器窗口有window.name属性。无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它

前端安全类

前端算法类