笔记（持续更新~~~）

1. Centos有yum（基于rpm），Ubuntu有apt-get，macOs有brew，都可以处理依赖包的问题。

2. grep -rn “”,“” * -l 这个命令是查找当前目录下所有包含",“这三个字符的文件名。
   sed -i 's/”,"/;/g’ grep \",\" -rl ./ 这个命令是替换上面三个字符为；字符。

3. json.dumps(dict, ensure_ascii=False)可以解决字典，列表等print打印中文乱码问题，str.encode(‘utf-8’)可以直接对中文字符串编码让其正常显示。

4. python中字典取属性值用中括号([])，对象取属性或方法用点(.)。

5. 0.1 + 0.2 === 0.3 错误的，不止js有，其它语言也有，因为是计算机二进制存储数据精度误差导致。

6. 浏览器是由渲染进程，浏览器进程，插件进程，GPU进程组成，其中渲染进程也是内核，包括js引擎线程，页面渲染线程，事件线程，定时器线程，网络请求线程等。

7. 浏览器点击禁用缓存，请求头会添加Pragma：no-cache和cache-control：no-cache；优先级从高到低是 Pragma -> Cache-Control -> Expires；Pragma要被废弃了
   

8. cookie的samesite缺点是子域没法使用父域的cookie字段（用户id或token），子域需要重新登录。

9. python和js一样，一切皆为对象。

10. 原型的作用之一是共享方法，节省内存。

11. 序列化：可以把内存数据转化成可以网络传输后本地存储的数据，js中如json.stringify()。

12. rpc: 远程过程调用，把网络传输封装，对外看来就像是同一个进程的本地调用，可以用http协议，或者直接用更低层的tcp协议，也可以使用公司内部的协议（直接二进制传输，效率更高），传输文本可以使用xml,json,proto等。

13. 装饰器、class、vue2x双向绑定的实现原理都离不开Object.defineProperty()。

14. 未来禁用第三方cookie，可以使用替代方案如：把id当请求字段，每次请求带上；浏览器指纹，浏览器的版本，系统版本等等一系列信息组合，很难出现重复。

15. 因为 this.props 和 this.state 可能会异步更新，所以尽量不要依赖他们的值来更新下一个状态。

16. 任意递归算法都可以使用迭代替换，防止调用栈溢出。

17. react传props回调函数别忘了绑定this,不然this指向子组件，导致奇怪的bug。

18. put方法可以上传文件，但一般不会用，任何文件都可以上传不安全。

19. ip协议主要负责网络层通信，ip地址，mac地址，路由设备，计算机等；tcp协议主要负责两个计算机通信设备的信息传输。

20. 数据结构有线性和非线性，树，图等为非线性。

21. 微前端主要两类：
    单实例：即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。通常基于 url 的变化来做子应用的切换。
    多实例：同一时刻可展示多个子应用。通常使用 Web Components 方案来做子应用封装，子应用更像是一个业务组件而不是应用。

22. dns一般采用递归的查询方式，dns服务器未查到，它会帮助客户端去查找下一个。

23. 网关和代理的区别是代理连接客户端和服务端协议是一样的，网关不一定。

24. GET通过url明文传输，POST通过body传输，本身都不安全，因为HTTP就是明文传输；GET通过url编码，POST支持多种编码；GET产生一个数据包，POST产生2个数据包。

25. 下面使用slice复制类数组:
    args = Array.prototype.slice.call(arguments)

26. （源码）react组件实际就是ReactElement类型的js对象。

27. sort排序内部原理是插入排序和归并排序的混合排序法。

28. 加载与 require 是 同步 的，而 import 则会 异步 加载模块。

29. 因为 js采用的是词法作用域，函数的作用域在函数定义的时候就决定了。
    而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。

30. 在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

31. js里一切皆为对象，可以使用对象原型的方法，如数字可以使用toString()方法。

32. 一般用操作符单独对对象进行转换的时候，会优先调用valueof，如果是弹窗（alert）的话，直接调用toString方法。

33. flow主要使用冒号来添加类型限制；不手动添加flow也可以自动识别部分类型错误。

34. python2的print打印简单类型会做编码转换，打印对象不会；print打印单个参数会转换，两个参数也不会。

