recent_Report
const定义的对象是否可以改变？ 是
基本数据类型：
基本数据类型保存在栈中，同时它的值也直接保存在栈中，
值与值之间相互独立，修改一个变量不会影响其他变量。
引用数据类型：
引用数据类型是同时保存在栈内存和堆内存中的对象，
栈区保存了指向堆区的地址。
const 声明的只是在栈区不可变；引用数据类型保存在栈区的地址不可变。
因此给一个对象其中的属性值重新赋值是可以的，
但给这个对象本身重新赋值是不可以的，
因为那样会改变该对象的地址。
语义化
概念：
使用合适的 HTML 标签和属性去呈现页面的的语义/解构。
例如段落使用 p 标签，段落使用 h1-h6等。
优点：
没有 css 的情况，整个页面也可以呈现很好的语义解构。
增强代码可读性，利于团队合作。
有利于增强用户体验。
有利于 seo 搜索引擎优化、利于爬虫标记。
前端组件化开发
传统开发模式下，往往是把前端网页代码和后端代码糅合在一起，利用某种技术(如JSP、ASP、PHP)。
在这种开发模式下，网页的每次改动都需要前后端共同参与才能完成，
这样有非常大的沟通成本，且效率低下。
现在流行前后端分离的开发模式，
后端只负责给前端提供数据，前端负责页面渲染和交互。
前端为什么要进行组件化开发
组件化可以使页面的各个部分可以吧被复用，减少重复代码；
另一方面也可以更好的使团队分工合作，让不同的人编写不同的组件。
前端可以借助一种框架来进行组件化开发，例如 (vue、 react angluar),
此时，网页不再是由一个个独立的css、html, javascript组成的了，
而是利用组件的思想将网页划分成一个个组件。
如： 轮播图组件、列表组件、搜索组件，导航栏组件等，
将这些组件拼装在一起，就形成一个网页。
mpa多页面应用
纯服务端渲染， 像使用jsp,jade,'ejs','tempalte' 等技术在后端生成对应的html解构，
然后转换成字符串，在每个对应的路由返回对应的数据(不管是页面渲染数据html等内容或是要展示的数据库数据)。
Jade模版服务端渲染，代码实现：
const express= require('express')
const app = express()
const jade = require('jade')
const result = ***
const url path = ***
const html = jade.renderFile(url, { data: result, urlPath })
app.get('/',(req,res)=>{
res.send(html)
})
app.listen(3000,err=>{
})
优点：
1. seo优化好，因为返回给前端的都是渲染好的html结构，里面的内容都可以被爬虫抓取到。
2. 对于一些性能要求不高的项目，内容不多的情况下直接一把梭就好，不用再搭建工程化的环境。
3. 对于后端来说，不用特意去学习前端。
4. 兼容性好，传统服务端渲染出来的都是字符串，html结构。
缺点：
1.如果项目很大，不利于维护。有些云计算公司，有不少使用的是非spa应用，例如一个几十万行的jquery项目，
如果文档和注释不是很全，真的无从下手。
2. 性能和用户体验，无法和spa比拟。
3. 后期迭代，升级空间不大。
4. 目前详ant-design-pro这样的库很多，单页面应用学习成本很低。
spa单页面应用
概念：
只有一个页面的web应用，单页面跳转仅刷新局部资源，公共资源(css，js等)仅加载一次，
常用于pc端官网，购物等网站。
单页面应用的路由跳转：
1. 浏览器的url地址发生变化，但实际上并没有发送请求，也没有刷新整个页面
2. 根据配置的路由信息，每次点击切换路由，展示不同的页面，实际上是类似于选项卡的切换，div的显示隐藏，
但同时地址栏会发生变化。
3. 分为HashRouter和BrowserRouter两种模式
优点：
1. 用户体验好，快，单页面应用内容的改变不需要重载整个页面，只是局部刷新，服务器压力小。
2. 前后端分离，前端页面会比较炫酷(比如页面切换时的转场动画)。
3. 如果通过大量极致优化的手段，是可以从不少方面和原生有得一拼的。
4. 共用一套后端程序代码。
缺点：
1. 不利于seo
2. 首次加载耗费时间多。
3. 导航不可用，如果要导航需要自行实现前进后退。
参考资料： https://segmentfault.com/a/1190000019936510 思否
https://zhuanlan.zhihu.com/p/92407628 知乎
https://blog.csdn.net/cmzhuang/article/details/94334619 csdn
未完待续....
后续补充单页面应用带来问题的优化方案。。。。。
bfc
概念：
Block Formattijng Context (块级格式化上下文 / bfc)
BFC指页面中一个独立的块级渲染区域 (只有块级元素有)， 该区域有一套渲染规则。
生成BFC:
1. 根元素
2. 设置以下元素灰生成 BFC:
display: inline-block;
float: left / right
overflow: hidden / auto / scroll
position: absolute / fixed
BFC特性
1. 内部标签会在垂直方向一个接一个的放置。
2. 垂直方向上的距离 margin 决定, 属于同一个BFC的两个相邻元素的margin 会发生重叠。
3. 每个标签的左外边距与包含块的左边界相接触 (从左向右)， 即使浮动标签也是如此。
4. BFC的区域不会与float 的标签区域重叠。
5. 计算BFC高度时，浮动子标签也参与计算。
6. BFC 就是页面上的一个隔离的独立容器， 容器里面的子标签不会影响到外面的标签，反之亦然。
BFC解决的问题
1. 边距折叠问题
根据特性2， 垂直方向上的距离由margin 决定，属于同一个BFC的两个相邻元素的 margin 会发生重叠，
因此兄弟元素的外边距灰出现塌陷问题。
解决： 根据特性6，给其中一个兄弟元素套一个父盒。
2. 自适应两栏或三栏布局，父元素高度塌陷
自适应两栏布局，左侧设置固定宽度(同时设浮动)，右侧宽度自适应，此时父元素没有设置高度，父元素就会塌陷。
解决： 根据特性4 让标签处于一个新的 BFC
3. 防止文字环绕
浮动的盒子会遮盖下方的盒，但下方盒子的文字不会被遮盖，这时文字灰环绕在浮动盒子的周围。
4. 清除浮动， 给父元素添加 overflow: hidden 清除浮动 (特性5)
参考资料： https://blog.csdn.net/sinat_36422236/article/details/88763187 csdn
Vue keep-alive
keep-alive 是vue提供的一个抽象组件，用于对组件进行缓存，从而节省性能，
在v页面渲染完毕后不会被渲染成一个dom元素。
当组件在 keep-alive 被切换时，组件的activated、deactivated这两个生命周期钩子函数会被执行。
****被包裹在 keep-alive 的组件状态会被保留，例如我们将组件滑到100条的位置，
那么当我们切换到另一个组件，再次切回这个组件时，该组件的状态位置依然会保留在100条的位置。
