codingmeup
codingmeup
HTTPS： 1、HTTPS的工作原理 HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。握手过程的具体描述如下： 1.浏览器将自己支持的一套加密规则发送给网站。 2.网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。 3.浏览器获得网站证书之后浏览器要做以下工作： a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。 b) 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。 c) 使用约定好的HASH算法计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。 4.网站接收浏览器发来的数据之后要做以下的操作： a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。 b) 使用密码加密一段握手消息，发送给浏览器。 5.浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。 这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据，为后续真正数据的传输做一次测试。另外，HTTPS一般使用的加密与HASH算法如下： 非对称加密算法：RSA，DSA/DSS 对称加密算法：AES，RC4，3DES HASH算法：MD5，SHA1，SHA256 
1、前端优化
[前端性能优化之利用 Chrome Dev Tools 进行页面性能分析](https://mp.weixin.qq.com/s/azeUIx0EA86EFQrtIRUKwQ) 以京东的一个页面为例,勾选 disable cache,网络情况为 Fast 3G，点击2，然后就结果来说明一下，应该如何理解性能结果，找出优化点 - 页面直出，输入https://wq.jd.com/wxportal/index_v6 ,页面加载回来的 document 就是一个渲染好的 html 页面 - 图片优化，部署在不同的CDN域名下，用webp/dpg等格式图片，图片切割等 - http 协议有部分采用 http2，多路复用，加快资源加载 - 小 logo 使用base42来处理 - 按需加载，菜单先加载第一屏的图标，滑动到第二屏时再加载第二屏的图标 -...
## 1、使用ReactDom.render创建你的组件Component ## 2、创建ReactCompositeComponent对象让根元素包裹整个VDOM ## 3、开始挂载(mount)组件 ## 4、开始批量更新(batch update) ## 5、事务包裹预处理UI并禁用浏览器相关的事件处理 ## 6、事务更新队列返回的更新(updater)被赋值给实例、构造组件后创建了new ExampleApplication()、开始第一次接触React生态系统 ## 7、发生行为componentWillMount、可以setState但是不会触发render(因为此时组件还没有被挂载) ## 8、订阅componentDidMount、被注入了事务队列、在很后面执行、在挂载系列操作执行完后才执行 ## 9、调用组件中申明的render方法、第二次接触我们代码 ## 10、基于ReactCompositeComponent的render方法获得的元素创建VDOM,所以VDOM是一个ReactDomElement、继续挂载 ## 11、创建_Tag的HTML标签(复杂HTML标签封装)、更新DOM属性及创建子元素及挂载 ## 12、更新DOM属性、这里是性能优化重要一环(diff差分对比算法探测属性的差异) #### 一、lastprops循环(检查nextProps对象里是否同prop，相同就跳过，因为会再nextProps循环中处理,重置样式的值，删除时间监听器，去除DOM属性名和属性值) #### 二、nextprops循环(检查prop是不是变化、也就是检查将来值和老值相同，相同跳过，对于样式，我们更新从lastprop到现在变化的部分值、添加事件监听器如onclick、根据事务传递下来确定DOM是否准备好来判断添加监听器的时间、处理完事件监听器、设置DOM属性和值)...
### 组件、SDK、领域 #### 设计系统 - 基础组件（Basic Components）：前端领域通用的基础组件，fusion antd 等 - 图表组件（Chart Components）：前端领域通用的图表组件，有代表性的图表组件库有 BizCharts echarts - 业务组件（Business Components）：业务领域内基于基础组件之上定义的组件，可能会包含特定业务域的交互或者是业务数据，对外仅暴露可配置的属性，在同一个业务域内可以流通，但不需要确保可以跨业务域复用 - 低代码业务组件（Low-Code Business Components）：通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑 - 布局组件（Layout Components）：前端领域通用的用于实现基础组件、图表组件、业务组件之间各类布局关系的组件，如三栏布局组件 - 区块（Block）：一系列业务组件、布局组件等组合而成的代码片段，不对外提供可配置的属性；区块内部具备完整的内部样式、事件、生命周期管理、状态管理、数据流转机制，能独立存在和运行，通过代码片段的复制实现跨页面、跨应用的快速复用，保障功能和数据的正常 - 模板（Template）：特定垂直业务领域内的业务组件、区块可组合为单个页面，或者是再配合路由组合为多个页面集，统称为模板 #### 企业中后台搭建系统...
http://www.52im.net/thread-1870-1-1.html http://www.52im.net/thread-2641-1-1.html ## Flutter  1. Flutter 在各个原生的平台中，使用自己的 C++的引擎渲染界面，没有使用 webview，也不像 RN、NativeScript 一样使用系统的组件。简单来说平台只是给 Flutter 提供一个画布。 2. 界面使用 Dart 语言开发，貌似唯一支持 JIT，和 AOT 模式的强类型语言。 3. 写法非常的现代，声明式，组件化，Composition > inheritance，响应式……就是现在前端流行的这一套 4. 一套代码搞定所有平台， 端的一致性。 ## Flutter...
https://github.com/labuladong/fucking-algorithm https://labuladong.gitbook.io/algo/di-ling-zhang-bi-du-xi-lie/xue-xi-shu-ju-jie-gou-he-suan-fa-de-gao-xiao-fang-fa https://www.geekxh.com/0.01.%E6%8C%87%E5%AF%BC%E5%AD%A6%E4%B9%A0/021.html#_03%E3%80%81%E7%AE%97%E6%B3%95%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB
1、HTTP2 怎么多路复用 有什么特殊的属性值吗 2、HTTP状态码， 以及 缓存 相关 3、WEBPACK原理流程，和PLUGIN生效 4 、HOOK API 5、前端性能优化 6、BFF合并请求 7、闭包的缺点 8、手写防抖节流，寄生组合，promise 9、居中，去重 10.、 你负责了哪些项目最难的点，和复杂业务场景，监控等 mobx vue2 3 数组方法监听的区别 二叉树 左右节点交换 rn 小程序 bridge技术原理的异同 dom diff的过程 对象的描述符...
## RNBridge桥接是什么？ RN可以分成JS 和 Native两部分，这两部分都有自己的线程 线程通信是通过Bridge通信，传输的是JSON信息，其中包含了module id，method id和一些需要的数据。这两边并不能直接地相互感知，也不能共享相同的内存。 很多人认为队列是一个很好的解决方案。你发送JSON/XML队列消息，这个消息遵从相应的协议，并且每个服务都知道怎么去读取和解析成对应的数据和行为。这个队列就很像RN里面的Bridge。 ```js path: node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue' MessageQueue.spy(true); ``` js代码和objective-c之间的通信。RN在ios上使用的是内置的JSCore，在Android需要格外编译一个Js引擎 JS引擎知道如何去更加高效地把JS转换成机器语言。 这也是为什么Android App需要更多的时间去加载，因为需要加载JSCore到项目里。不过在0.60.2之后，RN可以使用Hermes，这对于RN来说是更理想的JS引擎。 ## RN 桥接bridge怎么工作的 **关键概念名词解释** 1. UIManager：在Native侧，是在iOS/Android里主要运行的线程。只有它有权限可以修改客户端UI。 2. JS...