前端面试

第一部分：页面布局

左右固定，中间自适应.png

有5中可以解决：
第一种：浮动

<section class="layout float">
      <style media="screen">
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
      </style>
      <h1>三栏布局</h1>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h2>浮动解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
      </article>
    </section>

第二种：定位

<!-- 绝对布局 -->
    <section class="layout absolute">
      <style>
        .layout.absolute .left-center-right>div{
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>绝对定位解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

第三种：flex布局

<!-- flexbox布局 -->
    <section class="layout flexbox">
      <style>
        .layout.flexbox{
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>flexbox解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

第四种：表格布局

<!-- 表格布局 -->
    <section class="layout table">
      <style>
        .layout.table .left-center-right{
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>表格布局解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

第五种：网格布局（CSS最新增的，类似于bootstrap的栅格系统）

<!-- 网格布局 -->
    <section class="layout grid">
      <style>
        .layout.grid .left-center-right{
          width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right>div{

        }
        .layout.grid .left{
          width: 300px;
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{

          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>网格布局解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

若高度不给，那么高度能自适应的只有 flex 布局和表格布局了，其他则不可以

第二部分：CSS盒模型

概念：有2种，标准模型 + IE模型

css盒模型-标准模型.png

css盒模型-IE模型.png

css如何设置这2中模型

box-sizing：border-box; IE模型
box-sizing：content-box; 标准模型（默认）

js如何设置获取盒模型对应的宽和高：

dom.style.width/height 这个只能取到内联样式的宽高
dom.currentStyle.width/height 拿到渲染后的宽高，但这个是IE支持的，其他不支持
dom.getComputerStyle.width/height 拿到渲染后的宽高，兼容谷歌和火狐
dom.getBoundingClientRect().width/height 这个也能拿到，有4个值，还有2个是距离顶部和左边的距离

BFC（边距重叠解决方案）

概念：块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
原理：如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器
如何创建BFC：
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素，position（absolute，fixed）；
- display 不为none；
- overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC常见作用
- BFC清除浮动

BFC清除浮动.png

- BFC解决浮动遮挡问题

BFC使得不被浮动元素覆盖.png

- BFC 会阻止外边距折叠

BFC阻止外边距塌陷.png

第三部分：DOM事件

DOM事件级别：

DOM事件级别.png

DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件

DOM的事件模型：捕获----> 冒泡

DOM的事件流（三个阶段）：捕获阶段---->目标阶段 -----> 冒泡阶段

DOM事件捕获的具体流程：

window---document---html---body---.... ---目标元素

DOM事件的Event对象的常见应用：

event.preventDefault() : 阻止默认事件
event.stopPropagation(): 阻止冒泡
event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
event.target: 返回触发事件的元素
event.currentTarget: 返回绑定事件的元素

DOM的自定义事件：

var  eve = new Event('eventName')
dom.addEventListener('eventName',function(){
})  //注册事件
dom.dispatchEvent(eve);   // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

第四部分：HTTP协议类

HTTP协议特点

简单快速（URL固定），灵活，无状态（服务端单从HTTP不能区分2次请求是否同一个人），无连接（连接一次就断掉）

GET和POST的区别：

POST和GET区别.png

HTTP状态码：

HTTP状态码.png

HTTP状态码02.png

HTTP状态码03.png

HTTP持久化：

HTTP持久连接.png

HTTP管线化：

HTTP管线化.png

管线化02.png

第五部分：原型链

创建对象的3种方法：

var obj = {} //字面量
new Object() //构造函数
Object.create() // 指定的原型对象及其属性去创建一个新的对象

原型链：

原型链.png

instanceof 原理：

function C(){} ;
var o = new C();
o instanceof C;  // true
o instanceof Object; // true

new关键字的作用：

创建一个对象，此对象继承自该函数的prototype对象
将函数里面的this指向这个对象
返回这个对象，若函数本身返回的是复杂类型数据，则不会返回这个对象

第六部分：面向对象

继承：

构造函数实现继承：

       function Class1 () {
            this.name = "aa"
            this.run = function(){
                console.log('can run')
            }
        } 
        Class1.prototype.say=function(){ console.log('can say')} //无法继承
        function Class2 (){
            Class1.call(this)
        }
        var c1 = new Class2()
        console.log(c1)
        // 通过构造函数实现的继承的优缺点：
        // 优点：1、可以实现多继承（call多个父类对象）
        //       2、创建子类实例时，可以向父类传递参数
        // 缺点：1、只能继承父类的实例属性和方法，不能继承原型属性/方法
        //       2、无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

原型实现继承

        function class1(){
            this.name = "aa";
            this.run = function(){
                console.log('can run')
            };
            this.arry = [1,2,3];
        }
        class1.prototype.say=function(){console.log('can say')}
        function class2(){
        }
        class2.prototype = new class1()
        var cc1 = new class2()
        var cc2 = new class2()
        cc1.arry.push(4) // [1,2,3,4]
        console.log(cc2) // [1,2,3,4]
        cc1.name = "cc"
        console.log(cc2.name) // 'aa'
        console.log(cc1 instanceof class1, cc2 instanceof class2) // true, true
        console.log(cc1.constructor === class1,cc2.constructor === class2) // true, false
        // 通过原型继承的优缺点
        //    优点：1、父类新增原型方法/原型属性，子类都能访问到
        //          2、实例是子类的实例，也是父类的实例
        //    缺点：1、无法实现多继承
        //          2、来自原型对象的引用属性是所有实例共享的
        //          3、创建子类实例时，无法向父类构造函数传参

组合继承

        // 组合方式
        function class1(){
            this.name = "aa";
            this.run = function(){
                console.log('can run')
            };
            this.arry = [1,2,3];
        }
        class1.prototype.say=function(){console.log('can say')}
        function class2(){
            class1.call(this)

        }
        class2.prototype = class1.prototype
        var c1 = new class2()
        var c2 = new class2()
        console.log(c1 instanceof class1, c1 instanceof class2); // true, true
        console.log(c1.constructor === class1, c1.constructor === class2) // true. false
        // 此组合方式的问题：
        //      c1 和 c2 的constructor指向了class1，不是由子类class2构造的

组合继承（优化）

        // 组合方式优化（最佳）
        function class1(){
            this.name = "aa";
            this.run = function(){
                console.log('can run')
            };
            this.arry = [1,2,3];
        }
        class1.prototype.say=function(){console.log('can say')}
        function class2(){
            class1.call(this)

        }
        class2.prototype = Object.create(class1.prototype) //防止改动class1的prototype后改动class2的实列属性
        class2.prototype.constructor = class2; //需要修复下构造函数
        var c1 = new class2()
        var c2 = new class2()
        console.log(c1 instanceof class1, c1 instanceof class2); // true, true
        console.log(c1.constructor === class1, c1.constructor === class2) // true. false

第七部分：通信

浏览器的同源政策限制：端口，域名，协议，只要一个不一样就跨域

前后端如何通信：

Ajax
Websocket
CORS

原生ajax实现：

   function ajax(options){
            var pramas = {
                url:'',
                type: 'get',
                data: {},
                success: function (data) {},
                error: function (err) {},
            }
            options = Object.assign(pramas, options)
            if(options.url){
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
                var url = options.url,
                    type = options.type.toUpperCase(),
                    data = options.data,
                    dataArr = [];
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    xhr.open(type, url, true)
                    xhr.send()
                }
                if(type === "POST"){
                    xhr.open(type,url, true)
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(dataArr.join('&'))
                }
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                        options.success(xhr.responseText)
                    }else {
                        options.error(xhr.responseText)
                    }
                }
            }
        }

跨域通信的几种方式：

JSONP：
通过script标签引入的js是不受同源策略的限制，得和后端订好那个字段是回调函数
postMessage

      // postMessage
      // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
      Bwindow.postMessage('data', 'http://B.com');
      // 在窗口B中监听
      Awindow.addEventListener('message', function (event) {
          console.log(event.origin);
          console.log(event.source);
          console.log(event.data);
      }, false);

Websocket

      var ws = new WebSocket('wss://echo.websocket.org');
      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.');
      };

CORS: 通过配置fetch跨域（浏览器会拦截跨域请求，在请求头上添加跨域）

      fetch('/some/url/', {
          method: 'get',
      }).then(function (response) {

      }).catch(function (err) {
        // 出错了，等价于 then 的第二个参数，但这样更好用更直观
      });

第八部分：web安全

CSRF-跨站请求伪造

跨站伪造请求.png

此攻击必要的是用户已经登录过网站A，和网站中某个接口存在漏洞，微博出现过CSRF攻击添加粉丝和关注，导致很多人关注了陌生人

防御：
- Token验证：cookie浏览器会自动携带，但是Token不会自动携带
- ReRefer验证：服务器判断页面来源，如果是白名单的站点，则可以否则拒绝
- 隐藏令牌：和Token类似，一般隐藏在header头中

XSS-跨域脚本攻击

原理：不需要做登录认证，向页面注入js脚本，常见的有：评论区，留言区等等
防御：关键是不执行用户输入的内容

第九部分：其他

渲染机制：

DOCTYPE及作用：用来声明文档类型和DTD规范，告诉浏览器以什么类型解析文件
浏览器渲染：

浏览器渲染DOM.png
重排（reflow）:
概念：每个DOM元素都有自己的盒子，需要浏览器根据样式去计算，得到结果，然后把它放到该出现的位置，这个过程叫重排
触发重排：
- 增加、删除、修改DOM节点，会导致reflow 或者repaint
- 当移动DOM位置的时候
- 当修改样式的时候可能会，还有resize窗口时（移动端不会出现）
- 修改网页默认字体时
重绘（repaint）：
概念：当DOM元素的位置、大小、及其其他属性改变，就会导致浏览器重绘
触发重绘：DOM改动或者CSS改动

js运行机制：

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342