35. utf-8一般是 \x 带头的，后面跟两位字母或数字，例如 \xe6\xb5\x8b\xe8\xaf\x95\xe5\x95\x8a ，三个 \x 代表一个汉字;gbk一般是 \x 带头的，后面跟两位字母或数字，例如 \xb2\xe2\xca\xd4\xb0\xa1 ，两个 \x 代表一个汉字。

36. 

37. python2中unicode是一种数据类型。
    

38. linux下文件包含中文则为utf-8编码的文件，删掉中文（包括注释）则变成ascii编码。

39. bind的原理就是函数柯里化；柯里化也用到了闭包。

40. 偏函数和bind的区别是不改变this指向。

function add(a, b) {
    return a + b + this.value;
}
 
// var addOne = add.bind(null, 1);
var addOne = partial(add, 1);
 
var value = 1;
var obj = {
    value: 2,
    addOne: addOne
}
obj.addOne(2); // ???
// 使用 bind 时，结果为 4
// 使用 partial 时，结果为 5

41. 惰性函数解决了闭包每次需要判断的问题。以下惰性函数每次调用都拿到第一次的date数据。

var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

42. service worker可以使web应用增加离线、消息推送等功能；它是PWA的一部分。

43. 架构顺序，业务架构=》应用架构=》技术架构。

44. options请求可以知道服务端支持哪些请求类型和请求头的自定义字段；跨域时，本地node代理会先发options请求，如果后端没有允许这个请求的话（老的框架），会导致报错（前端实际发送的是没有自定义字段的options请求，而非正式请求）。这会导致前端以为发过去了，但是后端收不到。

45. yarn安装比npm快，没有依赖库版本问题（npm后来版本通过lock文件也实现了）。

46. 圆括号之内建立一个隐藏的作用域。

47. 跨页面通信，如果同源可以使用很多方法，比如websocket、localstorge、window.open()返回的句柄等。不同源的话可以使用iframe的方式通信。

48. 因为箭头函数没有this，会找上级的this，所以使用bind、call等无效。

var value = 1;
var result = (() => this.value).bind({value: 2})();
console.log(result); // 1

49. 箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象；箭头函数也没有原型。

50. 简单类型数据使用instanceof无用。

51. for of实现如下。

function forOf(obj, cb) {
    let iterable, result;
    iterable = obj[Symbol.iterator]();
    result = iterable.next();
    while (!result.done) {
        cb(result.value);
        result = iterable.next();
    }
}

52. 组件设计原则：props尽量少；state尽量往上提；按照数据划分组件。

53. es6中set和类数组都是可迭代的。

54. 代码复用的方法、形式有很多种，你可以用类继承来做到代码复用，也可以分离模块的方式。高阶组件也是一种复用代码方法，其实就是设计模式里面的装饰者模式。

55. 引用问题。
    

56. try catch无法捕获异步回调的错误。

57. 回调函数会导致堆栈信息不能把内部错误返回回来；使用外层变量导致代码难以复用。

58. componentDidmount和componentDidupdate经常需要做同样的事，会让代码繁琐。

59. 组件写成无状态组件的形式，因为它们更方便复用，可独立测试。然而很多时候，我们用function写了一个简洁完美的无状态组件，后来因为需求变动这个组件必须得有自己的state，我们又得很麻烦的把function改成class。在这样的背景下，Hooks便横空出世了！

60. promise链一般得加catch，不然内部错误不会报出来，被它吃掉，类似于try catch。

61. nginx主要是用作反向代理、负载均衡、静态资源服务的。

62. 面对复杂的异步流程，相比async，Promise 提供的 all 和 race 会更加好用。

63. 往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap，比如在dom上挂载数据；WeakMap 弱引用是键名，而不是键值，键值依然是正常引用的。

// 代码1
ele1.addEventListener('click', handler1, false);
ele2.addEventListener('click', handler2, false);
 
// 代码2
const listener = new WeakMap();
 
listener.set(ele1, handler1);
listener.set(ele2, handler2);
 
ele1.addEventListener('click', listener.get(ele1), false);
ele2.addEventListener('click', listener.get(ele2), false);

代码2比起代码1的好处是：dom清除，则handler函数也会清除，不需要removeEventListener了。

64. AMD是加载完依赖文件，回调来调用；CommonJS是同步加载。AMD一般用于浏览器端编程，因为它需要加载的文件在服务器上，涉及网络，所以需要异步；CommonJS则用于服务端编程，加载文件是在本地磁盘，不需要异步加载。

