SPA 与 MPA

• MPA

  MPA(multiple page application) 称为多页应用，指的的是多个页面的应用，从技术手段上来讲，你可以这么的粗略的理解

  • 首屏速度快:各个页面相互独立，需要单独维护多个html页面，每个请求都直接返回html
  • 切换页面比较慢: 基于原生浏览器的文档跳转(navigating across documents).因为每一次的页面更新都是一次重载，这将带来巨大的重启性能消耗。
  • 对SEO友好: 页面在初始时,就具有全部页面内容而非「无状态」,从而大搞更好的收录效果

• SPA

  SPA(sigle page application)称为单页应用。通过js去感知到url的变化，动态的将当前页面的内容清除掉，然后将在下一个页面的内容挂载到当前页面上。此时的路由不是后端来做了，而是前端来做，动态显示需要的组件。

  • 页面切换速度快:路由跳转是基于特定的实现(如vue-router,react-router等前端路由)，而非原生浏览器的文档跳转，避免了不必要的整个页面重载。
  • 前后端分离:基于前端路由，SPA与应用后端解耦，使得前端不在依赖于后端的路由分配
  • 首屏时间慢: 首屏除了html还要额外请求病执行js文件，通过js在页面上渲染首屏。
  • SEO不友好: 内容都是靠js渲染生成出来的，但搜索引擎并不是别这部分内容，导致SEO效果差

• DAU(Daily Active User)，日活跃用户数量

• PV(page view, 页面浏览量)

  用户每打开1个网站页面，记录1个PV.用户多次打开同一个页面，PV值累计多次。主要用来衡量网站用户访问的网页数量。是评价网站流量最常用的指标之一

• UV(Unique visitor，网站独立访客)

  通过互联网访问、流量网站的自然人。1天内相同访客多次访问网站，只计算为1个独立访客。该概念的引入，是从用户个体的角度对访问数据进行划分

• IP(独立IP)

  一天之内，访问网站的不重复的IP数。拥有特定唯一IP的计算机访问网站的次数，因为这种统计方式比较容易实现，具有较高的真实性

• VV(video view,视频播放量)

  一个统计周期内，视频被打开的次数

• CV(content views, 内容播放数)

  一个统计周期内，视频要被打开，且视频整片内容(除广告)被成功播放的次数

• QPS

  QPS: Queries Per Second 意思是 每秒查询率，是一台服务器每秒能够相应的查询次数，是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准

文章导图

前端框架

Vue

手写minni版的MVVM框架

实现效果：2s后修改姓名和年龄这两个值，页面响应式更新渲染

实现流程

1. 实现 observer函数，利用Object.defineProperty把data中的属性变成响应式的，同时给每一个属性添加一个dep对象(用来存储对应的watcher观察者)
2. 定义compile函数，模板编译，遍历DOM，遇到mustache(双大括号{{}})形式的文本，则替换成data.key对应的值，同时将该dom节点添加到对应key值的dep对象中
3. 当data的数据变化时，调用dep对象的update方法，更新所有观察者中的dom节点

算法

如何学习算法

1. 先掌握对应的数据结构

   以面试中最常见的二叉树为例

   先了解如何创建一个二叉树，通过创建的过程，加深对该数据机构的理解

2. 分类练习

   分类练习，即按照每种数据结构进行统一练习

   例如:这段时间只练习二叉树的题目，通过集中的训练，对二叉树有整体的认知。了解前、中、后序遍历的特点，了解二叉搜索树，了解各种题型等体系知识

算法基础知识

• 时间复杂度

  表示代码执行的次数，时间与算法中语句执行次数成正比例，哪个算法中执行语句次数多，它花费的时间就越长，时间复杂度是取代码中最复杂的代码来计算的

  时间复杂度按时间的大小，从小到大排序依次是：O(1) < O(logn) < O(n) < O(nlogn) < O(n²) < O(n³) < O(2ⁿ) < O(!n)

• 空间复杂度

  在算法运算过程中用到的额外的存储空间(不包含原始值的内存大小)，反映的内存占用的趋势，而不是具体内存

  最经典的场景:就是利用空间去换时间，降低时间复杂度，减少计算时间