前端知识点

### http 和 https

1. https 的 SSL 加密是在传输层实现的。

2. http 传输的数据都是未加密的、无状态的；https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议。

### tcp 三次握手

1. 客户端和服务端都需要直到各自可收发，因此需要三次握手。

2. 例如 C 发起请求连接 S 确认，也发起连接 C 确认我们：

- S 只可以确认自己可以接受 C 发送的报文段；

- C 可以确认 S 收到了自己发送的报文段，并可以确认自己可以接受 S 发送的报文段；

- S 可以确认 C 收到了自己发送的报文段。

### TCP 和 UDP 的区别

1. TCP 是面向连接的，UDP 是无连接的即发送数据前不需要先建立链接。

2. TCP 提供可靠的服务，无差错，不丢失，不重复，且按序到达；UDP 尽最大努力交付，即不保证可靠交付。

3. TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低。

4. TCP 只能是 1 对 1 的，UDP 支持 1 对多。

5. TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。

### 几个很实用的 BOM 属性对象方法?

1. location 对象

2. history 对象

3. navigator 对象

### 说一下 http2.0

1. 二进制分帧：HTTP2.0的协议解析采用二进制格式，实现方便且健壮。

2. 多路复用：即连接共享，每一个request都是是用作连接共享机制的。

3. header压缩：HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表。

4. 服务端推送：HTTP2.0具有server push功能。

### fetch 发送 2 次请求的原因

1. fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？

2. 原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

### 前端优化

1. 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

2. 加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。

3. 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。

4. 渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

### GET 和 POST 的区别

1. get 参数通过 url 传递，post 放在 request body 中。

2. get 请求在 url 中传递的参数是有长度限制的，而 post 没有。

3. get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。

4. get 请求浏览器主动 cache，只能进行 url 编码，而 post 支持多种编码方式。

5. get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。

6. get 产生一个 TCP 数据包；post 产生两个 TCP 数据包。

### HTML5 新增的元素

1. 增加了 header，footer，nav,aside,section 等语义化标签。

2. 在表单方面，为了增强表单，给 input 增加了 color，emial, data ,range 等类型。

3. 在存储方面，提供了 sessionStorage，localStorage 和离线存储。

4. 在多媒体方面，规定了音频和视频元素 audio 和 vedio。

5. 另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。

### 在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

1. DNS解析。

2. 发起TCP连接。

3. 发送HTTP请求。

4. 服务器处理请求并返回HTTP报文。

5. 浏览器解析渲染页面。

6. 连接结束。

### csrf 和 xss 的网络攻击及防范

1. CSRF(Cross Site Request Forgery 跨站请求伪造)：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求。防御方式的话：使用验证码，检查 https 头部的 refer，使用 token。

2. XSS(Cross Site Scripting 跨站脚本)：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，防御方式的话： cookie 设置 httpOnly 属性，对用户的输入进行检查，进行特殊字符过滤。

### transition 和 animation 的区别

1. transition 和 animation 大部分属性是相同的，他们都是随时间改变元素的属性值。

2. transition 需要触发一个事件才能改变属性，animation 不需要触发任何事件的情况下才会随时间改变属性值。

3. transition 为 2 帧，从 from .... to，而 animation 可以一帧一帧的。

### 垂直水平居中的方法

1. margin auto

2. margin 负值一半

3. transform -50%

4. flex center

5. table-cell（未脱离文档流的）

### visibility=hidden, opacity=0，display:none

1. opacity=0，该元素隐藏，不改变页面布局，可以触发事件。

2. visibility=hidden，该元素隐藏，不改变页面布局，不触发事件。

3. display=none，该元素隐藏，会改变页面布局，不触发事件。

### 浏览器的回流与重绘

1. 回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

2. 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

3. CSS：

- 避免使用table布局。

- 尽可能在DOM树的最末端改变class。

- 避免设置多层内联样式。

- 将动画效果应用到position属性为absolute或fixed的元素上。

- 避免使用CSS表达式。

