SaRAku的博客

在Node.js中，实现不同线程或进程间的资源共享和上锁，通常需要针对场景选择合适的机制。提供了共享内存和原子操作，而cluster和主要依靠消息传递和外部存储解决资源共享问题。记住多线程和多进程编程都需要考虑同步和竞态条件等问题，合理设计代码以确保线程安全和数据的一臀性。

一直在苦恼项目的优化指标的问题。。。啊啊啊，然后看到下面这篇文章瞬间觉得写得好好，好有启发啊，记下来一下~

累积布局偏移（Cumulative Layout Shift，CLS），衡量页面上元素位置发生变化的频率和程度。具体来说，CLS是页面上所有意外布局移动实例的累计得分，每个实例的得分是影响的视口分数和移动距离的乘积。作为访问该网站的用户，我们可能无法确定页面何时完成加载。我们可能会尝试点击一个新闻故事，结果页面布局发生了巨大变化。这样一来，我们就会进入错误的页面，不得不浪费时间返回。根据页面的不同，这种情况可能会发生多次。如果频繁发生这种情况，我们就会失去对该页面继续访问的兴趣，导致用户留存度下降。

项目中的z-index书写不能太随心所欲，本文规范中以使用的公共组件antd中规定弹窗的z-index:1002为准，如果当前组件层级需要高于页面中的弹窗展示，则可以取大于1002的值，否则，应取值小于1002。大部分情况下我们更关注JS代码中的注释，但是CSS文件中也存在一些需要书写注释的地方，比如公用样式、复杂的CSS组合，LESS函数样式等，CSS中书写注释有利于划分CSS的层级组合、样式嵌套、维护复用等。并非所有的CSS选择器都会影响性能，关键是关注 右侧 关键选择器匹配范围广泛的CSS选择器。

Url可以传入一个对象，而不是简单的字符串，UrlObject的参数常用的有：hash、pathname、search、query。

需注意：因为固定高度的span包裹在lazyload里面，所以它仍然会用户下滑到某个距离才显示出内部内容 以及 高度，但是span \ padding-bottom的加载速度极快，比媒体资源快很多，所以可以达到下滑时看到固定高度的效果。于是不得已之下必须还是得选择固定高度的方案，翻找了一下网上的建议，最后找到了一个比较快捷的方式如下，只需要设定好每个媒体资源的宽高比例，以及宽度，即可自动设定好高度。直到这个季度有一个自上而下（不可抗力）的push。一个需求需要在懒加载的情况下跳转到底部的一个坐标。

对于Node端我们往往，可以借助框架对错误进行捕获，像koa就可以通过app.on error对错误在框架这一层进行捕获，同样他也是捕获内部没有被catch到的错误，像promise错误并不能捕获。方法也很简单，他们之间有一个很明显的区别，其他的普通错误会有一个message字段，资源加载错误没有这个字段，这样只要让这一段代码运行在所有资源之前，那就可以拿到这方面的错误了。生命周期来捕获子级组件的白屏错误，使本该白屏的组件实现UI上的优雅降级，展示错误提示，不至于直接显示出全白屏。

webpack4新增了一个sideEffects新特性，它允许我们通过配置的方式，去标识我们的代码是否有副作用，从而为Tree-shaking提供更大的压缩空间。经过本次分包后，主包肉眼可见地从800多k变为了500多k，里面杂乱重复引入的工具包减少了。如果一个包不合常理地比较大，可以看源代码里是否引入了其他不需要的代码，需注意lodash / @ant-design/Icon。这里的副作用指的是模块执行时除了导出成员之外所做的事情。我的项目中，我发现主包build后有800多k。

但是我在手机用微信打开QQ邮件，忽然发现这个被包起来的图片挪到整个邮件的最低端去了，无奈的我再用一样的table包裹大法把图片之后的 其他的所有样式也包起来，然后就正常了，字体大小不对的问题也正常了！以前总是吐槽QQ邮箱，写了html模板以后，我只想说：相比起国外的那些邮箱来说，你知道QQ邮箱有多努力吗呜呜呜，为了开发者它们的兼容做的真的已经是top级别了呜呜呜，QQ邮箱真的，太温柔了，我哭死。很难以想象图片渲染的时候经历了什么…然后我就用一个table把img包了起来，然后就好了…

今天开会，同事突然说，我们的项目首屏渲染时间太久，引起客诉了。怎么办呢，需要把项目从客户端渲染转为服务端渲染，也就是SSR，大家一起想想研究一下怎么改才好。我：啊？于是，打开Google，郑重地打出了三个字母+三个汉字：什么是SSR把学习笔记记录在这。——————————什么是SSR先看：https://juejin.cn/post/6844904017487724557讲的也很详细，带React样例（我的重点参考）：https://juejin.cn/post/68449038813909

