图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。

懒加载的思路及实现代码详见js实现图片懒加载原理

常见的有：article、aside、audio、video、footer、header、nav、section

H5新特性有： 用于媒体回放的video和audio元素 对本地离线存储的更好的支持 新的特殊内容元素，如article、footer、header、nav、section

简单地说，它更标准，提供更多的多功能支持。更标准、更可读性、更好的性能和更方便的执行。

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素：span, strong, em, br, img , input, label, select, textarea, cite

SVG

表示以XML格式定义图像的可伸缩矢量图形。

CANVAS

通过 JavaScript 来绘制 2D 图形。

二者比较

标签fill属性设置即可

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D,3D转换如transform等；CSS3动画如animation等。

是RGB颜色模型的一个扩展。本质上，在设置元素中添加了一个alpha通道，即一个表示除红色、绿色和蓝色三种颜色之外的透明度的通道。

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注：所有主流浏览器都支持 word-wrap 属性。

基础语法：

text-shadow 属性：向文本设置阴影。

text-shadow基础语法：

参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；

font-face属性：定义自己的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。

基础语法：

注：该属性允许您为元素添加圆角边框！

border-image：将图片规定为包围 div 元素的边框

border-image基础语法：

box-shadow属性：向框添加一个或多个阴影。（盒阴影）

box-shadow基础语法：

媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

2.块级元素的水平居中 ①将该块级元素左右外边距margin-left和margin-right设置为auto。 ②使用table+margin 先将子元素设置为块级表格来显示（类似），再将其设置水平居中。 display:table在表现上类似block元素，但是宽度为内容宽。 ③使用absolute+transform 先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。 不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。 ④使用flex+justify-content 通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。 ⑤使用flex+margin 通过flex将父容器设置为为Flex布局，再设置子元素居中。

3.多块级元素水平居中 ①利用flex布局 利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示。 ②利用inline-block 将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

4.浮动元素水平居中 对于定宽的浮动元素，通过子元素设置relative + 负margin 对于不定宽的浮动元素，父子容器都用相对定位 通用方法(不管是定宽还是不定宽)：flex布局

1.多行内联元素垂直居中 ①利用flex布局（flex） 利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。 ②利用表布局（table） 利用表布局的vertical-align: middle可以实现子元素的垂直居中。

2.块级元素垂直居中 ①使用absolute+负margin(已知高度宽度) 通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。 ②使用absolute+transform 当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。 ③使用flex+align-items 通过设置flex布局中的属性align-items，使子元素垂直居中。 ④使用table-cell+vertical-align 通过将父元素转化为一个表格单元格显示（类似 和 ），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

1、绝对定位+CSS3(未知元素的高宽) 利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。 CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。 2、flex布局 利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。 3、flex/grid与margin:auto(最简单写法) 容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

配置默认根字号、默认字号、默认设计稿宽度，然后使用postcss插件将代码中的px自动转换成rem，这种方法可以完成使用1080p设计稿再不同手机下的适应方案，所有元素大小均按照1080p下的大小来定义px。配置上述插件后，px单位在编译后会默认转为rem单位，如果不需要被转换，可以将小写的px改成大写的PX或Px。取消使用viewport.js文件，如果遇到不能适配的公共组件，则拷贝一个新的版本，适配新的方案，逐步淘汰老版本。

针对Android4.4以下版本，全部使用rem单位兼容方案，并在head标签内添加脚本重写html根字号的大小，1080p下为100px。并且针对受影响的公共组件写出兼容性代码。

给谁清除浮动，就在其后额外添加一个空白标签 。 优点：通俗易懂，书写方便。（不推荐使用） 缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

可以通过触发BFC的方式，实现清楚浮动效果。 优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦） 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

after方式为空元素的升级版，好处是不用单独加标签了。 优点：符合闭合浮动思想，结构语义化正确 缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

注意：这个也是给父亲添加 clearfix

注意：是给父亲添加clearfix

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。

支持ie 11+

原型链继承

父类的实例作为子类的原型

借用构造函数继承（伪造对象、经典继承）

复制父类的实例属性给子类

实例继承（原型式继承）

组合式继承

调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

寄生组合继承

通过寄生的方式来修复组合式继承的不足，完美的实现继承

es6 extends继承

代码量少，易懂

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this

