页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局</title>
    <style media="screen">
        html *{
            padding: 0;
            margin: 0;
        }
        .layout div {
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="float layout">
        <style media="screen">
            .float {
                margin-bottom: 20px;
            }
            
            .float .left {
                float: left;
                width: 300px;
                background-color: green;
            }

            .float .right {
                float: right;
                width: 300px;
                background-color: green;
            }

            .float .middle {
                background-color: pink;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle">
            <h1>浮动解决方案</h1>
        </div>
    </div>
    <div class="absolute layout">
        <style media="screen">
            .absolute div {
                position: absolute;
            }

            .absolute .left {
                left: 0;
                width: 300px;
                background-color: green;
            }

            .absolute .middle {
                left: 300px;
                right: 300px;
                background-color: yellow;
            }

            .absolute .right {
                right: 0;
                width: 300px;
                background-color: green;
            }
        </style>
        <div class="left"></div>
        <div class="middle">
            <h1>绝对定位方案</h1>
        </div>
        <div class="right"></div>
    </div>
    <div class="flex layout">
        <style media="screen">
            .flex {
                display: flex;
                margin-top: 150px;
                margin-bottom: 20px;
            }

            .flex .left {
                width: 300px;
                background-color: green;
            }

            .flex .middle {
                flex: 1;
                background-color: yellow;
            }

            .flex .right {
                width: 300px;
                background-color: green;
            }
        </style>
        <div class="left"></div>
        <div class="middle">
            <h1>flexbox解决方案</h1>
        </div>
        <div class="right"></div>
    </div>
    <div class="table layout">
        <style media="screen">
            .table {
                width: 100%;
                display: table;
                height: 100px;
                margin-bottom: 20px;
            }

            .table div {
                display: table-cell;
            }

            .table .left {
                width: 300px;
                background-color: green;
            }

            .table .middle {
                background-color: yellow;
            }

            .table .right {
                width: 300px;
                background-color: green;
            }
        </style>
        <div class="left"></div>
        <div class="middle">
            <h1>table解决方案</h1>
        </div>
        <div class="right"></div>
    </div>
    <div class="grid layout">
        <style media="screen">
            .grid {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }

            .grid .left {
                background-color: green;
            }

            .grid .middle {
                background-color: yellow
            }

            .grid .right {
                background-color: green;
            }
        </style>
        <div class="left"></div>
        <div class="middle">
            <h1>网格布局结局方案</h1>
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

C__Users_Administrator_Desktop%E9%9D%A2%E8%AF%95%E7%9F%A5%E8%AF%86%E7%82%B9_%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80.html.png

css盒模型

标准盒模型：width = content box-sizing: content-box
怪异盒模型：width = content + padding + border box-sizing: border-box
BFC：块级格式化上下文（一个独立的渲染区域或者隔离的独立容器）

形成条件：

浮动元素，float除none以外的值

定位元素，position（absolute，fixed）

display: inline-block || table-cell || table-caption

overflow: hiddle || auto || scroll

DOM事件

DOM事件类	事件级别
DOM0	`element.onclick = function() {}`
DOM2	`element.addEventListener('click', function() {}, false)`
DOM3	`element.addEventListener('keyup', function() {}, false)`

DOM事件类事件流：事件通过捕获到达目标元素，目标元素上传到windows对象

自定义事件，自定义触发事件：

var eve = new Event('custome')
ele.addEventListener('custome', function() {
    console.log('custome')
})
ele.dispatchEvent(eve)

HTTP

HTTP协议特点简单快速灵活无连接无状态
HTTP报文组成请求报文：请求行，请求头，空行，请求体响应报文：状态行，响应头，空行，响应体
GET和POST区别 GET在浏览器回退时是无害的，而POST会再次提交请求 GET请求可被浏览器主动缓存，而POST不会，除非手动设置 GET请求参数会被完整保留在浏览器历史记录里，POST不会 GET请求在URL中传送的参数有长度限制，POST没有 GET参数通过URL传递,POST放在Request body中
HTTP持久连接 HTTP协议采用“请求-应答”模式，每次都要新建连接在断开；

当使用Keep-alive模式（持久连接，http1.1），连接一次即可；

使用持久连接情况下：

请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3

管线化情况下：

请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3

原型链

原型链类创建对象方法

//1.字面量
let o1 = {name: "o1"}
//2.
let o11 = new Object()
o11.name = '小明'
//3.构造函数
let M = function() {
    this.name = "小明"
}
let o2 = new M()
//4.
let P = {name: "o3"}
let o4 = Object.create(P)

面向对象继承方式原型链继承

构造函数继承

组合式继承

寄生式组合继承

通信类

跨域通信方式：

JSONP：利用script标签异步加载实现

HASH

postMessage

WebSocket

CORS

安全类

CSRF
XSS

JS运行机制（任务队列，事件循环）

JS中的异步操作

setTimeOut

setInterval

ajax

promise

I/O

同步任务or异步任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入“任务队列”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

宏任务or微任务宏任务：整体代码script、setTimeOut、setInterval

微任务：promise.then、promise.nextTick(node)

事件循环整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

同步任务会直接进入主线程依次执行；

异步任务会再分为宏任务和微任务；

宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；

微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；

当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；

上述过程会不断重复，这就是Event Loop事件循环；

页面性能

1.浏览器大致渲染过程： html解析器解析html标签生成dom tree， css解析器解析style和link生成cssom，调用js引擎修改dom树，css样式树，然后生成render tree，根据render tree进行渲染（GPU），最后绘制在浏览器上

重绘，重排以图层为单位

优化方案： 1.元素位置变化时尽量使用css3的transform方法代替top，left；

2.使用opacity代替visibility，opacity配合图层使用，既不触发重绘也不触发重排

3.不要使用table布局：table-cell

4.多次改变样式属性操作合并一次操作

5.将dom离线后在修改，先隐藏操作完在显示

6.vue使用文档碎片提升性能

7.动画实现过程中，启用GPU加速transform： translatez(0)

8.为动画元素新建图层，提高动画元素的z-index

9.使用requestAnimationFrame：告诉浏览器下一次重绘重排时调用指定函数

10.使用CDN

错误监控

前端错误分类

代码错误

捕获方式：try...catch

window.onerror
资源加载错误

object.onerror

performance.getEntries()

Error事件捕获
跨域的js运行错误可以捕获吗？

答：可以，在script标签加crossorigin属性，设置js资源响应头Access-Control-Allow-Origin: *
上报错误的基本原理

利用Image对象上报,即可发出请求

(new Image()).src = 'http://baidu.com/tesjk?=rewq'

一天搞定前端多面知识点