1.熟练应用HTML+CSS进行布局与重构，熟练应用flex布局和响应式布局
flex布局
display: flex;
flex-direction: row || row-reserve || column || column-reserve;
flex-wrap: nowrap(不换行) || wrap（从左到右换行） || wrap-reverse（从右到左换行）;
flex-flow: row nowrap;（flex-direction和flex-wrap的集合）
justify-content: flex-start || flex-end || center || space-between || space-around;
flex-grow: 5;（该项的占比）
flex-basis: 120px;与flex-shrink: 1; 结合使用
响应式布局：
(1)百分比布局
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样？
子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样，子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度
(2)vw/vh
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
与百分比布局很相似，但更好用。
(3)rem
rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。
//动态为根元素设置字体大小
function init () {
// 获取屏幕宽度
var width = document.documentElement.clientWidth;
// 设置根元素字体大小。此时为宽的20等分
document.documentElement.style.fontSize = width / 20 + 'px';
}
2.熟练应用js异步操作，了解其发展历程以及优缺点
ajax，promise，Generator，async await
ajax缺点： 1.书写起来层层嵌套；2.有网络延迟；
Generator是promise的一包装，缺点: Generator执行时需要执行器，*和yield，put，select等等函数操作，使用起来麻烦
async await是Generator的语法糖，内置了执行器，书写时比较方便，返回的是一个promise对象；
3.熟悉浏览器的安全机制，渲染机制，事件机制和缓存机制
安全机制： 同源策略
同源策略是浏览器对 JavaScript 进行跨域访问的安全策略
同源策略的条件：协议域名端口号，三者都保持一致
解决跨域的方法：
1.jsonp，script标签中加入js路径;
2.跨域资源共享CROS解决跨域：浏览器发现是跨域请求，就会自动在请求头中加上Origin字段，代表请求来自哪个域（协议+主机名+端口号）。服务器在收到请求后，根据请求头中Origin字段值来判断是否允许跨域请求通过。具体实现方法是：在响应头Access-Control-Allow-Origin字段中设置指定的域名，表示允许这些域名的跨域请求。如果请求头中Origin字段的域名包含在这些域名中，则可以实现跨域请求（当然有时候还需要结合其他字段来判断），否则不通过。
浏览器攻击方式：XSS，CSRF
XSS是黑客在浏览器中注入脚本，获取用户cookie数据的一种手段；
CSRF是黑客通过引诱方式诱导用户进入到黑客自己开发的网页中来获取用户信息；
渲染机制：
（1）静态渲染（初始化渲染） HTML解析器解析html为htmlDom树，css解析器解析css为cssDom树，这两个dom树结合成渲染树，就是renderTree，根据就是renderTree进行渲染和展示，如果遇到javascript对dom进行修改（添加dom或者删除dom），就会执行javascript的操作，直到执行结束；
（2）动态渲染（用户操作渲染）用户点击页面操作，比如改变背景色，叫重绘，如果改变某个dom结构，比如增加或者减少某个div，叫回流，回流必会引起重绘，重绘不一定引起回流。
4.了解前端状态管理的发展历程，熟练掌握vuex和redux的设计思想
redux设计思想
- Web 应用是一个状态机，视图与状态是一一对应的。
- 所有的状态，保存在一个对象里面（唯一数据源）。
redux流程
1.store通过reducer创建了初始状态 2.view通过store.getState()获取到了store中保存的state挂载在了自己的状态上 3.用户产生了操作，调用了actions 的方法 4.actions的方法被调用，创建了带有标示性信息的action 5.actions内部通过调用store.dispatch方法将标志性的action发送到了reducer中 6.reducer接收到action并根据标识信息判断之后返回了新的state 7.store的state被reducer更改为新state的时候，store.subscribe方法里的回调函数会执行，此时就可以通知view去重新获取state
subscriptions: {
setup: Subscription
}
reduce是纯函数
reducers: {
save(state: any, action: any): NlcrsModelState
}
reducer是state最终格式的确定。它是一个纯函数，也就是说，只要传入参数相同，返回计算得到的下一个 state 就一定相同。
没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。 reducer对传入的action进行判断，然后返回一个通过判断后的state，这就是reducer的全部职责
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。
不得改写参数
不能调用异步的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
vuex
利用state，mutations，actions对store数据进行管理；
this.$store.dispatch(action中的异步方法，params); 触发modules中的action的异步方法，获取接返回的数据后保存在state中
this.$store.commit(mutations中的同步方法，params); 触发modules中的mutations同步方法，获取接返回的数据后保存在state中
组件中this.$store.state.data;来获取store中的state的数据；
5.比较有成就感的事情：
斑马平台搭建：没有通用的store仓库，每一个模块都是一个独立的gitlab项目，通过window.customerEvent实现数据通知；
小程序mock工具，以接口维度实现mock，哪个接口走mock，哪个接口走预发；
小程序ui自动化，tiga框架搭建；
点亮游戏的一些动效，拍照动效，卡片点亮动效
6.hash路由和history路由
1.原理不同
hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。
history模式开发的SPA项目，需要服务器端做额外的配置，history模式是通过pushState方法+popstate事件来实现的。否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
2.表现不同
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。
3.总结 单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