原型链，简单理解就是原型组成的链，对象的proto它的是原型，而原型也是一个对象，也有proto属性，原型的proto又是原型的原型，就这样可以一直通过proto想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

值类型(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：

对象(Object)、数组(Array)、函数(Function)。

1、使用set

2、使用 filter()

3、使用 reduce()

深拷贝

1、最简单的方法就是JSON.parse(JSON.stringify（））

需要注意的是：这种拷贝方法不可以拷贝一些特殊的属性（例如正则表达式，undefine，function）

2、用递归去复制所有层级属性

浅拷贝

object.assign(target,source)

debounce和throttling 各有特点，在不同 的场景要根据需求合理的选择策略。如果事件触发是高频但是有停顿时，可以选择debounce； 在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。

具体实现方法详见：二叉树遍历的几种常见方法

二维数组时，可以简单使用flat()方法

let arr = [[1,2],[3,4],[5,6]];

如果是多维数组，则flat()将达不到效果，

需要给flat()传一个参数，var newArray = arr.flat([depth])，

参数：depth ，可选，指定要提取嵌套数组的结构深度，默认值为 1。

迭代实现 （ES6扩展运算符…）

普通递归实现

高级递归（reduce方法）

toString()

该方法利用了 toString 把数组变成以逗号分隔的字符串，然后可通过遍历数组把每一项再变回原来的类型。

[].concat.apply

详情见，promise.all()

可参考常用的18个webpack插件总结

1、Query.extend(Object);　　　// jQuery 本身的扩展方法 2、jQuery.fn.extent(Object);　 // jQuery 所选对象扩展方法

css盒模型本质是一个盒子，它由边距、边框、填充和实际内容组成。盒模型能够让我们在其他元素和周边元素边框之间的空间放置元素。

标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

跨域解决方法：

详情见：前端需知道的常见登录鉴权方案

常见状态代码、状态描述、说明：

在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。

第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认； SYN：同步序列编号(Synchronize Sequence Numbers) 第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态； 第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。

完成三次握手,客户端与服务器开始传送数据

详情见：前端性能优化方案都有哪些？

详情见：项目之间Cookie的共享

还有localStorage，sessionStorrage，indexDB等

cookie和localStorage的区别：

cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递

cookie数据还有路径概念，可以限制。cookie只属于某个路径下

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，都以cookie只适合保存很小的数据，如会话标识。

localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭。

实际程序开发当中，我们代码中用的值是指逻辑分辨率pt，而不是像素分辨率px，比如我们定义一个按钮的告诉为45，这个45指的是45pt而不是45px。在非Retina屏下1pt=1px，4和4.7Retina屏下1pt=2px，5.5和x下1pt=3px。我们制作不同尺寸的图片，比如@1x为22px，则@2x为44px，@3x为66px，命名分别为image.png，在项目的Assets.xcassets中新建New Image Set，修改名字为image，并把相应尺寸的图片拖放至相应位置。

这个问题是devicePixelRatio的不同导致的，因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，所以苹果系统当初酒把iphone4的960x640像素的分辨率在网页里改为480x320像素，这devicePixelRatio=2。而Android的devicePixelRatio比较乱，值有1.5、2和3.为了在手机里更为清晰地显示图片，必须使用2倍宽高的背景图来代替img标签（一般情况下都是用2倍）。

例如一个div的宽高是100PX x 100PX，背景图必须是200PX x 200PX，然后设置background-size：contain样式，显示出来的图片酒比较清晰了。

通过定时器实时监听是否触发input。如果触发input框，就把固定定位改为静态定位。这样就会把内容顶上去。

Element.srollIntoView():方法让当前的元素滚动到浏览器窗口的可视区域内。

300ms延迟导致用户体验不好。为了解决这个问题，一般在移动端用touchstart、touchend、touchmove、tap（模拟的事件）事件来取代click事件。

方案二：FastClick

FastClick是FTLabs专门为解决移动端浏览器300ms点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即触发膜牛一个click事件，并把浏览器在300ms之后的click事件阻止掉。

说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？

使用touchstart去代替click事件有两个不好的地方。

第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；

第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。

什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click元素。

这是因为在移动端浏览器，事件执行的顺序是touchstart>touchend>click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

通过以下代码设置样式：

dpr=物理像素/css像素

在dpr=2；1px的css像素在设备中是2px的物理像素，这会导致在设备上看上去1px的边框是2px

解决方法：

用transfrom：scale（）缩小dpr倍数

在meta标签中设定scale缩小两倍

上下拉动滚动条时卡顿、慢

通过以下代码设置样式：

通过以下代码设置样式：

移动端:active伪类无效的解决方法

简单说 CSS中的mask-好好利用mask-image

// 设置内连的元素在3D空间如何呈现：保留

3D-webkit-transform-style：preserve-3D;

// 设置进行转换的元素的背面在对面用户时是否可见：隐藏

-webkit-backface-visibility：hidden；

通过background-clip：padding-box为失效的元素设置样式。

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过 object.defineproperty劫持各个属性的setter和gettr，在数据 变动时发布消息给订阅者，触发相应的的监听回调。

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

beforeCreate, created, beforeMount, mounted

父组件在执行到beforeMount就开始初始化兄弟组件A，兄弟组件A同样执行到beforeMount就初始化兄弟组件B,当兄弟组件B执行beforeMount完的时候，兄弟组件A才开始挂载。在父兄子组件挂载前，各组件的实例已经初始化完成。

计算属性computed :

侦听属性watch：

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是watch和computed最大的区别。

Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏。

解决办法：

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

也就是说，kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存。

均衡页面加载文件的大小和数量

14天考研高分特训营（内赠5G备考干货+1V1定制规划+14节精讲课等）

¥1.00已失效

减少等待通过xhr获取数据的时间

通过交互，在视觉效果上提升

善用vue的一些属性

将项目根据业务和模块，改造为多页面，而不是紧靠单页面支撑

代码优化

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持：Promise，而IE并不支持Promise。

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。

vue适用的场景：复杂数据操作的后台页面，表单填写页面

jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求。

MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

～可以讲出自己封装过的组件，或者是团队协作时其他大佬封装的组件，前提是只要你能说清楚。

不会，一个vue文件操作后，另外一个vue文件操作时，变量的值还是原来的（建议动手验证一下～）

概念

EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。

eventbus应用，详情见eventbus使用详情介绍

注：只不过在vue中已经替我们实现好了$emit,$on这些方法，所以直接用的时候去 new Vue()就可以了.

响应式优化。

1.defineProperty API的局限性最大原因是它只针对单例属性做监听。vue2.x中的响应式实现是基于defineProperty中的descriptor，对data中的属性遍历+递归，为每个属性设置了getter、setter。这也就是为什么vue只能对data中预定义的属性做出响应的原因，在vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到settter监听的，这是defineProperty的局限性。

2.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

3.响应式是惰性的。在vue2.x中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归便利这个对象，执行Object.defineProperty把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。在vue3.0中，使用Proxy API并不能监听到对象内部深层次的属性变化，因此它的处理方式是在getter中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单可以说是按需实现响应式，减少性能消耗。

1.生成 Block tree。vue2.x的数据更新并触发渲染的粒度是组件级的，单个组件内部需要遍历该组件的整个vnode数。在2.0里，渲染效率的快慢与组件大小成正相关。并且，对于一些静态节点，又无数据更新，这些遍历都是性能浪费。

vue3.0做到了通过编译阶段对静态模版的分析，编译生成了 Block tree。Block tree是一个将模版基于动态节点指令切割的嵌套区块，每个区域内部的节点结构是固定的，每个区块只需要追踪自身包含的动态节点。所以，在3.0里，渲染效率不再与模版大小成正相关，而是与模版中动态节点的数量成正相关。

2.slot编译优化。在vue2.x中，如果一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件uplate，造成性能浪费。

vue3.0优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。

3.diff算法优化

权限验证 | vue-element-admin

vue的数据劫持有两个缺点：

所以vue2.x中才会有$set属性的存在

proxy是set中推出的新api，可以弥补以上两个缺点，所以vue3.x版本用proxy替换object.defineproperty。

关于react

React对比Angular是思想上的转变，它并不是一个库，是一种开发理念，组件化，分治的管理，数据与view的一体化，它只有一个中心，渲染view，对于虚拟dom它并没有提高渲染页面的性能，它提供更多的是利用jsx便捷生成dom元素，利用组件概念进行分治管理页面每个部分

中间件提供第三方插件的模式，自定义拦截action->reducer的过程，变为action->middlewares->reducer。这种机制可以让我们改变数据流，实现如异步action，action过滤，日志输出，异常报告等功能。

常用的中间价：redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise

根据组件的职责通常把组件分为UI组件和容器组件。UI组件负责UI的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux提供connect方法联系起来。

一、初始化阶段：

getDefaultProps：获取实例的默认属性

getInitialState：获取每个实例的初始化状态

componentWillMount：组件即将被装载、渲染到页面上

render：组件在这里生成虚拟的DOM节点

componentDidMount：组件真正在被装载之后

二、运行中状态：

componentWillReceiveProps：组件将要接收到属性的时候调用

shouldComponentUpdate：组件接受到新属性或者新状态的时候（可以返回false， ️数据后不更新，阻止render调用，后面的函数不会被继续执行了）

componentWillUpdate：组件即将不能修改属性和状态

render：组件重新描绘

componentdidUpdate：组件已经更新

三、销毁阶段：

componentwillUnmount：组件即将销毁

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。

简述flux思想

Flux的最大特点，就是数据的“单向流动”。

Refs可以用于获取一个DOM节点或者React组件的引用。何时使用refs的好的示例you管理焦点/文本选择，触发命令动画，或者和第三方DOM库集成。你应该避免使用String类型的Refs和内连的ref回调。Refs回调是React所推荐的。

因为this.props和this.state的更新可能是异步的，不能依赖它们的值去计算下一个state。

Props down

model是Angular开发中的基本单位，是一个容器，可以包含组件、指令、管道等Component是可被反复使用的带有特定功能的视图

Templates是经过指令和管道、组件等增强过的html

Bindings结合着事件绑定、属性绑定、双向数据绑定等扩展html的功能

Directives分为结构性和属性型指令还有其他模块中比如路由模块中的指令等，主要是增强html

Pipes可以对数据做一个筛选、过滤、格式化从而得到目的数据

Service将组件、应用中的可共用的部分，比如数据或者方法等封装成服务以方便DependencyInjection依赖注入

ngOnChanges：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

ngOninit：在第一个ngOnChange触发之后，初始化组件/指令。这是嘴常用的方法，用于从后端服务检索模版的数据。

ngDoCheck:检测并在Angular上下文发生变化时执行。

每次更改检测运行时会被调用。

ngOnDestroy：在Angular销毁指令/组件之前消除。取消订阅可观察的对象并脱离事件处理程序，以避免内存泄漏。

组件特定的hooks：

ngAfterContentInit：组件内容已初始化完成

ngAfterContentChecked：在Angular检查投影到其视图的绑定的外部内容之后。

ngAfterViewInit：Angular创建组件的视图后。

ngAfterViewChecked：在Angular检查组件视图的绑定之后

Angular应用程序具有路由服务的单个实例，并且每当URL改变时，相应的路由就与路由配置数组进行匹配，在成功匹配时，它会应用重定向，此时路由器会构建ActivatedRoute对象的数，同时包含路由器的当前状态。在重定向之前，路由器将通过运行保护来检查是否允许新的状态。Route Guard只是路由器运行来检查路由授权的接口方法。来激活路由器状态。

Rxjs是在微软所提供的一种异步处理数据的方式，在angular中处理网络通信时用到了。创建一个Observabe并subsribe

比如：this.http.get('').subscribe((data)=>{})

SVN优缺点

优点：

缺点：

优点：

缺点：

内容安全策略 ([CSP])) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS (en-US)) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

CSP 被设计成完全向后兼容（除CSP2 在向后兼容有明确提及的不一致; 更多细节查看这里 章节1.1）。不支持CSP的浏览器也能与实现了CSP的服务器正常合作，反之亦然：不支持 CSP 的浏览器只会忽略它，如常运行，默认为网页内容使用标准的同源策略。如果网站不提供 CSP 头部，浏览器也使用标准的同源策略。

为使CSP可用, 你需要配置你的网络服务器返回 Content-Security-Policy HTTP头部 ( 有时你会看到一些关于X-Content-Security-Policy头部的提法, 那是旧版本，你无须再如此指定它)。

除此之外, 元素也可以被用来配置该策略, 例如