在前端性能优化中，使用CDN加速也是重要的优化手段。那么CDN的工作机制以及原理到底是什么呢？本文将对此做一个简单介绍

什么是CDN?

CDN内容分布网络（ContentDelivery Network）是构筑在现有的Internet上的一种先进的流量分配网络。

• 其目的是在现有的Internet上增加一层新的网络架构，将网站的内容发布到最接近用户的服务器，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

• 一个CND架构 = 镜像（Mirror）+ 缓存（Cache）+整体负载均衡（GSLB）

Yslow的23条优化建议

1. Minimize HTTP Requests
2. Use a Content Delivery Network

在使用react的过程中，会有如下写法

1
2

const data={name:"ssdfin"，value:1}
const component = <Component {...data}>

React diff算法优点在哪？

计算一棵树形结构转换成另外一棵树结构的最少操作，是一个复杂且值得研究的问题。传统diff算法通过循环递归对子节点进行一次对比，效率低下，算法复杂度达到O(n³),其中n是树节点的总数。计算量非常大，所以想要将diff思想引入Virtual Dom，就要设计一种稳定、高效的diff算法。

state(状态) 更新可能是异步的

React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。

平时在工作中，经常遇到客户端与服务端交互出问题的情况，复习下状态码，以快速定位问题~~

状态码的职责是当客户端向服务器发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了请求，还是出现了错误。

1
2
3
4
5
6

状态码	  响应类别	                       原因短语
1XX	    信息性状态码（Informational）	    服务器正在处理请求
2XX	    成功状态码（Success）	           请求已正常处理完毕
3XX	    重定向状态码（Redirection）	      需要进行额外操作以完成请求
4XX	    客户端错误状态码（Client Error）	 客户端原因导致服务器无法处理请求
5XX	    服务器错误状态码（Server Error）	 服务器原因导致处理请求出错

windows下 删除node_modules文件夹，解决目录层次太深删除报错的问题

解决方法：

使用npm中的插件rimraf，专门用于删除的模块插件

1
2
3

1、安装：npm install -g rimraf（全局安装）

 2、使用：先定位目标文件夹的父级目录，然后命令行输入rimraf xxx（xxx为需要删除的文件夹名称）。

参考资料：

https://segmentfault.com/a/1190000009149186

总结

1. 数组数据变更时，不要使用index作为key。

2. Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由Math.random()生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。

   new Date().getTime()好像不太好，但是感觉可以解决问题呢。==

3. key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。

   <MyComponent key=/>

因为写全局的公共方法没写容错处理额==,mark一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/**
 * 把分钟数转化为day天hour小时minute分钟
 * @param minutes 总分钟数
 * @param onlyToHour 是否只精确到小时（true/false）
 */
transferMinutesToTime(minutes,onlyToHour) {
  const basicMinute = 60;
  const basicHour = 24;
  const basic = basicHour*basicMinute;

  //如果minutes不是非负整数，返回null
  if(!this.checkByRegExp.nonnegativeInt(minutes)){
    return null;
  }

  //如果minutes等于0
  if (minutes == 0) {
    return onlyToHour ? {
      day: 0,
      hour: 0
    } : {
        day: 0,
        hour: 0,
        minute: 0
      }
  }

  //如果minutes为正整数
  let all = Number(minutes);
  let day = Math.floor(all/basic);
  let hour = Math.floor((all%basic)/basicMinute);
  let minute = all%basic%basicMinute;

  let data = {
    day: day?day:0,
    hour: hour?hour:0
  }

  if(!onlyToHour){
    data.minute = minute?minute:0;
  }

  return data;
}