前端性能优化备忘录

本文记录了通用场景下需要检查的优化事项,不包括如虚拟滚动、animation合成层等特殊场景下的优化。

Read more

技术演进随想

最近在翻一本买了N久没翻完的书《深入浅出Node.js》,看到第9章玩转进程的Cluster模块,讲到基于事件驱动的单线程模型想要充分利用CPU核心,需要为每个进程各自分配一个CPU,Node.js提供 os.cpus() 方法以获取当前CPU的逻辑核心数,并提供了child_process和cluster来实现Master-Worker模式。

这本书是13年出版的,当时容器的技术还没有大规模流行。而在当前这个容器化时代,我们已经不需要使用cluster的方式来充分利用CPU了,一般一个容器里只启动一个进程。这句话来自天猪2年前在CNodejs论坛的答复

Javascript代码是如何被压缩的

通常我们用到的打包工具如 webpack,会在打包的时候将源代码合并在一个文件中,并且压缩成一行,去掉能去掉的空格、换行。合并代码这一步,是由 webpack 框架完成。压缩代码则是借助第三方混淆压缩代码库 terser 完成。

terser 的压缩分两步,压缩(compress)和混淆(mangle)。compress 负责去掉空格,将能合在一起的表达式合在一起。mangle 负责缩短变量的长度,又叫混淆。主要流程是构造 ast,遍历 ast,根据配置转换 ast。

Read more

基于前端组件库的跨部门协作方式思考

ToB类的产品,存在业务大量相似,少量差异化的特点。产品在设计的时候如果缺少思考,不考虑复用,产品在后期迭代中会慢慢变成1个厂商1个完全定制化的项目,复用率越来越低,造成企业开发成本升高,设计&开发人员无效工作量大的情况。

本文提供了一种基于组件库的跨部门协作方式思路,供遇到此类问题的读者参考。

需要注意的是,本文的组件库,并不是类似 antd、element-ui 之类的基础组件库,而是基于业务拆分的最小单元,即业务组件库。

Read more

二零二一年终总结

2021

关键词:双减、医疗、区块链、Web3.0、零知识证明

Read more

响应式布局实战

响应式布局(Responsive Layout)是指能够针对不同屏幕尺寸、分辨率做出合理布局和样式调整的一整套解决方案。经常会看到一些网站,在 PC 端放了一大堆功能,切换到移动端后整体样式大变样,功能也被阉割不全。又或者一个移动端的网站,在 PC 端点开,字体无比巨大,按钮遮住大部分页面,严重的甚至无法正常浏览。笔者之前写过一篇《基于媒体查询和 rem 的响应式布局实践》,现在看来有一些细节没有覆盖到,于是便有了本文。本文将通过几个典型的实战页面,将笔者在响应式布局上的一些经验分享给大家。

Read more