4. JS：

- 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

- 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

- 可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

- 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

### 说一下闭包

- 闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

### 事件委托

- 事件委托指的是，不在事件的直接 DOM 上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

### 说一下图片的懒加载和预加载

1. 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2. 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

3. 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

4. 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

### mouseover 和 mouseenter 的区别

1. mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是 mouseout。

2. mouseenter：当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是 mouseleave。

### JS 的 new 操作符做了哪些事情

- new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。

### 改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

1. 通过 apply 和 call 改变函数的 this 指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1, arg2... 这种形式。

2. 通过 bind 改变 this 作用域会返回一个新的函数，这个函数不会马上执行。

### JS 的节流和防抖

1. 节流

```js

function throttle(func, wait) {

    let previous = 0;

    return function() {

        let now = Date.now();

        let context = this;

        let args = arguments;

        if (now - previous > wait) {

            func.apply(context, args);

            previous = now;

        }

    }

}

```

2. 防抖

```js

function debounce(func, wait) {

  let timeout;

  return function () {

    const context = this;

    const args = [...arguments];

    if (timeout) clearTimeout(timeout);

    timeout = setTimeout(() => {

      func.apply(context, args)

    }, wait);

  }

}

```

### JS 中的垃圾回收机制

1. 必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

2. 垃圾回收的方法：标记清除、计数引用。

### 如何理解前端模块化

- 前端模块化就是复杂的文件编程一个一个独立的模块，比如 JS 文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了 commonJS 规范，AMD，CMD 规范等等，以及用于 JS 打包（编译等处理）的工具 webpack。

### 说一下 CommonJS、AMD 和 CMD

1. CommonJS：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载 require()引入模块。

2. AMD：异步模块定，requireJS 实现了 AMD 规范，主要用于解决下述两个问题。

- 多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

- .加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长。

### 对象深度克隆的简单实现

```js

function deepClone(obj){

    var newObj= obj instanceof Array ? []:{};

    for(var item in obj){

        var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];

        newObj[item] = temple;

    }

    return newObj;

}

```

### 实现一个 once 函数，传入函数参数只执行一次

```js

function ones(func){

    var tag=true;

    return function(){

        if(tag==true){

            func.apply(null,arguments);

            tag=false;

        }

        return undefined

    }

}

```

### JS 监听对象属性的改变

- 我们假设这里有一个 user 对象

1. ES5 中可以通过 Object.defineProperty来实现已有属性的监听

```js

Object.defineProperty(user,'name',{

    set：function(key,value){

    }

})

```

2. ES6 中可以通过 Proxy 来实现

```js

let user = new Proxy({}，{

    set：function(target,key,value,receiver){

    }

})

```

### 自己实现一个 bind 函数

```js

Function.prototype.bind=function(obj,arg){

    var arg=Array.prototype.slice.call(arguments,1);

    var context=this;

    return function(newArg){

        arg=arg.concat(Array.prototype.slice.call(newArg));

        return context.apply(obj,arg);

    }

}

```

### 代码的执行顺序

```js

setTimeout(function(){

    console.log(1)

},0);

new Promise(function(resolve,reject){

    console.log(2);

    resolve();

}).then(function(){

    console.log(3)

}).then(function(){

    console.log(4)

});

process.nextTick(function(){

    console.log(5)

});

console.log(6);

//输出 2,6,5,3,4,1

```

###  JS 判断类型

- 判断方法：typeof()，instanceof，Object.prototype.toString.call()等

### 闭包 有什么用

1. 闭包是指有权访问另外一个函数作用域中的变量的函数。闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

2. 为什么要用：

- 匿名自执行函数

- 结果缓存

- 封装实现类和继承等

### 讲讲 JS 的语言特性

1. 运行在客户端浏览器上；

2. 不用预编译，直接解析执行代码；

3. 是弱类型语言，较为灵活；

4. 与操作系统无关，跨平台的语言；

5. 脚本语言、解释性语言

### 如何判断一个数组

