blog
blog copied to clipboard
LiuL0703
# BigInt `BigInt`目前已经进入Stage 4阶段 下一个版本将会作为新特性出现在**ECMAScript**，下面我们来一起了解一下`Bigint`。 `BigInt`是什么? `BigInt`是JavaScript中一种可以用来表示任意精度整数的基本数据类型 `BigInt`可以用来表示任意精度整数的特性为JavaScript解锁了更多的骚操作，使用`BigInt`可以告别过去因为整数运算导致溢出的痛苦。特别是金融方面因为涉及大量的数据运算，比如高精度时间戳，或者数值过大的ID，这些是无法安全的用`Number`类型去存储的，所以退而求其次使用`String`类型去存储，有了`BigInt`类型后就可以安全的将其存储为数值类型。 另外`BigInt`的实现也为实现`BigDecimal`打下坚实基础，那将对于以十进制精度表示货币金额并对其进行精确运算（也就是`0.10 + 0.20 !== 0.30`问题）非常有帮助 此前已经有不少库实现了BigInt式的整数存储，当BigInt完全可用时，就可以拿掉那些依赖了，因为相比于使用这些依赖库，Native `BigInt`则更具优势。因为与之相比，Native`BigInt`不需要加载解析编译的额外时间，并且在性能上表现更好。 图示为BigInt与其他流行库在Chrome中的表现情况对比(值越大表现越好) ### 现状：Number JavaScript中Number是以64位双精度浮点型存储，所以会有精度限制，JavaScript中可以准确表示的最大整数是`Number.MAX_SAFE_INTEGER`这个值是`2^53-1` ```js const max = Number.MAX_SAFE_INTEGER; // → 9_007_199_254_740_991 ``` **Tips**：为了可读性使用下划线作为分隔符进行分组 [The...
## 适配ios全面屏 对于iPhone X等全面屏的适配问题，IOS11提出了一个*安全区域*的概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，要做好适配，必须保证页面可视、可操作区域是在安全区域内 对于适配ios全面屏，ios对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： + contain: 可视窗口完全包含网页内容 + cover：网页内容完全覆盖可视窗口 + auto：默认值，跟 contain 表现一致 **【注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤】** iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量 +...
## 综合 + ### [当你在浏览器中输入 google.com 并且按下回车之后发生了什么？](https://github.com/skyline75489/what-happens-when-zh_CN) + ### [浏览器缓存](http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/) + ### [浏览器的工作原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/) ## React + ### [深度剖析：如何实现一个 Virtual DOM 算法](https://github.com/livoras/blog/issues/13) + ### [React中的同构(SSR)原理脉络梳理](https://www.yuque.com/es2049/blog/zy0eq0) + ### [Why do we need...
### 使用top-left-margin 方法 居中 和使用transform的translate方法居中的性能差异 浏览器渲染过程是先解析HTML文件 构建DOM树，创建一个或多个图层独立的绘制，将图作为纹理上传至GPU，复合多个图层来完成最终的图像，所以每个层的样式出现调整后，要重新计算样式，重新布局，使用top-left-margin这种方法只会创建一个图层，而使用translate则容器中的元素不会和自身放在一个图层，而是放在GPU单独的渲染层中，这样带来的好处有三点 1. 该元素任何合成属性(Composite Property)的变化都不会影响原有布局，不会导致原有布局被重(流reflow)，重绘(relayout) 2. 该层将由GPU线程(Compositor Thread)负责渲染，节省CPU资源，不会阻塞主线程JS代码的执行 3. 动画更为平滑，这是因为使用translate将可以以小于像素的单位（sub-pixel）来绘制，并在帧之间加入了blur（模糊）效果 #### 缺点 额外的渲染层导致更多的线程间通信
props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态 条件|state | props| ------------ | ------------- | ------------- 能否从父组件获取初始值？ | √|√ 能否被父组件改变？ | √|✘ 能否在组件内设置默认值? * | √|√ 能否在组件内改变? |✘|√ 能否设置子组件的初始值? |√|√ 能否在子组件中改变? |√|✘ *：props 和 state 从父组件获取的初始值都会被在组件内设置的默认值覆盖。 >...
## 正则表达式--断言 ### Positive Lookbehind + #### (? The fat cat sat on the mat. // 匹配文本后面不紧跟fat的The 或the ``` + https://regexper.com/ + https://regexr.com/ ### 总结 + X(?=Y) Positive lookahead X...
### 模拟实现bind方法 ```js if(!Function.prototype.bind){ Function.prototype.bind = function(oThis){ if(typeof this !== 'function'){ throw new TypeError(); } var aArgs = [].slice.call(arguments,1), self = this, fNOP = function(){}, fBound = function() { return...
### 基础知识     ### == 比较  [online show that step by step](https://felix-kling.de/js-loose-comparison/) ### === 比较   [ecam](https://www.ecma-international.org/ecma-262/9.0/#sec-abstract-equality-comparison)
当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据 这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. #### html5中data-*属性的定义 + data-* 属性用于存储页面或应用程序的自定义数据。 + data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 + 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验 #### data-* 属性包括两部分 + 属性名不应该包含任何大写字母，并且在前缀...
### 建立TCP连接的三次握手过程 + 第一次握手(SYN=1, Seq=X)：客户端项服务器端发送一个TCP的SYN标志位置为1的包，指名客户端想连接的服务器端口，以及初始化序号X，保存在包头的序列号字段里 + 第二次握手(SYN=1, ACK=1, Seq=Y, ACKnum=x+1): 服务器发送确认应答包(ACK)，并将ACK置为1,服务器选择自己的ISN序列号，放到Seq域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即X+1，发送完毕后，服务器端进入 SYN_RCVD 状态 + 第三次握手(ACK=1，ACKnum=y+1):客户端再次发送确认包(ACK),并将SYN置为0，ACK置为1，并将确认序号(Acknowledgement Number)+1，并且在数据段上将ISN的+1，发送完毕后，客户端进入 ESTABLISHED 状态，当服务器端接收到这个包时，也进入 ESTABLISHED 状态，TCP 握手结束 ### TLS/SSL的四次握手 + 第一步：客户端请求建立SSL连接，并发送自身支持的加密及压缩方式和支持的协议版本以及一个随机数client random给服务器； +...