2.2页面加载过程
1.资源加载过程：URL->DNS查询->资源请求->浏览器解析
①URL结构：http://www.hhh.com:80/getdata?pid=1#title[协议://域名：端口/路径?参数#哈希]
②DNS查询：浏览器<--（ip）（域名）-->DNS缓存+DNS服务器 （dns-prefetch缓存）
③资源请求：浏览器<--（status+response-header+body）（request-header+参数（url、body））-->后端服务器
④浏览器解析：DOM--JS执行-->DOM-->渲染树-->布局-->绘制
2.3ES6常用语法
1.let变量，const常量（不能重复定义，块级作用域，不变量提升）
2.箭头函数：参数=> 表达式/语句、继承外层作用域、不能用作构造函数、没有prototype属性
3.反引号标识``、支持多行字符串、支持变量和表达式
4.Promise：Promise对象、关键词：resolve、reject、then
5.面向对象-类：关键词：class、语法糖：function、构造函数：constructor
面向对象-类的继承：extends：类的继承，super：调用父类构造函数，
面向对象-对象：对象里属性简写，对象方法简写，属性可以为表达式，其它扩展
2.5本地存储
1.cookie：①用户端保存请求信息的机制。②分号分隔的多个key-value字段。③存储在本地的加密文件里。④域名和路径限制。
字段：name:cookie名称，domain:cookie生效的域名，path:cookie生效的路径，expires:cookie过期时间，HttpOnly：用户端不可更改
2.session：①服务端保存请求信息的机制。②sessionId通常存放在cookie里。③会话由浏览器控制，会话结束，session结束。
3.localStorage：①H5新特性。②有域名限制，不存在作用域概念。③只有key-value。④没有过期时间。⑤浏览器关闭后不消失。
4.sessionStorage：①和localStorage相似。②浏览器关闭消失。
3-2前端框架要解决的问题
1.传统的原生开发方式的不足：代码层面、效率问题、多页应用问题
2.框架开发的不足：兼容性问题，SEO不友好、有场景要求，开发自由度降低、黑盒开发，框架本身有出错风险、有学习成本。
3.三大框架对比：angular：09年发布，Google；主要版本：1.x，2.x，4.x，5.x（beta）；基于html的大而全的MVC框架；
react：13开源，Facebook；最新版本：16.x；基于js的视图层框架；
vue：14开源，尤雨溪，阿里weex团队；主要版本：0.1x，1.x，2.x；基于html的视图层框架；
框架对比：angular react vue
组织方式：MVC 模块化 模块化
数据绑定：双向 单向 双向
模板能力：强大 自由 简洁
自由度 ： 较小 大 较大
路由： 静态路由 动态路由 动态路由
app方案：Ionic RN Weex
适用场景：后端开发构建CURD 前端开发构建复杂web 前端开发快速构建web
4.2git项目建立及配置：https://www.cnblogs.com/GuliGugaLiz/p/9484525.html
4.4webpack配置
1.需要处理的文件类型
html-->html-webpack-plugin
脚本-->babel+babel-preset-react
样式-->css-loader+sass-loader
图片/字体-->url-loader+file-loader
2.webpack常用模块
html-webpack-plugin,html单独打包成文件
extract-text-webpack-plugin,样式打包成单独文件
CommonsChunkPlugin,提出通用模块
3.webpack-dev-server
为webpack项目提供web服务；使用不便2.9.7；更改代码自动刷新，路径转发；yarn add webpack-dev-server@2.9.7 --dev;解决多版本共存问题
5.2初识react
1.视图层框架（只关注显示，不关注数据层）、组件化（不是继承模式）、JSX表达式（在html中加入了逻辑处理）、虚拟DOM（减少低效操作提高性能）
视图层框架：①一个构建用户界面的框架②声明式的框架③数据驱动DOM，再用事件反馈给数据
组件化开发：①组件组合而不是继承②state&&props③生命周期
JSX：①一直js扩展的表达式②带有逻辑的html
虚拟DOM:①对DOM进行模拟②比较操作前后的数据差异③如果数据差异，统一操作dOM
2优点：简洁、灵活、高效
3.缺点：思维转换、依赖生态、变动频繁
5.5React的生命周期
1.加载过程：constructor-->componentWillMount-->componentDidMount
2.更新过程：shouldComponentUpdate-->componentWillUpdate-->componentDidUpdate;如果是props更新组件执行componentWillReceiveProps来接受父组件传过来的props
3.组件销毁：componentWillUnmount
5.6Router原理及React-Router
1.Router原理：历史-->跳转-->事件
2.常见Router：页面Router(window.location.href='http://www.baidu.com')-->Hash Router(1.(window.location.href='#test1';2.window.onhashchange=function(){console.log(''current hash:),window.location.hash})-->H5 Router(1.history.pushState('test','Title','/index/test');2.history.replaceState('test','Title','/index/test) =>跳转到localhost：8080/index/test)
3.React-Router:<BrowserRouter>/<HashRouter>，路由方式；<Route>,路由规则；<Swithch>,路由选项；<Link/><NavLink>,跳转导航；<Redirect>,自动跳转
5.7React数据管理
1.依靠状态提升来和兄弟元素进行数据交互；通过发布订阅模式做数据交互；Redux等数据管理工具