1. Object.prototype.call.toString()

2. instanceof

3. isArray

### JS 实现跨域

1. JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。

2. CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求，前后端都需要设置。

3. proxy代理跨域：启一个代理服务器，实现数据的转发

### 跨域的原理

- 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

### this 的指向

1. 默认绑定：全局环境中，this 默认绑定到 window。

2. 隐式绑定：一般地，被直接对象所包含的函数调用时，也称为方法调用，this 隐式绑定到该直接对象。

3. 隐式丢失：隐式丢失是指被隐式绑定的函数丢失绑定对象，从而默认绑定到 window。显式绑定：通过 call()、apply()、bind()方法把对象绑定到 this 上，叫做显式绑定。

4. new 绑定：如果函数或者方法调用之前带有关键字 new，它就构成构造函数调用。

### 说一下什么是 virtual dom

- 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

### webpack 用来干什么的

- webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

### JS 加载过程阻塞，解决方法

1. 指定 script 标签的 async 属性。

2. 如果 async="async"，脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

3. 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

### Babel 的原理是什么

- babel 的转译过程也分为三个阶段，这三步具体是：

1. 解析 Parse: 将代码解析生成抽象语法树( 即 AST )，即词法分析与语法分析的过程

2. 转换 Transform: 对于 AST 进行变换一系列的操作，babel 接受得到 AST 并通过 babel-traverse 对其进行遍历，在此过程中进行添加、更新及移除等操作

3. 生成 Generate: 将变换后的 AST 再转换为 JS 代码, 使用到的模块是 babel-generator

### git 工作流

1. master、develop、feature、release、hotfix

2. GitFlow优势：并行开发、协作开发、发布阶段、支持紧急修复

### git rebase 与 git merge 的区别

1. git rebase 和 git merge 一样都是用于从一个分支获取并且合并到当前分支.

2. marge 特点：自动创建一个新的 commit 如果合并的时候遇到冲突，仅需要修改后重新 commit

3. rebase 特点：会合并之前的 commit 历史

### git reset、git revert 和 git checkout 有什么区别

1. git 仓库的三个组成部分：工作区（Working Directory）、暂存区（Stage）和历史记录区（History）

2. git reset、git revert 和 git checkout 的共同点：用来撤销代码仓库中的某些更改。

### Vue 的优缺点

- 优点

1. 数据驱动视图，对真实 dom 进行抽象出 virtual dom（本质就是一个 js 对象），并配合 diff 算法、响应式和观察者、异步队列等手段以最小代价更新 dom，渲染页面

2. 组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写 html\css（scoped 属性配置 css 隔离）\js 并且配合 Vue-loader 之后，支持更强大的预处理器等功能

3. 强大且丰富的 API 提供一系列的 api 能满足业务开发中各类需求

4. 由于采用虚拟 dom，让 Vue ssr 先天就足

5. 生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然有优化空间（Vue3 composition-api）

6. 生态好，社区活跃

- 缺点

1. 由于底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8及以下浏览器

2. csr 的先天不足，首屏性能问题（白屏）

3. 由于百度等搜索引擎爬虫无法爬取 js 中的内容，故 spa 先天就对 seo 优化心有余力不足

### watch 和 computed 有什么区别

1. computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

2. watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。

### Vue 双向绑定原理

- Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

### v-model 是什么，有什么用

- 语法糖，相当于 v-bind:value="xxx" 和 @input，意思是绑定了一个 value 属性的值，子组件可对 value 属性监听，通过$emit('input', xxx)的方式给父组件通讯。自己实现v-model 方式的组件也是这样的思路。

### axios 是什么？怎样使用它？怎么解决跨域的问题？

- axios 的是一种异步请求，用法和 ajax 类似，安装 npm install axios --save 即可使用，请求中包括 get,post,put,patch,delete 等五种请求方式，解决跨域可以在请求头中添加Access-Control-Allow-Origin，也可以在 index.js 文件中更改 proxyTable 配置等解决跨域问题。