taro升级版本里的坑好多。。。但是我的taro项目也是3.x版本呀？只是不是最新的3.3.7，但是在不久之前的几个月之前，它明明还是最新的版本（>^<），现在一旦开始准备认真写点东西，不知道为什么全全全是bug！撸起袖子干看这篇文章的读者，哪怕是使用最新版本的读者，也最好阅读一下官方的迁移指南，因为现在taro项目里的一些内容还是适用于1.x / 2.x版本的，还没有跟着升级，如果仗着自己使用的是最新版本就不关注迁移指南，会出好多新问题。推荐文档：1、 https://taro-doc

题目取得很大，实际上我还没读懂一些文章，先把笔记记在这里，希望以后能慢慢搞懂这个问题，再持续补充文档。从一个css样式引发的思考。前几天，遇到了一个问题：某一个div A使用了transform样式，导致另一个div B中fixed属性失效，fixed div B直接形成了absolute的效果，而它的参照父级变成了A。查找资料https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/以下属性都会造成类似的效果：具有以

参考内容来自于官方文档：https://developers.google.com/analytics/devguides/collection/analyticsjs简易版：https://support.google.com/analytics/answer/1008080首先申请个id，然后再有一个公网ip地址作为媒体资源的申请地址。接下来在代码里进行操作。1、将ga的创建代码在项目开始的时候运行一下，如下图。可以写一个analysis()函数，在项目启动的时候运行，以下代码会自动将

接到一个新任务是要为公司内网搭建官网。于是先按着ui图做了一版，登到内网上一看，ie连flex都不兼容！我的hover为什么也失效了（眼前一黑）颤抖着双手打开看版本……幸好上去看得早，还没怎么开始做，但是怎么开发兼容性项目呢，我又愁了。遂把遇到的一些问题和如何开发的过程记录在这里，苦中作乐：这也是一种修行吧。1、can I use这个网站可以查兼容性https://www.caniuse.com/2、查了下可以使用IETester做，我懒得下，直接用ie做页面了，控制台能看版本效果，试过谷歌的ie插

1、npm link 方便调试$ # 先去到模块目录，把它 link 到全局$ cd path/to/my-utils$ npm link$ # 再去项目目录通过包名来 link$ cd path/to/my-project$ npm link my-utils结束后回到模块目录。npm unlink2、进入地址，是组件打包之后的webpack入口3、关于打包的注意事项1、记得添加libraryhttps://segmentfault.com/a/1190000018242549

昨天npm弹了个提示框说自己更新了让我更新到最新版本，于是就更新了，今天下什么Npm i 都失败，一开始报下面这些错，然后我不信邪一直安装，就开始变成报ERR! Maximum call stack size exceeded网上说的安装淘宝镜像cnpm啥的没用，我最后的解决办法是根据node版本去把原本的npm版本重新下回来。下面的这个网址，找自己node对应的npm版本重新安装。https://nodejs.org/zh-cn/download/releases/...

掌握了umi+dva的这一套框架后，公司拉我进了一个项目组，是做手机app端的。主要的框架仍然是umi+dva，但是其中的页面主要是用hook写的，用到了material-ui，于是这一篇也是我的学习笔记。对于手机端前端开发，想知道几点：1、如何自适应，使用和web端一套的东西怎么能在手机上完美运行？2、手机端的操作事件是否有不同？3、为什么要用hook而不是class写？希望学习后能对这几个问题有所解答。而中间还会有新问题，都统一记录在这里面。reacthook做手机端学习练习：可以克隆来看

学习：dva/antd pro为主，还有saga/redux等等刚进公司，啥也不懂，光速拔苗助长1、saga：effect / yield call pull非常详细https://redux-saga.js.org/docs/basics/DeclarativeEffects.htmlhttps://blog.youkuaiyun.com/qq_38719039/article/details/805667662、ant design pro1、权限控制https://www.jianshu.com/

1、使用插件：reactjs-swiperhttps://www.cnblogs.com/cbp-jltx/p/9681838.htmlreact插入图片：https://www.cnblogs.com/cheeseCatMiao/p/9797136.html在public下建文件夹imgs这个方法的示意图（虽然它动的又慢又卡，但真的只是转gif不灵活的锅，原本还是很流畅的。这个方法不能点底下的小圆点，没有边上的前后按钮，只是单纯的轮播，真的很单纯，我翻了翻github的源地址，例图就是这样，只能

rem是针对html的字体大小来说的，所以只要查询html的宽度大小进行字体设置，就能达到整个页面范围内的尺寸变化。一个页面中只有一个html元素，与所有的页面元素尺寸挂钩，达到了整体控制的目的。而html的尺寸变化，通过媒体查询@media媒体查询：引入资源：每个尺寸，写一套不同的样式表使用less：前几个博客里有学。使用less+rem+@media写适配：...