📚(一)浏览器缓存概览

关于前端性能优化，一直是一个老生常谈的话题，在性能优化的诸多方法中，缓存可以说是性能优化中简单高效的一种优化方式了。

🙄那么浏览器缓存可以在哪方面给我们带来实质性的性能优化呢？

📣我们知道从我们从输入 URL 到页面加载完成，大致可以分为5个步骤

1. DNS 域名解析
2. 建立TCP 连接
3. HTTP 请求抛出
4. 服务端处理请求，HTTP 响应返回
5. 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户

浏览器缓存可以帮助我们在第3和第5步骤中优化性能。利用浏览器存储机制，将一部分数据保存在客户端，从而减少对服务器的请求降低服务器的压力，提升效率。

📢📢一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷👍。

一、什么是单点登录

单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

SSO一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport。子系统本身将不参与登录操作，当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证。👻

相信单元测试是属于那种没有用过也听过的技术（如果你是大佬，听过也用过，欢迎提出宝贵的意见🧎‍♀️🧎‍♂️）。那么到底什么是单元测试，单元测试在实际项目开发中能给我们带来什么样的好处？我们站在前端开发的角度一起来聊一聊单元测试。

📚（一）什么是单元测试

📢单元测试概念

单元测试是指对软件中最小可测单元进行检查和验证；c语言中单元指一个函数，java中指一个类。图形化软件中可以指一个窗口或者一个菜单。总的来说，单元就是认为规定最小的被测试模块。
这个便是对百度百科上对单元测试的介绍，那么对于我们前端来说单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

大多数单元测试包括四个主体：

• 测试套件describe、
• 测试用例it、
• 判定条件expect、
• 断言结果toEqual。

（一）迭代器

Iterator迭代器就是一个接口方法，它为不同的数据结构提供了一个统一的访问机制；使得数据结构的成员能够按某种次序排列，并逐个被访问。

那么在日常开发中，如何让一个对象成为一个可迭代对象呢？即支持迭代器规范的对象（iterable）
可以给obj 对象添加Symbol.iterator属性，同时在返回的next方法中，添加value和done两个属性。

网络相关的知识也是面试时经常会被问到的问题，面试官很有必要确认面试者是否只会使用$.ajax()方法，还是真正了解网络请求的原理。问题列表

1. get和post的区别
2. websocket是否了解
3. http 2.0对于http 1.x有哪些优点？
4. jq的ajax返回值是什么？
5. 说一说你知道的HTTP状态码
6. jsonp的原理
7. 跨域请求资源有哪几种方式？他们的优缺点是什么？
8. XML和JSON的区别？

官网上Next.js简介：Next.js 是一个轻量级的React服务端渲染框架

首先整理了一下各种渲染方式的优缺点

一） 服务端渲染/客户端渲染/同构渲染的优缺点

I ）为什么要使用服务端来渲染，有什么优点？

至于为什么要服务端渲染，我相信大家都有所闻，而且每个人都能说出几点来。

• 首屏等待

  在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。
  
  

解决方案：

一、首先安装babel-polyfill

1

npm install --save babel-polyfill

interfaces英文翻译为接口，百度百科上解释为interface是面向对象编程语言中接口操作的关键字，功能是把所需成员组合起来，用来装封一定功能的集合。那么它在ts这个语言中究竟扮演怎样的角色，有什么用途。

interfaces 是什么

理解起来 interfaces就是约定了一个编程的规范而已，它规定了要实现的一系列方法和属性。也就是说interface其实是一种描述对象或函数的东西，它是一种约束形式，比如一个对象需要有什么样的属性，函数需要什么参数或返回什么样的值，数组应该是什么样子的，一个类和继承类需要符合什么样的描述等等。

了解了interface是什么，那么在不同的情况下我们怎么去使用interfaces呢？

promise的基本语法

新建一个promise很简单，只需要new一个promise对象即可。所以promise本质上就是一个函数，它接受一个函数作为参数，并且会返回promise对象，这就给链式调用提供了基础。

1
2
3
4

new Promise(function(resolve, reject) {
 //待处理的异步逻辑
 //处理结束后，调用resolve或reject方法
})

promise的几种状态

其实Promise函数的使命，就是构建出它的实例，并且负责帮我们管理这些实例。而这些实例有以下三种状态：

1. pending: 初始状态，位履行或拒绝
2. fulfilled: 意味着操作成功完成
3. rejected: 意味着操作失败

pending 状态的 Promise对象可能以fulfilled状态返回了一个值，也可能被某种理由（异常信息）拒绝（reject）了。当其中任一种情况出现时，Promise 对象的then方法绑定的处理方法（handlers）就会被调用，then方法分别指定了resolve方法和reject方法的回调函数

几种状态的深入理解

• 一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
• 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
• promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
• then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。

promise缺点

• 一旦新建它就会立即执行，无法中途取消
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
• 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

写在前面的话

react 作为目前前端的主流框架，各大公司也都在使用。react是一套基于视图层的框架，核心库只关注于视图层，跟vue一致（vue参照了react）。react专注于组件化开发，使用jsx语法（javascript xml – 类xml语法—-要求所有写的视图代码必须包含在同一个父级标签中—-vue中的template），内涵虚拟DOM（ 所有内容并不是一开始就写到了index.html中，使用jsx语法构建，最后渲染到了index.html页面中），使用diff算法（ 状态的改变，会引起视图的二次渲染，比较状态树变化的算法），会比vue更加适合团队开发模式，以至于react成了一项必备技能。我个人其实是一直在使用vue，不过为了迎合市场也开始了react的学习之路，接下来我会将react、redux、react-router一步一步来进行整理。

01-构建项目

01-1 create-react-app 快速构建项目

creat-react-app优点

• 无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手开发项目。
• 高集成性：集成了对React，JSX，ES6和Flow的支持。
• 自带服务：集成了开发服务器，你可以实现开发预览一体化。
• 热更新：保存自动更新，让你的开发更简单。
• 全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。
• 自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。

creat-react-app的安装

windows系统下：

1

npm install -g create-react-app