closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
## 引子 最近逼乎有一个很火热的问题，叫[前端能否限制用户截图？](https://www.zhihu.com/question/417108591/answer/1452751781)  当我看到这个问题，我就觉得这个提问者应该是个萌新，或者已经被产品经理或SB leader 折磨的失去理智。因为下方有一个非常直中要害的回答： >无论多么牛的技术手段限制了软件的截图, 用户只要简单的掏出手机对着屏幕拍照就好了。 这个问题，真的说明一切的前端安全，其实都是纸老虎。 接下来，我结合自己遇到的几个场景，来谈一些做前端以来，自己遇到的那些伪前端安全需求。 ## 曾经那些被怼回去的安全需求 最近几年互联网数据泄露非常频繁，我上一家公司是做金融贷款的，非常强调数据安全，这两年也做了不少关于安全的需求。 ### 前端数据脱敏 前端数据脱敏是一个很常见的需求，特别是当今隐私被卖的这么猖狂的时代，所以很多公司都开始注重这些细节，最基础的就是数据脱敏。 数据脱敏，就是将用户的隐私信息，用一些手段，让这些信息有一定辨识度，但又无法准确获取，比如： - 金*胖 - 186****2892 - 510*********1262 - 川A 7***1 上面一般是我们常见到的数据脱敏格式，我又叫他`数据马赛克`。前端能不能做，肯定能做，一个正则配上一个`String.replace`方法就搞定。但如果产品让我们实现这种需求，我们肯定要拒绝，因为前端做数据脱敏就是`被单里眨眼睛` - 自欺欺人。...
 本文为这个系列的第二篇，上一篇见：[Babel 入门指引？](https://closertb.site/blog/59) 本文将围绕顶部的图剖析，旨在让你更了解`Babel 编译`的四大助手和区别： - [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) - [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill) - [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime) - [@babel/runtime](https://babeljs.io/docs/en/babel-runtime) ## 有力的开场白  在@babel/preset-env文档的开头，很隐晦的说了这样一个知识点，中文详细解释就是：只转换新的 JavaScript 句法（syntax），比如let、const、async\await、箭头函数、...、管道运算符等，而不转换新的 API，比如 Set、Map、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign，array.flat ），举个🌰： ```js // 1：新的语法const，export, async，箭头函数与? 管道预算符 export...
 [译文：Babel.js Guide -Part 1- The Absolute Must-Know Basics: Plugins, Presets, And Config](https://medium.com/welldone-software/babel-js-guide-part-1-the-absolute-must-know-basics-plugins-presets-and-config-28150c199e45) > 本文将讲述： - Babel 是什么以及怎么在日常开发中使用它？ - presets and plugins 是什么及区别，在babel执行中，他们的执行顺序是什么？ 虽然原文标题看似是一个系列，但作者似乎没有继续，但我已经想好了下一部分要写的内容；非专业翻译，夹带自己理解，有小改动。 ## Babel 是什么 [babel](https://babeljs.io/) 是一个免费开源的JavaScript 编译库....
## 前言 国庆七天，就这样没了，以不想看人海的借口（9 s q），在家里白吃白喝待了七天。但作为前端练习生的我，又有时间倒腾了，这不，夜深人静时，用React + Github Issues + Github Graphql API + Github Action + Github Pages重写了自己的博客。 - 我的[新博客站点][13] - 如果你对下面的实现过程没兴趣，可直接查看最后一节**快速搭建属于你的博客** ### 目的意图 以前是用Hexo搭的, 那为什么要换，嗯........图个乐。其实还有就是：阿里云又让续费服务器了；用segmentfault做自己的文件存储计划失效了（图片链接有时效性，动态的）；hexo上条条框框太多了，博客资源仓库是静态的，都是离线编写。那为什么又要用上面的那一堆东西呢？嗯，是这样的： - React : 三大框架，也就这个入了门，写起来快；...
## 起 过去一年半一直在用React + Dva + Antd写中后台项目，从最初的6小时一个页面，到现在的两小时一套页面，其中的秘诀就是不断总结与熟悉，写一些适合业务的轮子，比如：[antd-doddle](https://github.com/closertb/antd-doddle)。今年随着业务稳定，有机会去尝试一些自己感兴趣的方向，比如前端工程化、SSR、 小程序；最近由于苹果对App上架流程的调整，部门需要写一个官网。虽然说一个上午就写出来了，但从官网的角度，以及对成品不断追求的态度，现在这个官网太Low了, 无Seo，无移动端适配，无首屏渲染。所以最近开始接触SSR，试图用一个更加专业的方案去重新打造这个官网。 ## 方案筛选 其实没啥筛选的，页面框架React是铁打的。而React的服务端渲染，市面上一般就有完全自己搭和选择[NextJs](https://nextjs.frontendx.cn/docs)。 - NextJs不用多说，只要开始写好了配置，就可以像写中后台一样，安心的写页面就行了，无需过多关心服务端路由，打包这些（但不得不说的是，写配置也真的是一项浩大的工程， 10个问题，9个是关于配置的）。 - 但秉承学习的态度，而不是交任务，从一开始就选择了自己去搭，自己曾经看到有人用react + Dva + Express搭SSR的文章，所以基于对Dva的熟悉与钟爱，就直接选择了这个方案，只是将Express换成了Koa。但问题真的是一堆一堆的出现，当在Issues中看到这张图，我是奔溃的，究其原因是随着React 16用Fiber进行了重写，同构渲染(hydrate)与客户端(render)进行了分离。而Dva2.0并没有对这一个特性进行支持。但@sorrycc 大佬并没有说不支持，而只是说没有Demo。说明还是有路的，借着自己对Dva的了解，就很快的想到了用Dva-core代替Dva,将Render这一步交给自己。  ## 细说方案 同构渲染一套代码两端运行：即可以像SPA项目一样，打包一套静态资源代码，在浏览器独立运行；又可以像传统jsp，php页面一样，由服务端页面直出，但又高于这些技术，因为在首屏时依赖直出，而在后面的操作又有SPA一样的操作体验，这就是同构的优势所在。但这也要求了更高的架构思想，对前端提出了更高的要求，主要体现在下面几个方面: - 怎么同时兼容浏览器端和服务端两种模式的路由； -...
## 开篇有奖 如果你最近一年出去面过试，很可能面临这些问题： - react 16到底做了哪些更新； - react hooks用过么，知道其原理么； 第一个问题如果你提到了Fiber reconciler，fiber，链表，新的什么周期，可能在面试官眼里这仅仅是一个及格的回答。以下是我整理的，自我感觉还良好的回答： 分三步： - react作为一个ui库，将前端编程由传统的`命令式`编程转变为`声明式`编程，即所谓的数据驱动视图，但如果简单粗暴的操作，比如讲生成的html直接采用innerHtml替换，会带来`重绘重排`之类的性能问题。为了尽量提高性能，React团队引入了虚拟dom，即采用js对象来描述dom树，通过对比前后两次的虚拟对象，来找到最小的dom操作（vdom diff），以此提高性能。 - 上面提到的vDom diff，在react 16之前，这个过程我们称之为`stack reconciler`，它是一个递归的过程，在树很深的时候，单次diff时间过长会造成JS线程持续被占用，用户交互响应迟滞，页面渲染会出现明显的卡顿，这在现代前端是一个致命的问题。所以为了解决这种问题，react 团队对整个架构进行了调整，引入了fiber架构，将以前的stack reconciler替换为`fiber reconciler`。采用`增量式渲染`。引入了`任务优先级(expiration)`和`requestIdleCallback`的循环调度算法，简单来说就是将以前的一根筋diff更新，首先拆分成两个阶段：`reconciliation`与`commit`;第一个`reconciliation`阶段是可打断的，被拆分成一个个的小任务（fiber），在每一侦的渲染空闲期做小任务diff。然后是commit阶段，这个阶段是不拆分且不能打断的，将diff节点的effectTag一口气更新到页面上。 - 由于reconciliation是可以被打断的，且存在任务优先级的问题，所以会导致commit前的一些生命周期函数多次被执行， 如componentWillMount、componentWillReceiveProps 和 componetWillUpdate，但react官方已申明这些问题，并将其标记为unsafe，在React17中将会移除 - 由于每次唤起更新是从根节点(RootFiber)开始，为了更好的节点复用与性能优化。在react中始终存`workInprogressTree`(future...
## 为什么 setTimeout 有最小时延 4ms ? [参考文章](https://mp.weixin.qq.com/s/71039rWm9W15IsrMOaGwZQ) 首先： setTimeout 规范由 whatwg 来维护 规范中存在这样两条： - 如果设置的 timeout 小于 0，则设置为 0 - 如果嵌套的层级超过了 5 层，并且 timeout 小于 4ms，则设置 timeout 为 4ms。 而在浏览器实现端，做了调整，对于chrome...
## 前言 React 15.x 升 React 16.x 是一次内部重构，对于使用者来说，原来的使用方式仍然可用，额外加了新的功能；而Antd 3.x 升 Antd 4.x, 在我的认知范围里，可以称作是飞(po)跃(huai)性的重构, 因为以前很多写法都不兼容了，组件代码重构，使用者的代码也得重构。但这次重构解决了3.x的很多问题，比如： - 由于Icon无法按需加载导致打包体积过大； - 由于Form表单项变化会造成其他表单项全量渲染，大表单会有性能问题； - 时间库moment包体积太大。 说这么多，还是直接来张图吧，我个人项目的打包体积变化：`Antd 3.x` VS `Antd 4.x `   >升4.x之后，gzip少了150kb，也就是包大小少了500多kb，这不香么。 ###...
Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. Changelog Sourced from websocket-extensions's changelog. 0.1.4 / 2020-06-02 Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin) Change license from...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
Bumps [acorn](https://github.com/acornjs/acorn) from 6.3.0 to 6.4.1. Commits 9a2e9b6 Mark version 6.4.1 90a9548 More rigorously check surrogate pairs in regexp validator df0cf1a Mark version 6.4.0 5303412 Also export Parser via Parser.acorn...