前端面试必备技术点

(1)标签：
行内元素(无宽高，不可设置margin的上下边距)：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）
块级元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
行内块元素：display:inline-block;的元素。

display:none 和 visibility:hidden 的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

attribute和property的区别
attribute ：dom 元素在文档中作为 html 标签拥有的属性，这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；
property： dom 元素在 js 中作为对象拥有的属性。
attribute的value值只在初始化的时候跟property一样，使用getAttribute获取的值是初始化时候的值，如果使用setAttribute方法手动去改变，但是这个改变也不会影响property的值；
property的value值是input实时输入的值，该值的改变同样也不影响attribute。

math对象的方法
Math.ceil() 执行向上舍入
Math.floor() 执行向下舍入
Math.round() 执行标准输入，即四舍五入为最接近的整数
Math.random() 返回随机数

CSS中 link 和 @import 的区别
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.

position
absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

(2)jQuery事件绑定
on：美刀符(’#clickmeon’).on(“click”,function(e){})
给未来元素或异步请求后的元素添加事件
美刀符(document).on(‘click’,‘绑定点击事件的元素’,function(){
/需要注意的就是事件里边的$(this)指的就是被点击的元素而不是$(document)/
})
live：美刀符("#button li a").live(“click”,function(e){});
delegate：美刀符(“div”).delegate(“li a”,“click”,function(e){});
bind：美刀符(’#clickmebind’).bind(“click”, function(e){});
注意：如果只使用一次可以用one绑定。

(3)img标签的alt和title属性
alt：图片不显示的时候显示
title：图片正常显示的时候，鼠标放上去的时候显示

(4)flex布局
父元素定义：{display：flex； flex-direction: column; }即可。

(5)CommoneJS(requireJS)、AMD(异步加载依赖)及CMD(就近依赖)
CommoneJS：用在服务器端，加载模块是同步的，所以只有加载完成才能执行后面的操作。
CommonJS定义的模块分为：{模块引用(require)} {模块定义(exports)} {模块标识(module)}
AMD(异步加载依赖)：用在浏览器端，提前加载依赖模块
CMD(就近依赖)：用在浏览器端，用到的时候才会加载依赖模块

(6)bind , call及apply
他们都会改变this的指向
bind：生成一个绑定函数，但是不会调用
call：绑定后会直接执行，单个传参
apply：绑定后也会直接执行，以数组的形式传参

(8)ES6
1、let和const
const定义的常量是不能改变的，但是const定义的引用类型变量是可以改变他们的属性值。
2、箭头函数
3、this关键字（箭头函数结果了函数中this指向的问题）；
4、函数的默认参数
5、函数的rest参数（…args）：rest参数是数组，而arguments是类数组
6、数组/对象的解构赋值
7、类
8、模块的导入（import & export）
9、展开操作符“…”
promise：promise.then(),promise.all()
ES6编译为ES5使用babel

(9)ES7
1、includes：arr.includes()，返回bool值
注意：indexOf ()返回的是索引的下标或者是-1。
2、指数操作符：** ，2**3 = 8

(10)ES8
1、object.entries()：
将对象转为键值对的数组，对象的每一个属性和值是数组里的每一个元素。
例如let obj = {a: 1, b: 2, c: 3} => [[a: 1],[ b: 2],[ c: 3]]
2、Async Await：
await 是对迭代器yeild的升级，异步执行完成后自行调用，而yeild则需要next()方法去调用。

浏览器中使用原生ES模块方案
只需要在script标签上加上 type = "module"属性

(11)CSS3
1、选择器：nth-child、disabled、after、before 、伪类选择器等
2、css3动画：keyframes（用百分比控制显示的过程）
3、2D/3D旋转

(12)H5
1、标签的新特性：input的type
2、新的语义标签:datalist、progress、output、meter
3、sessiostorage：sessionStorage,localstorage
4、视频和音频：video，audio
5、canvas和svg绘图
6、新标签：
1.header：页眉
2.nav：标记导航
3.article：文章标记标签
4.section：区块定义标签
5.aside：定义侧栏标签
6.footer：页脚标签

FileReader
是一种异步文件读取机制。
filereader提供的方法：读取文件的内容以不同的形式保存在result属性中
readAsText(file,encoding)
readAsDataURL(file)
readAsBinaryString(file)
readAsArrayBuffer(file)
filereader的事件捕获过程：在读取文件的过程中会触发到的事件。
onabort：中断时触发
onerror：出错时触发
onload：文件读取成功完成时触发
onloadend：读取完成触发，无论成功或失败
onloadstart：读取开始时触发
onprogress：读取中

跨文档消息传递
简称为XDM，核心是postMessage（）方法。

(13)canvas ,svg及echarts
canvas：位图 ，放大会失真，使用js绘图 ，绘制图片使用drawImg
svg：矢量图，放大不失真，使用XML绘图，多应用与游戏。
echarts：百度的绘图插件

(14)sessionStorage ，localstorage，cookie，session
sessiohstorage：页面会话级别存储，关闭当前网页后会消失，优点存储量大
localstorage：本地存储，页面关闭不会消失，长久存在。
cookie：本地存储，存储空间下，不大于4K，长期存在。
栗子：
设置cookie：document.cookie = ‘name=’ + name + ‘;expires=’ + now.toUTCString() + ';
读取cookie：var data = document.cookie;

拖放API
被拖动元素触发的事件：
1.dragstart
2.drag
3.dragend
元素被拖动到目标元素
1.dragenter
2.dragover
3.dragleave或drop

(15)阻止冒泡和阻止默认事件
事件冒泡：如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。
阻止事件冒泡：e.stopPropagation()，IE：e.cancelBubble = true。
默认事件：一个目标元素的默认行为，如a标签的超链接就是默认行为
阻止默认事件：e.preventDefault()，IE：e.returnValue = false。

(16)DOM事件流
事件捕获、处于目标阶段、事件冒泡

事件委托
事件委托利用了事件冒泡（事件冒泡会一直冒泡到document层），只指定一个事件处理程序，就可以管理某一类型的所有事件。
使用方法：只需要在DOM树种尽量最高的层次上添加一个事件处理程序。
优点：减少添加事件监听的操作。
移除事件：将事件的操作函数的赋值改为null。

(17)ready和load
ready和load：ready先执行
ready：实在HTML加载完成后执行，
load：在页面（包含HTML和图片等媒体文件）加载完成后执行，一般window.onload(),这个方法只能写一次，多了会覆盖

(18)闭包
当函数执行完毕后，局部活动对象就会被摧毁，内存中仅保存全局作用域，而闭包是内部的函数函数作用域引用了外部的活动变量，导致函数销毁时变量不能被释放，一直存在内存中，形成了闭包。
闭包会导致内存泄露，解决方法：将引用的变量赋值为null。
注意：闭包的外层函数调用几次就有几个受保护的局部变量。

(19)this指向
this的指向：首先要区分严格模式和非严格模式。
全局函数和变量this指向window
对象方法和变量this指向对象
一句话,谁调用指向谁，即指向上下文执行环境。

(20)作用域、函数作用域及作用域链
作用域：一个变量的可用范围，也就是变量的实际存储位置
函数作用域：专门保存函数内部的局部变量的对象
作用域链：从函数作用域直到全局作用域形成的多级引用。作用：保证执行环境有权访问所有的变量和函数的有序访问。

(21)原型对象及原型链
原型对象：每个构造函数都有一个prototype属性，即构造函数的原型对象，同时原型对象有constructor指向构造函数。
原型链：由各级原型对象引用形成的链式结构

(22)多态
重载：根据参数arguments的不同调用不同的方法；
重写：重新定义父类的方法

(23)变量和函数声明提前

(24)函数声明和函数表达式
函数声明会提前被JS解释器读取，而表达式不会，所以在定义之前调用，函数声明不会报错，而表达式会

(25)JS执行环境

(26)JS数据类型：
基本类型：number，boolean，string，undefined，null，object，Symbol；(注意：数字后面跟点号（2.)依然为数字)
注：Symbol，表示独一无二的值，
凡是属性名属于 Symbol 类型，就都是独一无二的，Symbol 值通过Symbol函数生成(let s = Symbol()
引用类型：常见的有 object、 array、 function
栈：原始数据类型
堆：引用数据类型
两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

队列和栈的区别
栈：后进先出，push，pop
队列：先进先出，shift（取数组第一个元素），unshift（数组前面添加元素）

JS对数组判定的方法
typeof：只能判断原始类型的值，不能判断引用类型的值，所以对数组（Array）无效。
1. Array.prototype.isPrototypeOf(arr): 返回字符串,返回值为数据的类型名
2. arr instanceof Array：返回bool值，例如: c instanceof Array(判断c是不是数组)
3. arr.constructor ==Array：返回bool值，判断某个Function是不是在这个对象的原型
4. Object.prototype.toString.call(arr) =="[object Array] "：返回bool值，Object.prototype.toString.call()直接调用Object原型上的toString方法，并通过call来改变this的指向来返回一个 像是[object Array] [object Object]这样的字符串
5. jquery.type()：返回bool值
6. Object.getPrototypeOf(arr) == Array.prototype

JS字符串方法
JS字符串截取函数slice(),substring(),substr()
substring(indexStart, indexEnd)：返回一个索引和另一个索引之间的字符串。注意：含头不含尾。
substr(start, length)：返回从指定位置开始的字符串中指定字符数的字符。
slice((beginIndex[, endIndex])：返回一个索引和另一个索引之间的字符串。注意：含头不含尾。

(27)JS深浅复制：
深浅复制针对的是引用类型的数据，
解决方法有三种：JSON.parse(JSON.stringfy()、deepclone()、extend()

(28)js函数防抖和函数节流
函数防抖：在一定时间段的连续函数调用，只让其执行一次
函数节流：节流就是保证一段时间内只执行一次核心代码

(29)AJAX
ajax原生：创建XMLHttpRequest对象 ,post和get不同，post需要设置响应消息头部
jQuery：使用美刀符.ajax(function(){})

(30)JS继承
1：原型链 ：SubType.prototype = new SuperType() //继承了SuperType
2：借用构造函数：SuperType.call(this) // //继承了SuperType的实例属性
3：组合继承: 是1和2的组合
4：原型式继承：
5：寄生式继承：
6：寄生组合式继承：

(31)JS处理耗时程序
设置定时器，使用异步的方法让浏览器的线程去处理，等处理完，做条件判断再调用回调函数

(32)JS数组排序
冒泡排序：前后两个元素比较，每次循环选出最大的数。
选择排序：相邻的数进行两两比较，一轮比较完毕，找到最大值（或最小值）之后，将其放在正确的位置，其他数的位置不变。
插入排序：比前面两种排序方法都更有效率。它将数组分成“已排序”和“未排序”两部分，一开始的时候，“已排序”的部分只有一个元素，然后将它后面一个元素从“未排序”部分插入“已排序”部分，从而“已排序”部分增加一个元素，“未排序”部分减少一个元素。
希尔排序
归并排序
快速排序:
堆排序
计数排序
桶排序
基数排序
速度最快：快排法，代码如下：
var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};
quickSort([3, 2, 4, 5, 1]);

(34)高阶函数和偏函数
高阶函数：以函数作为参数的函数，例如promise的回调函数；或输出一个函数，例如闭包。
偏函数：通过指定部分参数来产生一个新的定制函数的形式。

函数柯里化
使用一个闭包返回一个函数，当函数被调用时，返回的函数还需要设置一些传入的参数。
例1：
function curry(a) {
return function(b) {
return a + b;
}
}
var add2 = curry(2); //add2也就是第一个参数为2的add版本
console.log(add2(3))//5
例2：
function _add(a) {
return function(b) {
return function© {
return a + b + c;
}
}
}
_add(1)(2)(3);

(35)浏览器原理及内核
原理：浏览器引擎->渲染引擎->js解释器
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核

(36)浏览器缓存
对比缓存：响应的状态码304，工作流程：浏览器去和后台确认数据是否过期，没过期就返回304，可以使用缓存
强制缓存：响应的状态码200；会有两种显示：from memory cache和from disk cache，强制缓存会查看 cache-control(数据有效期)
和last-modified(最后修改时间)，如果在有效期内，直接使用，不回去和后台确认.

IE和chrome最大并行的线程数
Internet Explorer11最大并行线程数： 6个
chrome、firefox最大并行线程数： 6个

Javascript（同浏览器）垃圾回收方法
（1）标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
（2）引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然 JavaScript 对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的， 也就是说只要涉及 BOM 及DOM就会出现循环引用问题。

(37)BOM
1.window对象
a.全局作用域
b.窗口位置，大小
c.窗口的打开
2.location对象
window.location 和 document.location
3.navigator对象
保存浏览器的属性和方法，比如navigator.userAgent
4.screen对象
screen对象的属性有：availHeight、availWidth、availTop、availLeft、top、width
方法：window.resizeTo(screen.availWidth,screen.availHeight);
5.history对象
history是window对象的属性，保存着用户的上网历史纪录，从窗口打开的那一刻算起。
方法：history.go() ->跳转，history.back() ->后退，history.forward() ->前进

(38)浏览器兼容性
html兼容性：
css兼容性：
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 解决方法： CSS 属性 -webkit-text-size-adjust: none;
* Firefox的table边框的合并无效的问题
js兼容性：

(39)正则表达式

(40)http和https
https：是http+ssl ，ssl：安全套接层，一方面对数据进行压缩、加密，另一方面验证用户、交换密钥
默认HTTP的端口号为80， HTTPS 的端口号为443。

(41)跨域请求
XHR对象只能访问与包含它的页面位于同一域中的资源，访问其他域中资源就为跨域，跨域有安全风险。
JSONP：动态生成一个script标签插入到DOM中，优点:简单方便，缺点：有安全风险，因为引入的js文件可能会存在安全隐患
CORS：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否应该成功。
客户端：发送消息主体设置origin，origin:url(需要跨域的路径)，
服务器端：如果服务器端接受这个请求，就会返回Access-Control-Allow-Origin：url(需要跨域的路径)/*
注意：* 代表公共资源
浏览器端：如果没有Access-Control-Allow-Origin这个头部，或者有头部但是源信息不匹配，浏览器会驳回请求。正常情况下，浏览器会处理请求，但是不包含cookie信息。

JavaScript 的同源策略
概念:同源策略是客户端脚本（尤其是 Javascript ）的重要的安全度量标准。它最早出自 Netscape Navigator2.0 ，其目的是防止某个文档或脚本从多个不同源装载。
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。

()angularjs生命周期
启动阶段：解析DOM树，执行angularjs脚本
初始化阶段：寻找ng-app指令，初始化组件
编译阶段：执行页面中的指令并添加监听
运行阶段：数据改变触发watch和digest，更新数据

angularjs自定义指令
在自定义服务里注入服务示例，但不能注入$scope作用域对象。1、用factory自定义指令<!--HTML--><divng-controller="showTheName"><h1ng-bind="name"></h1></div>/\ast js\ast /varapp=angular.module("routingDemoApp",[]);app.factory("showName",function()varNameFactory=;NameFactory.name="张三";returnNameFactory;);app.controller("showTheName",function($scope,showName){
$scope.name = showName.name;
});
2、使用service自定义指令
3、用provider自定义指令

(42)react虚拟DOM
react会在内存中维护一个虚拟DOM树，并对这个DOM树进行读写，当数据变化时，react会自动更新虚拟DOM，然后将新的虚拟DOM和 旧的虚拟DOM进行对比，找到变更的部分，得到一个diff，将diff放在队列里，然后批量更新到真实DOM中去。

(43)react生命周期函数
初始化：getDefaultProps、getInitalState、componentWillMount、render、componentDidMount
更新：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
卸载：componentWillUnmount
componentDidMount：在这个声明周期内会发出http请求

react实现组件的方式
1.react.createClass来定义组件：有状态组件
2.使用ES6的class来定义组件：组件用到了state或者声明周期函数
3.通过函数定义无状态组件：创建无状态组件

react有状态组件和无状态组件
无状态组件：无状态组件(Stateless Component)是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。它的基本组成结构就是属性（props）加上一个渲染函数（render），所以这种组件的复用性也最强。
有状态组件：组件内部包含状态（state）且状态随着事件或者外部的消息而发生改变，有状态组件通常会带有生命周期(lifecycle)

react容器组件和UI组件
容器组件：负责管理数据和业务逻辑，不负责 UI 的呈现，带有内部状态
UI组件：没有状态,所有数据都由参数（this.props）提供，展示UI

shouldcomponentupdate函数的作用
一个允许我们自行决定某些组件（以及他们的子组件）是否进行更新的生命周期函数，reconciliation的最终目的是尽可能以最有效的方式去根据新的state更新UI，如果你已经知道UI的哪些状态无需进行改变，就没必要去让React去判断它是否该改变。 让shouldComponentUpdate返回falss, React就会让当前的组件和其子组件保持不变。

受控组件和非受控组件的区别
受控组件：一般用在需要动态设置其初始值的情况。
非受控组件： 一般用于无任何动态初始值信息的情况

setState方法
setState 是一个异步方法。
第一种setstate（）格式 第一个参数是一个对象，第二个参数是一个回调函数，这个回调函数是在setstate执行完并页面渲染了之后再执行；
第二种格式，接收一个回调函数，而不是一个对象，这个回调函数有两个参数， 一个是接收前一个状态值作为第一个参数，并将更新后的值作为第二个参数。
this.setState(
{myValue:!nowValue},
function(){
console.log(this.state.myValue);
}
);

react-router实现原理
history和配置路由表

react组件间通信（https://www.jianshu.com/p/fb915d9c99c4）
1.父组件向子组件通信：使用props
2.子组件向父组件通信：1.利用回调函数（子组建调用父组件定义的方法），2.利用自定义事件机制
3.跨组件通信：
指的是有嵌套关系但是不是父子关系的组件，利用context通信
上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象
子组件要声明自己需要使用 context
4.没有嵌套关系组件通信：发布(emit)/订阅模式(on)，通过向事件对象上添加监听器和触发事件来实现组件间通信。

react组件性能优化
1.使用纯函数：可以避免不必要的渲染。
2.PureRender：使用shouldComponentUpdate方法，让当前的props和state和之前的数据作对比。
3.immutable：不可变的数据，数据改变会创建新的数据，而不改变旧数据，既避免了浅拷贝的问题，也解决了深拷贝带来的性能问题。
4.key：为react组件里的数组数据添加key值，Virtual DOM diff会根据key值去更新渲染，避免了用下标(index)带来的重复渲染。

HOC和适用场景
高阶组件就一个组件嵌套另一个组件。

refs属性
Refs是能访问DOM元素或组件实例的一个函数

(44)redux
redux三大原则：单一数据源，状态只读，状态修改又纯函数完成
createStore是redux最核心的API.
通过store管理状态，创建一个store，返回：dispatch，subscribe，getState，replaceReducer
redux：将组件分为容器组件和UI组件，两个组件用connect连接。

redux如何将state绑定到组件上的
mapStateToProps()：将需要的state的节点注入到与此视图数据相关的组件上
mapDispatchToProps()：将需要绑定的响应事件注入到组件上
然后将state和事件一起绑定到组件上：export default connect(mapStateToProps, mapDispatchToProps)(DemoClass)
注：DemoClass是组件名

(45)flux

(46)vue生命周期
beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed
http请求一般在 created 里面，如果涉及到需要页面加载完成之后就在 mounted。

(47)vue数据双向绑定
订阅者和发布者&&数据劫持：初始化时所有的v-model会给属性添加一个Object.defineProperty()的get和set方法，同时也会添加一个watch，并且将该属性添加到订阅器中，当数据发生变化时，会通过调用set方法通知订阅者，订阅者去更新DOM，

vue组件间通信
1、父组件向子组件通信：props
2、子组件向父组件通信：事件传递
3、兄弟组件间传递：bus和事件发布/订阅
4、ref和refs：直接获取组件实例及属性
5、parent：直接获取父组件的实例及属性

(48)vuex(https://segmentfault.com/a/1190000015782272)
state：store.state
getter：store 中定义“getter”，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Actions：Action 提交的是 mutation，而不是直接变更状态。可以包含任意异步操作；
Mutation：mutation 都有事件类型 (type) 和 回调函数 (handler)。回调函数就是进行状态更改， state 作为第一个参数；
module：功能模块区分

(49)Angularjs2
组件化设计，使用typescript，rxjs

Angularjs2路由
angular内置的路由模块
const appRoutes: Routes = [
{
path:’’,// empty path匹配各级路由的默认路径。 它还支持在不扩展URL路径的前提下添加路由。
component: DashboardComponent
},{
path: ‘dashboard’,
component: DashboardComponent
}, {
path: ‘loopback’,
component: LoopbackComponent
}, {
path: ‘heroparent’,
component: HeroParentComponent
}, {
path:‘version’,
component: VersionParentComponent
}, {
path: ‘**’,// **代表该路由是一个通配符路径。如果当前URL无法匹配上路由中的路径，路由器就会匹配上这一个。
component: DashboardComponent,
}
];
export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);
HTML中的代码：
“dashboard”
“loopback”
“heroparent”
“version”

(50)typescript
typescript是JavaScript的一个超集。
typescript的特点：
1.类型批注和编译时类型检查：函数的参数设置类型批注以便在编译时进行类型检查。
2.类
3.模块化：module，可以import和export
4.接口 ：如下
interface Animal {
name: string;
}
5.箭头函数表达式：和ES6箭头函数类似

(51)git常用指令
回退代码：
git reflog：命令查看你的历史变更记录
git reset --hard 版本id：回退到相应的版本
git branch -D 分支名 ->删除本地分支
git push origin -d 分支名 ->删除远端分支

(52)Linux常用指令

(53)NODEjs的三大特性
1、非阻塞I/O
2、单线程
3、事件驱动

(54)restfulAPI
增加了put、delete等http请求方法
可以设置相应文件的格式：content-type:application/json;application/xml

(55)性能优化
减少DOM操作，多使用JS的innerHTML：
1.document.write(“Hello World!”)/document.write(“

Hello World!

”)
2.$(tbody).html(‘IE下tbody的innerHTML是只读的’);
3.document.getElementById(‘myAnchor’).innerHTML=“RUNOOB”;
复杂运算交给浏览器线程
尽量少定义全局变量,多使用原型对象
减少http请求次数
尽量不使用内联样式
图片预加载，图标尽量集成在一张图里
减少使用css表达式

(56)设计模式
工厂模式
单例模式
观察者模式
策略模式
代理模式

(57)less和sass
less和sass都是CSS预处理器。
区别：Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
变量：在Less和Sass中的唯一区别就是Less用@，Sass用美刀符。
sass：a. SASS允许使用变量，所有变量以美刀符开头
b.SASS允许在代码中使用算式:例如 margin: (14px/2);
c.可以使用嵌套
d.可以使用注释
e.可以继承（extend）
f.@mixin
g.import
h.条件语句，循环语句，自定义语句
less：a. 变量,所有变量以@开头
b. 继承、运算、函数

rxjs
RXjs是一种针对一部数据流的编程。rxjs将一切数据，包括http请求、dom事件或者普通数据等包装成流的形式。然后用强大丰富的操作符对流进行处理，使你能以同步的编程方式处理一部数据，并组合不同的操作符来轻松优雅的实现你的功能。
常用的操作符
1.合并操作符：forjoin、merge、concat等
2.常见操作符：of、from、fromPromise、fromEvent、ajax等
3.实例操作符：map、filter、take、timeout等

webpack
1.解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
2.注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
3.从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
4.在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
5.递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
6.输出所有chunk到文件系统。
entry： 一个可执行模块或库的入口文件。
chunk： 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。
loader： 文件转换器，例如把es6转换为es5，scss转换为css。
plugin ：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
webpack的功能：
1.包管理工具，
2.代码压缩打包工具
3.构建代码依赖关系

gulp原理
gulp的pipe方法是来自nodejs stream API的。gulp本身是由一系列vinyl模块组织起来的。
var s = gulp.src([“fileA”,“fileB”,“fileC”])；
src：是’vinyl-fs’模块的方法,选择一系列文件并创建可读流（readableStream）。既然是Stream，自然少不了最常用的pipe的方法。
s.pipe(fn)
pipe：传入一个fn，这个fn作用是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。
注意的是这个函数只是一个包装，并不是会直接操作文件的。
1.安装需要的依赖包，并在package.json 中生成标记和版本号
2.进入到gulpfile.js文件：内容为声明需要打包应用的gulp组件及打包文件路径和打包任务，执行打包的命令
3.生产打包后的压缩文件dist

从输入URL到页面加载全过程
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

库、插件、组件、控件、扩展
组件本质：封装。一定程度上可以约等于模块化，调用者只需关注输入和输出，总思想就是分而治之、重复利用。低耦合；
组件解决资源整合问题、增强功能促进开发效率。提高可维护性，便于协同开发，每个模块都可以分拆为一个组件，例如异步请求组件，路由组件，各个视图组件。
库：为解决某种特定需求的程序功能集合；即library，如jQuery，常用于方便dom操作、解决浏览器兼容等问题。
插件：参与程序内部运行环节的一段或多段代码集合；即Plugin，遵循一定规范写出来方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件，
扩展：使用程序API扩展程序适用面的一段或多段代码集合；即Extension，
组件：可重复使用并且可以和其他对象进行交互的对象；即Component，能复用的js代码其实跟插件差不多，区别可能就是插件专注于特定功能而组件更专注于复用吧。
控件：提供或实现用户界面功能的组件，控件即组件，反之不一定。即Control，

组件的封装
定义一个构造函数，函数内的变量必须是由外部传入的，然后实例化这个函数就可以了，这个构造函数就是一个组件。
class Animal{
constructor(name,age){
this.name = name;
this.age = age;
}
shot(){
console.log('my name is ’ + this.name,'age is ’ + this.age);
}
//静态方法
static foo(){
console.log(‘Here is static method’);
}
}
const cow = new Animal(‘James’,3);
cow.shot();
Animal.foo();

前端安全性问题（https://blog.csdn.net/a401461843/article/details/77622299/）
1、xss跨站脚本攻击：恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击.
解决方法：(1) 输入过滤。(2) 输出编码。(3) 安全编码。(4) HttpOnly Cookie。(5)WAF(Web Application Firewall)，Web应用防火墙
2、CSRF跨站请求伪造：CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账.
解决方案: (1) 验证码。(2) Referer Check。(3) Anti CSRF Token。
3、sql脚本注入：应用程序在向后台数据库传递SQL(Structured Query Language，结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令.
解决方案:(1) 防止系统敏感信息泄露。(2) 数据转义。(3) 增加黑名单或者白名单验证。
4、上传漏洞 ：由于文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型，导致允许攻击者向某个可通过 Web 访问的目录上传任意PHP文件，并能够将这些文件传递给 PHP 解释器，就可以在远程服务器上执行任意PHP脚本。
解决方案： (1)检查服务器是否判断了上传文件类型及后缀。 (2) 定义上传文件类型白名单，即只允许白名单里面类型的文件上传。 (3) 文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。

XSS与CSRF的区别
XSS 是获取信息，不需要提前知道其他用户页面的代码和数据包。 CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
CSRF 攻击的两个步骤：
1.登录受信任网站A，并在本地生成Cookie。
2.在不登出A的情况下，访问危险网站B。

前端数据加密
1.base64 ：var b = new Base64(); （加密）var str = b.encode(“admin:admin”); （解密）str = b.decode(str);
2.md5加密：var hash = hex_md5(“123dafd”);
3.sha1加密：var sha = hex_sha1(‘mima123465’)

babel编译原理
babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
babylon：js的词法解析器
babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用
babel-generator：根据AST生成代码
编译原理：babylon 将 ES6/ES7 代码解析成 AST，babel-traverse 对 AST 进行遍历转译，得到新的 AST，新 AST 通过 babel-generator 转换成 ES5。

AST
抽象语法树 (Abstract Syntax Tree)，是将代码逐字母解析成 树状对象 的形式。这是语言之间的转换、代码语法检查，代码风格检查，代码格式化，代码高亮，代码错误提示，代码自动补全等等的基础。

数组的方法
数组的for ，foreach，map，reduce的区别：map返回新的数组
map: 遍历数组，返回回调返回值组成的新数组
forEach: 无法break，可以用try/catch中throw new Error来停止
filter: 过滤
some: 有一项返回true，则整体为true
every: 有一项返回false，则整体为false
join: 通过指定连接符生成字符串
push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项
unshift / shift: 头部推入和弹出，改变原数组，返回操作项
sort(fn) / reverse: 排序与反转，改变原数组
concat: 连接数组，不影响原数组， 浅拷贝
slice(start, end): 返回截断后的新数组，不改变原数组
splice(start, number, value…): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)
数组乱序：var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];arr.sort(function () { return Math.random() - 0.5;});
数组拆解: flat: [1,[2,3]] --> [1, 2, 3]
Array.prototype.flat = function() { this.toString().split(’,’).map(item => +item )}

数组快速去重
1、es6的new Set()方式：[…new Set(array)]
2、es5的Array filter()：
栗子：
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
return index === Array.indexOf(elem);
})

XML 和 JSON 的区别
(1).数据体积方面。 JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。 JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。 JSON对数据的描述性比XML较差。
(4).传输速度方面。 JSON的速度要远远快于XML。

TCP三次握手四次挥手
TCP三次握手
1. 连接开始时，连接建立方(Client)发送SYN包，并包含了自己的初始序号a；
2. 连接接受方(Server)收到SYN包以后会回复一个SYN包，其中包含了对上一个a包的回应信息ACK，回应的序号为下一个希望收到包的序号，即a＋1，然后还包含了自己的初始序号b；
3. 连接建立方(Client)收到回应的SYN包以后，回复一个ACK包做响应，其中包含了下一个希望收到包的序号即b＋1。
TCP终止连接的四次挥手过程如下：
4. 首先进行关闭的一方（即发送第一个FIN）将执行主动关闭，而另一方（收到这个FIN）执行被动关闭。
5. 当服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。
6. 同时TCP服务器还向应用程序（即丢弃服务器）传送一个文件结束符。接着这个服务器程序就关闭它的连接，导致它的TCP端发送一个FIN。
7. 客户必须发回一个确认，并将确认序号设置为收到序号加1。

渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

网络分层里七层模型
应用层：应用层、表示层、会话层（从上往下）（ HTTP、FTP、SMTP、DNS ）
传输层（ TCP 和 UDP ）
网络层（ IP ）
物理和数据链路层（以太网）
物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）
数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

协议
ICMP协议 ： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
TFTP协议 ： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。
HTTP协议 ： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
DHCP协议 ： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。

表单的重复提交
前端方案：1，设置点击的flag，
2，设置点击后的disabled属性
后端方案：1，设置token，对比token