65. 浏览器加载 ES6 模块，也使用 script标签，但是要加入 type=“module” 属性。

66. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

67. es6模块导入在babel编译后就是CommomJS规范，但是还是不能直接运行，需要webpack打包工具做相关处理。

68. 词法作用域和动态作用域有区别。

69. js分为编译阶段和执行阶段，而作用域规则和执行上下文分别在这两个阶段确定。
    

70. html，png，js等资源不仅可以通过标签下载，也可以通过xhr获取。

71. 热更新不是指自动刷新页面，而是局部刷新，但是保留其它数据状态。

72. 获取函数的参数个数，可以使用length。

73. JS跨域，浏览器端会执行两次请求，第一次称为“预检”，第二次为真实请求，第一次请求是为了得到服务器对跨域访问的支持配置。

74. 对象的属性名除了字符串还可以是symbol。

75. 频繁增删键值的时候map比object性能更好。

76. 使用object，会有字段覆盖内置字段的情况，比如toString等字段。

77. 弱引用weakmap键只能为对象，且对象在外面没有其它引用就会等着被回收，回收之后weakmap中此对象就不存在了。

78. 由于回收时间不确定性，所以weakmap里数据也不稳定，所以不可遍历。

79. 设计原则有单一职责，开放封闭原则，最少知识原则等。

80. html文件一般设置为协商缓存，Cache-Control:max-age=0表示过期，则会使用协商缓存的字段etag等来执行判断。

81. async/await也有缺点，太同步化容易把一些并行请求写成串行，try/catch的错误机制不太友好等。

82. 清除浮动主要有两种，一种是clear方式，它包括加空标签，伪元素等；一种是overflow设置，它的原理是bfc。

83. reflect作用相当于Math，使用这种保存很多方法和优化对一些对象的操作，比如delete，in等，避免对全局的Object做一些操作。

84. 合理冗余代码，不必一味想要复用，方便功能拓展；避免过度设计，过度抽象，oop在js中不完全适合，js灵活使用object和function可以解决很多问题。

85. es2017提出在类中的方法写成箭头函数解决this指向问题，但是它实际上让方法定义在构造函数内而不在原型上，每创建一个实例都会重复创建这类方法，浪费性能。

86. 在js世界里，很多时候可以不必写class，使用工厂函数更加简洁。

87. eslint的原理就是抽象语法树（AST）中的语法分析。

88. fiber分片机制主要包括两个方向：一个是调度机制，把任务分成多个小任务，在浏览器空闲时调用，检测到用户输入等高优先级的事件及时让给渲染线程；二是数据结构，通过增加父节点和兄弟节点指针来让它可以随时中断，并且下次能找到正确位置继续执行。

89. ajax会有跨域问题，但是表单提交不会有（img，script等也不会），因为表单提交到只能提交到另一个域，没法获取返回数据，ajax却可以，同源策略就是不让获取另一个域的内容。

90. csrf如果是get请求可以使用img，script标签来实施攻击，post请求的话可以使用表单，如果用ajax的话需要配置跨域代理。

91. img,script不仅不会跨域，还可以直接携带第三方cookie。

92. Samesite现在默认是lax，这样会一定程度防止csrf。

93. 确保你的代码以及第三方库的代码有足够的XSS检查，在此之上将jwt(token)存放在local storage中。放在cookie中会被csrf攻击，但是可以设置httponly来防止xss。

94. generator生成器可以生成iterator迭代器。

95. 命名空间也是一种单例模式。

96. 依赖反转就是高低层次模块都依赖抽象接口，替代传统的高层次模块依赖低层次模块具体细节。

97. 依赖反转的高低层次模块依赖抽象接口，就和前后端交互依赖http接口类似。

98. 前端性能优化无非就这四点：资源优化（文件优化）、网络优化、渲染优化、用户体验优化。

99. 前端定时器是浏览器或node实现的，不是v8。

100. dom型xss属于反射型，但不是普通反射型那样由于后端校验漏洞导致，完全是由前端漏洞导致。

101. https是由http+ssl组成，过程是客户端生成密钥，使用服务端发来的公钥加密，再发回服务端，服务端用私钥解密得到密钥（用来之后的对称加密传输）。ca证书是上述非对称加密传输过程中，服务端发给客户端的公钥带上的，证明公钥的可靠性。

102. http://172.16.7.108:3000/hybrid/pages/article_detail?id=702304282490369032&nav=2