前端知识点one

听说最近很多人在面试，我也去搜集了一些面试题，自己整合了一下，希望对大家有帮助😁话不多说,上题👀

• 说说对TypeScript中命名空间与模块的理解以及它们之间的区别
  ㈠ 模 块
  TypeScript与ECMScript2015一样，任何包含顶级import或export的文件都被当成一个模块。相反的，如果一个文件不带有顶级的import或export声明，那么它的内容就被视为全局可见了。
  ㈡ 命 名 空 间
  命名空间定义了标识符的可见范围，一个标识符可以在多个名字空间中定义，它在不同名字空间中的含义是互不相干的(这样在一个新的名字空间中可定义任何标识符，也不会与其他任何已有的标识符起冲突)。而命名空间最明确的目的就是解决重名问题，命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象属性中。
  ㈢ 区 别
  ①命名空间是位于全局命名空间下的一个普通的带有名字的JavaScript对象，虽然用起来容易，但它很难去识别组件之间的依赖关系。
  ②命名空间和模块一样可以包含代码和声明，但是模块可以声明它的依赖
  ③在一般的TS项目开发过程中不建议使用命名空间，通常在通过d.ts文件标记js库类型的时候就要用命名空间了，主要是未来给编译器编写代码的时候作参考。

• IconFont的原理是什么？
  IconFont的使用原理是来自于css的@font-face属性，此属性用于定义一个新字体，具体用法如下：

@font-face{
font-family：字体名称 
src：路径
font-weight：加粗字体
font-style:字体样式}

• 虚拟Dom一定更快吗？
  不一定更快，DOM操作是性能杀手，因为操作DOM会引起页面的回流或重绘，相比起来，通过多一些预先计算来减少DOM的操作要更划算。
  通常所说的虚拟DOM是通过JS对象模拟出来的DOM节点，domDiff是通过特定算法计算出来的一次操作所带来的DOM变化。在react和Vue中都使用了DOM，而react中涉及的虚拟DOM的代码主要分为三部分：
  ①把render中jsx或createElement这个API转化成虚拟DOM。
  ②核心：状态或属性改变后重新计算虚拟DOM并生成一个补丁对象（domDiff）。
  ③通过这个补丁对象更新视图中的DOM节点。

• SSR是什么？
  ⒈SSR（Server-Side Rendering）服务器渲染：由服务侧完成页面HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。
  web有三个阶段发展史：传统服务端渲染SSR，单页面应用SPA，服务端渲染SSR。
  Vue SSR是一个在SPA上进行改良的服务端渲染，而通过Vue SSR渲染的页面，需要在客户端激活才能实现交互。
  ⒉SSR主要解决了两种问题：
  ①seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务相关联的HTML，有利于seo。
  ②首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到服务器，需要权衡哪些用服务器端渲染，哪些交给客户端）。
  使用SSR存在的缺点：
  ⅰ复杂度：整个项目的复杂度。
  ⅱ库的支持性，代码兼容问题。
  ⅲ性能问题：①每个请求都是n个实例创建，不然会污染，消耗会变大②缓存node serve、nignx判断当前用户有没有过期，如果没有过期则缓存③降级：监控CPU、内存占用过多，就SPA，返回单个的壳。
  ⅳ服务器负载变大，相对于前后端分离器只需要提供静态资源来说，服务器负载更大，需要慎重使用。
  所以在选择使用SSR前需要考虑这两个问题：①需要seo的页面是否只是少数几个，这些是否可以使用预渲染实现②首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

• TCP与UDP的区别是什么？
  概念：
  TCP是面向连接的、可靠的留协议，流是指不间断的数据结构。TCP为提供可靠性传输，实行“顺序控制”或“重发控制”机制，此外还具备“流量控制”、“拥塞控制”、提高网络利用率等众多功能。它充分的实现了数据传输时各种控制功能，可以进行丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。
  UDP是不具有可靠性的数据报协议，不提供复杂的控制机制。它是将应该程序发来的数据在接收到的那一刻，立即按照原样发送到网络上的一种机制。细微处理它会交给上层的应用去完成。在UDP的情况下，虽然可以确保发送信息大小，但是却不能保证消息一定会送达，所以应用又是会根据自己的需要进行重发处理。
  UDP常用于包总量较少的通信（DNS、SNMP等）；视频、音频等多媒体通信（即时通讯）；限定与LAN等特定网络中的应用通信；广播通信（广播、多播）
  区别：
  基于连接与无连接（TCP是面向有连接的的协议，只有在确认通信对端存在时才会发送数据，从而控制通信流量的浪费）
  对系统资源的要求（TCP较多，UDP较少）
  UDP结构程序较简单
  流模式与数据报模式
  TCP保证数据正确性，UDP可能丢包
  TCP保证数据顺序，UDP不保证

