阿汤哥的鼎
阿汤哥的鼎
the question is same as https://github.com/webpack-contrib/thread-loader/issues/56, but my version is 2.1.3, and my webpack configuration is like this: ``` ... const threadLoader = require('thread-loader'); ... const jsWorkerPool = { poolTimeout:...
stream.pushStream({ ':path': path }, (err,pushStream) => { }) 先err再pushStream
# 浏览器的渲染过程2.0 — Composite ### 前言 上一篇文章： [《浏览器的渲染机制》][1]里，大概介绍了浏览器从下载完第一份document文件，到渲染出整个页面所发生的事情（也称作：``关键路径渲染``），其中包括：1、构建对象模型（DOM，CSSOM），2、构建渲染树（RenderTree），3、布局，4、渲染。 这一篇文章我们将参考chrome浏览器的内核WebKit， 详细介绍下浏览器呈现引擎的一些概念和渲染中的一个关键环节：**Composite（渲染层合并）**，它所做的事情和带来的效果。 ### 浏览器的主要结构 市面上主流的几款浏览器，基本上都是由下面几个结构组成：  1. **用户界面** - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。 2. **浏览器引擎** - 在用户界面和呈现引擎之间传送指令。 3. **呈现引擎** - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS...
### 如何优雅的进行版本回退 > 平时合代码时，难免会将一些不需要的代码合到主分支里。 > > 像我就经常遇到合完qa_test后，又和我说这个功能今天上不了了，希望我能把这部分功能从qa_test里踢出去。以前我的做法都是找到那条合代码的commit记录，checkout到之前版本，在新起个分支作为这次上线的qa_test，就怕莫名其妙的删除和回滚导致后面代码合不上去…. > > 后来弄懂了git reset 和 git revert，才知道自己的做法是多么的傻逼。 #### 回滚的常用两个命令 ```js git reset git revert ``` 这两个命令具体有什么区别呢？怎么用他们做回滚呢？ #### [git reset][1] 假设我们系统里有下面这些提交记录：  A版本和B版本是我们正常的提交，C版本和D版本是错误提交，现在我们希望回退到B版本。 此时，HEAD指针指向D(5lk4er)，我们只要将HEAD指针指向B(a0fvf8)，就OK了，于是：...
### 基于vue搭建pwa应用（一） >更新于：2019年11月22日 > 本篇不做pwa相关的技术分享，只是记录一些自己搭建时遇到的问题供以后查阅。 > > 关于pwa的技术分享：https://juejin.im/post/5a6c86e451882573505174e7 这篇文章总结的挺好的，例子也很不错。 #### 实现效果一览 - 添加到主屏幕   - 离线应用 [离线时也能正常访问页面][3] - 服务器推送消息  #### 1.模拟https环境 Service Worker 只能运行在localhost或者https环境下，你可以跑个本地服务试一试，或者代理个线上https环境 -...
### First-of-type > 今天在写一个css样式时，试图用first-of-type来修改第一个拥有特殊class标签的样式，发现并未生效，后来发现一直以来自己对first-of-type，last-of-type，nth-of-type这类标签的运用场景理解错了。 #### 问题 当时的html代码结构是这样的 ```html 标题 一行元素 一行元素 一行元素 ``` 其中每个`一行元素`中间相隔10px，而`标题`与`行内元素`相隔大一些：15px，当时的想法是对第一个class是row的`一行元素`做特殊的样式处理，css代码为： ```scss .card .row{ margin: 10px 0; &:first-of-type{ margin-top: 14px; } } ``` 伪类没有生效 #### MDN解释： 贴上了中英文解释...
### vue数据双向绑定的源码解析 > 关于vue是观察者模式还是发布订阅模式网上一直众说纷纭。 > > 我之前一直认为vue是发布订阅模式，dep对象作为发布订阅模式里的event channel来处理数据更新和通知，后来听了字节跳动银国徽老师的《Mvvm设计模式》课程，阅读完vue的源码后，对vue是如何实现双向绑定有个更清楚的认识。 #### 观察者模式和发布订阅模式 首先简单介绍一下观察者模式和发布订阅模式的概念和他们的区别：  **观察者模式** > 建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应做出反应。在此，发生改变的对象称为观察目标，而被通知的对象称为观察者，一个观察目标可以对应多个观察者，而且这些观察者之间没有相互联系，可以根据需要增加和删除观察者，使得系统更易于扩展，这就是观察者模式的模式动机。 以卖房子为例：一个房东想卖掉自己的房子，于是他发布了一个售卖价格，有好几个买家心仪这套房子，但是又觉得价格有点小贵而犹豫不决，于是他们都关注着这套房子的房价伺机行动。 在这个例子里。房东就是那个观察目标，买家就是观察者，一个房东可能和多个买家对接，一旦房价发生变化就会告诉他们，而几个买家之间是没有相互联系的。 **发布订阅模式** > 发布订阅模式是观察者模式的实现，更利于系统的解耦和重用 发布订阅模式和观察者模式最大的不同就是存在一个“中介”来统一处理一些事件，使得订阅者（观察者）和发布者（观察目标）没有直接联系。 还是以上面的卖房子为例：房东想卖掉自己的房子，但是又觉得自己每次更改房价就要挨个打电话通知买家自己的价格变化了实在太麻烦，于是他找了一个中介贝壳，把自己的房子信息托管给他们，以后每次更改房价他就只和中介贝壳的工作人员说一声就好了，再由贝壳的工作人员来通知那些想买房子的人。 至此，房东不再和买家直接打交道，房东甚至不知道有哪些买家关注着自己的房子信息，房东也不关心贝壳的工作人员是如何通知买家的，可能是群发消息，避免了房东挨个打电话通知的重复劳动性。 #### 为什么说vue是观察者模式 对vue有一定了解的朋友应该都知道，vue实现双向绑定有几个重要的对象：Observer，Watcher，Dep。  乍一眼看这张图，觉得这妥妥的是上面说的发布订阅者模式呀，Observer是观察目标，Watcher是观察者，Dep是中间那个中介Event Channel。 实际上阅读完源码后，你会发现Dep没有做任何事情，他只是一个简单的Watcher的数组集合，在每次Observer数据发生更新时，循环遍历数组集合来挨个触发每个Watcher的update方法。...
### 新电脑软件配置 > 避免换台电脑像搬家一样累 - node :[利用n管理node版本][1] - git and ssh ```js # 一路回车，不要设置密码 $ ssh-keygen -t rsa -C $ cat ~/.ssh/id_rsa.pub ``` - Webpack - ITerm2：[ITerm2，让你的mac控制台更加丰富高效][2] - VSCode：[教你打造一款颜值逆天的 VS...
## Intersection observer > 拥有“交叉观察者“小宝贝，从此妈妈再也不用担心我的滚动交互了。 #### 通过js计算属性来实现 记得以前写懒加载时，用的是一个（名字不重要）的第三方库，基本思想是：通过在onScroll事件里计算图片的offsetTop和clientHeight来判断图片是否到达了可展示区域，再替换img的src来加载正确的图片地址。 其实大部分和滚动相关交互的实现思路都和上述懒加载的实现差不多：**通过在onScroll里对一些计算属性值的判断来做一些操作**。这种方法不好的地方是代码里充斥着大量的offsetTop，clientHeight等取值计算，一来看着不舒服，二来这种计算属性的计算会造成浏览器的重绘，对性能上有一定的影响。 #### Intersection observer小利器 Intersection observer ：交叉观察者，顾名思义，他是一个判断两个元素是否发生交叉的观察者！ 这里是详细[MDN][1]介绍：Intersection Observer API 允许你配置一个回调函数，每当目标(**target**)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(**root**)。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(**root**)元素的交集，请指定根(**root**)元素为`null`。  请先忍忍，例子里有动图介绍！ #### 具体用法 ##### 1.构造函数 ```js const observer = new...
### liunx查询日志常用命令收集 > 每次查日志很多命令都记不熟，在这里做个整理吧 ##### 是否有新增记录 tail - **tail -400f demo.log** ``#demo.log后400行日志`` ##### 关键记录查找 grep - **grep '5033' demo.log ** ``#查找demo.log下所有匹配'5033'的行`` - **grep -o 'order-fix.curr_id:\([0-9]\+\)' demo.log** `` #查找并提取（不是一行）匹配正则表达式的内容`` - **grep...