Blog | Kerminate

Kerminate's Blog

从小程序的双线程架构展开

浏览器中 GUI 渲染线程和 JavaScript 引擎线程是互斥的，JavaScript 在执行过程中会阻塞 UI 渲染。即使脚本执行时间过长，页面也会长时间无响应，然后崩溃。正是这种 GUI 渲染线程和 JavaScript 引擎线程之间互斥、阻塞的线程管理，让一些前端开发者认为浏览器是单线程的。 <h2 id="小程序双线程模型"><a href="#小程序双线程模型" class="headerlink" title="小程序双线程模型"></a>小程序双线程模型</h2><img src="https://p0.meituan.net/travelcube/afb7efe411da8db20e9f2e0844c5793d107067.png" alt=""> 逻辑层和渲染层拆分，每个 page 页面使用一个 webview 线程，逻辑层的 JsCore 是共享的。

2023/8/12

Kerminate 的 2020 年度总结

2021 已经到来，秉承着每年都要做一次个人总结，尽管现在已经是大年初四，我还是简单的写一点吧😂。

2021/2/15

Webpack5 changelog

<h1 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h1>这个版本重点关注以下内容： <ul> <li>我们尝试通过持久性缓存提高构建性能。</li> <li>我们尝试通过更好的算法和默认值来改善长期缓存。</li> <li>我们尝试使用更好的 Tree Shaking 和代码生成来改善打包体积。</li> <li>我们尝试清除处于怪异状态的内部结构，同时在 v4 中不引入任何重大改变的情况下实现功能。</li> <li>我们现在尝试通过引入重大改变来为将来的功能做准备，以使我们能够尽可能地长时间使用 v5。</li> </ul>

2020/3/27

Vue3.0 响应式原理解析

2019 年 10 月 5 日 Vue3.0 pre-alpha 版本正式发布，之后数个月历经 500 多个 PR，1000 多个 commit，终于在 2020 年 1 月 4 日正式发布了 Vue3.0 alpha.1 版本。Vue3.0 的核心代码基本完成，截止目前为止剩下的主要工作就是服务端渲染，Vue 团队也正在积极进行中。 响应式 API 的代码也基本稳定，不会再发生太大的变化（packages 里的 reactivity 包），下面我将从源码分析 Vue3.0 的响应式原理。

2020/1/31

Kerminate 的 2019 年度总结

按照往年，我都会在 19 年的年底就写下这份年终总结。因为太忙，拖了一个月，才静下来总结下自己的 2019。 今年是我正式工作的第二个年头，相比于 2018 年的稚嫩，在工作和技术上也是获得了不小的提升。 <h1 id="我做了什么"><a href="#我做了什么" class="headerlink" title="我做了什么"></a>我做了什么</h1><ul> <li>写了 8 篇博客</li> <li>参加了 VueConf2019</li> <li>工作中得到了晋升

2020/1/29

前端测试的最佳实践

<blockquote> 前些时候在团队里接入了前端测试，并总结了相关经验将文章发表到了内网博客上。临近年末了，也把文章发布到个人博客上，希望能让更多的人看到。 </blockquote> 2019 年前端测试依然是一个炙手可热的话题。笔者在今年 5 月份参加 Vueconf 的时候，Vue 单元测试的主题演讲者曾向现场的参与者发出提问，有多少团队引入了单元测试，意外的是只有寥寥数人举起了手。尽管，那个时候笔者的团队也还没有引入前端测试，但是考虑到测试的必要性，且团队正在着手一个新项目，所以回去之后在这个新项目全量地接入了前端测试。 现如今大部分互联网团队都是走 敏捷开发 的节奏。实际上，自动化测试才是实现“敏捷”的基本保障。业务端的快速上线和快速验证对技术侧的响应力提出了更高的要求：更快上线，持续上线。再考虑到人员流动和应用逐步变大的事实，日后迭代的成本只会变得越来越高。当然这个项目迭代的成本也跟项目的复杂度有关，比如笔者所在的点餐业务，项目有足够的复杂性，有些细微的改动点其实会牵扯到很多内容，而对刚加入团队的新人就会显得不太友好。因此，项目拥有前端测试是必不可少的，它能够有效保障业务迭代的质量和稳定性。

2019/12/22

nvm,nrm,yrm 的使用

最近把电脑上的 Node 版本升级到了 10.16.3 的稳定版本，但是后面在项目开发的时候，发现有些项目重装依赖后打包失败，最后发现是因为 Node 版本的问题。但我又不想降级到 Node8.0，这时候怎么办？ 我们就需要借助于 nvm 这个 Node 版本管理工具了，同时我还会介绍下 nrm 和 yrm 这两个管理源的工具。

2019/10/15

Vue 3.0 会有哪些变化