• 什么是负载均衡？
  客服端发送的、nginx反向代理服务器接收到的请求数量，就是我们说的负载量。请求数量按照一定的规则进行分发到不同的服务器处理的规则，就是一种均衡规则，而将服务器接收到的请求按照规则分发的过程称为负载均衡。
  负载均衡在实际项目中分为两种：
  硬件负载均衡：也称为硬负载，如F5负载均衡，相对造价昂贵成本较高，但数据的稳定性安全性等有非常好的保障，如中国移动，中国联通这样的公司才会选择硬负载进行操作；
  软件负载均衡：它是利用现有的技术结合主机硬件实现的一种消息队列分发机制。更多的公司考虑成本原因会选择使用软件负载均衡。

• ES6中Reflect对象有什么用？
  1.将Object对象的一些明显属于语法内部的方法放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上都部署，未来的新方法将只部署在Reflect对象上，即从Reflect对象上可以拿到语言内部方法。
  2.修改某些Object方法的返回结果，让其变得更合理。
  3.让Object操作都变成函数行为。
  4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应方法，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

• 如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
  分页查询概念：在我们数据查询时，如果数据量很大，比如几万条数据放在一个页面显示的话不太好，这时就需要采用分页显示。例如：
  如果每次只显示十条数据，那么第一至十条就是第一页，以此类推。所以分页就是从结果中截取出第n~m条记录。
  前端实现分页功能，需要后端返回必要数据，例如总的页数，总的数据量，当前页，当前数据

{"totalCount":1836,//总的条数
"totalPages":92,//总页数
"currentPage":1,//当前页数
"data"://当前页的数据
{...}
}

后端采用MySQL作为数据持久性存储，前端向后端发送目标的页码page以及每页显示数据的数量pageSize，默认情况每次取十条数据，则每一条数据的起始位置start为：

const start=(page-1)*pageSize

当确定了limit和start的值后，就能确定SQL语句：

const start='SELECT*FROM record limit ${pageSize} OFFSET ${start};'

上面的SQL语句表达的意思是：截取从start到start+pageSize之间（左闭右开）的数据
关于查询数据总数的SQL语句为，record为表名：

SELECT COUNT(*) FROM record

因此后端的处理逻辑为：
①获取用户参数的页码数page和每页显示的数目pageSize，其中page是必须传递的参数，pageSize为课选参数，默认值为10。
②编写SQL语句，利用limit和OFFSET关键字进行分页查询。
③查询数据库，返回总数据量、总页数、当前页、当前页数据给前端
总结：分页查询的关键是首先确定每页显示的数量pageSize，然后根据当前页的索引pageIndex（从一开始），确定LIMIT和OFFSET应该设定的值，LIMIT总是设定为pageSize，OFFSET计算公式为pageSize*（pageIndex-1），确定了这两个值就可以查询出第n页的数据了，具体代码如下：

router.all('/api',founction(req,res,next){
var param='';
//获取参数
if(req.method=="POST"){
param=req.body;
}else{param=req.query||req.params;}
if(param.page==''||param.page==undefined){
res.end(JSON.stringify({msg:'请传入参数page',status:'102'}));
return;
}
const pageSize=param.pageSize||10;
const start=(param.page-1)*pageSize;
const start='SELECT*FROM record limit ${pageSize} OFFSET ${start};'
pool.getConnection(function(err,connection)){
if(err) throw err;
connection.query(sql,function(err,results){
connection.release();
if(err){
throw err
}else{
//计算总页数
var allCount=result[0][0]['COUNT(*)'];
var allPage=parseInt(allCount)/20;
var pageStr=allPage.toString();
//不能被整除
if(pageStr.indexOf('.')>0){
allPage=parseInt(pageStr.split('.')[0])+1;
}var list=results[1];
res.end(JSON.stringify({msg:'操作成功',status:'200',totalPages:allPage,currentPage:param.page,totalCount:allCount,data:list}));
}
})
})
});

伙伴们，今天就到这吧，就八个题目，好好消化一下，加油，祝你们面试成功，下次再见咯🙃