前段时间在 <a href="https://github.com/vuejs/rfcs" target="_blank" rel="noopener">Vue RFCs</a> 提出的 Functional API 在社区中引起了轩然大波，感觉是 Vue 史上最有争议的一个特性。那么，Vue 3.0 到底会带来哪些改变呢，让我们一起来看一看。

2019/6/29

参加 VueConf2019

千呼万唤始出来，终于等到了 VueConf2019。本次 VueConf 选在了交大百年历史的文治堂里，下面我们一起来一睹风采！ <img src="https://i.loli.net/2019/06/09/5cfc73dcdf2e255399.jpeg" alt="">

2019/6/8

[译] DefinitelyTyped

最近在使用 TypeScript 的时候，发现所有 npm 包上的类型定义都在 <a href="https://github.com/DefinitelyTyped/DefinitelyTyped" target="_blank" rel="noopener">DefinitelyTyped</a> 这里。看了下它的 README，感觉写的有点晦涩，又发现已经有韩语，西班牙语和俄罗斯语的 README。所有，我打算给开源社区一点帮助，就译了这篇 README，并提了 PR，目前已经被仓库合并。

2019/6/5

React 深度探索

2019/5/18

Webpack4 使用总结

最近对公司的一个项目进行了 webpack4 的升级，这边简要概述下对 webpack4 的理解和总结。 <h2 id="升级依赖包"><a href="#升级依赖包" class="headerlink" title="升级依赖包"></a>升级依赖包</h2>首先需要升级一些依赖包 <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre>webpack 升级到 4.x webpack-cli 升级到 3.x webpack-dev-server 升级到 3.x url-loader 升级到 1.x file-loader 升级到 3.x happypack 升级到 5.x postcss-loader 升级到 3.x less 升级到 2.x less-loader 升级到 3.x css-loader 升级到 2.x </pre></td></tr></table></figure>

2019/3/24

Koa 使用 Decorator 装饰路由

<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2>在 koa 里使用路由一般都是这样写 <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>const router = requier('koa-router') router.get('/users', async (ctx, next) => { ctx.body = 'users' }) </pre></td></tr></table></figure> 这样的路由设置显得不是那样的直观，而反观 Java 中 Spring 的写法，就感觉更简洁以及更优雅 <figure class="highlight java"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 </pre></td><td class="code"><pre>@Controller public class UserController { @RequestMapping('/users') String Users() { return 'users'; } } </pre></td></tr></table></figure>

2019/1/12

Kerminate 的 2018 年度总结

2018 年马上过去了，今年做了不少事情，就顺便总结一下吧。 <h1 id="我做了什么"><a href="#我做了什么" class="headerlink" title="我做了什么"></a>我做了什么</h1><ul> <li>写了 26 篇博客</li> <li>Putong OJ V2 正式上线</li> <li>加入美团点评</li> <li>参加了技术沙龙

2018/12/29

对比各类 ajax/http 库及最佳选择

在 WEB 开发中服务端和客户端的交互至关重要，客户端可以使用原生的 XMLHttpRequest 对象，服务端也可以使用 node 自带的 http 模块，而现在也有相当多的第三方库来供我们使用。这里，我简要对一些流行的库或原生方法进行对比，并得出我们的最佳选择。 <img src="https://i.loli.net/2018/12/15/5c14e2873d36c.png" alt=""> 主流的 ajax/http 方法库的兼容性和特性如上图所示。

2018/12/15

npm 管理依赖包

由于 npm 包的升级迭代速度很快，经常会出现 npm 依赖包过期或者安全性的问题。 如果项目是在 github 管理，它会在仓库首页提醒项目中存在有隐患的依赖。 <img src="https://i.loli.net/2018/12/12/5c10b0976c20c.png" alt="">

2018/12/12

七牛云回收测试域名后将图片下载到本地的解决办法

最近七牛云回收了测试域名，导致我在上面存的一些图片资源都访问不了。由于疏忽，之前没有注意到七牛云回收测试域名的邮件，导致现在在七牛云上也无法将图片资源下载到本地，传到其他的云上。 遂发起工单，终于找到了解决办法。

2018/11/19

nginx 反向代理

当只有一台服务器时，而服务器上有多个 node 的服务，我们需要使用 nginx 进行反向代理，使每个服务能够正常被访问到。

2018/11/17

mac 终端实现翻墙

最近在使用 brew 安装一些软件时发现速度太慢，而且不少因为超时问题而无法安装。然后我在 google 上查了很多网友提供的方法，发现大多都已经用不了或者是有些细微处有所错误，故此重新写一篇 mac 终端实现翻墙的文章。

2018/10/22

background 与 border 设置相同颜色却展示不一样

这两天在写一个需求的时候发现，当 background 与 border 设置相同时，颜色有时候展示会不一样 <img src="https://i.loli.net/2018/11/19/5bf2895d614ed.png" alt=""> 两张图的 background 与 border 都设置颜色相同，但是左边这张图，展示保持一致，而右边这张图却不一致

2018/9/29