注册
环信即时通讯云

环信即时通讯云

单聊、群聊、聊天室...
环信开发文档

环信开发文档

Demo体验

Demo体验

场景Demo,开箱即用
RTE开发者社区

RTE开发者社区

汇聚音视频领域技术干货,分享行业资讯
技术讨论区

技术讨论区

技术交流、答疑
资源下载

资源下载

收集了海量宝藏开发资源
iOS Library

iOS Library

不需要辛辛苦苦的去找轮子, 这里都有
Android Library

Android Library

不需要辛辛苦苦的去找轮子, 这里都有

复盘:这个注意力的陷阱,越早改掉越好

本文2048字,阅读只需3分钟。 以下为正文。 昨天晚上12点,我洗漱完,刚要入睡的时候, 忽然听到楼下吵闹起来,声音此起彼伏。 接着是小孩的哭闹声,搬桌子的声音,路人的帮腔声。 又过了几分钟,水果摊主的声音也加入了:“不要再吵了,我们要准备收摊休息了”。 强...
继续阅读 »

本文2048字,阅读只需3分钟。


以下为正文。


昨天晚上12点,我洗漱完,刚要入睡的时候,


忽然听到楼下吵闹起来,声音此起彼伏。


接着是小孩的哭闹声,搬桌子的声音,路人的帮腔声。


又过了几分钟,水果摊主的声音也加入了:“不要再吵了,我们要准备收摊休息了”。


强忍着睡意,推开窗子瞥了一眼:阵仗好大,都围成水桶了,都是一群看热闹不嫌事大的。


回去倒头就睡,


但是大脑异常清醒。


于是,就开始复盘一些事情。


我们太容易被无关紧要的事情吸引,而忘记了自己昂贵的注意力究竟应该放在哪里。


生活中,大家似乎很喜欢「围观」这件事情。


在现实世界里围观


走在街上,看到有热闹的事情,马上就上去围观了。


但发生的事情,无外乎就是:


1、娱乐营销,引导消费。


2、吵架撕逼,互相揭短。


3、发生车祸,血肉模糊。


正如今天发生的事情,两个摊主发生矛盾,跟围观的路人半毛钱关系都没有。但就是架不住看热闹的心态,身体忍不住上钩了。


就这样,时间一点一点浪费掉了。


同时,在公园里也能看到围观的画面。


公园里两个老大爷在下棋,


以棋盘为圆心,2米的距离为半径,画一个圆,周围站满了围观的人群。


事情的发展往往变成这样。


刚入场,站好立场,指点江山。


再然后,发现立场不对,相互说服。


就这样,时间一点一点浪费掉了。


类似的事情不止发生在现实世界里,还发生在网络上。


在网络世界里围观


从新闻里看世界


1、七旬大爷结婚3次被瓜分财产


2、好欣慰,残疾大熊猫终于学会爬树了


3、普京不再低调,美国罕见服软


4、吴秀波,将7年情人送进监狱,如今为自己的风流付出代价


5、印度男子因新娘高中成绩差退婚


每天各种新闻App给我推过来这些内容都让我作呕。


从抖音里看世界


看娱乐新闻,追陈坤跟周迅的私生子的真实性。


看颜值视频,扭腰扭屁股,冲着屏幕邪魅一笑。


看健身视频,评论区里指责up主身板像猴子。


从技术社区里看世界


本来打算学习技术问题的,一下子就被文章评论区的「理智」发言吸引了。


比如抨击作者技术不行。


比如说作者不写技术文章,写这种水文的撕逼。


话题一旦打开,如开闸的洪流,进而演变成无休止的争论。


跟今晚外面的争论是不是如出一辙?


我们太容易被无关紧要的事情吸引,而忘记了自己昂贵的注意力究竟应该放在哪里。


注意力才是最重要的


注意力才是最重要的,远比技术、思考、底层逻辑这些东西都重要100倍。注意力在哪,事业就在哪(是事业,而不是工作)。


好,如果改掉了围观的坏毛病,开始认真的关注自己的注意力了呢,接下来还会掉入另外一个陷阱。


那就是追趋势。


追趋势


类似的经历很多。


风口来了追风口。


1、P2P火了,我要投资。


2、短视频直播火了,我要跟上。


3、NFT火了,我要入局。


4、内容创业火了,我要开始写作。


5、知识付费火了,我要开始学做课。


风口来了,镰刀也跟着来了。


还有,政策来了追政策


国家对互联网+的扶持,是个创业机会。


国家对新能源的扶持,投资新能源股票吧。


国家对实体行业的扶持,现在从互联网跳槽去传统企业好不好。


一通操作,干废了。


还有,热点来了追热点


李嘉诚投资了中国哪些项目?


俄乌战争的持续发酵对中国的影响?


硅谷银行倒闭对中国投资的影响?


热点一天一个样子,本质上我们追热点的心一点都没变。


就拿前面说的「内容创业」这个事情来说,


用20多年积累的名人名言,告诉我:


1、机会是留给有准备的人。


2、机会是留给行业有积累的人。


3、机会是留给聚焦深度的人。


要做到这三点,都需要长期付出注意力才行。那把注意力花在了围观上,做成这件事的人凭什么是我呢?


未来自己坐庄


大学的时候读过一本书叫做《刻意练习》,大概的意思是:一个人只要对一件事情付出足够的时间进行刻意练习,就能成为这方面的专家。


我今天想到的「注意力」这个词,跟这个刻意练习是同一个意思。


段永平的《投资问答录》里面记忆最深的一句话是:坚持做对的事情,并努力把事情做对。


我在这句话里面看到的是在一个对的方向上持续投入注意力,长期坚持,成为这个事情的专家。


从时间的长度来看,无论是李嘉诚也好,巴菲特也好,做的事情最终拼的也是概率。大部分时间,有赢有亏,但是赢的概率明显高于亏的概率。


而长期投入注意力,做自己很了解的事情,就是提高赢的概率。


毕业以来,


躲过了消费主义的陷阱。


躲过了P2P的陷阱。


躲过了无脑恋爱的陷阱。


最终却没躲过理财投资的陷阱。


年轻的时候,被什么东西割上一刀是没法躲避的。从小到大,也没人跟我说过上面的陷阱到底是怎么一回事。


对规则不了解,没有亲身经历过。


而每一个盘子,庄家的设计都直指人性的自负、贪婪、消极、享乐。


手里存款从0-100万的过程,总有一把镰刀是向你挥舞的。


但自从知道自己的注意力在哪里,


刻意练习加以辅助,


在未来,无论再小的一个盘子,我可以自己坐庄。


如果这篇文档对你有帮助,欢迎点赞、关注或者在评论区留言,我会第一时间对你的认可进行回应。精彩内容在后面,防止跑丢,友友们可以先关注我,每一篇文章都能及时通知不会遗失。


作者:程序员摩根
链接:https://juejin.cn/post/7212169137787289656
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

高仿PPT特殊文字效果,TextView实现

事情是这样的,我无聊刷到一个B站视频【旁门左道PPT】我发现了大厂发布会中,少文字PPT还贼高级的秘密!。看到视频中这个特殊的PPT文字效果,个人感觉非常高端。我就想,能不能用TextView来实现。于是就有了这篇文章,效果如下图: ...
继续阅读 »

事情是这样的,我无聊刷到一个B站视频【旁门左道PPT】我发现了大厂发布会中,少文字PPT还贼高级的秘密!。看到视频中这个特殊的PPT文字效果,个人感觉非常高端。我就想,能不能用TextView来实现。于是就有了这篇文章,效果如下图:

















简单填充加入文字排版加入动画

图片填充


在Android中,google提供了 BitmapShader 来实现图片填充的功能。代码如下


public BitmapShader(@NonNull Bitmap bitmap, 
@NonNull TileMode tileX,
@NonNull TileMode tileY)

参数介绍:


● bitmap:用来做填充的 Bitmap 对象


● tileX:横向的 TileMode(平铺模式)


● tileY:纵向的 TileMode


TileMode有三种:分别是 Shader.TileMode.CLAMP、Shader.TileMode.MIRROR、Shader.TileMode.REPEAT


● Shader.TileMode.CLAMP:如果着色器超出原始边界范围,会复制边缘颜色。


● Shader.TileMode.MIRROR:横向和纵向的重复着色器的图像,交替镜像图像是相邻的图像总是接合。


● Shader.TileMode.REPEAT: 横向和纵向的重复着色器的图像。


接下来,我们自定义 TextView,让它使用我们定义的Shader,代码如下:


class MaskTextView: androidx.appcompat.widget.AppCompatTextView {

constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
)

private var shader: BitmapShader? = null

fun setMaskDrawable(source: Drawable): Unit {
val maskW: Int = source.getIntrinsicWidth()
val maskH: Int = source.getIntrinsicHeight()

val b = Bitmap.createBitmap(maskW, maskH, Bitmap.Config.ARGB_8888)
val c = Canvas(b)

c.drawColor(currentTextColor)
source.setBounds(0, 0, maskW, maskH)
source.draw(c)

shader = BitmapShader(b, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP)
paint.shader = shader
}
}

免费壁纸网站中找到一个你喜欢的图片,调用 setMaskDrawable 方法时,我们就可以看到填充后的效果了。效果如下:



但是光这个效果还不够,还需要设置文字排版。看【旁门左道PPT】我发现了大厂发布会中,少文字PPT还贼高级的秘密!我们知道,有三种文字排版,分别是 高低低高、高低高低、低高低高,它们都需要修改文字的 baseline 来实现。


如何修改单个字符的 baseline 呢?很简单,不需要重写 onDraw 方法。我们可以自定义 Span,然后通过 TextPaint 来实现。在上代码前,先介绍一下 TextPaint,TextPaint 继承 Paint,在绘制和测量文本时给Android一些额外的数据。它的属性介绍如下:


● baselineShift - 基线是文本底部的线。改变baselineShift会使基线向上或向下移动,所以它影响到文本在一条线上的绘制高度。


● bgColor - 这是文本后面的背景颜色。


● density - 暂不清楚它的作用


● drawableState - 暂不清楚它的作用


● linkColor - 一个链接的文本颜色。


可以看到我们只需要修改 baselineShift 就可以改变单个文字的 baseline 了,自定义的Span的代码如下:


class TextUpOrDownSpan(private val isUp:Boolean, private val offset: Int): CharacterStyle() {

override fun updateDrawState(tp: TextPaint?) {
tp?.baselineShift = if(isUp) - offset else offset
}
}

效果如下:



添加一个波浪动画


我们也可以给我们的图片填充增加一个动画,其中最常见的就是波浪动画了。效果实现很简单:


第一步:在波浪效果网站上下载一张自己想要的波浪图片



第二步:创建自定义的TextView,加上对应的参数,方便做动画。代码如下:


class AnimatorMaskTextView: androidx.appcompat.widget.AppCompatTextView {

private var shader: BitmapShader? = null
private var shaderMatrix: Matrix = Matrix()
private var offsetY = 0f
var maskX = 0f
set(value) {
field = value
invalidate()
}
var maskY = 0f
set(value) {
field = value
invalidate()
}

fun setMaskDrawable(source: Drawable): Unit {
val maskW: Int = source.getIntrinsicWidth()
val maskH: Int = source.getIntrinsicHeight()

val b = Bitmap.createBitmap(maskW, maskH, Bitmap.Config.ARGB_8888)
val c = Canvas(b)

c.drawColor(currentTextColor)
source.setBounds(0, 0, maskW, maskH)
source.draw(c)

shader = BitmapShader(b, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP)
paint.shader = shader
offsetY = ((height - maskH) / 2).toFloat()
}

override fun onDraw(canvas: Canvas?) {
shaderMatrix.setTranslate(maskX, offsetY + maskY)
shader?.setLocalMatrix(shaderMatrix)
paint.shader = shader
super.onDraw(canvas)
}
}

第三步:使用Android的动画api,控制图片的位置。代码如下:


val maskXAnimator: ObjectAnimator = 
ObjectAnimator.ofFloat(textView, "maskX", 0f, textView.width.toFloat())
val maskYAnimator: ObjectAnimator =
ObjectAnimator.ofFloat(textView, "maskY", 0f, (-textView.getHeight()).toFloat())
val animatorSet = AnimatorSet()
animatorSet.playTogether(maskXAnimator, maskYAnimator)
animatorSet.start()

效果如下:



作者:小墙程序员
链接:https://juejin.cn/post/7212418415976529981
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android记一次JNI内存泄漏

记一次JNI内存泄漏 前景 在视频项目播放界面来回退出时,会触发内存LeakCanary内存泄漏警告。 分析 查看leakCanary的日志没有看到明确的泄漏点,所以直接取出leakCanary保存的hprof文件,保存目录在日志中有提醒,需要注意的是如果是a...
继续阅读 »

记一次JNI内存泄漏


前景


在视频项目播放界面来回退出时,会触发内存LeakCanary内存泄漏警告。


分析


查看leakCanary的日志没有看到明确的泄漏点,所以直接取出leakCanary保存的hprof文件,保存目录在日志中有提醒,需要注意的是如果是android11系统及以上的保存目录和android11以下不同,android11保存的目录在:


   /data/media/10/Download/leakcanary-包名/2023-03-14_17-19-45_115.hprof 

使用Memory Analyzer Tool(简称MAT) 工具进行分析,需要讲上面的hrof文件转换成mat需要的格式:


   hprof-conv -z 转换的文件 转换后的文件

hprof-conv -z 2023-03-14_17-19-45_115.hprof mat115.hprof

打开MAT,导入mat115文件,等待一段时间。


在预览界面打开Histogram,搜索需要检测的类,如:VideoActivity


screenshot-20230314-204413.png


搜索结果查看默认第一栏,如果没有泄漏,关闭VideoActivity之后,Objects数量一般是零,如果不为零,则可能存在泄漏。


右键Merge Shortest Paths to GC Roots/exclude all phantom/weak/soft etc,references/ 筛选出强引用的对象。


image.png


筛选出结果后,出现com.voyah.cockpit.video.ui.VideoActivity$1 @0x3232332 JIN Global 信息,且无法继续跟踪下去。


screenshot-20230314-205257.png


筛选出结果之后显示有六个VideoActivity对象没有释放,点击该对象也无法看到GC对象路径。(正常的java层内存泄漏能够看到泄漏的对象具体是哪一个)


正常的内存泄漏能够看到具体对象,如图:


image.png
这个MegaDataStorageConfig就是存在内存泄漏。


而我们现在的泄漏确实只知道VideoActivity$1 对象泄漏了,没有具体的对象,这样就没有办法跟踪下去了。


解决办法:


虽然无法继续跟踪,但泄漏的位置说明就是这个VideoActivity1,我们可以解压apk,在包内的class.dex中找到VideoActivity1 ,我们可以解压apk,在包内的class.dex中找到VideoActivity1这个Class类(class.dex可能有很多,一个个找),打开这个class,查看字节码(可以android studio中快捷打开build中的apk),根据【 .line 406 】等信息定位代码的位置,找到泄漏点。


screenshot-20230314-205442.png


screenshot-20230314-205600.png
screenshot-20230314-205523.png


根据方法名、代码行数、类名,直接定位到了存在泄漏的代码:


screenshot-20230314-205730.png


红框区内就是内存泄漏的代码,这个回调是一个三方sdk工具,我使用时进行了注册,在onDestory中反注册,但还是存在内存泄漏。(该对象未使用是我代码修改之后的)


修改方法


将这个回调移动到Application中去,然后进行事件或者回调的方式通知VideoActivity,在VideoActivity的onDestory中进行销毁回调。


修改完之后,多次进入VideoAcitivity然后在退出,导出hprof文件到mat中筛选查看,如图:


image.png


VideoActiviyty的对象已经变成了零,说明开始存在的内存泄漏已经修改好了,使用android proflier工具也能看到在退出videoactivity界面之后主动进行几次gc回收,内存使用量会回归到进入该界面之前。


总结:



  1. LeakCanary工具为辅助,MAT工具进行具体分析。因为LeakCanary工具的监听并不准确,如触发leakcanary泄漏警告时代码已经泄漏了很多次。

  2. 如果能够直接查看泄漏的对象,那是最好修改的,如果不能直接定位泄漏的对象,可以通过泄漏的Class对象在apk解压中找到改class,查看字节码定位具体的代码泄漏位置。

  3. 使用第三方的sdk时,最好使用Application Context,统一分发统一管理,减少内存泄漏。

作者:懵逼树上懵逼果
链接:https://juejin.cn/post/7210574525665771557
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

文心一言:这48小时,我被问了xxxx个问题

16日下午14:00文心一言开启邀测了!作为国内首个新一代知识增强大语言模型、生成式 AI 产品,“邀测通道”瞬间被挤爆,甚至连百度人自己也需要排队等候。  但随着厂长的一声令下,开放了百度内部全员申请  一场由百度人自己发起的文心一言4...
继续阅读 »

16日下午14:00文心一言开启邀测了!作为国内首个新一代知识增强大语言模型、生成式 AI 产品,“邀测通道”瞬间被挤爆,甚至连百度人自己也需要排队等候。 


但随着厂长的一声令下,开放了百度内部全员申请 


图片

一场由百度人自己发起的文心一言48h 内测开始了…… 


由于发布当天是星期四,众所周知的老梗被提上日程 。

图片

这题一言表现不错,晚上加鸡腿! 


图片

本山西小编很好奇这位同学来自哪里,难道是老乡? 

图片

这位同学继续发问,“波棱盖”这很不山西,评论区有人知道这是哪里的说法吗? 


还有人用文心一言玩起了成语接龙,合理怀疑这位同学在摸鱼。

图片


语文考试通过,紧接着就是数学考试 。

图片


一问一答都表现不错,接下来是一场多轮考验。

图片

图片

不得不说,一言这张夜色昙花图,真是开到小编心里了。


下面这个问题,小编都嗅到了甜甜的味道,看来这位同学好事将近啊!

图片


下面这个魔鬼问题,让小编回忆起被英语听力支配的恐惧。

图片


看着大家晒出与一言的对话,小编只能感叹一句中华文化博大精深!一言你辛苦了,加油!


虽然测试在火热进行中,但可能还是有不少小伙伴没有办法第一时间使用文心一言,大家有什么问题需要我帮你问,欢迎评论区留言,小编继续帮大家刁难文心一言。


小tips:
个人用户:访问 yiyan.baidu.com,点击『立即体验』,目前可排队体验文心一言
企业用户:访问百度智能云官网进行申请,预约体验文心一言API调用服务


作者:飞桨PaddlePaddle
链接:https://juejin.cn/post/7211897235013402682
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

练习时长长达两年半的前端练习生——折腾半生,归来仍是菜鸡🥬🐤

毕业一年半,工作两年半 2021年毕业,虽然说是计算机专业毕业,但是大学嘛,懂的都懂 🥬🐤 大二暑假参加了Java老师组织的自学小组。【学Java未半,而中道转投前端】,自学了 HTML、CSS、JavaScript前端三剑客,大三下半学期,手持这三把 “利剑...
继续阅读 »

毕业一年半,工作两年半


2021年毕业,虽然说是计算机专业毕业,但是大学嘛,懂的都懂 🥬🐤


大二暑假参加了Java老师组织的自学小组。【学Java未半,而中道转投前端】,自学了 HTMLCSSJavaScript前端三剑客,大三下半学期,手持这三把 “利剑” 开始找工作 🤺 🤺🤺(此时我还不知道啥是框架)


果然是单纯未经世事的学生啊,结局嘛不仅是碰了一鼻子灰,更是备受打击😔。历时一个月,光公交费都花了三百多。


这一个月的感悟总结出来就是一句话:一定要掌握一个框架,一定要背面试题


工作


经历过现实的打击后,意识到了自己的不足,花了一些money,买了关于Vue(还涉及到超前沿的Vue3🐂)和React框架的课和一系列的JS基础课,开始埋头苦学。


实习


大四上学期还是要去学校上课的,在我三天两头校内校外跑,三天打鱼两天晒网的努力之下,终于找到了一份实习工作,技术栈是Vue和JS



面试真的是最有效率最有效果的学习方式,面试的路上 坐在公交车上都在背面试题,效率嘎嘎高,半个月顶我半年的学习效果



不得不说,公司氛围很好,老板领导都很棒,同事都很nice


经过大半年的努力工作和加班,我也到了毕业的日子


2021年,我青葱岁月画上句号的一年。于是为了顺利毕业,赶上青春最后的小尾巴,于是辞职回校毕业答辩


六月份毕业后,开始挥师北上


正式工作


在北京找到了一份工作,一直干到现在


工作前期,一直使用的都是JQueryvue2用于维护老项目,JQuery也是现用现学


公司领导还是相当鼓励使用新技术的,现在开发基本上也都是Vue3TS,但是还是时不时的维护和更新祖传的JQuery老项目


现在的这个公司是我毕业后面试的第一份工作,当时刚毕业,正在迷惘和不知所措中挣扎,也没有好好的准备面试,面了这一个就赶紧确定下来了。**建议大家在找工作时一定要多准备准备,多面试几家,一定不要太着急**

生活


北京可真大呀,租房可真贵呀,租的第一个房子在北京的西北角,凤凰岭附近,房租2200,通勤一个半小时左右,早上六点多就起来,晚上回到家都十点多


image.png


花了两千多大洋,买了一个灵眸相机,准备周末出去转一转记录一下美好的人生,但是和对象的休息时间不一致,所以周末我基本上也没出去过,这个相机也一直在角落里吃灰


image.png


现在手机也都能满足我们的拍照摄影需求,所以想买这个玩意的朋友,听老弟一句劝,别买了,这是真鸡肋啊


2022年换了个房子,离我俩上班的地方都挺近的,但是房租也是真贵,将近四千了


在北京的第一个七夕,花太贵了。请了一下午假,花了七十大洋买各种材料,做了个蔬菜花,不仅能吃一顿还能再吃一顿,真是经济又好吃 ^_^


image.png


image.png


副业挣钱



生命不息,折腾不止



缺钱啊!想要挣钱


两年前做了一个个人公众号,经常三天打鱼两天晒网的更新,找工作的时候经常发面试题和答案集锦,现在工作了也有很长时间没有更新了


2021年参与了一个活动,想折腾着找点副业干,于是跟几个朋友运营一个公众号,现在公众号也盈利了一段时间了,由于我自己不擅长引流,只能埋头苦干,分成收益寥寥无几,但是聊胜于无,下一步继续努力学习引流争取挣大钱


2022年一边做着公众号,一边寻求着突破


继续折腾,开始做闲鱼: 扒图片写文案,上架商品,每天都需要一两个小时的时间去选品、整理文案,一个月的时间卖出了十几件东西,一共收入一百出头,因为那一阵公司正忙,天天加班,也没有多余的时间在这上面,所以就慢慢放弃了。如果坚持下来一个月也能有个千八百的,可惜没有如果,但是耗费时间也是真的,工作不忙的朋友可以尝试下


坚持+执行 才能有结果

2022年尝试了一些事情,执行了,但是没有坚持。


2022


回望2022,回想自己的所作所为,这一年过的得过且过,没有目标没有动力,打鱼晒网是常态,咸鱼翻身是为了刷抖音🐠🐠🐠


这一年在公众号上抽中了两本书,一本《vue技术内幕》一本《前端架构师》,但是都放在书架上吃灰了


这一年更新过几次公众号,之前一直有记录面试题的习惯,也整理过一部分,并且把它们发到公众号上了,今年也整理了一些,但是内容不太完整,有一些还没找到答案,所以有一些也没有发到公众号上


image.png


这一年也获得过一些赞同,偶然间在github上看到大佬们的介绍页非常花里胡哨,我也整了一个,并且写了一个教程,收获了三十多个star,感觉心里美美哒~


github项目地址


掘金文章:# gitHub的readme页的卡片和提交活动图的制作方法


image.png


曾经梦想着成为一名开源大佬,尝试着写了一个的开源的JS工具库,写了几个工具函数就没再更新过了,这年它也算是烂尾了~


参加了几次掘金的月更活动,水了几十篇关于算法的文章,还获得了一些小礼品。并且学习用VuePress搭建了一个在线文档,里面记录了一些方法函数,还有我写的算法文章。掘金好像还改了月更活动的规则,以后单独用一个算法题不能算更文了,看来以后参加活动该换一种方式水了🐶。不过算法还是要继续学的,以后也会不定期更新算法



我写的文章还是有很多干货的,不信你看我的这个专栏:# 真·实用技能-从零实战



learnjts.png


还突然心血来潮对元宇宙区块链开始感兴趣了,买了极客时间的课,在B站学习了一点solidity,但也都是浅饮辄止,花了100大洋在币安上买了几个币,第二天就跌到97😂。


买了一个掘金的会员🥰,学习了几本小册;掘友们都说会员标志不够大不够闪💥,非常赞同😝


🥳🥳🥳跟几个大学舍友小聚了一下。有个周末还和一个舍友去4S店逛了逛看了看车,只看不买,诶~就是玩。店员也不管,这么多车我看着都一样,只能看出来小轿车和SUV,朋友挨个给我讲解🤠不得不说这个SUV坐着就是舒服


image.png


2023


2023就要来了,flag当立则立,没有flag的新年是没有灵魂的一年


image.png



  • 看完《vue技术内幕》和《前端架构师》这两本书

  • 深入学习 React和TS,完成一个完整的项目

  • 学习web3技术(web3.js、solidity)

  • 开源一个项目

  • 持续更新公众号,深耕自媒体

  • 折腾一个服务器,申请一个域名持续折腾

  • 玩遍北京,去北京外面玩一次(让我的口袋云台相机发挥作用)

  • 一定要换一个新的发型,烫个头

  • 换个新工作

  • 输出优质文章,多薅几次掘金的羊毛

  • 和朋友多聚聚,喝酒聊天吹🐄🍻


一个总结,写了大半个月😂😂😂


作者:董员外
来源:juejin.cn/post/7182217167134261308
收起阅读 »

随想 小城市的程序员该如何生存

前言 Hello,这里是百里, 一个无所事事的老年程序员. 随便写写,感慨一下.现今社会越来越畸形,以前打仗农村包围城市,现在经济也农村包围城市.一方面享受的交通,经济娱乐的便利,一方面又感慨,大城市何处是家. 今天讲讲我一个半路出身程序员的想法,以及将来我该...
继续阅读 »

前言


Hello,这里是百里, 一个无所事事的老年程序员.


随便写写,感慨一下.现今社会越来越畸形,以前打仗农村包围城市,现在经济也农村包围城市.一方面享受的交通,经济娱乐的便利,一方面又感慨,大城市何处是家. 今天讲讲我一个半路出身程序员的想法,以及将来我该如何或者我想如何.


半路出身转程序


普通二本,机械专业,直接进了校企和做的国家投资单位,做一名优秀的流水线工人.没错干了1年多真就流水线,我负责QA品质检查,检查玻璃质量如何,有没有损坏异色,干了1年多.工资5500一个月,每天9小时 ,单休.我当时还觉得我挺高兴的.直到发现招工时候,高中毕业的人也和我干一样的活,还是我领导,比我进来还晚.ε=(´ο`*)))唉ε=(´ο`*)))唉 .


18年裸辞,在家自己学了一下程序,最开始学的是java 学了3个多月,面了一家医疗企业,但是没让我做开发,让我做运维实施.因为有些编程基础,平时可以自己改改.工资其实也不错,在房价1.3w的地方能开到1.2w一个月. 缺点么..
我离职的时候还有176天的假期没修完. 基本上无休.我干了两年.


20年.刷抖音时候看了python 怎么怎么好 ,一咬牙一跺脚,花了3w多培训了python ,当初讲的多好多好, 但是,但是,这工作只能在大城市,我们这小地方 ,最好找工作的依然是php 和java ,python 一个都没有.至今还记得那个培训机构叫做 某男孩. 76个人进去的14个人毕业, 还说毕业率100% ,呵呵呵 骗子企业.


再后来凭借着会一些sql ,在某传统企业,做erp 二开, 基于delphi, 一直干到现在.


大城市就业机会多VS 小城市生活惬意


现今很多人不结婚,晚婚,多半是因为大城市生活节奏快,或者说结婚了没有物质基础,结婚了以后孩子怎么办,自己本身很痛苦了,让孩子更痛苦?


我是23岁结的婚,老婆是大学同学,大学谈了4年,当初也想过去大城市去打拼,因为同样的工作甚至更简单的工作工资就比我熬夜加班高的多. 但是我退缩了.传统农村人思想罢了.想回到家老婆孩子热炕头,小地方两个人赚一个月工资也够活的.

我有很多朋友在北京大厂,一年20w ,30w 的 工作 ,做的跟我相同的工作. 其实真的很羡慕,一年顶我2年的工作.也不是没想过去北上广深,但是我受不了孤独,哈哈矫情罢了..抛弃不了孩子老婆.


我们自己有一片菜地,还有个小院子,会自己种菜,还养了鸡.家门口有小河 , 偶尔还跟岳父抓抓鱼,真就码农.


讲讲技术栈


到现在入门程序已经快3年了.看到掘金中各种大佬说的东西讲道理,,完全看不懂,也许是年纪大了,(马上27),不知道学什么好,我的想法就是这辈子我不打算去大城市,就小城小桥流水活着 ,但是老技术不能吃一辈子, delphi 的工作讲道理我感觉做不久, 好多同学甚至不知道这个语言干嘛的.
本身技术栈.


python ,花了3w培训的,简单的没什么问题,不过好久没用了.


delphi,不能说精通,但是基本干活没啥问题.curd 没问题.天天用.


VUE2,3 ,偶尔做做bi,没事自己学的,买的课,但是也就是学了而已,学完了就忘了, 因为用不到. 而且也不深,因为看所谓的面试题,基本上不会,我一度认为我学的是假的东西 ,还去找人家退款.


SQL/kattle 算不上精通, 属于干活没问题情况, 因为delphi 是基于sql 存储过程的语言,动不动sql 写上万行... 那种 . 至于kattle 则是偶尔取数,做bi使用 ,还是停留在 能用会用, 问我就挂那种情况 .


帆软/数据分析 : 公司花钱买了帆软的8000 的课, 考试我是都考过了,然后 Bi 还是拿vue 做. 小程序 拿 uniapp 做. 也不知道为啥花钱买这个, 我兴师动众的学了3个多月基本上都会做,但是还是那句话 ,用不到,现在也就是学过了而已.


SAP 今年公司新近的业务, 讲道理 据说这个工资很高,而且很吃香, 现在ABAP 自己学了几个月了,已经能入手一些业务,不知道将来的发展如何. 继续用着吧.


未来及方向


年纪越来越大了,响应国家政策,现在努力二胎,又是一笔开销.


越活越迷茫,我该做什么,我该学什么 ,当前领导总是让我看了很多什么什么做人,怎么怎么演讲的书,美名其曰成长,但是我觉得还是东西学到手了才是真的.


打算扎根制造业,对于erp ,mes ,aps 等业务流程还是很熟悉的, 感觉制造业都用的东西还是可以的. 打算学sap,数据分析,BI方向吧. 也不知道方向对不对.


以上随便写写,27了还迷茫不知道是不是因为半路转行的缘故.


后续


三百六十行,行行转IT,感觉现在IT 这碗水早晚要洒,只是年头问题.当然如果非常牛逼的人除外.
但是人如果区分家庭和事业哪个更重要,也不好分辨,各有各的道理.


认识一个以前在群里的大佬.34岁没结婚,没孩子,死了,技术贼牛逼.也认识啥都不会但是光靠说也能拿几十万的人.钱难赚,钱又好赚. ε=(´ο`*)))唉 .
行了 写完继续摸鱼, 写写技术笔记吧.


不知道有没有在夜深人静的时候想过,我将来怎么

作者:百里落云
来源:juejin.cn/post/7140887445632974884
办,这种可笑的话题.

收起阅读 »

Android悬浮窗自己踩的2个小坑

最近在做一个全局悬浮窗基于ChatGPT应用快Ai,需要悬浮于在其他应用上面,方便从悬浮窗中,和ChatGPT对话后,对ChatGPT返回的内容拖拽到其他应用内部。快Ai应用本身透明,通过WindowManger添加悬浮窗。类似现在很多应用跳转到其他应用,会悬...
继续阅读 »

最近在做一个全局悬浮窗基于ChatGPT应用快Ai,需要悬浮于在其他应用上面,方便从悬浮窗中,和ChatGPT对话后,对ChatGPT返回的内容拖拽到其他应用内部。快Ai应用本身透明,通过WindowManger添加悬浮窗。类似现在很多应用跳转到其他应用,会悬浮一个小按钮,方便用户点击调回自身一样。只不过快Ai窗口比较大,但不全屏。


碰到以下几个问题:


1、悬浮窗中EditText无法获得弹出键盘


主要是没有明白下面两个属性的作用,在网上搜索之后直接设置了。



  • WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE


设置FLAG_NOT_FOCUSABLE,悬浮窗外的点击才有效,会把事件分发给悬浮窗底层的其他应用Activity。但设置了FLAG_NOT_FOCUSABLE,屏幕上除悬浮窗之外的地方也可以点击、但是悬浮窗上的EditText会掉不起键盘。


此时悬浮窗外的事件是不会触发悬浮窗内ViewonToucheEvent函数,可以通过添加WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH标志位,但无法拦截事件。




  • WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL


    屏幕上除了悬浮窗外能够点击、弹窗上的EditText也可以输入、键盘能够弹出来。




所以根据业务需要,我只需要添加WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL标志位即可。


2、悬浮窗无法录音


通过Activity调起Service,然后在Service通过WindowManager添加悬浮窗。在没有进行任何操作,正常情况下,可以调起科大讯飞进行录音转成文字发给ChatGPT。


问题点一:同事为了解决我还没来得及修复的windowManger.removeView改成exitProcess问题,强行进行各种修改,最终还调用了activityfinish函数,把activity干掉。最终导致无法调起科大讯飞的语音识别。总是报录音权限问题,找不到任何的问题点,网上资料都说没有给录音权限,其实是有的。最后通过代码回退,定位到是Activity被干掉了,同事也承认他的愚蠢行为。


问题点二:在进行一些操作,例如授权跳转到设置之后,退出设置回到原先界面,科大讯飞调不起录音,还是报权限问题。在有了问题点一的经验后,在Activity的各个生命周期打印日志,发现但onResume函数没有被回调到,也就是应用在后台运行时,该问题必现。


所以就一顿顿顿搜索后,找到官方文档:
Android 9 对后台运行的应用增加了权限限制。


image.png


解决方法:



  1. 声明为系统应用,没问题。但我们想做通用软件。

  2. 增加前台服务。实测没效果。

  3. 在2的基础上,再添加一个属性:android:foregroundServiceType="microphone"。完美。


<service android:name=".ui.service.AiService"
android:foregroundServiceType="microphone"
/>

image.png


希望本文对君有用!


作者:新小梦
来源:juejin.cn/post/7211116982513811516
收起阅读 »

如何进行图片压缩

web
前言 最近要搞图像处理服务,其中一个是要实现图片压缩功能。以前前端开发的时候只要利用canvas现成的API处理下就能实现,后端可能也有现成的API但我并不知道。仔细想想,我从来没有详细了解过图片压缩原理,那刚好趁这次去调研学习下,所以有了这篇文章来记录。老样...
继续阅读 »

前言


最近要搞图像处理服务,其中一个是要实现图片压缩功能。以前前端开发的时候只要利用canvas现成的API处理下就能实现,后端可能也有现成的API但我并不知道。仔细想想,我从来没有详细了解过图片压缩原理,那刚好趁这次去调研学习下,所以有了这篇文章来记录。老样子,如有不对的地方,DDDD(带带弟弟)。


我们先把图片上传到后端,看看后端接收了什么样的参数。这里后端我用的是Node.js(Nest),图片我以PNG图片为例。


接口和参数打印如下:


@Post('/compression')
@UseInterceptors(FileInterceptor('file'))
async imageCompression(@UploadedFile() file: Express.Multer.File) {

return {
file
}
}


要进行压缩,我们就需要拿到图像数据。可以看到,唯一能藏匿图像数据的就是这串buffer。那这串buffer描述了什么,就需要先弄清什么是PNG。


PNG


这里是PNG的WIKI地址。


阅读之后,我了解到PNG是由一个8 byte的文件头加上多个的块(chunk)组成。示意图如下:



其中:


文件头是由一个被称为magic number的组成。值为 89 50 4e 47 0d 0a 1a 0a(16进制)。它标记了这串数据是PNG格式。


块分为两种,一种叫关键块(Critical chunks),一种叫辅助块(Ancillary chunks)。关键块是必不可少的,没有关键块,解码器将不能正确识别并展示图片。辅助块是可选的,部分软件在处理图片之后就有可能携带辅助块。每个块都是四部分组成:4 byte 描述这个块的内容有多长,4 byte 描述这个块的类型是什么,n byte 描述块的内容(n 就是前面4 byte 值的大小,也就是说,一个块最大长度为28*4),4 byte CRC校验检查块的数据,标记着一个块的结束。其中,块类型的4 byte 的值为4个acsii码,第一个字母大写表示是关键块小写表示是辅助块;第二个字母大写表示是公有小写表示是私有;第三个字母必须是大写,用于PNG后续的扩展;第四个字母表示该块不识别时,能否安全复制,大写表示未修改关键块时才能安全复制,小写表示都能安全复制。PNG官方提供很多定义的块类型,这里只需要知道关键块的类型即可,分别是IHDR,PLTE,IDAT,IEND。


IHDR


PNG要求第一个块必须是IHDR。IHDR的块内容是固定的13 byte,包含了图片的以下信息:


宽度 width (4 byte) & 高度 height (4 byte)


位深 bit depth (1 byte,值为1,2,4,8或者16) & 颜色类型 color type (1 byte,值为0,2,3,4或者6)


压缩方法 compression method (1 byte,值为0) & 过滤方式 filter method (1 byte,值为0)


交错方式 interlace method (1 byte,值为0或者1)


宽度和高度很容易理解,剩下的几个好像都很陌生,接下来我将进行说明。


在说明位深之前,我们先来看颜色类型,颜色类型有5种值:




  • 0 表示灰度(grayscale)它只有一个通道(channel),看成rgb的话,可以理解它的三色通道值是相等的,所以不需要多余两个通道表示。




  • 2 表示真实色彩(rgb)它有三个通道,分别是R(红色),G(绿色),B(蓝色)。




  • 3 表示颜色索引(indexed)它也只有一个通道,表示颜色的索引值。该类型往往配备一组颜色列表,具体的颜色是根据索引值和颜色列表查询得到的。




  • 4 表示灰度和alpha 它有两个通道,除了灰度的通道外,多了一个alpha通道,可以控制透明度。




  • 6 表示真实色彩和alpha 它有四个通道。




之所以要说到通道,是因为它和这里的位深有关。位深的值就定义了每个通道所占的位数(bit)。位深跟颜色类型组合,就能知道图片的颜色格式类型和每个像素所占的内存大小。PNG官方支持的组合如下表:


2023-03-17_180115.png


过滤和压缩是因为PNG中存储的不是图像的原始数据,而是处理后的数据,这也是为什么PNG图片所占内存较小的原因。PNG使用了两步进行了图片数据的压缩转换。


第一步,过滤。过滤的目的是为了让原始图片数据经过该规则后,能进行更大的压缩比。举个例子,如果有一张渐变图片,从左往右,颜色依次为[#000000, #000001, #000002, ..., #ffffff],那么我们就可以约定一条规则,右边的像素总是和它前一个左边的像素进行比较,那么处理完的数据就变成了[1, 1, 1, ..., 1],这样是不是就能进行更好的压缩。PNG目前只有一种过滤方式,就是基于相邻像素作为预测值,用当前像素减去预测值。过滤的类型一共有五种,(目前我还不知道这个类型值在哪里存储,有可能在IDAT里,找到了再来删除这条括号里的已确定该类型值储存在IDAT数据中)如下表所示:


Type byteFilter namePredicted value
0不做任何处理
1Sub左侧相邻像素
2Up上方相邻像素
3AverageMath.floor((左侧相邻像素 + 上方相邻像素) / 2)
4Paeth取(左侧相邻像素 + 上方相邻像素 - 左上方像素)最接近的值

第二步,压缩。PNG也只有一种压缩算法,使用的是DEFLATE算法。这里不细说,具体看下面的章节。


交错方式,有两种值。0表示不处理,1表示使用Adam7 算法进行处理。我没有去详细了解该算法,简单来说,当值为0时,图片需要所有数据都加载完毕时,图片才会显示。而值为1时,Adam7会把图片划分多个区域,每个区域逐级加载,显示效果会有所优化,但通常会降低压缩效率。加载过程可以看下面这张gif图。



PLTE


PLTE的块内容为一组颜色列表,当颜色类型为颜色索引时需要配置。值得注意的是,颜色列表中的颜色一定是每个通道8bit,每个像素24bit的真实色彩列表。列表的长度,可以比位深约定的少,但不能多。比如位深是2,那么22,最多4种颜色,列表长度可以为3,但不能为5。


IDAT


IDAT的块内容是图片原始数据经过PNG压缩转换后的数据,它可能有多个重复的块,但必须是连续的,并且只有当上一个块填充满时,才会有下一个块。


IEND


IEND的块内容为0 byte,它表示图片的结束。


阅读到这里,我们把上面的接口改造一下,解析这串buffer。


@Post('/compression')
@UseInterceptors(FileInterceptor('file'))
async imageCompression(@UploadedFile() file: Express.Multer.File) {
const buffer = file.buffer;

const result = {
header: buffer.subarray(0, 8).toString('hex'),
chunks: [],
size: file.size,
};

let pointer = 8;
while (pointer < buffer.length) {
let chunk = {};
const length = parseInt(buffer.subarray(pointer, pointer + 4).toString('hex'), 16);
const chunkType = buffer.subarray(pointer + 4, pointer + 8).toString('ascii');
const crc = buffer.subarray(pointer + length, pointer + length + 4).toString('hex');
chunk = {
...chunk,
length,
chunkType,
crc,
};

switch (chunkType) {
case 'IHDR':
const width = parseInt(buffer.subarray(pointer + 8, pointer + 12).toString('hex'), 16);
const height = parseInt(buffer.subarray(pointer + 12, pointer + 16).toString('hex'), 16);
const bitDepth = parseInt(
buffer.subarray(pointer + 16, pointer + 17).toString('hex'),
16,
);
const colorType = parseInt(
buffer.subarray(pointer + 17, pointer + 18).toString('hex'),
16,
);
const compressionMethod = parseInt(
buffer.subarray(pointer + 18, pointer + 19).toString('hex'),
16,
);
const filterMethod = parseInt(
buffer.subarray(pointer + 19, pointer + 20).toString('hex'),
16,
);
const interlaceMethod = parseInt(
buffer.subarray(pointer + 20, pointer + 21).toString('hex'),
16,
);

chunk = {
...chunk,
width,
height,
bitDepth,
colorType,
compressionMethod,
filterMethod,
interlaceMethod,
};
break;
case 'PLTE':
const colorList = [];
const colorListStr = buffer.subarray(pointer + 8, pointer + 8 + length).toString('hex');
for (let i = 0; i < colorListStr.length; i += 6) {
colorList.push(colorListStr.slice(i, i + 6));
}
chunk = {
...chunk,
colorList,
};
break;
default:
break;
}
result.chunks.push(chunk);
pointer = pointer + 4 + 4 + length + 4;
}

return result;
}


这里我测试用的图没有PLTE,刚好我去TinyPNG压缩我那张测试图之后进行上传,发现有PLTE块,可以看一下,结果如下图。



通过比对这两张图,压缩图片的方式我们也能窥探一二。


PNG的压缩


前面说过,PNG使用的是一种叫DEFLATE的无损压缩算法,它是Huffman Coding跟LZ77的结合。除了PNG,我们经常使用的压缩文件,.zip,.gzip也是使用的这种算法(7zip算法有更高的压缩比,也可以了解下)。要了解DEFLATE,我们首先要了解Huffman Coding和LZ77。


Huffman Coding


哈夫曼编码忘记在大学的哪门课接触过了,它是一种根据字符出现频率,用最少的字符替换出现频率最高的字符,最终降低平均字符长度的算法。


举个例子,有字符串"ABCBCABABADA",如果按照正常空间存储,所占内存大小为12 * 8bit = 96bit,现对它进行哈夫曼编码。


1.统计每个字符出现的频率,得到A 5次 B 4次 C 2次 D 1次


2.对字符按照频率从小到大排序,将得到一个队列D1,C2,B4,A5


3.按顺序构造哈夫曼树,先构造一个空节点,最小频率的字符分给该节点的左侧,倒数第二频率的字符分给右侧,然后将频率相加的值赋值给该节点。接着用赋值后节点的值和倒数第三频率的字符进行比较,较小的值总是分配在左侧,较大的值总是分配在右侧,依次类推,直到队列结束,最后把最大频率和前面的所有值相加赋值给根节点,得到一棵完整的哈夫曼树。


4.对每条路径进行赋值,左侧路径赋值为0,右侧路径赋值为1。从根节点到叶子节点,进行遍历,遍历的结果就是该字符编码后的二进制表示,得到:A(0)B(11)C(101)D(100)。


完整的哈夫曼树如下(忽略箭头,没找到连线- -!):



压缩后的字符串,所占内存大小为5 * 1bit + 4 * 2bit + 2 * 3bit + 1 * 3bit = 22bit。当然在实际传输过程中,还需要把编码表的信息(原始字符和出现频率)带上。因此最终占比大小为 4 * 8bit + 4 * 3bit(频率最大值为5,3bit可以表示)+ 22bit = 66bit(理想状态),小于原有的96bit。


LZ77


LZ77算法还是第一次知道,查了一下是一种基于字典和滑动窗的无所压缩算法。(题外话:因为Lempel和Ziv在1977年提出的算法,所以叫LZ77,哈哈哈😂)


我们还是以上面这个字符串"ABCBCABABADA"为例,现假设有一个4 byte的动态窗口和一个2byte的预读缓冲区,然后对它进行LZ77算法压缩,过程顺序从上往下,示意图如下:



总结下来,就是预读缓冲区在动态窗口中找到最长相同项,然后用长度较短的标记来替代这个相同项,从而实现压缩。从上图也可以看出,压缩比跟动态窗口的大小,预读缓冲区的大小和被压缩数据的重复度有关。


DEFLATE


DEFLATE【RFC 1951】是先使用LZ77编码,对编码后的结果在进行哈夫曼编码。我们这里不去讨论具体的实现方法,直接使用其推荐库Zlib,刚好Node.js内置了对Zlib的支持。接下来我们继续改造上面那个接口,如下:


import * as zlib from 'zlib';

@Post('/compression')
@UseInterceptors(FileInterceptor('file'))
async imageCompression(@UploadedFile() file: Express.Multer.File) {
const buffer = file.buffer;

const result = {
header: buffer.subarray(0, 8).toString('hex'),
chunks: [],
size: file.size,
};

// 因为可能有多个IDAT的块 需要个数组缓存最后拼接起来
const fileChunkDatas = [];
let pointer = 8;
while (pointer < buffer.length) {
let chunk = {};
const length = parseInt(buffer.subarray(pointer, pointer + 4).toString('hex'), 16);
const chunkType = buffer.subarray(pointer + 4, pointer + 8).toString('ascii');
const crc = buffer.subarray(pointer + length, pointer + length + 4).toString('hex');
chunk = {
...chunk,
length,
chunkType,
crc,
};

switch (chunkType) {
case 'IHDR':
const width = parseInt(buffer.subarray(pointer + 8, pointer + 12).toString('hex'), 16);
const height = parseInt(buffer.subarray(pointer + 12, pointer + 16).toString('hex'), 16);
const bitDepth = parseInt(
buffer.subarray(pointer + 16, pointer + 17).toString('hex'),
16,
);
const colorType = parseInt(
buffer.subarray(pointer + 17, pointer + 18).toString('hex'),
16,
);
const compressionMethod = parseInt(
buffer.subarray(pointer + 18, pointer + 19).toString('hex'),
16,
);
const filterMethod = parseInt(
buffer.subarray(pointer + 19, pointer + 20).toString('hex'),
16,
);
const interlaceMethod = parseInt(
buffer.subarray(pointer + 20, pointer + 21).toString('hex'),
16,
);

chunk = {
...chunk,
width,
height,
bitDepth,
colorType,
compressionMethod,
filterMethod,
interlaceMethod,
};
break;
case 'PLTE':
const colorList = [];
const colorListStr = buffer.subarray(pointer + 8, pointer + 8 + length).toString('hex');
for (let i = 0; i < colorListStr.length; i += 6) {
colorList.push(colorListStr.slice(i, i + 6));
}
chunk = {
...chunk,
colorList,
};
break;
case 'IDAT':
fileChunkDatas.push(buffer.subarray(pointer + 8, pointer + 8 + length));
break;
default:
break;
}
result.chunks.push(chunk);
pointer = pointer + 4 + 4 + length + 4;
}

const originFileData = zlib.unzipSync(Buffer.concat(fileChunkDatas));

// 这里原图片数据太长了 我就只打印了长度
return {
...result,
originFileData: originFileData.length,
};
}


最终打印的结果,我们需要注意红框的那几个部分。可以看到上图,位深和颜色类型决定了每个像素由4 byte组成,然后由于过滤方式的存在,会在每行的第一个字节进行标记。因此该图的原始数据所占大小为:707 * 475 * 4 byte + 475 * 1 byte = 1343775 byte。正好是我们打印的结果。


我们也可以试试之前TinyPNG压缩后的图,如下:



可以看到位深为8,索引颜色类型的图每像素占1 byte。计算得到:707 * 475 * 1 byte + 475 * 1 byte = 336300 byte。结果也正确。


总结


现在再看如何进行图片压缩,你可能很容易得到下面几个结论:


1.减少不必要的辅助块信息,因为辅助块对PNG图片而言并不是必须的。


2.减少IDAT的块数,因为每多一个IDAT的块,就多余了12 byte。


3.降低每个像素所占的内存大小,比如当前是4通道8位深的图片,可以统计整个图片色域,得到色阶表,设置索引颜色类型,降低通道从而降低每个像素的内存大小。


4.等等....


至于JPEG,WEBP等等格式图片,有机会再看。溜了溜了~(还是使用现成的库处理压缩吧)。


好久没写文章,写完才发现语雀不能免费共享,发在这里吧。


作者:月下风物语
来源:juejin.cn/post/7211434247146782775
收起阅读 »

就目前前端行业现状浅析与今后前端发展探讨

前端目前现状 目前前端技术发展来看,ThreeJs已是一个不可忽视的技术点,在目前很多领域已经有3D案例在应用,更多的甲方也乐意让自己的产品更加的炫酷,功能更加的炫丽,所以前端在3D的技术领域已经是相当丰富,在地图应用方面,场景展示方面,产品介绍方面,3D...
继续阅读 »

前端目前现状




  • 目前前端技术发展来看,ThreeJs已是一个不可忽视的技术点,在目前很多领域已经有3D案例在应用,更多的甲方也乐意让自己的产品更加的炫酷,功能更加的炫丽,所以前端在3D的技术领域已经是相当丰富,在地图应用方面,场景展示方面,产品介绍方面,3D效果远比传统页面更有吸引力。




  • 前端已死: 造成这种观点的影响其实是有很多原因的,其中最主要的原因我认为是这3年以来的影响,让很多行业都开始下沉,而互联网行业相对来说在这3年以来的影响相对较小,所以在当时没有这么明显。而在这三年以来,很多各行各业的人员也开始转向互联网行业,而前端是学习成本、入门成本最低的一行,所以很多培训班开始大量招收想要入行互联网的人员,这一点从B站的前端教学视频上可以看得出来,跟后端相比,前端的课程更加的多、内容也更加的丰富。但是这么多人涌入了前端行业,必然会造成前端求职困难的情况。但是从长远的角度来看,这对前端行业其实是更加的有利的,更多的人员选择了前端,会让前端的生态更加的丰富,各种知识、观点的碰撞,也会让前端行业进入下一个加速发展期,前端未来可期。




  • 技术权衡方面: 随着VUE与React两家的影响力逐渐扩大,留给区域框架的发展空间其实已经不多,一方面是项目维护成本会逐渐增加,冷门的技术在招人方面会更加的难招聘到合适的人才。VUE相对来说,相对React来说会更加简单一点,按这种观点来看,以后应该是Vue一家独大,但是从目前Vue3的技术发展来看,未来很有可能会出现一种情况,就是Vue与React合并在一起,因为从两种技术架构来看,其实两者的区别并不大,将两个框架进行合并在一起,这样的话,对前端今后的发展也是更加有利的,期待这一天的到来。




  • 流媒体现状:其实现阶段,前端在流媒体技术上的处理已经非常的完善,直播、音频、图像、文件处理等,在困难程度上来说,其实后端的压力会更大一些,所以目前前端来说,流媒体这一块难的东西基本上都已经得到解决,很多成熟的开源应用已经可以帮助很多人完成项目的开发,后端的开发者们仍需努力。




  • 兼容性问题,其实到了2023年,对于绝大部分的开发者来说,没有了IE,很多兼容性问题已经不需要再去关注,学习的成本也相对减少,这是前端行业的一种进步。




今后发展探讨




  • 3D应用: 3D应用在今后两年的成长应该会得到更多的加速,3D技术也是前端技术的一个分水岭,在今后,可能会将不会3D与会3D来对前端技术评价进行区分,所以我个人认为,3D技术值得现在每一个前端开发者去学习。




  • VUE与React: 这两款框架各有所长,目前来说,中小型项目用vue的选择会更多一点,用React的项目基本上是大型项目,但是在今后,我认为随着Typescript的发展,Vue在大型项目上会与React一样受欢迎。




  • Typescript: 随着Typescript的发展,在今后,很多开发者会拥抱ts,渐渐减少使用js,这应该是一个不可逆转的趋势,除非js有非常大的发展,不然ts必然会成为今后前端开发者入门学习的直接语言,可以直接跳过js去学习ts。




  • NodeJs: nodejs仍有很长的路要走,这是必然的,目前nodejs的生态并不完善,在开源方面与学习成本方面都是非常高的,这一点得不到解决的话,Nodejs就仍是鸡肋。




  • 技术的学习成本:随着现在的微服务、uniapp、webpack、cssScript开源项目越来越多,各位前端从业人员需要学习的技术也越来越多,随着学习成本的逐渐增加,这对前端的生态发展其实是不利的,如果不是很明确需要这种技术,我个人认为是不需要去盲目学习的,因为很多新兴的技术,文档的不完善、案例的不完善,能不能善始善终都是一个问题。




总结


该文章仅为我个人观点,如有不对,请各位批评指正。


作者:无我Code
来源:juejin.cn/post/7211801284709974077
收起阅读 »

摸鱼两天,彻底拿下虚拟滚动!

web
总结 通过自己的实践发现,网上相传的虚拟滚动实现方案有种是行不通的(涉及浏览器机制) 实现虚拟滚动,滚动元素中利用上下两个只有高度的空盒子撑开空间是不可行的 html布局示意: <div class="content-container"> ...
继续阅读 »

总结


通过自己的实践发现,网上相传的虚拟滚动实现方案有种是行不通的(涉及浏览器机制)




  • 实现虚拟滚动,滚动元素中利用上下两个只有高度的空盒子撑开空间是不可行的


    html布局示意


    <div class="content-container">
     <div class="top-padding"></div>

     <div class="content-item"></div>
     <div class="content-item"></div>
     <div class="content-item"></div>

     <div class="bottom-padding"></div>
    </div>



  • 可行方案:


    html布局示意


    <div class="scroll-container">
     <div class="content-container">
       <div class="content-item"></div>
      ...
       <div class="content-item"></div>
     </div>
    </div>



如果您和我一样,想自己实现一下虚拟滚动,下面 实现虚拟滚动 部分 中我会尽可能保姆级详细的复现我当时写代码的所有过程(包括建项目...),适合新手(但是不能是小白,需要知道虚拟滚动是干啥的东西,因为我没有去介绍虚拟滚动)。


如果您对这玩意的实现完全没啥好奇的,可以看看 部分,我详细记录了一个关于浏览器滚动条的特点,或许对你来说有点意思。


实现虚拟滚动


下面用vue3写一个demo,并没封装多完善,也不是啥生产可用的东西,但绝对让你清晰虚拟滚动的实现思路。


项目搭建


pnpm create vite创建一个项目,项目名、包名输入virtualScrollDemo,选择技术栈Vue + TypeScript;再简单安装个less,即pnpm install less less-loader -D,然后配一下vite.config.ts,顺便给src配个别名。


vite.config.ts


import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path"; // 让ts识别模块,这里还需要 pnpm i @types/node

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 css: {
   preprocessorOptions: {
     less: {
    },
  },
},
 resolve: {
   alias: [
    {
       find: "@",
       replacement: resolve(__dirname, "/src"),
    },
  ],
},
});

App.vueimport VirtualScroll from '@/components/VirtualScroll.vue'还是报错,ts还要配置别名才行,tsconfig.json中加一下baseUrlpaths即可


tsconfig.json


{
 "compilerOptions": {
   "target": "ESNext",
   "useDefineForClassFields": true,
   "module": "ESNext",
   "moduleResolution": "Node",
   "strict": true,
   "jsx": "preserve",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "esModuleInterop": true,
   "lib": ["ESNext", "DOM"],
   "skipLibCheck": true,
   "noEmit": true,
   "baseUrl": "./",
   "paths": {
     "@/*": ["src/*"]
  }
},
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 "references": [{ "path": "./tsconfig.node.json" }]
}

然后项目删一删没用的就成了这样:


src/
├── App.vue
├── components/
│   └── VirtualScroll.vue
└── shared/
  └── dataConstant.ts

dataConstant.ts是准备的一个长列表渲染的数据源:


export const dataSource = [
{
   text: "jrd",
},
{
   text: "jrd1",
},
 ...
]

结构搭建


为了突出重点,实现虚拟滚动逻辑必要的样式我都写在:style中了,辅助性的样式都写在<style></style>


先把长列表搭建出来:


基本长列表.gif


<template>
 <div
   class="scroll-container"
   :style="{
     overflow: 'auto',
     height: `${viewPortHeight}px` // 列表视口高度(值自定义即可)
   }"

 >

 <div
   class="content-container"
   :style="{
     height: `${itemHeight * dataSource.length}px`
   }"

 >

   <div
     class="content-item"
     v-for="(data, index) in dataSource"
   >

     {{ data.text }}
   </div>
 </div>
</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { dataSource } from "@/shared/dataConstant";

export default defineComponent({
 name: "VirtualScroll",
 setup() {
   const viewPortHeight = 500; // 滚动列表的可视高度
   const itemHeight = 50; // 一个列表项的高度
   return {
     viewPortHeight,
     dataSource,
     itemHeight
  }
},
});
</script>

<style scoped lang="less">
.scroll-container {
 border: 2px solid red;
 width: 300px;
 .content-container {
   .content-item {
     height: 50px;
     background-image: linear-gradient(0deg, pink, blue);
  }
}
}

</style>

注释:


html结构三层嵌套,最外层是div.scroll-container,里面依次是div.content-containerdiv.content-item


div.scroll-container容器是出现滚动条的容器,所以它需要一个固定高度(可视区域的高度)以及overflow: auto,这样他内部元素超过了它的高度它才会出现滚动条;div.content-container的作用就是撑开div.scroll-container,解释一下,因为我们最终要的效果是只渲染一小部分元素,单单渲染的这一小部分内容肯定是撑不开div.scroll-container的,所以根据渲染项的多少以及每个渲染项的高度写死div.content-container的高度,不管渲染项目多少,始终保持div.scroll-containerscrollHeight正常。


核心计算


监听div.scroll-container的滚动事件,滚动回调中计算startIndexendIndex,截取数据源(截取要渲染的一小部分数据,即renderDataList = dataSource.slice(startIndex, endIndex)):


计算startIndex和endIndex.gif


<template>
 <div
   class="scroll-container"
   :style="{
     overflow: 'auto',
     height: `${viewPortHeight}px` // 列表视口高度(值自定义即可)
   }"

   ref="scrollContainer"
   @scroll="handleScroll"
 >

 <div
   class="content-container"
   :style="{
     height: `${itemHeight * dataSource.length}px`
   }"

 >

   <div
     class="content-item"
     v-for="(data, index) in dataSource"
   >

     {{ data.text }}
   </div>
 </div>
</div>

</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { dataSource } from "@/shared/dataConstant";

export default defineComponent({
 name: "VirtualScroll",
 setup() {
   const viewPortHeight = 525; // 滚动列表的可视高度
   const itemHeight = 50; // 一个列表项的高度
   const startIndex = ref(0);
   const endIndex = ref(0);
   const scrollContainer = ref<HTMLElement | null>(null);
   const handleScroll = () => {
     if(!scrollContainer.value) return
     const scrollTop = scrollContainer.value.scrollTop;
     startIndex.value = Math.floor(scrollTop / itemHeight);
     endIndex.value = Math.ceil((scrollTop + viewPortHeight) / itemHeight) - 1;
     console.log(startIndex.value, endIndex.value);
  }
   return {
     viewPortHeight,
     dataSource,
     itemHeight,
     scrollContainer,
     handleScroll
  }
},
});
</script>

<style scoped lang="less">
.scroll-container {
 border: 2px solid red;
 width: 300px;
 .content-container {
   .content-item {
     height: 50px;
     background-image: linear-gradient(0deg, pink, blue);
  }
}
}

</style>

注释:


startIndexendIndex我们都按照从0开始(而非1开始)的标准来计算。 startIndex对应div.scroll-container上边界压住的div.content-itemindexendIndex对应div.scroll-container下边界压住的div.content-itemindex,也就是说,startIndexendIndex范围内的数据,是我们在保证可视区域不空白的前提下至少要进行渲染的数据,我可能表述不很清楚,静心想一想不难理解的。


收尾


最后的两步就是根据startIndexendIndexdataSource中动态截取出来renderDataListv-for只渲染renderDataList,然后把渲染出来的div.content-item通过定位 + transform移动到正确的位置即可了。


监听startIndexendIndex,变化时修改renderDataList


逻辑:


// 因为slice函数是左闭右开,所以截取时为endIndex.value + 1
const renderDataList = ref(dataSource.slice(startIndex.value, endIndex.value + 1));
watch(() => startIndex.value, () => {
renderDataList.value = dataSource.slice(startIndex.value, endIndex.value + 1);
})
watch(() => endIndex.value, () => {
renderDataList.value = dataSource.slice(startIndex.value, endIndex.value + 1);
})

结构:


<div 
class="content-item"
v-for="(data, index) in renderDataList"
>
{{ data.text }}
</div>

这时候,数据已经正确渲染了,只是位置还不太对


效果:


数据结构正确渲染.gif


我们要做的就是通过css把渲染出来的dom移动到正确的位置,这里采取的方案就是div.content-container相对定位,div.content-item绝对定位,并且topleft都设置为0(所有都移动到左上角),然后通过translate: transformY把它们移动到“正确”的位置:


结构:


<div 
class="content-item"
v-for="(data, index) in renderDataList"
:style="{
position: 'absolute',
top: '0',
left: '0',
transform: `translateY(${(startIndex + index) * itemHeight}px)`
}"
>
{{ data.text }}
</div>

经过上面的修改之后已经基本收工了,不知道是哪个样式的原因div.content-item的宽度不是100%了,手动加上就好了


效果:


虚拟滚动大功告成.gif


优化



  1. 给滚动事件添加节流

  2. 引入缓冲结点数变量countOfBufferItem,适当扩充(startIndex, endIndex)渲染区间,防止滑动过快出现空白


最终代码:


<template>
<div
class="scroll-container"
:style="{
overflow: 'auto',
height: `${viewPortHeight}px` // 列表视口高度(值自定义即可)
}"

ref="scrollContainer"
@scroll="handleScroll"
>

<div
class="content-container"
:style="{
height: `${itemHeight * dataSource.length}px`,
position: 'relative'
}"

>

<div
class="content-item"
v-for="(data, index) in renderDataList"
:style="{
position: 'absolute',
top: '0',
left: '0',
transform: `translateY(${(startIndex + index) * itemHeight}px)`
}"

>

{{ data.text }}
</div>
</div>
</div>

</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { dataSource } from "@/shared/dataConstant";

export default defineComponent({
name: "VirtualScroll",
setup() {
const viewPortHeight = 525; // 滚动列表的可视高度
const itemHeight = 50; // 一个列表项的高度
const startIndex = ref(0);
const endIndex = ref(Math.ceil(viewPortHeight / itemHeight) - 1);
const scrollContainer = ref<HTMLElement | null>(null);

let isHandling = false; // 节流辅助变量
const countOfBufferItem = 2; // 缓冲结点数量
const handleScroll = () => {
if(isHandling) return;
isHandling = true;
setTimeout(() => {
if(!scrollContainer.value) return
const scrollTop = scrollContainer.value.scrollTop;
startIndex.value = Math.floor(scrollTop / itemHeight);
startIndex.value = startIndex.value - countOfBufferItem >= 0 ? startIndex.value - countOfBufferItem : 0; // 扩充渲染区间
endIndex.value = Math.ceil((scrollTop + viewPortHeight) / itemHeight) - 1;
endIndex.value = endIndex.value + countOfBufferItem >= dataSource.length - 1 ? dataSource.length - 1 : endIndex.value + countOfBufferItem; // 扩充渲染区间
isHandling = false;
}, 30)
}

const renderDataList = ref(dataSource.slice(startIndex.value, endIndex.value + 1));
watch(() => startIndex.value, () => {
renderDataList.value = dataSource.slice(startIndex.value, endIndex.value + 1);
})
watch(() => endIndex.value, () => {
renderDataList.value = dataSource.slice(startIndex.value, endIndex.value + 1);
})
return {
viewPortHeight,
dataSource,
itemHeight,
scrollContainer,
handleScroll,
renderDataList,
startIndex,
endIndex
}
},
});
</script>

<style scoped lang="less">
.scroll-container {
border: 2px solid red;
width: 300px;
.content-container {
.content-item {
height: 50px;
background-image: linear-gradient(0deg, pink, blue);
width: 100%;
}
}
}

</style>

虽说没啥bug吧,但是滚动的快了还是有空白啥的,这应该也算是这个技术方案的瓶颈。



bug复现


我一开始的思路是一个外层div.container,设置overflow: hidden,然后内部上中下三部分,上面一个空盒子,高度为startIndex * listItemHeight;中间部分为v-for渲染的列表,下面又是一个空盒子,高度(dataSource.length - endIndex - 1) * listItemHeight,总之三部分的总高度始终维持一个定值,即这个值等于所有数据完全渲染时div.containerscrollHeight


实现之后,问题出现了:


不受控制的滚动.gif


一旦触发了“机关”,滚动条就会不受控制的滚动到底


我把滚动回调的节流时间设置长为500ms


不受控制的滚动-长节流.gif


发现滚动条似乎陷入了一种循环之中,每次向下移动一个数据块的高度。 分析这个现象,需要下面一些关于滚动条特性的认知。


滚动条的特性


先给结论:当一个定高(scrollHeight固定)的滚动元素,其(撑开其高度的)子元素高度发生变化时(高度组成发生变化,比如一个变高,一个变低,但保持滚动元素的scrollHeight总高度不变),滚动条位置也会发生变化,变化遵循一个原则:保持当前可视区域展示的元素在可视区域内位置不变。


写个demo模拟一下上面说的场景,div.container是一个滚动且定高的父元素,点击按钮后其内部的div.top变高,div.bottom变矮


Test.vue:


<template>
<div class="container" ref="container">
<div
class="top"
:style="{
height: `${topHeight}px`,
}"

>
</div>
<div class="content"></div>
<div
class="bottom"
:style="{
height: `${bottomHeight}px`,
}"

>
</div>
</div>

<button @click="test">按钮</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
setup() {
const topHeight = ref(300);
const bottomHeight = ref(300);
const container = ref(null);
const test = () => {
topHeight.value += 50;
bottomHeight.value -= 50;
};
return {
topHeight,
bottomHeight,
test,
container,
};
},
});
</script>


<style scoped lang="less">
.container {
width: 200px;
height: 600px;
overflow: auto;
border: 1px solid green;
.top {
width: 100%;
border: 3px solid red;
}
.content {
height: 1000px;
}
.bottom {
width: 100%;
border: 3px solid black;
}
}
</style>


滚动条位置变化demo展示


仔细观察滚动条:


滚动条位置变化demo.gif


解释一下上图,首先是上面一个红色盒子,底部一个黑色盒子:



  • 我们可视区域的左上角在红色区域时点击按钮,这时候浏览器底层判断我们正在浏览红色元素,所以虽然内部元素高度变化,但我们的可视区域相对于红色盒子左上角的位置不变

  • 第一次刷新之后,我们可视区域的左上角在中间盒子上,这时候我们点击按钮,红色盒子高度增加,黑色盒子高度减小,中间盒子的相对整个滚动区域的位置就靠下了,但是——浏览器的滚动条也随之向下移动了(而且,滚动条向下移动的距离 === 红色盒子高度增加值 === 黑色盒子高度减小值 === 中间盒子相对滚动区域向下偏移值

  • 第二次刷新后,更直观的表现了滚动条的这个特点:我把滚动条恰好移动到中间盒子上,上面紧邻红色盒子,点击三次按钮后,滚动条下移三次,此时我向上滚动一点,接着看到了红色盒子。


bug原因分析


有了上面的认知,再来看这个图


不受控制的滚动-长节流.gif


bug的“生命周期”:


1.我们手动向下滚动滚动条 ——> 2.内部计算(startIndex以及endIndex的改变)触发上方占位的<div>元素高度增加,下方占位<div>高度减小,中间渲染的内容部分整体位置相对于整个滚动元素下移 ——> 3.(浏览器为了保持当前可视区域展示的元素在可视区域内位置不变)滚动条自动下移 ——> 4.触发新的计算 ——> 2.


感慨:上中下三个部分,上下动态修改高度占位,中间部分渲染数据,思路多么清晰的方案,但谁能想到浏览器滚动条出来加了道菜呢


网上不少地方都给了这个方案...


成功的虚拟滚动、带bug的虚拟滚动和测试组件的源码我都放到这里了,需要的话可以去clone:github.com/jinrd123/Vi…(带bug的虚拟滚动是我第一次实现时随性写的,代码组织以及注释可能不是很规范)


作者:荣达
来源:juejin.cn/post/7211088034179366973
收起阅读 »

GPT-4的出现对前端入门者意味着什么?

嗨!我是团子,大家好久不见~ 3月15日凌晨,由OpenAI发布的多模态预训练大模型GPT-4一经推出就引起了大家的激烈讨论,让最近很火的ChatGPT烧的愈发旺盛。 在GPT-4中,一个重大的突破是支持多模态输入。也就是说,除了文字输入外,也支持图像、...
继续阅读 »

嗨!我是团子,大家好久不见~


3月15日凌晨,由OpenAI发布的多模态预训练大模型GPT-4一经推出就引起了大家的激烈讨论,让最近很火的ChatGPT烧的愈发旺盛。







在GPT-4中,一个重大的突破是支持多模态输入。也就是说,除了文字输入外,也支持图像、视频、音频等从多个角度出发对事物进行描述。







OpenAI在发布会上演示了几种多模态输入的案例,包括读论文、解物理题、看图说话...







甚至可以根据一张草图十秒钟编写出一个网页!(再智能就真的不礼貌了.jpg)







这让致力于成为前端工程师的我们有点坐不住了。。


大家在各个群里激烈讨论,有人在担心ChatGPT会抢饭碗,也有人为ChatGPT的新升级感到兴奋,甚至开始期待16号百度文心一言的发布会。


因此,今天就想和大家来聊聊GPT-4的出现对前端入门者意味着什么。


陷入沉思


诚然,GPT-4根据一张草图10秒钟制作出一个网页的能力让人感到震撼,但也让前端入门者陷入了沉思:





  1. 1.既然GPT可以很快且较为准确的实现一个网页,那还需要初级前端工程师吗?

  2. 2.初级前端工程师的岗位真的那么好替代吗?

  3. 3.如果不做前端工程师的话,什么岗位是GPT无法替代的呢?

  4. 4.作为初级前端工程师来说,现在做什么才能容灾GPT带来的影响呢?




思考了很久,个人认为GPT的出现确实将信息科技的发展推到了一个新的高度,但感到恐慌的不应该只有前端工程师,对于初级后端工程师甚至任何可以由人工智能胜任的岗位从业者来说,都应该认真思考下在面对GPT这种人工智能时怎么做才能体现自己的价值。


GPT的出现给前端带来了什么影响


1. 门槛变高


在求职面试中,很多面试官都喜欢问面试者的一个问题是:你为什么要做前端。这个问题其实不止是前端,对于任何岗位的求职者来说,都是一个需要认真思考的问题。


早些年互联网快速发展时,程序员的职业受到大家的追捧,很多其他行业和专业的人成功通过自学成为了一名程序员,实现了相对的财富自由。由此可见,早些年程序员的入门门槛其实不高的,行业壁垒也不强。而前端工程师的岗位也因为相比于Java、C++等岗位更容易上手成为培训班割韭菜的首选方向。


但随着互联网近两年发展进入一个瓶颈期以来,前端程序员甚至其他岗位程序员的需求量也逐渐趋于饱和。再加上GPT的出现,对于一些基础且重复的工作,确实不再像早年那样需要很多的人力了,但是想要涌入互联网的人还是很多,因此前端工程师甚至是其他岗位工程师的门槛也会变高。


2. 趋向于精英化


正如前面所述,GPT的出现加上岗位需求量的减少使得前端工程师的从业门槛变高,这带来的结果其实就是让整个互联网行业向着精英化发展。


记得2010年以前,大家在谈论到计算机时,都会觉得这是一个很高端的技术,认为从事计算机岗位的人智商超群,那会上电脑课听老师讲二进制编码都觉得很神奇。


感觉2010年以后互联网快速膨胀的十年,使得现在的互联网行业也慢慢的回归了理性,大家的关注点更多是优化、创新。因此对于互联网从业者的要求也会逐渐变高,不仅仅是求职者的优中选优,对于已经是程序员的从业者来说,也需要持续输入来提高自己的竞争力。


如何应对GPT带给行业的冲击


1. 将GPT具备的技能转换为自己的技能


坦白说,在发现GPT可以帮我debug、解答我各种不理解的专业问题时,我是非常兴奋的!因为这代表着我的工作效率会变高。


某种程度上说,它能让我更快速的适应程序员这份工作,甚至可以去探索更多的领域,包括:后端、客户端、算法、测试等等,再或者医生、律师、作词家、小说家等等。


但是探索这些领域的前提是我们要成为GPT的主人,将自己的需求准确的发布给GPT。


坦白说,GPT确实是一个很好的回答者,但是如何提问才是解决问题的前提!


2. 利用GPT去做更多的创新和思考


在GPT没有大量普及的时候,会用GPT的人具有更多的优势。


但是当GPT成为像手机一样的日常用品时,会用GPT就不再是核心竞争力了。


因此,我们需要多思考如何基于GPT的能力去做更多有意义的事情,这可能才会让我们的路走的更远吧!


总结


GPT的出现不是为了让更多的人失业,而是为了让这个世界变得更好。


在时代的洪流下,消极内耗并不能改变现状,如何顺应时代的发展,拿出积极的态度去跟上时代的脚步才是我们应该思考的问题!


作者:程序员团子
来源:juejin.cn/post/7211064454572982329
收起阅读 »

又一个免费GPT-4工具 Cursor,程序员写代码将被颠覆

每天都被openai震撼到, 他们家被广为人知的产品是chatgpt,就是那个聊天工具。现在已经开始有越来越多的产品集成openai,比如微软的office,bing。 现在又一个工具出现,一个叫Cursor的编辑器已经集成了openai的GPT-4,而且还是...
继续阅读 »

每天都被openai震撼到, 他们家被广为人知的产品是chatgpt,就是那个聊天工具。现在已经开始有越来越多的产品集成openai,比如微软的office,bing。


现在又一个工具出现,一个叫Cursor的编辑器已经集成了openai的GPT-4,而且还是免费的,它将彻底改变我们写代码的方式。 以前不会写代码先去百度google一下。Ctrl+c,Ctrl+v搞定,我们调侃我们都是CV工程师。


以后我们恐怕要成为“KL"工程师,为什么叫”KL“工程师呢, 因为只要K和L两个指令就可以直接生成代码、修改代码,哪行代码不会点哪里,他都给你解释得明明白白。


image-20230319003903733


下载安装


Cursor编辑器提供了Windows、MacOS、Linux 三个平台的安装包,安装包下载链接: pan.baidu.com/s/1Jh3gIrnj… 提取码: dt7m


image-20230319004116280


下载安装完成后,会引导你进行初始化设置,你即可以选择VIM或者Emacs的操作习惯,也可以保持默认设置,另外它还支持绑定Copilot。


我们可以直接用Ctrl+K,输入一个指令:”用Python实现一个猜数字游戏,每次最多3次机会“。 他就会立马直接给你生成好代码:


import random

def guess_number():
number = random.randint(1, 100)
print("我想了一个1到100之间的数字,你最多有3次机会猜对它。")
for i in range(3):
guess = int(input("请输入你猜的数字:"))
if guess == number:
print("恭喜你,猜对了!")
return
elif guess < number:
print("你猜的数字太小了。")
else:
print("你猜的数字太大了。")
print("很遗憾,你没有猜对。我想的数字是:", number)

guess_number()

一行代码都不用修改可直接运行。



如果你对某一行代码不懂,你只要按住Ctrl+L选中它,然后输入关于这行代码你要问的问题。比如我问 name 是什么东西时,他就很智能的告诉了我。


img


不过目前这个编辑器的功能相比vscode还比较简陋,相信很快各大主流编辑器都会集成GPT4


哎,发现这个世界变化的有点太快,LLMs(大规模语言模型)将开启一次伟大的技术革命。


作者:刘志军
来源:juejin.cn/post/7211876919037132856
收起阅读 »

IM实战:Android接入环信 IM SDK

本次学习目标:注册环信;Android端集成环信 IM SDK;实现注册-登录-发送消息-会话列表等;一、环信IM- 什么是环信IM环信IM是一款即时通讯产品,为开发者提供基于移动互联网的即时通讯能力,如单聊、群聊、发语音、发图片、发位置等,让开发者摆脱繁重的...
继续阅读 »

本次学习目标:
注册环信;
Android端集成环信 IM SDK;
实现注册-登录-发送消息-会话列表等;


一、环信IM
- 什么是环信IM

环信IM是一款即时通讯产品,为开发者提供基于移动互联网的即时通讯能力,如单聊、群聊、发语音、发图片、发位置等,让开发者摆脱繁重的移动IM通讯底层开发,24小时即可让App拥有内置IM能力。

- 环信IM可以实现什么?

实现了个人与个人,群组,聊天室发消息,发语音,发图片,发位置等功能,提供了一套供开发者拿来即用的EaseIMKit的ui库;

二、 环信IM实现通讯的基本流程


1、环信账号
a、找到环信im官网,注册一个管理者账号 ,注册地址:https://console.easemob.com/user/register
b、注册成功以后,点击右上角登录 > 登录即时通讯云 ,进入console后台
c、在环信通讯云控制台创建Appkey;


2、Android端接入环信SDK

选择如下任意一种方式将环信即时通讯 IM SDK 集成到你的项目中(以下集成方式只需选择一种,同时使用多种集成方式可能会报错):

方法一:
该方法仅适用于 v3.8.2 或以上版本。

1.在项目的 build.gradle 中添加 mavenCentral()仓库。

buildscript {
repositories {
...
mavenCentral()
}
...
}

allprojects {
repositories {
...
mavenCentral()
}
}


2.在 module 的 build.gradle 中添加如下依赖:

dependencies {
...
// x.y.z 请填写具体版本号,如:3.9.4。
// 可通过 SDK 发版说明获得最新版本号。
implementation 'io.hyphenate:hyphenate-chat:x.x.x'
}


方法二:
手动复制 SDK 文件
打开 SDK 下载页面,获取最新版的环信即时通讯 IM Android SDK,然后解压。



将 SDK 包内 libs 路径下的如下文件,拷贝到你的项目路径下:



3、Android端注册与登录


(1)在主进程中进行初始化:

EMOptions options = new EMOptions();
options.setAppKey("Your appkey");
......// 其他 EMOptions 配置。
EMClient.getInstance().init(context, options);


(2)创建账号

此方法为同步方法,会阻塞当前线程;

此方法只有在开放注册模式下,才能调用。如果此方法报错,请检查下环信管理后台是否是开放注册模式;

// 注册失败会抛出 HyphenateException。
// 同步方法,会阻塞当前线程。
EMClient.getInstance().createAccount(mAccount, mPassword);


(3)登录账号

EMClient.getInstance().login(mAccount, mPassword, new EMCallBack() {
// 登录成功回调
@Override
public void onSuccess() {

}

// 登录失败回调,包含错误信息
@Override
public void onError(final int code, final String error) {

}

@Override
public void onProgress(int i, String s) {

}

});


4、Android端添加好友获取好友列表

(1)添加好友:

// 同步方法,会阻塞当前线程。异步方法为 asyncAddContact(String, String, EMCallBack)。
EMClient.getInstance().contactManager().addContact(toAddUsername, reason);


(2)获取好友列表:

// 从服务器获取好友列表。
// 同步方法,会阻塞当前线程。异步方法为 asyncGetAllContactsFromServer(EMValueCallBack)。
List<String> usernames = EMClient.getInstance().contactManager().getAllContactsFromServer();
// 从本地数据库获取好友列表。
List<String> usernames = EMClient.getInstance().contactManager().getContactsFromLocal();


5、Android端实现发送文本消息

发送一条单聊消息

// `content` 为要发送的文本内容,`toChatUsername` 为对方的账号。
EMMessage message = EMMessage.createTxtSendMessage(content, toChatUsername);
// 发送消息
EMClient.getInstance().chatManager().sendMessage(message);


6、Android端实现接收消息

你可以用注册监听 EMMessageListener 接收消息。

该 EMMessageListener 可以多次添加,请记得在不需要的时候移除 listener,

如在activity 的 onDestroy() 时。

在新消息到来时,你会收到 onMessageReceived 的回调,消息接收时可能是一条,

也可能是多条。你可以在该回调里遍历消息队列,解析并显示收到的消息。

EMMessageListener msgListener = new EMMessageListener() {

// 收到消息,遍历消息队列,解析和显示。
@Override
public void onMessageReceived(List<EMMessage> messages) {

}
};
// 注册消息监听
EMClient.getInstance().chatManager().addMessageListener(msgListener);
// 解注册消息监听
EMClient.getInstance().chatManager().removeMessageListener(msgListener);


7、EaseIMKit 创建聊天列表页面

EaseIMKit 提供了 EaseChatFragment,添加到 Activity 中并传递相应的参数即可用。

必须向 EaseChatFragment 传递的参数为:

conversationId——会话 ID,单聊时指对方 ID,群聊和聊天室时指群和聊天室 ID;

chatType——聊天类型,整型,分别为单聊(1)、群聊(2)和聊天室(3);

可选传递参数为:

history_msg_id——消息 ID,用于查询历史记录时的定位消息 ID;

isRoaming——是否开启漫游,布尔类型,用于标记是否优先从服务器拉取消息。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2)
EaseChatFragment chatFragment = new EaseChatFragment();
Bundle bundle = new Bundle();
bundle.putString(EaseConstant.EXTRA_CONVERSATION_ID, "环信id");
bundle.putInt(EaseConstant.EXTRA_CHAT_TYPE, 1);
chatFragment.setArguments(bundle);
getSupportFragmentManager().beginTransaction().replace(R.id.container,chatFragment,"chat").commit();
}


8、EaseIMKit 创建会话列表页面

EaseIMKit 提供了 EaseConversationListFragment,需要将其或者其子类添加到

Activity 中。开发者需要对刷新事件(新消息,删除消息,删除会话等)进行处理。

1.加载会话:

public void loadDefaultData() {
presenter.loadData();
}


2.设置数据

public void setData(List<EaseConversationInfo> data) {
presenter.sortData(data);
}


3.删除会话

@Override
public void deleteConversation(int position, EaseConversationInfo info) {
presenter.deleteConversation(position, info);
}


9、EaseIMKit 添加联系人页面

EaseIMKit 提供了 EaseContactListFragment,添加其及其子类到 Activity 中。开发者需要对刷新事件(添加联系人,删除联系人等)进行处理

1.设置数据

public void setData(List<EaseUser> data) {
presenter.sortData(data);
}


到这里我们已经完成了Android端SDK集成,并实现了IM基本功能,相信以各位小伙伴的能力接着的优化完全不是问题,当然也说不定有些奇葩问题搞不定,建议可以去环信官网联系官方技术支持,快速帮你解决遇到的问题~~

环信官网:https://www.easemob.com/

注册环信账号:注册环信即时通讯云

Android端SDK下载:https://www.easemob.com/download/im

收起阅读 »

告诉ChatGPT,我想读博了

上篇文章详细写了如何体验ChatGPT。在实际使用中发现它对固定模板式的文字工作做的比较好。于是我瞬间想起了毕业前被论文支配的恐惧,我突然有一个大胆的想法,那么ChatGPT是否能帮我写一篇毕业论文呢? 1、论文大纲 以大家最常用的图书管理系统为例。在毕业论文...
继续阅读 »

上篇文章详细写了如何体验ChatGPT。在实际使用中发现它对固定模板式的文字工作做的比较好。于是我瞬间想起了毕业前被论文支配的恐惧,我突然有一个大胆的想法,那么ChatGPT是否能帮我写一篇毕业论文呢?


1、论文大纲


以大家最常用的图书管理系统为例。在毕业论文的第一步,我们先根据题目生成一个论文大纲。


image-20230212115237500


唔,感觉还行感觉稍微调整一下就可以用。


2、论文摘要


论文大纲有了,接下来是要写一个中英文的摘要。


image-20230212121653775


看样子只是翻译了一下,和普通的翻译软件也没啥差别。但ChatGPT的强大不止于此,还可以接受我们的“调教”。


3、论文润色


写过论文的同学都知道,初版论文往往经过天翻地覆的修改,因此「论文润色」是写论文时时刻刻都在做的事情。


比如我们对上面的摘要进行润色,我们试着在英文内容前加一个Prompt:



Please proofread and polish the passage from an academic angle and highlight the modification:


请从学术角度对这段话进行校对和润色,并突出修改的内容。



添加完提示后,神奇的事情发生了,不仅给了一个船新版本的摘要翻译,还给出了修改的提示


image-20230212121953558


那么ChatGPT给的修改建议到底是胡说八道,还是有据可依呢?


我取第一条修改意见,前面加上一个why,作为一个Prompt:



why Replaced "presents" with "proposes" to emphasize the introduction of a new idea ?



image-20230212205150644


oh!有理有据,令人信服。这不比某些不靠谱的导师给你瞎写修改意见强?


4、检查拼写与语法错误


自己写论文时难免会有大量的语法错误,此时也可以通过ChatGPT来检查。


比如我们随便写一个语法错误的句子,然后加一个Prompt。



Please help me to check the spelling and formatting errors and explain the reasons :“I think this song is most poplar of all,and I am very like that。”



image-20230213105718592


看的出来,通过我们自定义的Prompt,ChatGPT不仅将错误的句子修改正确,还帮我把错误的地方列举出来并且给予了详细的解释。相当于你的专属英文老师。


5、总结


简单的体验完之后,可以看出不论是在论文的润色,还是拼写语法的检查,ChatGPT确实都做的很好,可以称之为极其高效率的学术写作练习。感觉有了这么牛的论文写作工具,扶我起来,感觉还能再读个博!


我想读博了


突然,我回忆起自己曾经硕士毕业前写论文时的每一个夜晚,陷入了人生的大思考....


无论是选题还是目录,最后到论文的正文与总结,以往我们的学习方式都是通过搜索引擎进行「单方向信息获取」,大量的时间都用来检索信息,真正留给自己的思考的精力并不多。未来的学习方式定会变成基于AI的**「人机互动加速成长」**,我们通过更高效的方式来获取信息,更多精力留给自己的想法与思考。


即便你读研读博导师是个水货,从不指点你学术写作,你依然可以通过ChatGPT进行训练提高。


虽然最近很多媒体都在扬言AI取代人类的很多职业,但我想,ChatGPT不仅仅可以做为生产力工具,更可以高效的进行学习和工作,未来一定会发挥其教育的属性和价值。


毋庸置疑,人类进入了新的学习时代,新的生产力时代,我很庆幸自己生在了这个时代。


作者:李梨同学丶
链接:https://juejin.cn/post/7199474323869532219
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

人工智能未来是否会取代人类程序员?

   这个话题在近期来引起了很大讨论,尤其是当GPT4发布后,其展现出来的能力让很多岗位的从业者战战兢兢,比如像程序员,甚至有大佬跳出说三年 AI一定会取代程序员。人工智能和机器人是否会大规模取代人类程序员和工程师确实是一个非常复杂的问题。   一方面,人工智...
继续阅读 »

   这个话题在近期来引起了很大讨论,尤其是当GPT4发布后,其展现出来的能力让很多岗位的从业者战战兢兢,比如像程序员,甚至有大佬跳出说三年 AI一定会取代程序员。人工智能和机器人是否会大规模取代人类程序员和工程师确实是一个非常复杂的问题。


  一方面,人工智能和机器人确实在某些方面具有优势,比如处理大量数据、重复任务、持续运行等。这可能会影响某些类型的程序员工作,比如像是做一些简单工作的外包程序员。


  但是,程序员的工作内容并不仅仅是编写代码。他们需要与团队成员沟通,分析需求,设计系统架构,解决问题,优化性能等。这些任务需要丰富的经验和创造力,而目前的AI技术尚无法满足这些需求。 更具体点,我觉得以目前AI的能力,它在以下这些方面还完全无法取代人类程序员:



  1. 创新性解决问题:人类程序员能够通过创新思维解决复杂问题,而现有的AI通常依赖大量数据和已有知识,难以实现真正的创新。

  2. 高度抽象的思考:人类程序员能够理解和应用高度抽象的概念,而现有的AI在这方面仍然有限。

  3. 深入理解人类情感和需求:人类程序员能够理解其他人的情感和需求,从而开发更符合用户期望的软件。现有的AI在理解人类情感方面仍然有很大的局限性。

  4. 道德和伦理判断:在开发软件时,人类程序员可以根据道德和伦理原则做出判断。而现有的AI无法像人类一样理解和遵循道德伦理准则。

  5. 协作与沟通:人类程序员可以与团队成员有效沟通,协同解决问题。目前的AI在这方面仍然有很大的不足。

  6. 灵活判断和决策:人类程序员可以在不确定和模棱两可的情况下作出灵活判断和决策。而人工智能和机器人更依赖大量数据和明确规则,在没有足够信息的情况下,其判断和决策能力会受限。

  7. 审美和直观感受:人类程序员有对美感、审美和直观感受的理解,这些都是人工智能和机器人难以具备的。像是UI设计、交互体验设计等需要这方面的能力。


  如果你担忧AI对自己未来的影响,可以重点关注下个人以上方面能力的提升。努力提升自己的创造性、沟通表达能力、抽象思维等…… 这些软技能,至少目前就不用担心未来会被AI取代(当然以后的AI是不是也会具备上述能力,也不好说)。


  当然,换个视角思考,人工智能的进步也在推动程序员工作的变化。人工智能可以帮助程序员完成一些重复和耗时的任务,从而提高工作效率和产出,比如像Github推出的CoPilot,据说在某些场景下可以提升60%的编码速度。 所以,人工智能对程序员来说更像是一个合作伙伴,而不是竞争对手。


  综上,尽管人工智能在某些方面具有威胁,但作为一个整体,人工智能很难完全取代人类程序员。人工智能和人类程序员各有所长,在未来的互动中会形成更为合理和高效的工作模式。人类程序员的工作依然非常重要和必要。



备注:本文大部分内容由AI生成,我主要是将内容做整理和简单润色。


作者:xindoo
链接:https://juejin.cn/post/7212198951167787064
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

ChatGPT 生态,毁灭人性的一次开源!

很多人可能对百度文心一言发布会的现场记忆犹新。几百亿身价的老板,像小学生一样汇报自己的 PPT,充满了忐忑。 其实大可不必,命令行更加富有科技感,也更有说服力。不管对程序员来说还是围观的群众来说,能干什么并不重要,实际输出什么才是大家最关心的。 毕竟把人当傻子...
继续阅读 »

很多人可能对百度文心一言发布会的现场记忆犹新。几百亿身价的老板,像小学生一样汇报自己的 PPT,充满了忐忑。


其实大可不必,命令行更加富有科技感,也更有说服力。不管对程序员来说还是围观的群众来说,能干什么并不重要,实际输出什么才是大家最关心的。


毕竟把人当傻子的年代慢慢过去了。


这也难怪。ChatGPT 的模型越来越完善,资本家们都很着急。以往,打着开源的遮羞布,他们也可以拥有自己的自主产权。但没想到 ChatGPT 这么不识好歹,竟然将自己的核心技术夹的这么紧。


如果 ChatGPT 的能力,能够离线,能够运行在任何小型设备上,那么拥有独立人格的智能单元就会变成现实。这种设想,比集中化的大脑更有诱惑力。


这里,就有一个。你可以下载下来实际编译运行在在自己的MacBook上。




llama.cpp


github.com/xjjdog/llam…


这是一个 C++ 实现的 LLaMA 对话库。Java 和 Python的同学也不要被吓倒,它的使用超级简单。如果你遇到什么问题,欢迎到公众号(xjjdog)提问。


热门问题:



描述


和ChatGPT对比起来,llama的好处是:使用普通的Macbook,Linux,甚至Docker、树莓派等,就可以运行类比于 ChatGPT 的对话模型。




  • 纯C++代码,代码少,而且没有任何依赖




  • Apple 的M1 芯片也可以跑,而且有性能优化




  • x86架构拥有 AVX2 支持




  • 在 CPU 上就能跑,不需要 GPU




支持的平台:




  • [X] Mac OS




  • [X] Linux




  • [X] Windows (via CMake)




  • [X] Docker




模型下载地址:


curl -o ggml-alpaca-7b-q4.bin -C - https://gateway.estuary.tech/gw/ipfs/QmQ1bf2BTnYxq73MFJWu1B7bQ2UD6qG7D7YDCxhTndVkPC
curl -o ggml-alpaca-7b-q4.bin -C - https://ipfs.io/ipfs/QmQ1bf2BTnYxq73MFJWu1B7bQ2UD6qG7D7YDCxhTndVkPC
curl -o ggml-alpaca-7b-q4.bin -C - https://cloudflare-ipfs.com/ipfs/QmQ1bf2BTnYxq73MFJWu1B7bQ2UD6qG7D7YDCxhTndVkPC



那么,这个工具要怎么用呢?超级简单。


首先,将代码clone到本地。


git clone https://github.com/ggerganov/llama.cpp.git

然后,进入到llama.cpp目录。


cd llama.cpp

编译代码。


make

生成后的文件名称叫做main,以后,我们只需要运行 ./main即可。


最重要的一步,你需要下载一个数据模型。否则 llama 是不知道加载什么数据来进行计算的。为了测试,我们下载一个最小的。这个文件大小有3.9G,你需要相应大小的内存预留。


curl -o ggml-alpaca-7b-q4.bin -C - https://gateway.estuary.tech/gw/ipfs/QmQ1bf2BTnYxq73MFJWu1B7bQ2UD6qG7D7YDCxhTndVkPC

最后,我们就可以指定这个模型,来进行对话输出了。


./main -m ./ggml-alpaca-7b-q4.bin -p "Will the future be female?" -n 512 --color



  • m 指定的是模型的位置。




  • p 是对话或者问题。比如这里,我问我是否能够吃狗肉!




  • n 指定的是输出的文字数量,默认是128。




  • --color 输出彩色内容。




下面是一些输出。首先会将输入进行切分,然后生成内容,最后将耗时打印。


% ./main -m ./ggml-alpaca-7b-q4.bin -p "Can i eat dog?" -n 512 --color

No you cannot! Eating dogs is illegal and against the law. It would be considered animal abuse, so please don’t do it under any circumstances…unless you are a cannibal

main: mem per token = 14368644 bytes
main:     load time =   743.12 ms
main:   sample time =   455.50 ms
main:  predict time = 46903.35 ms / 91.79 ms per token
main:    total time = 48455.85 ms

交互模式


如果你想要和ChatGPT一样有对话能力的话,也是可以的。需要加上 -i 参数,当然,也可以使用 -r User:参数输出一个提示符。


比如:


./main -m ./ggml-alpaca-7b-q4.bin -p "Will the future be female?" -n 128 --color -i -r "User:"

授课模式


所谓授课模式,就是提供一个按照顺序输出的文件列表,让电脑按照顺序把答案输出。如果liyanhong使用这种模式,而不是ppt,估计效果会更好。


比如:


./main -m ./models/13B/ggml-model-q4_0.bin -n 256 --repeat_penalty 1.0 --color -i -r "User:" -f prompts/chat-with-bob.txt

内存需求


内存的需求取决于你使用的模型。我们的测试使用的都是最简单的模型,所以4GB就够了。如果想要更精细的输出,你的内存需要更大一些。
































modeloriginal sizequantized size (4-bit)
7B13 GB3.9 GB
13B24 GB7.8 GB
30B60 GB19.5 GB
65B120 GB38.5 GB

Android


你甚至可以在Android上跑起来。如果你的内存够大,那么完全可以做一个小型对话机器人,还是本地的!


后面如果解决了部分加载的问题,Android的嵌入式应用会非常方便。


End


人类有用的知识库看起来很多,但其实训练下来,最多也不会超过TB级别。当然也不能这么说,计算机也是由 0 和 1 组成的,但现在它几乎什么都能做。但无疑,除了训练算法,对于使用者来说,模型才是最重要的。


把这些有限的数据预装在小型的设备中,这就会成为最小的智能体。在数据中加入人格(目前的Chat系列是可以做到的),这个智能体就可以充当我们的秘书、代言人,甚至男女朋友。


嗯,一切皆有可能。从现在开始注意养生,活的长一点点,来看看未来世界的样子!



作者简介:小姐姐味道  (xjjdog),一个不允许程序员走弯路的公众号。聚焦基础架构和Linux。十年架构,日百亿流量,与你探讨高并发世界,给你不一样的味道。我的个人微信xjjdog0,欢迎添加好友,进一步交流。

作者:小姐姐味道
链接:https://juejin.cn/post/7212492075550720055
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

我把FlutterWeb渲染模式改成Canvaskit后...

背景 用FLutterWeb开发的网站在使用过程中出现了一些问题,比如在Google浏览器中使用交互、动画流畅,在360浏览器中就卡顿;图标在代码中动态设置颜色的方式在Google浏览器中正常显示,在Safari浏览器中颜色缺失,变为黑色;在有的电脑中Goog...
继续阅读 »

背景


用FLutterWeb开发的网站在使用过程中出现了一些问题,比如在Google浏览器中使用交互、动画流畅,在360浏览器中就卡顿;图标在代码中动态设置颜色的方式在Google浏览器中正常显示,在Safari浏览器中颜色缺失,变为黑色;在有的电脑中Google浏览器也有动画、交互卡顿的现象、页面报错等。很奇怪,一脑袋问号。


优化方案


这些问题的原因是,渲染模式为html导致的,将渲染模式由html改为canvaskit,之前遇到的问题基本就解决了,动画也不卡了,画面也流畅了,图标也正常了,兼容性也提高了,再也不用担心在老板的电脑上卡住了。


渲染模式


简单说说两种模式的区别。

html渲染模式:flutter会采用HTML的custom element,CSS,CanvasSVG来渲染UI元素。

canvaskit渲染模式:flutter将 Skia 编译成 WebAssembly 格式,并使用 WebGL 渲染。



























htmlcanvaskit
命令行--web-renderer html--web-renderer canvaskit
优点体积更小渲染性能强;多端一致
缺点渲染性能差;跨端兼容差体积相较html多2.5M

所以使用canvaskit会更加流畅,更符合FLutter的气质。但是!也出现了些新的问题。


由Canvaskit引起的问题


图片跨域



报错描述:
Access to XMLHttpRequest at 'https://.../icon/setting_228.webp' from origin 'https://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.



在html模式下是正常的,而在canvaskit出现了跨域问题,查看日志发现区别。


html的网络请求类型type就是图片本身,不会出现问题。
图片跨域2.png



不会出现跨域的问题原因是在HTML中,有一些标签也可以发起HTTP请求,比如script标签,link标签,img标签,form标签,且被允许跨域。



  1. link,img标签都是单纯的引入资源文件

  2. form标签用于收集用户输入并发送,但是发送成功会跳转到新网页,并将服务器响应作为新网页的内容

  3. script标签可以引入外部js文件,并执行引入的js文件的代码


其中,script标签由于其可以执行引入的js文件的代码,再加上其跨域特性,让script标签可以用来做一些超出其设计初衷的事。script标签会发起HTTP GET去请求服务器上的js文件,所以script标签可以用于实现HTTP GET跨域请求。



而canvaskit模式下,请求类型是xhr,不支持跨域。而我的图片地址和服务地址并不在一个域名,所以出现该问题。
图片跨域1.png



原因是同源策略,它是浏览器特有的一种安全机制,主要用于限制不同的源之间的数据交互。



那如何解决呢?


询问前端大佬后,发现解决问题最快的方法就是放到自身服务的域名下。随后我把图片放在项目中的asset目录中,更改本地引用地址,打包上传部署,解决!


(PS:这个问题在本地debug模式下,并不会出现)


首次打开加载慢


在首次改成canvaskit模式部署后,打开网站,页面一度白屏很长时间,预计有10秒,查看后台日志发现是下载了很多文件,包括canvaskit绘制引擎、字体等。主要耗时是在引擎(约9M)、字体下载,而下载这些的域名都是官方的,所以下载速度也有所限制。
引擎下载.png
解决办法:
将引擎和字体传值自己的服务器,以加快下载速度。




  1. 引擎本地化,查看网络请求详情,可以看到下载地址,单独下载后放到项目中。
    下载引擎.png
    我的位置是web/assets/canvaskit/canvaskit.js&wasm
    引擎存放地址.png

    再设置替换引擎路径,在运行或打包的时候加上以下命令行。等号后面为本地的路径。


    --dart-define=FLUTTER_WEB_CANVASKIT_URL=assets/canvaskit/



  2. 本地化加载KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf字体文件,同样在请求详情中获取地址,下载至本地,放在本地,web/assets/canvaskit/


    字体下载.png


    替换本地地址,在构建完成后的build目录下的main.dart.js中搜索该字体名,把前缀替换成本地路径。


    https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
    替换成
    assets/canvaskit/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf



字体需下载


在打开页面时,会出现字体乱码,原因是正在下载字体,而且引用的字体不一样下载的库也是不同的。同样也可以下载至本地,替换main.dart.js的地址,但下载完体验后,发现不管是第一次还是之后都会出现乱码,只是显示的时间长短,体验也是不很好。

字体乱码.png


下载字体地址.png
所以我是在pubspec.yaml中设置了本地的字体包的方式解决的,这样在首次加载或后面的刷新,都未出现过乱码。


设置字体.png


加载时提示


经过上面两步设置,首次加载时长会有大大缩减,但是也会有白屏,为了更好的体验在白屏时加个提示。


// 在 web/index.html 中的 body 标签下加提示
<div id="text">静态资源加载中...</div>

浏览器刷新后页面加载两次


在使用网站时刷新会出现页面加载两次的问题,查看日志发现是web/index.html中的一段代码引起的。


// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);

引起超时的原因是navigator.serviceWorker.register(serviceWorkerUrl)注册失败,而上面的代码是兜底的逻辑。serviceWorker是服务器与浏览器之间的代理,目前用不上,所以将注册逻辑注释掉,直接调用loadMainDartJs()即可。


路由包装url地址方式失效


在canvaskit模式下,刷新后不会停留在当前页面了。之前写过一篇文章《FlutterWeb浏览器刷新后无法回退的解决方案》中的方案看来只适应在html模式下。


解决办法:
在上面的的文章基础上稍微修改下。


 // 刷新时回调
_beforeUnload = (event) {
// 本地记录,标记成"已刷新"
DB(DBKey.isRefresh).value = true;

// 记录刷新时的页面,用于还原(本次新增的方法)
List history = get();
DB(DBKey.initRoute).value = history.last;
history.removeLast();
set(history);

// 移除刷新前的实例的监听
html.window.removeEventListener('beforeunload', _beforeUnload);
html.window.removeEventListener('popstate', _popState);
};

// 获取上次最后的页面,(本次新增的方法)
static String initRoute(currentContext) {
return DB(DBKey.initRoute).get(Uri(scheme: RoutePath.scheme, host: RoutePath.home).toString());
}

// 初始化
MaterialApp(
.....
initialRoute: RouterHistory.initRoute(context),//(本次新增的方法)
.....
))

这样设置完后也会停留在当前页面了。


最后


如果有遇到其他问题或更好的解决办法欢迎提出讨论


作者:苏啵曼
链接:https://juejin.cn/post/7212101192746303544
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Flutter 本地存储 —— 基本的键值对存储

前言 在原生的 Android 或 iOS 中,都提供了基本的键值对存储方式,Android 是 SharedPreferences,iOS 是 NSUserDefaults。在 Flutter 中,提供了 shared_preferences 这个插件来实现...
继续阅读 »

前言


在原生的 Android 或 iOS 中,都提供了基本的键值对存储方式,Android 是 SharedPreferences,iOS 是 NSUserDefaults。在 Flutter 中,提供了 shared_preferences 这个插件来实现本地键值对数据存储。实际上,shared_preferences 在 Android 就是使用 SharedPreferences 实现,在 iOS 上则是使用 NSUserDefaults 实现。


基本使用


在 pubspec.yaml 文件中添加以下代码:


dependencies:
flutter:
sdk: flutter
shared_preferences: ^2.0.18

我们将基础的计数应用修改为支持从上一次结果(即存储在本地的数值)开始增加。代码如下:


import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int _counter = 0;
late SharedPreferences _prefs;

@override
void initState() {
super.initState();
_loadCounter();
}

void _loadCounter() async {
_prefs = await SharedPreferences.getInstance();
setState(() {
_counter = (_prefs.getInt('counter') ?? 0);
});
}

void _incrementCounter() async {
setState(() {
_counter++;
});
await _prefs.setInt('counter', _counter);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Shared Preferences 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}

上面的代码是一个基础的计数器应用,我们定义了一个_counter变量来保存计数器的值,并且使用 SharedPreferences 实例来存储和检索_counter变量的值。
initState方法中,我们使用_loadCounter方法来加载_counter变量的值。在_loadCounter方法中,我们首先使用SharedPreferences.getInstance() 方法来获取 SharedPreferences 实例,然后使用 getInt()方法来检索 _counter 变量的值。如果检索到的值为 null,则将 _counter 变量的值设置为 0。
_incrementCounter 方法中,我们使用了setInt方法将 _counter 变量的值保存到 SharedPreferences 实例中来实现本地存储。
运行效果如下:


基本本地存储.gif


存储其他类型数据


shared_preferences支持存储的数据类型有整型、浮点型(double)、字符串、布尔型和字符串数组。如果想存储对象,也可以通过 json 序列化和反序列化的方式实现。我们来看一个更复杂点的例子。


class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
// 初始化需要存储的值
int _counter = 0;
String _username = '';
bool _isDarkModeEnabled = false;
final _textController = TextEditingController(text: '');

// SharedPreferences 实例
late SharedPreferences _prefs;

// 加载 SharedPreferences 中存储的值
Future<void> _loadData() async {
_prefs = await SharedPreferences.getInstance();
setState(() {
_counter = _prefs.getInt('counter') ?? 0;
_username = _prefs.getString('username') ?? '';
_textController.text = _username;
_isDarkModeEnabled = _prefs.getBool('isDarkModeEnabled') ?? false;
});
}

void _incrementCounter() async {
setState(() {
_counter++;
});
await _prefs.setInt('counter', _counter);
}

// 保存用户名
void _saveUsername(String username) async {
setState(() {
_username = username;
});
await _prefs.setString('username', _username);
}

// 切换暗黑模式
void _toggleDarkMode(bool isDarkModeEnabled) async {
setState(() {
_isDarkModeEnabled = isDarkModeEnabled;
});
await _prefs.setBool('isDarkModeEnabled', _isDarkModeEnabled);
}

@override
void initState() {
super.initState();
_loadData();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter SharedPreferences 示例',
theme: _isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter SharedPreferences 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'计数器的值:$_counter',
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
labelText: '请输入您的名字',
),
controller: _textController,
onChanged: (value) {
_saveUsername(value);
},
),
const SizedBox(height: 20),
SwitchListTile(
title: const Text('启用暗黑模式'),
value: _isDarkModeEnabled,
onChanged: (value) {
_toggleDarkMode(value);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: '递增计数器的值',
child: const Icon(Icons.add),
),
),
);
}
}

上述代码增加了两个类型的存储,分别是字符串和布尔型,存储方式其实是类似的,布尔型使用 getBool 获取、setBool 存储;字符串则是使用 getStringsetString。我们通过布尔型变量控制是否启用暗黑模式,使用字符串类存储用户名。下面是运行的结果。


高级应用.gif


总结


可以看到shared_preferences 非常简单,因此可以应用在简单的键值对存储中,典型的就是我们在本地换成后端的SessionId、记住用户名和密码、或者默认的勾选项等等。然后基于这些存储的数据做默认值显示和业务规则控制、或填充到请求表单里。对于复杂的业务对象存储,则需要使用 SQL数据库或者是 NoSQL 数据库。


作者:岛上码农
链接:https://juejin.cn/post/7212548831723470907
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

究极进化版基于 dio 的网络封装库

dio
可能是 Flutter 上最强的网络框架, 基于dio实现的非侵入式框架(不影响原有功能). 学习成本低、使用简单, 一行代码发起网络请求, 甚至无需初始化。 之前发过两篇关于封装网络库的文章: 强大的dio封装,可能满足你的一切需要 一步一步教你封装最新版...
继续阅读 »

可能是 Flutter 上最强的网络框架, 基于dio实现的非侵入式框架(不影响原有功能). 学习成本低、使用简单, 一行代码发起网络请求, 甚至无需初始化。


之前发过两篇关于封装网络库的文章:



距离最早的文章发布时间,已经过去了三年。这期间 dio 也更新到5.x.x了,在使用中也积攒了许多定制需求和优化方案。在确定需求和方案后,修修改改,终于发布了最新最实用的网络请求版本。


欢迎贡献代码/问题


特点



  • 个人使用下来感觉开发效率比目前网络请求库都高:最简单易用

  • 专为 Flutter 而生,支持全平台

  • 遵循设计模式最佳实践,build模式全局配置

  • catch请求错误,不需要开发者处理

  • 优秀的源码/注释/文档/示例

  • 类似kotlin的语法糖:请求结果的when语句和密封类


主要功能



  • RESTful API 设计
    GET/POST/PUT/HEAH/DELETE/PATCH/DOWNLOAD

  • 可取消请求

  • 异步解析,数据量大不再卡顿

  • 全局错误处理(减少崩溃率)

  • 自定义解析器,支持全局和单个请求

  • 自定义解析方法

  • 配置请求参数

  • 漂亮的日志打印

  • 证书快速配置

  • 代理配置

  • 拦截器配置

  • 强制缓存模式/自定义缓存Key/缓存有效期/LRU缓存算法/缓存任何数据

  • 监听上传/下载进度


简单使用


添加依赖:


dependencies:
flutter_nb_net: ^0.0.1

像 dio 一样使用,无需配置,返回实体类实现BaseNetworkModel,复写fromJson函数即可,:


class BannerModel extends BaseNetworkModel<BannerModel> {

@override
BannerModel fromJson(Map<String, dynamic> json) {
return BannerModel.fromJson(json);
}
//...
}

温馨提示:dart实体类可用freezedjson_serializable生成或者JsonToDart插件一键生成。


  /// Get 请求
void requestGet() async {
var appResponse = await get<BannerModel, BannerModel>("banner/json",
responseType: BannerModel());
appResponse.when(success: (BannerModel model) {
var size = model.data?.length;
debugPrint("成功返回$size条");
}, failure: (String msg, int code) {
debugPrint("失败了:msg=$msg/code=$code");
});
}

get<BannerModel, BannerModel>这里有两个泛型,前者是接口返回的数据需要序列化的类型,后者是开发关注的需要返回的类型。如果数据类型一致,两个泛型就是一样的。否则,比如接口返回一个用户列表,前面泛型就是User类型,后面是List<User>;又或者接口返回的数据包了几层,我们只需要最里面的数据格式,那么前面就是需要序列化的整个数据类型,第二个泛型是最里面的数据类型。


配置使用


全局配置


在使用前进行全局配置:


 NetWrapper.instance
// header
.addHeaders({"aaa": '111'})
// baseUrl
.setBaseUrl("https://www.wanandroid.com/")
// 代理/https
.setHttpClientAdapter(IOHttpClientAdapter()
..onHttpClientCreate = (client) {
client.findProxy = (uri) {
return 'PROXY 192.168.20.43:8888';
};
client.badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
return client;
})
// cookie
.addInterceptor(CookieManager(CookieJar()))
// dio_http_cache
.addInterceptor(DioCacheManager(CacheConfig(
baseUrl: "https://www.wanandroid.com/",
)).interceptor)
// dio_cache_interceptor
.addInterceptor(DioCacheInterceptor(
options: CacheOptions(
store: MemCacheStore(),
policy: CachePolicy.forceCache,
hitCacheOnErrorExcept: [401, 403],
maxStale: const Duration(days: 7),
priority: CachePriority.normal,
cipher: null,
keyBuilder: CacheOptions.defaultCacheKeyBuilder,
allowPostMethod: false,
)))
// 全局解析器
.setHttpDecoder(MyHttpDecoder.getInstance())
// 超时时间
.setConnectTimeout(const Duration(milliseconds: 3000))
// 允许打印log,默认未 true
.enableLogger(true)
.create();

如果接口返回的数据格式规范,配置自定义一个全局解析器 .setHttpDecoder(MyHttpDecoder.getInstance())


/// 默认解码器
class MyHttpDecoder extends NetDecoder {
/// 单例对象
static final MyHttpDecoder _instance = MyHttpDecoder._internal();

/// 内部构造方法,可避免外部暴露构造函数,进行实例化
MyHttpDecoder._internal();

/// 工厂构造方法,这里使用命名构造函数方式进行声明
factory MyHttpDecoder.getInstance() => _instance;

@override
K decode<T extends BaseNetworkModel, K>(
{required Response<dynamic> response, required T responseType}) {
var errorCode = response.data['errorCode'];

/// 请求成功
if (errorCode == 0) {
var data = response.data['data'];
if (data is List) {
var dataList = List<T>.from(
data.map((item) => responseType.fromJson(item)).toList()) as K;
return dataList;
} else {
var model = responseType.fromJson(data) as K;
return model;
}
} else {
var errorMsg = response.data['errorMsg'];
throw NetException(errorMsg, errorCode);
}
}
}

如果添加缓存,可以使用dio_cache_interceptordio_http_cache等 dio 推荐的缓存库。


 // dio_http_cache
.addInterceptor(DioCacheManager(CacheConfig(
baseUrl: "https://www.wanandroid.com/",
)).interceptor)
// dio_cache_interceptor
.addInterceptor(DioCacheInterceptor(
options: CacheOptions(
store: MemCacheStore(),
policy: CachePolicy.forceCache,
hitCacheOnErrorExcept: [401, 403],
maxStale: const Duration(days: 7),
priority: CachePriority.normal,
cipher: null,
keyBuilder: CacheOptions.defaultCacheKeyBuilder,
allowPostMethod: false,
)))

因为dio_http_cache依赖的diojson_annotation是旧版本,所以如果使用dio_http_cache需要解决下依赖冲突:


dependency_overrides:
dio: ^5.0.3
json_annotation: ^4.8.0

配置代理和证书:


      .setHttpClientAdapter(IOHttpClientAdapter()
..onHttpClientCreate = (client) {
client.findProxy = (uri) {
return 'PROXY 192.168.20.43:8888';
};
client.badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
return client;
})

配置cookie


addInterceptor(CookieManager(CookieJar()))

开启 log,默认开启:


.enableLogger(true)

response_log_android_studio.png


特殊配置


有的接口比较特殊,比如返回的数据格式是特殊的,需要单独解析,此时有两种方法实现,第一种适合多个相同的特殊接口,在请求时传入自定义的解析器,第二种是在回调中解析。


解析器httpDecode


    var appResponse = await get<BannerBean, List<BannerBean>>("banner/json",
responseType: BannerBean(), httpDecode: MyHttpDecoder.getInstance());
appResponse.when(success: (List<BannerBean> model) {
var size = model.length;
debugPrint("成功返回$size条");
}, failure: (String msg, int code) {
debugPrint("失败了:$msg");
});

回调converter


   var appResponse = await get<BannerModel, List<BannerBean>>("banner/json",
options: buildCacheOptions(const Duration(days: 7)),
responseType: BannerModel(), converter: (response) {
var errorCode = response.data['errorCode'];
/// 请求成功
if (errorCode == 0) {
var data = response.data['data'];
var dataList = List<BannerBean>.from(
data.map((item) => BannerBean.fromJson(item)).toList());
return Result.success(dataList);
} else {
var errorMsg = response.data['errorMsg'];
return Result.failure(msg: errorMsg, code: errorCode);
}
});
appResponse.when(success: (List<BannerBean> model) {
debugPrint("成功返回${model.length}条");
}, failure: (String msg, int code) {
debugPrint("失败了:msg=$msg/code=$code");
});

名字的由来


一开始这个库的名字是net,这是我第一次在 pub 上发布,不知道库名称不能重合的规则,一直失败:


`xxx@gmail.com` has insufficient permissions to upload new versions to existing package `net`.

说明 pub 上已经有了这个名字的库,改名flutter_net,依然失败:


`xxx@gmail.com` has insufficient permissions to upload new versions to existing package `flutter_net`.


最后改名为flutter_nb_net,终于发布成功了。


国际惯例上源码


pub地址


作者:北海道浪子
链接:https://juejin.cn/post/7212597327579332668
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

从Flutter到Compose,为什么都在推崇声明式UI?

Compose推出之初,就曾引发广泛的讨论,其中一个比较普遍的声音就是——“🤨这跟Flutter也长得太像了吧?!” 这里说的长得像,实际更多指的是UI编码的风格相似,而关于这种风格有一个专门的术语,叫做声明式UI。 对于那些已经习惯了命令式UI的Androi...
继续阅读 »

Compose推出之初,就曾引发广泛的讨论,其中一个比较普遍的声音就是——“🤨这跟Flutter也长得太像了吧?!”


这里说的长得像,实际更多指的是UI编码的风格相似,而关于这种风格有一个专门的术语,叫做声明式UI


对于那些已经习惯了命令式UI的Android或iOS开发人员来说,刚开始确实很难理解什么是声明式UI。就像当初刚踏入编程领域的我们,同样也很难理解面向过程编程面向对象编程的区别一样。


为了帮助这部分原生开发人员完成从命令式UI到声明式UI的思维转变,本文将结合示例代码编写、动画演示以及生活例子类比等形式,详细介绍声明式UI的概念、优点及其应用。


照例,先奉上思维导图一张,方便复习:





命令式UI的特点


既然命令式UI与声明式UI是相对的,那就让我们先来回顾一下,在一个常规的视图更新流程中,如果采用的是命令式UI,会是怎样的一个操作方式。


以Android为例,首先我们都知道,Android所采用的界面布局,是基于View与ViewGroup对象、以树状结构来进行构建的视图层级。



当我们需要对某个节点的视图进行更新时,通常需要执行以下两个操作步骤:



  1. 使用findViewById()等方法遍历树节点以找到对应的视图。

  2. 通过调用视图对象公开的setter方法更新视图的UI状态


我们以一个最简单的计数器应用为例:



这个应用唯一的逻辑就是“当用户点击"+"号按钮时数字加1”。在传统的Android实现方式下,代码应该是这样子的:


class CounterActivity : AppCompatActivity() {

var count: Int = 0

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_counter)

val countTv = findViewById<TextView>(R.id.count_tv)
countTv.text = count.toString()

val plusBtn = findViewById<Button>(R.id.plus_btn)
plusBtn.setOnClickListener {
count += 1
countTv.text = count.toString()
}

}
}

这段代码看起来没有任何难度,也没有明显的问题。但是,假设我们在下一个版本中添加了更多的需求:




  • 当用户点击"+"号按钮,数字加1的同时在下方容器中添加一个方块。

  • 当用户点击"-"号按钮,数字减1的同时在下方容器中移除一个方块。

  • 当数字为0时,下方容器的背景色变为透明。


现在,我们的代码变成了这样:


class CounterActivity : AppCompatActivity() {

var count: Int = 0

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_counter)

// 数字
val countTv = findViewById<TextView>(R.id.count_tv)
countTv.text = count.toString()

// 方块容器
val blockContainer = findViewById<LinearLayout>(R.id.block_container)

// "+"号按钮
val plusBtn = findViewById<Button>(R.id.plus_btn)
plusBtn.setOnClickListener {
count += 1
countTv.text = count.toString()
// 方块
val block = View(this).apply {
setBackgroundColor(Color.WHITE)
layoutParams = LinearLayout.LayoutParams(40.dp, 40.dp).apply {
bottomMargin = 20.dp
}
}
blockContainer.addView(block)
when {
count > 0 -> {
blockContainer.setBackgroundColor(Color.parseColor("#FF6200EE"))
}
count == 0 -> {
blockContainer.setBackgroundColor(Color.TRANSPARENT)
}
}
}

// "-"号按钮
val minusBtn = findViewById<Button>(R.id.minus_btn)
minusBtn.setOnClickListener {
if(count <= 0) return@setOnClickListener
count -= 1
countTv.text = count.toString()
blockContainer.removeViewAt(0)
when {
count > 0 -> {
blockContainer.setBackgroundColor(Color.parseColor("#FF6200EE"))
}
count == 0 -> {
blockContainer.setBackgroundColor(Color.TRANSPARENT)
}
}
}

}

}

已经开始看得有点难受了吧?这正是命令式UI的特点,侧重于描述怎么做,我们需要像下达命令一样,手动处理每一项UI的更新,如果UI的复杂度足够高的话,就会引发一系列问题,诸如:



  • 可维护性差:需要编写大量的代码逻辑来处理UI变化,这会使代码变得臃肿、复杂、难以维护。

  • 可复用性差:UI的设计与更新逻辑耦合在一起,导致只能在当前程序使用,难以复用。

  • 健壮性差:UI元素之间的关联度高,每个细微的改动都可能一系列未知的连锁反应。


声明式UI的特点


而同样的功能,假如采用的是声明式UI,则代码应该是这样子的:


class _CounterPageState extends State<CounterPage> {
int _count = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
// 数字
Text(
_count.toString(),
style: const TextStyle(fontSize: 48),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
// +"号按钮
ElevatedButton(
onPressed: () {
setState(() {
_count++;
});
},
child: const Text("+")),
// "-"号按钮
ElevatedButton(
onPressed: () {
setState(() {
if (_count == 0) return;
_count--;
});
},
child: const Text("-"))
],
),
Expanded(
// 方块容器
child: Container(
width: 60,
padding: const EdgeInsets.all(10),
color: _count > 0 ? const Color(0xFF6200EE) : Colors.transparent,

child: ListView.separated(
itemCount: _count,
itemBuilder: (BuildContext context, int index) {
// 方块
return Container(width: 40, height: 40, color: Colors.white);
},
separatorBuilder: (BuildContext context, int index) {
return const Divider(color: Colors.transparent, height: 10);
},
),
))
],
),
);
}
}

在这样的代码中,我们几乎看不到任何操作UI更新的代码,而这正是声明式UI的特点,它侧重于描述做什么,而不是怎么做,开发者只需要关注UI应该如何呈现,而不需要关心UI的具体实现过程。


开发者要做的,就只是提供不同UI与不同状态之间的映射关系,而无需编写如何在不同UI之间进行切换的代码。


所谓状态,指的是构建用户界面时所需要的数据,例如一个文本框要显示的内容,一个进度条要显示的进度等。Flutter框架允许我们仅描述当前状态,而转换的工作则由框架完成,当我们改变状态时,用户界面将自动重新构建


下面我们将按照通常情况下,用声明式UI实现一个Flutter应用所需要经历的几个步骤,来详细解析前面计数器应用的代码:



  1. 分析应用可能存在的各种状态


根据我们前面对于“状态”的定义,我们可以很容易地得出,在本例中,数字(_count值)本身即为计数器应用的状态,其中还包括数字为0时的一个特殊状态。



  1. 提供每个不同状态所对应要展示的UI


build方法是将状态转换为UI的方法,它可以在任何需要的时候被框架调用。我们通过重写该方法来声明UI的构造:


对于顶部的文本,只需声明每次都使用最新返回的状态(数字)即可:


Text(
_count.toString(),
...
),

对于方块容器,只需声明当_count的值为0时,容器的背景颜色为透明色,否则为特定颜色:


Container(
color: _count > 0 ? const Color(0xFF6200EE) : Colors.transparent,
...
)

对于方块,只需声明返回的方块个数由_count的值决定:


ListView.separated(
itemCount: _count,
itemBuilder: (BuildContext context, int index) {
// 方块
return Container(width: 40, height: 40, color: Colors.white);
},
...
),


  1. 根据用户交互或数据查询结果更改状态


当由于用户的点击数字发生变化,而我们需要刷新页面时,就可以调用setState方法。setState方法将会驱动build方法生成新的UI:


// "+"号按钮
ElevatedButton(
onPressed: () {
setState(() {
_count++;
});
},
child: const Text("+")),
// "-"号按钮
ElevatedButton(
onPressed: () {
setState(() {
if (_count == 0) return;
_count--;
});
},
child: const Text("-"))
],

可以结合动画演示来回顾这整个过程:



最后,用一个公式来总结一下UI、状态与build方法三者的关系,那就是:



以命令式和声明式分别点一杯奶茶


现在,你能了解命令式UI与声明式UI的区别了吗?如果还是有些抽象,我们可以用一个点奶茶的例子来做个比喻:


当我们用命令式UI的思维方式去点一杯奶茶,相当于我们需要告诉制作者,冲一杯奶茶必须按照煮水、冲茶、加牛奶、加糖这几个步骤,一步步来完成,也即我们需要明确每一个步骤,从而使得我们的想法具体而可操作。


而当我们用声明式UI的思维方式去点一杯奶茶,则相当于我们只需要告诉制作者,我需要一杯“温度适中、口感浓郁、有一点点甜味”的奶茶,而不必关心具体的制作步骤和操作细节。


声明式编程的优点


综合以上内容,我们可以得出声明式UI有以下几个优点:




  • 简化开发:开发者只需要维护状态->UI的映射关系,而不需要关注具体的实现细节,大量的UI实现逻辑被转移到了框架中。




  • 可维护性强:通过函数式编程的方式构建和组合UI组件,使代码更加简洁、清晰、易懂,便于维护。




  • 可复用性强:将UI的设计和实现分离开来,使得同样的UI组件可以在不同的应用程序中使用,提高了代码的可复用性。




总结与展望


总而言之,声明式UI是一种更加高层次、更加抽象的编程方式,其最大的优点在于能极大地简化现有的开发模式,因此在现代应用程序中得到广泛的应用,随着更多框架的采用与更多开发者的加入,声明式UI必将继续发展壮大,成为以后构建用户界面的首选方式。


作者:星际码仔
链接:https://juejin.cn/post/7212622837063811109
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android本地化适配之ICU接口

背景: 在多语言项目中,我们经常会遇到本地化适配不规范导致的问题。例如 月份翻译错误、数字显示格式不正确 或者 数字显示形式与本地习惯不符 等。为了寻求一种更精准高效的适配方案,我在网上查阅了相关资料。发现Google提供了一个本地化API接口——ICU AP...
继续阅读 »

背景:


在多语言项目中,我们经常会遇到本地化适配不规范导致的问题。例如 月份翻译错误数字显示格式不正确 或者 数字显示形式与本地习惯不符 等。为了寻求一种更精准高效的适配方案,我在网上查阅了相关资料。发现Google提供了一个本地化API接口——ICU API。它可以利用ICU和CLDR提供Unicode和其他国际化支持。从而提升软件的本地化质量。


本地化适配场景


本地化适配所涉及到的问题,基本上都可以归纳为:在不同的语言和地区,同一个信息所显示翻译不同、格式不同或者一个事物表现规则不同。通过归纳总结,我们把常见的本地化适配分为以下几个类型:时间信息数字信息文件大小及其单位历法规则测量单位和时区信息


本地化接口使用


针对以上所述本地化场景,我们分别介绍相关接口以及接口使用方法。


常见格式如日期、单位等,在 data/locales 目录中有详细说明。,我们可以下载 data/locales/zh.txt 文件查看不同标签对应内容含义。


例如我们要查看星期在各国翻译下的内容:



  • 首先我们在 data/locales/zh.txt 中查找星期一对应标签 dayNames 下面。其中wide表示全称,short表示简称。

  • 打开 data/locales 其它国家对应语言码txt文件。比如查看法语下翻译情况时打开 fr.txt 文件。

  • 同样查找 dayNames 标签对应翻译,并与手机上显示翻译比对是否一致。


除了 data/locales 目录外还有几个目录需要关注:



  • data/unit 常用单位

  • data/curr 货币单位

  • data/lang 语言描述


时间日期格式


DateFormat#getInstanceForSkeleton 、SimpleDateFormat.getDateInstance


说明:


1.这些接口能够解决x年x月x日星期x x时x分x秒这类时间信息格式问题。比如年月日出现先后顺序不同情况。这个格式与本地人使用习惯相关。


好的,我已经输出了你的文章的前半部分,下面是后半部分:


因此使用这个接口能够很好地解决时间显示格式问题。


时间日期格式


DateFormat#getInstanceForSkeleton 、SimpleDateFormat.getDateInstance


说明:


1.这些接口能够解决 x年x月x日星期xx时x分x秒 这类时间信息格式问题。比如年月日出现先后顺序不同情况,这个格式与本地人使用习惯是相关的。因此使用这个接口能够很好地解决时间显示格式问题。


2.同时这个接口 还能解决时间表述中翻译问题,不用再单独考虑翻译问题。 这个翻译的准确度,往往要高于翻译公司的准确度


3.使用其中一些特殊接口能够解决一些特殊字串翻译问题。比如使用以下接口可以获取 星期一二月 等相关特殊时间在本地语言翻译字符。这个翻译准确度往往高于翻译公司准确度。希望有类似字串显示场景可以研究这个接口并进行使用。developer.android.com/reference/j…


以下只就说明进行一个简单举例:下面的getDateInstance可以不传第二个参数,那么就会根据当前系统预设来输出结果。


DateFormat df = DateFormat.getDateInstance(DateFormat.LONG, Locale.FRANCE);
myDate = df.parse(myString);
...
January 12, 1952

具体格式由第一个参数控制,模块可根据需求自行定制,给出以下使用案例



DateFormat.getInstanceForSkeleton(DateFormat.ABBR_MONTH_DAY, Locale.getDefault()).format(new Date());
...
3月16日
Mar 16

DateFormat.getInstanceForSkeleton(DateFormat.MONTH_WEEKDAY_DAY, Locale.getDefault()).format(new Date());
...
3月16日星期四
Thursday,March 16

DateFormat.getInstanceForSkeleton("MMMEdd", locale1).format(new Date());
...
3月16日星期四
Thursday,Mar 16

DateFormat.getInstanceForSkeleton(DateFormat.YEAR_MONTH_DAY, Locale.getDefault()).format(new Date());
DateFormat.getInstanceForSkeleton(DateFormat.YEAR_MONTH_DAY, Locale.ENGLISH).format(new Date());
...
2023年3月16
March 16,2023

DateFormat.getInstanceForSkeleton("yyyyMMdd", Locale.getDefault()).format(new Date());
...
2023/03/16
03/16/2023

DateFormat.getInstanceForSkeleton("hhmma", Locale.getDefault()).format(new Date());
...
下午7:51
7:51 PM

SimpleDateFormat.getDateInstance(DateFormat.MEDIUM, Locale.getDefault()).format(new Date());
...
2023年03月16日
Mar 16, 2023

// 使用工具类
DateUtils.formatDateTime(context, time, DateUtils.FORMAT_ABBREV_MONTH);
DateUtils.formatDateTime(context, time, DateUtils.FORMAT_SHOW_YEAR);

日期/时间区间:


DateInterval dateInterval = new DateInterval(time1, time2);
DateIntervalFormat.getInstance(DateFormat.YEAR_ABBR_MONTH_DAY, Locale.getDefault()).format(dateInterval, new StringBuffer(""), new FieldPosition(0));
...
2023年3月16日至7月16日
Mar 16 – Jul 16, 2023

数字信息格式


NumberFormat#getInstance、NumberFormat#getCurrencyInstance、NumberFormat#getPercentInstance


说明:


1.这些接口能够解决数字信息格式问题。比如数字显示形式应该是本地字母而不是阿拉伯数字、小数点和千分位符号位置不同等。
2.同时这些接口还能解决货币单位和百分比符号的本地化显示问题。
3.使用其中一些特殊接口还能解决一些特殊数字信息的本地化显示问题。比如使用以下接口可以获取本地语言对应的序数词(第一、第二等)或者序列号(1st、2nd等)。


以下只就说明进行一个简单举例:下面的getInstance可以不传参数,那么就会根据当前系统预设来输出结果。


NumberFormat nf = NumberFormat.getInstance(Locale.FRENCH);
myNumber = nf.parse(myString);

输出当地习惯显示的数字格式,或者当地文字


NumberFormat.getInstance(Locale.getDefault()).format(100001.23);
...
100,000.89
100,000.89

DecimalFormat.getPercentInstance(Locale.getDefault()).format(0.53);
...
53%
53%

CompactDecimalFormat.getInstance(locale, CompactDecimalFormat.CompactStyle.SHORT).format(100000);
...
10万
100K

文件大小及其单位格式


FileSizeUtils#formatFileSize(Context context,long numberBytes)


说明:


1.这个接口能够解决文件大小及其单位格式问题。比如文件大小显示形式应该是KB而不是kB、单位之间是否有空格等。
2.同时这个接口还能根据当前系统预设自动选择合适的单位和精度来显示文件大小。


给出一个简单举例:


public static String formatFileSize(Context context, long sizeBytes); 

将内容大小格式化为字节、千字节、兆字节等形式。 显示的数字,会根据当地习惯,用逗号分开,或者用点号隔开,或者数字用当地字母显示。 文件大小的单位,也会根据当地习惯显示为Mb或者MB等不同形式。


developer.android.com/reference/a…


Android O开始使用标准的单位制 1KB = 1000 bytes


Formatter.formatFileSize(this, 15345);
...
//15.35 KB
//乌克兰语 15,61 КБ

Formatter.formatShortFileSize(this, 15612524);
...
16 MB
16 MB
16 КБ

测量单位


MeasureFormat


在需要显示测量单位的场景,可以使用此接口做好本地化信息展示。以下简单介绍毫升的显示。同样的,其他测量单位,都可以采用类似的方式获取, 只是把参数替换一下即可。


说明: 对于长度,质量,体积,货币、卡路里、ml等测量单位的本地化显示。目前基本都基于翻译拼接来完成。后面建议使用google官方接口来实现。 1.数字+单位


支持的测量单位可参考developer.android.google.cn/reference/a… ,调整传参即可


Measure measure = new Measure(30.5, MeasureUnit.CELSIUS);
MeasureFormat.getInstance(Locale.getDefault(),MeasureFormat.FormatWidth.SHORT).format(measure);
...
30.5°C
30.5°C

Measure measure = new Measure(30.5, MeasureUnit.HOUR);
MeasureFormat.getInstance(Locale.getDefault(),MeasureFormat.FormatWidth.SHORT).format(measure);
...
30.5小时
30.5hr

Measure measure = new Measure(224, MeasureUnit.GIGABYTE);
MeasureFormat.getInstance(Locale.getDefault(),MeasureFormat.FormatWidth.SHORT).format(measure);
...
**224吉字节****数字单位常量中文与预期不符,可能需要单独处理**
224GB

针对部分场景,需要区分数字和单位大小,可以结合MeasureFormat和NumberFormat,分别拿到完整字符串和数字部分字符串,计算index后设置样式即可(注意:不要拆分成两个字符串分别布局)


NumberFormat instance = NumberFormat.getInstance(Locale.getDefault());
String celsius = MeasureFormat.getInstance(Locale.getDefault(), MeasureFormat.FormatWidth.SHORT, instance).formatMeasures(measure);
String number = instance.format(30.5);
SpannableString spannableString = new SpannableString(celsius);
spannableString.setSpan(new AbsoluteSizeSpan(30, true), celsius.indexOf(number), celsius.indexOf(number) + number.length(), 0);
textView.setText(spannableString);


日期格式符号


说明:获取星期、月份列表等,支持获取format形式和standalone形式,wide、narrow、short


DateFormatSymbols dateFormatSymbols = new DateFormatSymbols(Locale.getDefault);
dateFormatSymbols.getWeekdays();
dateFormatSymbols.getWeekdays(DateFormatSymbols.STANDALONE,DateFormatSymbols.WIDE);
dateFormatSymbols.getMonths();

接口记录:


1、TextUtils#expandTemplate developer.android.google.cn/reference/k…


// string.xml
<string name="storage_size_large_alternate"><xliff:g id="number" example="128">^1</xliff:g> <font size="15"><xliff:g id="unit" example="KB">^2</xliff:g></font></string>

TextUtils.expandTemplate(getText(R.string.storage_size_large_alternate), "128", "GB");

常见问题FAQ


iculocal


作者:qcq26554
链接:https://juejin.cn/post/7211745375921029181
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

车载Android程序员的2022年终总结与转行建议

不知不觉间2022年只剩下几天了,这意味着我即将迈入30岁的殿堂,作为一个搞车载的程序员,而立之年感受颇多,借助掘金社区的活动,简单分享一下2022年的个人总结。 回顾2022 2022年对我而言,是很糟的一年,2021年底由于工作和我个人的原因和异地的女友分...
继续阅读 »

不知不觉间2022年只剩下几天了,这意味着我即将迈入30岁的殿堂,作为一个搞车载的程序员,而立之年感受颇多,借助掘金社区的活动,简单分享一下2022年的个人总结。


回顾2022


2022年对我而言,是很糟的一年,2021年底由于工作和我个人的原因和异地的女友分手了,经过一段时间的混乱后,我选择写技术博客来转移自己的注意力。


紧接着2022年年初,我顺利通过公司的内部答辩从 “高级软件工程师” 晋级 “资深软件工程师” ,这是我这一年中最值得开心的事。上家公司是一家上市企业,我个人学历以及工作年限其实并不符合晋升要求,但是得益于我在车载应用领域的文章积累,成为众多候选者中举证材料最完整的人,所以算是破格晋级。


从部门总监那里得知晋级成功的那一刻,还是非常开心的,这样开心的时间大概持续了一周左右,这段时间,我一直在问自己,这样是不是就足够了?还要继续深入应用开发吗?它都有哪些前景呢?


做车载这三年,在公司我一直主要从事车载应用的开发,偶尔也会参与Framework层一些模块的开发,我的晋升依据也是基于我在应用方面的积累,但是我其实一直对Android Framework、Native开发有着相当大的兴趣,但是公司内部预计很难安排相应的工作给到我,所以经过艰难的权衡,我还是决定在2022年10月离职了。


离职之后,简单尝试了几个互联网公司的面试,主要还是验证自己的一些想法,这里列举几个我印象比较深的问题。


Q:应用的换肤机制和原理


A:不知道!


车载应用虽然有换肤的需求,但是车载系统应用是基于Android Runtime Resource Overlay实现换肤,不过这套机制并不支持非系统应用,导致车载应用与移动端应用实现换肤的技术手段完全不同,所以我并没有实践过移动端应用的换肤,也就谈不上理解原理了。


结果:挂了!


Q:有没有使用过Flutter,描述一下它的绘制原理


A:额,同样不知道!!


国内主流的车载IVI系统,基本都是Android OS,也没听过车载系统应用有跨平台的需求,所以Flutter在车载应用开发领域使用的很有限,以至于做了三年车载应用开发,完全没有接触过Flutter。


结果:不出意外,挂了!


Q:插件化的原理


A:不造啊!!!


车载应用的一个重要特点就是交互逻辑要尽可能简单,方便驾驶员操作,所以车载应用一般页面都很少,基本用不上那么插件化这么复杂的工具。


结果:当然还是挂了!


简单的几次面试,基本验证了我的想法是合理的,移动端应用和车载应用开发还是有不少区别的,想进来其实并不难,但是做久了想出去就难了。


展望2023



“如果我不能教会新手,那么就说明我没有真正理解这个知识”


最近在B站看到的费曼学习法启发了我,最高效的学习方式就是,将学到的内容化繁为简的教会别人。


2022年我大约写了18篇技术性博客,但是多数时候,我都是把它当做对学习或工作内容的一次总结,回过头再来看这些内容,总结的质量差,大面积的拼凑了源码,阅读起来枯燥又乏味,而且缺乏提炼和总结,仿佛写了很多,但是抓不到重点。


所以,2023年要继续磨炼自己的写作技巧,把文章内容写得更加浅显易懂,同时也准备在B站制作一些视频教程,锻炼自己的总结能力。


转行车载的建议


为什么要写换行建议?因为总会有人问我,做手机开发如何转行车载开发,那么就在这里简单提一下。


APP工程师


基于我这次找工作的经验来看,APP工程师如果希望转行Framework岗位,实际工作经验偏少的话基本不现实,所以只能考虑转行车载APP工程师。


但是要注意的是,车载应用与移动端的应用开发还是存在一些不同的,例如开发一个车载系统设置、或SystemUI应用,使用的API往往是Android SDK没有暴露的API,手机应用开发基本不会涉及这块的内容,所以各个公司往往更愿意招聘有一定车载经验的程序员。


但是,手机应用开发转车载不代表没有机会,一般只要实力过硬,转行成功的概率还是非常大的。所以还是建议提升自己应用开发实力,写一些博客、做一些开源项目,有空闲时间的再看一下原生SystemUI、Launher、系统设置这些应用是如何实现的,都是非常不错的加分项目。


当然如果有一个211或985的学历,那就另当别论了,学历永远是硬实力!


Framework或Native/HAL工程师


从事FW或Native/HAL的工程师转行车载没什么特别值得犹豫的,FW/Native工程师一直都是车载稀缺的岗位,主机厂商也愿意接收没有车载经验的FW/Native工程师,如果转行之后薪资会迎来一波提升,那么直接转就行。


小结


以上就我的2022年终总结了,需要指出的是,文中提到的我个人的职业规划并不适用于大多数人,而且属于一个潜在风险很大的发展路径,极容易变成什么都会什么都不精,所以对于多数人我建议还是做深度发展,而不是横向发展。


写这篇总结的时候,惊讶的发觉我开始低烧了,寄,不会刚上一周的班就阳了吧。吃药休息了,咱们2023年再见吧!



作者:林栩link
来源:juejin.cn/post/7178398167954620474
收起阅读 »

错过了前三次的伟大革命(蒸汽机革命、电气革命、信息革命),GPT-4 你还要错过人工智能AI革命吗!!!

错过了前三次的伟大革命(蒸汽机革命、电气革命、信息革命),GPT-4 你还要错过人工智能AI革命吗!!! 看 GPT-4 是如何炼成绝世神功:葵花宝典? 欲练神功,不必自宫。西方不败——GPT-4! GPT-4 is OpenAI’s most advanc...
继续阅读 »

错过了前三次的伟大革命(蒸汽机革命、电气革命、信息革命),GPT-4 你还要错过人工智能AI革命吗!!!



看 GPT-4 是如何炼成绝世神功:葵花宝典?


欲练神功,不必自宫。西方不败——GPT-4!


GPT-4 is OpenAI’s most advanced system, producing safer and more useful responses


GPT-4 是 OpenAI 最先进的系统,可产生更安全、更有用的响应



image-20230317095643129.png


更牛的问题解决能力


GPT-4由于其更广泛的通用知识和解决问题的能力,可以更准确地解决难题。


Creativity 创造力


GPT-4 比以往任何时候都更具创造性和协作性。它可以生成、编辑并与用户一起完成创意和技术写作任务,例如创作歌曲、编写剧本或学习用户的写作风格。


GPT-4 Input 输入:


Explain the plot of Cinderella in a sentence where each word has to begin with the next letter in the alphabet from A to Z, without repeating any letters.
用一个句子解释灰姑娘的情节,其中每个单词必须以字母表中从 A 到 Z 的下一个字母开头,不重复任何字母。

GPT-4 Output 输出:


A beautiful Cinderella, dwelling eagerly, finally gains happiness; inspiring jealous kin, love magically nurtures opulent prince; quietly rescues, slipper triumphs, uniting very wondrously, xenial youth zealously.
美丽的灰姑娘,渴望安居,终于获得幸福;激起嫉妒的亲人,爱情神奇地孕育出富贵的王子;悄悄拯救,拖鞋胜利,团结无比,热心青年。

ChatGPT Input 输入:


Explain the plot of Cinderella in a sentence where each word has to begin with the next letter in the alphabet from A to Z, without repeating any letters.
用一个句子解释灰姑娘的情节,其中每个单词必须以字母表中从 A 到 Z 的下一个字母开头,不重复任何字母。

ChatGPT Output 输出:


After attending a ball, Cinderella dances enchantingly for good-hearted King, leaving midnight noticed or perhaps quickly returning slipper to unite victoriously with prince, resulting in ultimate victory with wonderful, extravagant, youthful zest.
参加舞会后,灰姑娘为好心的国王翩翩起舞,留下午夜的注意,或者迅速返回拖鞋,与王子胜利团结,以美妙、奢侈、青春的热情取得最终胜利。

image-20230317084912093.png


对比看下哪个更牛~


Visual input 视觉输入


GPT-4 can accept images as inputs and generate captions, classifications, and analyses.


GPT-4 可以接受图像作为输入并生成说明、分类和分析。下面是接受一个图像的输入之后,生成图像说明、分类和分析的输出结果:


image-20230317085635694.png


Input 输入:


What can I make with these ingredients?
我可以用这些原料做什么?

Output 输出:


你可以用这些原料做很多选择!一些可能性包括: 
- 煎饼或华夫饼
- 可丽饼
- 法式吐司
- 煎蛋卷或菜肉馅煎蛋饼
- 乳蛋饼
- 奶油冻或布丁
- 蛋糕或纸杯蛋糕
- 松饼或面包
- 饼干或饼干
这些只是几个例子,但可能性是无穷无尽的!

有木有很牛逼~


能够识别分析图像那就越来越接近人类了,不但可以对话,还可以感知外在的世界,如果可以聊天时有脑有嘴的话,GPT-4那现在就是有眼了,有视觉能力了。当一个机器有视觉能力之后会发生什么???大家可与脑洞一下~


有视觉能力这是GPT-4有别于前几代GPT重大的升级,也是人工智能发展到另一个新的里程碑的意义。AI 革命现在不是未来可期了,而是未来已来了,就发生在你我所处的这个共同的时代,老铁们还不赶紧上车 (观众公众号“李荣生”,了解及时准确全面的GPT的进展,ChatGPT新技术的在业务中的调教、应用和体验)


错过了前三次的伟大革命(蒸汽机革命、电气革命、信息革命),你还要错过人工智能AI革命吗!!!


Longer context 更长的上下文


GPT-4 能够处理超过 25,000 个单词的文本,允许使用长格式内容创建、扩展对话以及文档搜索和分析等用例。


Input 输入:


[Text from: https://en.wikipedia.org/wiki/Rihanna]

Describe her Super Bowl performance and what made it special.
描述她在超级碗比赛中的表现以及它的特别之处。

Output 输出:


Rihanna's Super Bowl LVII halftime show performance was special for a number of reasons. For one, it marked her first live performance in over five years, and it was her first time headlining the Super Bowl halftime show. Additionally, she made history by becoming the first person to perform at the Super Bowl while pregnant. The show itself was critically acclaimed, with many praising her high-energy performance and impressive vocals. It also garnered a massive viewership, becoming the second most-watched halftime show in history.
出于多种原因,蕾哈娜 (Rihanna) 的超级碗 LVII 中场秀表演很特别。首先,这是她五年多来的第一次现场表演,也是她第一次登上超级碗中场秀的头条新闻。此外,她还创造了历史,成为第一个在怀孕期间在超级碗上表演的人。该节目本身广受好评,许多人称赞她充满活力的表演和令人印象深刻的歌声。它还获得了巨大的收视率,成为历史上收视率第二高的中场秀。


备注: Super Bowl 超级碗是美国职业橄榄球联盟(NFL)每年举行的年度总决赛,通常在每年的二月初举行,是美国和全球最受关注和观看的单一体育赛事之一。



可以接收wikipedia网址地址的输入,并经过分析之后归纳蕾哈娜 (Rihanna)比赛的表现和特别之处。为解决部分老铁不方便之门,我把wikipedia地址的部分内容截图如下:是个美女哦~


image-20230317092527923.png


可以接收更多文字的输入,包括网址地址的搜索和分析,经过理解之后可以根据prompt提示输出,理解问题的能力更强大了。


GPT-4的能力总结一句话:会说、会看、更懂你!!!


更牛的推理能力


GPT-4 的高级推理能力超越了 ChatGPT,ChatGPT VS GPT-4 推理能力对比:


image-20230317083206574.png


ChatGPT Input 输入:


Andrew从上午11点到下午3点有空,Joanne从中午到下午2点,然后下午3:30到5点有空。Hannah在中午有半个小时的时间,然后下午4点到6点。Andrew、Hannah和Joanne 30分钟会议的开始时间有哪些选择?

ChatGPT Output 输出:


以下是它们的可用性列表:
-安德鲁:上午11点至下午3点
-乔安妮:中午至下午2点,下午3:30至下午5点
-汉娜:中午至下午12:30,下午4点至6点

根据他们的可用性,他们三人都有30分钟的可用时间,从下午4点到下午4点30分。因此,会议可以安排在下午4点。

ChatGPT-4 Input 输入:


Andrew从上午11点到下午3点有空,Joanne从中午到下午2点,然后下午3:30到5点有空。Hannah在中午有半个小时的时间,然后下午4点到6点。Andrew、Hannah和Joanne 30分钟会议的开始时间有哪些选择?

ChatGPT-4 Output 输出:


安德鲁:上午11点至下午3点
乔安妮:下午12点至2点,下午3:30至5点
汉娜:下午12点至12点30分,下午4点至6点

30分钟会议的常见时间:中午12点至中午12点30分

ChatGPT VS GPT-4 考试能力对比


参加 美国 (Uniform Bar Exam 统一律师考试)和(Biology Olympiad 生物奥林匹克竞赛考试)的对比,GPT-4 通过在测试中获得更高的近乎一百分满分数证明优于 ChatGPT。


image-20230317081742335.png



备注: Uniform Bar Exam(普通考试统一律师资格考试),简称UBE,是一个跨越美国多个州的法律考试。它是由具有法律职业监管权的各州联合开发的,旨在便捷地实现律师的跨州执业。通过UBE,考生只需参加一次考试,就能将成绩用于多个州的律师资格申请。UBE考试由三个部分组成,包括多项选择题、法律分析和写作。考试的题材涵盖了民法、刑法和司法程序等多个领域的知识。通过UBE考试是律师在跨州执业时的重要成就之一,同时也证明了其掌握了足够的法律知识和技能,能够为客户提供高质量的法律服务。


Biology Olympiad(生物奥林匹克竞赛)是一个面向中学生的国际生物学竞赛。它由国际生物学奥林匹克委员会(IBO)组织,旨在鼓励中学生研究生物学、发展科学技能以及推动全球青少年对生物学的兴趣。每年,参赛国家都会选派最优秀的中学生代表参加IBO大赛。本竞赛通常包括一系列基础和高级的生物学知识测试、实验考察和科学研究等项目。参加Biology Olympiad不仅能锻炼和展示学生的生物学技能,还可以帮助学生获得在全球范围内访问高水平生物学教育和研究资源的机会。



GPT-X 进化中


遵循 GPT、GPT-2 和 GPT-3 的研究路径,我们的深度学习方法利用更多数据和更多计算来创建越来越复杂和强大的语言模型。


gpt-4-motif-20230317081633225.svg


GPT-4进化之旅


We spent 6 months making GPT-4 safer and more aligned. GPT-4 is 82% less likely to respond to requests for disallowed content and 40% more likely to produce factual responses than GPT-3.5 on our internal evaluations.


花费了6个月的时间来确保GPT-4更加安全和准确。我们对GPT-4进行了多次内部测试和修改,使其回答不被允许的内容请求的可能性降低了82%,同时在产生事实回答时的准确率比GPT-3.5提高了40%。这意味着我们对GPT-4进行了改进,解决了其可能存在的问题,并提高了它的准确性和可靠性,使其更适合用于公共平台。


简单一句话就是:我更牛逼了~。更要命的是,这个家伙还不断迭代、不断进化中~


欲练神功,不必自宫,是否会炼就为真正的一个——西方不败(GTP-X)?


如果做到更安全和更准确?


Safety & alignment 他们(OpenAI)是这样做的:


人工反馈训练


我们在训练GPT-4时,吸收了更多人类反馈,包括ChatGPT用户提交的反馈,以改善GPT-4的行为。我们还与超过50位专家合作,包括AI安全和安全领域的专家,进行早期反馈。


通过真实世界的使用不断改进


我们将从以前模型在真实世界使用时的经验教训中,应用到GPT-4的安全研究和监控系统中。就像ChatGPT一样,随着越来越多的人使用GPT-4,我们也将以定期的节奏更新和改进它。


GPT-4协助的安全研究


GPT-4的高级推理和指令遵循能力加速了我们的安全工作。我们使用GPT-4来创建训练数据,进行模型微调,并在训练、评估和监控中迭代分类器。


有谁在使用 GPT-4 能力?


使用 GPT-4 构建创新产品的组织合作包括:


Stripe互联网支付平台 Stripe 利用 GPT-4 来简化用户体验并打击欺诈。


Morgan Stanley华尔街摩根士丹利投资银行 摩根士丹利财富管理部署 GPT-4 来组织其庞大的知识库。


Khan Academy全球在线平台可汗学院 可汗学院在有限的试点项目中探索 GPT-4 的潜力


Government of Iceland冰岛政府 冰岛如何使用 GPT-4 来保护其语言。


Duolingo GPT-4 加深了 Duolingo 上的对话。Duolingo是一款流行的语言学习应用程序,允许用户以游戏化的方式学习一系列不同的语言。Duolingo 提供了一个互动平台,通过其独特的教学方法和游戏元素,让用户在轻松有趣的环境中学习语言。Duolingo的目标是帮助人们学习语言、提高沟通技能和拓宽对其他文化的理解。它同时也为用户提供一个可持续的、个性化的学习体验。Duolingo 影响了全球数百万语言学习者,并在广泛的年龄范围内取得了成功。


Be My Eyes 利用GPT-4技术改变了视觉辅助功能。Be My Eyes是一款志愿者和盲人用户之间的求助平台。该平台让盲人用户请求帮助时,匹配到愿意帮助的志愿者。使用GPT-4技术,Be My Eyes可以识别图像并实时将描述发送给需要帮助的盲人用户。这使得盲人用户可以像有视力的人一样,获取到更多关于周围环境的信息。


通过在技术上方便快捷地连接盲人用户和有视力的志愿者,Be My Eyes广泛地改变着视觉障碍群体的生活中的社交和日常方面。这项技术帮助他们更好地融入社会,增强了他们的自信和独立性。最重要的是,Be My Eyes通过与GPT-4技术的整合,成为了利用人工智能的科技慈善的优秀典范。


还有下面其他应用案例:


image-20230317074524959.png


gpt-4-motif.svg


关于 GPT-4 的更多信息


More on GPT-4 :


Research 研究GPT-4 是 OpenAI 在深度学习扩展方面的最新里程碑。详情请查看 GPT-4 研究
Infrastructure基础设施GPT-4 是在微软 Azure AI 超级计算机上进行训练的。Azure 的人工智能优化基础设施还使我们能够向全球用户提供 GPT-4。
Limitations 限制GPT-4 仍然存在许多已知的限制,例如社会偏见、幻觉和对抗性提示,我们正在努力解决这些问题。随着社会采用这些模型,我们鼓励和促进透明度、用户教育和更广泛的人工智能素养。我们还旨在扩大人们在塑造我们的模型方面的输入途径。
Availability 可用性GPT-4 在 ChatGPT Plus 上可用,并作为 API 提供给开发人员构建应用和服务。

We’re excited to see how people use GPT-4 as we work towards developing technologies that empower everyone.


我们很期待看到人们如何使用 GPT-4,同时我们将努力开发能够赋予每个人权力的技术。


View contributions


GPT-4 API 候补名单


We’re making GPT-4 available as an API for developers to build applications and services.


我们将 GPT-4 作为 API 供开发人员构建应用程序和服务。


Join waitlist 加入候补名单


image-20230317073049107.png


加入候补名单地址:openai.com/waitlist/gp…


Availability 可用性


During the gradual rollout of GPT-4, we’re prioritizing API access to developers that contribute exceptional model evaluations to OpenAI Evals to learn how we can improve the model for everyone. We are processing requests for the 8K and 32K engines at different rates based on capacity, so you may receive access to them at different times. Researchers studying the societal impact of AI or AI alignment issues can also apply for subsidized access via our Researcher Access Program.


在 GPT-4 的逐步推出期间,我们优先考虑为 OpenAI Evals 贡献卓越模型评估的开发人员访问 API,以了解我们如何为每个人改进模型。我们正在根据容量以不同的速率处理对 8K 和 32K 引擎的请求,因此您可能会在不同时间获得对它们的访问权限。研究 AI 的社会影响或 AI 对齐问题的研究人员也可以通过我们的研究人员访问计划申请补贴访问。


For use cases we tried, GPT-3.5 did not reliably handle multi-language text. We hope to explore GPT-4 for this use case.


对于我们尝试的用例,GPT-3.5不能可靠地处理多语言文本。我们希望为这个用例探索GPT-4。


作者:KonyLee
来源:juejin.cn/post/7211734661762973733
收起阅读 »

百度的文心一言 没有想象中那么差

robin 的演示 我们用 robin 的演示例子来对比一下 文心一言和 ChatGPT 的真实表现(毕竟发布会上是录的)。 注意,我使用的 GPT 版本是 4.0 文学创作 1 三体的作者是哪里人? 文心一言: ChatGPT: 嗯,中文表现上文心一言更...
继续阅读 »

robin 的演示


我们用 robin 的演示例子来对比一下 文心一言和 ChatGPT 的真实表现(毕竟发布会上是录的)。 注意,我使用的 GPT 版本是 4.0


文学创作


1 三体的作者是哪里人?


文心一言:


ChatGPT:


嗯,中文表现上文心一言更好。


2 电视剧三体的演员都有谁?


文心一言:


ChatGPT:



关于这个问题 ,由于 ChatGPT 的数据只能查到 2021 年的,所以它不知道是正常的。


3 主演 于和伟 和 张鲁一 谁更高?


文心一言:


ChatGPT:


4 可以总结一下《三体》的核心内容吗?如果要续写的话,可以从哪些角度出发?


文心一言:


ChatGPT:



虽然网络出一点儿问题,但我更喜欢 ChatGPT 的回答。


商业文案创作


1 如果要成立一个用大模型服务中小企业数字化升级的科技服务公司,可以起个什么公司名?


文心一言:


ChatGPT:


显然我更喜欢文心一言的,但如果你跟 ChatGP 继续聊下去,它可能提供更进一步符合你需求的答案。


2 数智云图这个名称不错,给我起一个公司的服务 Slogan,表达共赢的概念


文心一言:


ChatGPT:



这一轮文心一言的回答更好。


3 帮我生成一篇公司成立的新闻稿,数智云图以共赢的服务理念用大模型服务中小企业数字化升级。字数 600 字


文心一言:


ChatGPT:


ChatGPT 试了几次网络都有问题,这一轮不好评价。


数理逻辑推算任务


1 鸡兔同笼问题


文心一言:


ChatGPT:



这一轮没有意外,我更喜欢 ChatGPT 的回答。


中文理解能力


1 “洛阳纸贵”是什么意思?


文心一言:


ChatGPT:


感觉差不多。


2 当时洛阳的纸到底有多贵?


文心一言:


ChatGPT:


那么这一题,ChatGPT 开始一本正经的胡说八道了。


3 这个成语在现在的经济学原理里,对应的理论是什么?


文心一言:


ChatGPT:


4 用洛阳纸贵四个字写一首藏头诗。


文心一言:



ChatGPT:


ChatGPT 给出的结果明显不对。


多模态生成


目前文心一言的测试版本并不能生成语音和视频,但是可以直接生成图片,图片的质量比想象中的要好,而且还有很多的风格可以选择,比如说卡通风格,油画风格,还有很多的风格,可以满足不同的需求。


绘画能力应该是集成了现成的文心一格。


以下是我试的几个例子


描述: 请为 2023 世界智能交通大会创作一张海报。



描述:“灌木丛中的一朵机械花,有金属花瓣,周围环境和人的镜面反射,鸟瞰图。 构图夸张,具有强烈的视觉冲击力和叙事性”



描述:“雨天香港、哥特式建筑 3D 画风”



描述:“一只睡在柜子上面的猫,卡通风格”



描述:“麦田中的少年,油画风”


坦率讲与 midjourney 的绘画能力相比,文心一格的绘画能力还是有差距的。


编程


1 请帮我写一个网页版的贪吃蛇游戏


文心一言:


ChatGPT:


虽然又遇到了网络问题,但各位开发老铁们,不用我说了吧,都知道该选啥哈


2 生成测试数据


文心一言:



ChatGPT:


ChatGPT 完胜


文心一言使用注意事项


在使用过程中出现了排队的情况:



这我在使用 ChatGPT 的时候可没有遇到过。


可以输入“/” 来获取模版



绘画的例子上文举过了,我们来看看剩下 2 个:


查一个知识



写一篇报告



总结


经过试用文心一言,再对比 ChatGPT,我认为:文心在中文语料上应该是更丰富些。多语言上目前一定不如 ChatGPT 优秀。虽然这两个模型在某些方面有所重叠,但它们在应对特定语言和领域问题时具有各自的优势。


其实最令我意外的是,文心一言并没有发布会时让人感觉的那么差。它不是 chatPPT, 至少目前看不是,它完成了从 0 到 1 的过程 ,虽然有差距,但还是真心地希望国内的企业能够在 AI 的领域做出一些成绩,而不是一味地跟风。




我现在理解了 😊


作者:xiaohezi
来源:juejin.cn/post/7211467514413367351
收起阅读 »

用了这两款插件,同事再也不说我代码写的烂了

大家好,我是风筝同事:你的代码写的不行啊,不够规范啊。我:我写的代码怎么可能不规范,不要胡说。于是同事打开我的 IDEA ,安装了一个插件,然后执行了一下,规范不规范,看报告吧。这可怎么是好,这玩意竟然给我挑出来这么多问题,到底靠谱不。同事潇洒的走掉了,只留下...
继续阅读 »

大家好,我是风筝

同事:你的代码写的不行啊,不够规范啊。

我:我写的代码怎么可能不规范,不要胡说。

于是同事打开我的 IDEA ,安装了一个插件,然后执行了一下,规范不规范,看报告吧。

这可怎么是好,这玩意竟然给我挑出来这么多问题,到底靠谱不。

同事潇洒的走掉了,只留下我在座位上盯着屏幕惊慌失措。我仔细的查看了这个报告的每一项,越看越觉得这插件指出的问题有道理,果然是我大意了,竟然还给我挑出一个 bug 来。

这是什么插件,review 代码无敌了。

这个插件就是 SonarLint,官网的 Slogan 是 clean code begins in your IDE with {SonarLint}

作为一个程序员,我们当然希望自己写的代码无懈可击了,但是由于种种原因,有一些问题甚至bug都无法避免,尤其是刚接触开发不久的同学,也有很多有着多年开发经验的程序员同样会有一些不好的代码习惯。

代码质量和代码规范首先肯定是靠程序员自身的水平和素养决定的,但是提高水平的是需要方法的,方法就有很多了,比如参考大厂的规范和代码、比如有大佬带着,剩下的就靠平时的一点点积累了,而一些好用的插件能够时时刻刻提醒我们什么是好的代码规范,什么是好的代码。

SonarLint 就是这样一款好用的插件,它可以实时帮我们 review代码,甚至可以发现代码中潜在的问题并提供解决方案。

SonarLint 使用静态代码分析技术来检测代码中的常见错误和漏洞。例如,它可以检测空指针引用、类型转换错误、重复代码和逻辑错误等。这些都是常见的问题,但是有时候很难发现。使用 SonarLint 插件,可以在编写代码的同时发现这些问题,并及时纠正它们,这有助于避免这些问题影响应用程序的稳定性。

比如下面这段代码没有结束循环的条件设置,SonarLint 就给出提示了,有强迫症的能受的了这红下划线在这儿?

SonarLint 插件可以帮助我提高代码的可读性。代码应该易于阅读和理解,这有助于其他开发人员更轻松地维护和修改代码。 SonarLint 插件可以检测代码中的代码坏味道,例如不必要的注释、过长的函数和变量名不具有描述性等等。通过使用 SonarLint 插件,可以更好地了解如何编写清晰、简洁和易于理解的代码。

例如下面这个名称为 hello_world的静态 final变量,SonarLint 给出了两项建议。

  1. 因为变量没有被使用过,建议移除;
  2. 静态不可变变量名称不符合规范;

SonarLint 插件可以帮助我遵循最佳实践和标准。编写符合标准和最佳实践的代码可以确保应用程序的质量和可靠性。 SonarLint 插件可以检测代码中的违反规则的地方,例如不安全的类型转换、未使用的变量和方法、不正确的异常处理等等。通过使用 SonarLint 插件,可以学习如何编写符合最佳实践和标准的代码,并使代码更加健壮和可靠。

例如下面的异常抛出方式,直接抛出了 Exception,然后 SonarLint 建议不要使用 Exception,而是自定义一个异常,自定义的异常可能让人直观的看出这个异常是干什么的,而不是 Exception基本类型导出传递。

安装 SonarLint

可以直接打开 IDEA 设置 -> Plugins,在 MarketPlace中搜索SonarLint,直接安装就可以。

还可以直接在官网下载,打开页面https://www.sonarsource.com/products/sonarlint/,在页面中可以看到多种语言、多种开发工具的下载图标,点击下方的 EXPLORE即可到下载页面去下载了。虽然我们只是在 IDEA 中使用,但是它不管支持 Java 、不只支持 IDEA ,还支持 Python、PHP等众多语言,以及 Visual Studio 、VS Code 等众多 IDE。

在 IDEA 中使用

SonarLint 插件安装好之后,默认就开启了实时分析的功能,就跟智能提示的功能一样,随着你噼里啪啦的敲键盘,SonarLint插件就默默的进行分析,一旦发现问题就会以红框、红波浪线、黄波浪线的方式提示。

当然你也可以在某一文件中点击右键,也可在项目根目录点击右键,在弹出菜单中点击Analyze with SonarLint,对当前文件或整个项目进行分析。

分析结束后,会生成分析报告。

左侧是对各个文件的分析结果,右侧是对这个问题的建议和修改示例。

SonarLint 对问题分成了三种类型

类型说明
Bug代码中的 bug,影响程序运行
Vulnerability漏洞,可能被作为攻击入口
Code smell代码意味,可能影响代码可维护性

问题按照严重程度分为5类

严重性说明
BLOCKER已经影响程序正常运行了,不改不行
CRITICAL可能会影响程序运行,可能威胁程序安全,一般也是不改不行
MAJOR代码质量问题,但是比较严重
MINOR同样是代码质量问题,但是严重程度较低
INFO一些友好的建议

SonarQube

SonarLint 是在 IDE 层面进行分析的插件,另外还可以使用 SonarQube功能,它以一个 web 的形式展现,可以为整个开发团队的项目提供一个web可视化的效果。并且可以和 CI\CD 等部署工具集成,在发版前提供代码分析。

SonarQube是一个 Java 项目,你可以在官网下载项目本地启动,也可以以 docker 的方式启动。之后可以在 IDEA 中配置全局 SonarQube配置。

也可以在 SonarQube web 中单独配置一个项目,创建好项目后,直接将 mvn 命令在待分析的项目中执行,即可生成对应项目的分析报告,然后在 SonarQube web 中查看。

5

对于绝大多数开发者和开发团队来说,SonarQube 其实是没有必要的,只要我们每个人都解决了 IDE 中 SonarLint 给出的建议,当然最终的代码质量就是符合标准的。

阿里 Java 规约插件

每一个开发团队都有团队内部的代码规范,比如变量命名、注释格式、以及各种类库的使用方式等等。阿里一直在更新 Java 版的阿里巴巴开发者手册,有什么泰山版、终极版,想必各位都听过吧,里面的规约如果开发者都能遵守,那别人恐怕再没办法 diss 你的代码不规范了。

对应这个开发手册的语言层面的规范,阿里也出了一款 IDEA 插件,叫做 Alibaba Java Coding Guidelines,可以在插件商店直接下载。

比如前面说的那个 hello_world变量名,插件直接提示「修正为以下划线分隔的大写模式」。

再比如一些注释上的提示,不建议使用行尾注释。

image-20230314165107639

还有,比如对线程池的使用,有根据规范建议的内容,建议自己定义核心线程数和最大线程数等参数,不建议使用 Excutors工具类。

有了这俩插件,看谁还能说我代码写的不规范了。

作者:古时的风筝
来源:juejin.cn/post/7211151196328804408
收起阅读 »

来看看这个很酷的按钮交互效果

web
今天分享一个很有特色的按钮交互效果,如封面图所示,保证让你停不下来,原作者是Adam Kuhn,有兴趣的可以去codepen体验,地址:codepen,本文将核心功能逐一讲解。 基于这个动图可以将主要实现的几个功能点拆分为以下几点: 按钮的径向渐变背景色可以...
继续阅读 »

今天分享一个很有特色的按钮交互效果,如封面图所示,保证让你停不下来,原作者是Adam Kuhn,有兴趣的可以去codepen体验,地址:codepen,本文将核心功能逐一讲解。


基于这个动图可以将主要实现的几个功能点拆分为以下几点:



  • 按钮的径向渐变背景色可以随着鼠标的移动变化

  • 按钮的背景区域会随着鼠标的移动产生弹性变化效果

  • 按钮的文字阴影会随着鼠标的变化而变化


鼠标位置获取


在正式开始前做一些准备工作,分析主要的这几个功能点可以发现每个功能都和鼠标的移动有关,都需要借助于鼠标移动的坐标,所以我们首先获取鼠标的位置并传递到css中,代码如下:


document.querySelectorAll(".inner").forEach((button) => {
button.onmousemove = (e) => {
const target = e.target;
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

button.style.setProperty("--x", `${x}px`);
button.style.setProperty("--y", `${y}px`);
button.style.setProperty("--height", `${rect.height}px`);
button.style.setProperty("--width", `${rect.width}px`);
};
});

这里除开传递鼠标的位置,还传递了当前按钮的宽高用于后续按钮文案阴影的依赖。


径向渐变背景动起来


背景色默认是纯色,随着鼠标的产生变化,所以这里和两个关键点有关,鼠标移入hover,移动过程中的坐标变化。实现过程核心是通过background定义两个背景色,默认的显示部分background-size是100%,渐变部分的background-size是0,待hover时设置为100%,这时就会显示渐变背景色内容了。


  background: 
// 渐变背景色
radial-gradient(
circle at center,
var(--lightest),
var(--light) 5%,
var(--dark) 30%,
var(--darkest) 50%
),
// 默认显示背景色
var(--darkest);
background-size: 0px 0px, 100%;

:hover {
background-size: 100%, 100%;
}

显示之后要动起来,基于js传入的坐标值应用到transformtranslate平移,这里注意移动是要基于当前元素的中心点位所以x和y都要减去自身的50%。


transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));

如图所示,绿色区域是按钮部分,整个背景的中心点要和鼠标移动的坐标一致,所以要减去自身宽高的各一半。还有一点需要注意的是不能在移动的过程中让背景色漏出,所以背景区域是整个按钮的2倍。



这时整个背景区域很大,这里使用了CSS3的混合模式mix-blend-mode: lighten,最终只会应用亮色部分也就是中间的绿色区域。这里的混合模式给下一步中的弹性伸缩效果起到重要的作用。


此时的效果就是这样的,原代码在此基础上还增加了transition和filter体验让效果更佳,因涉及篇幅较长这里就不一一说明了,



背景区域弹性变化交互效果


背景弹性交互效果需要增加一个元素,与当前按钮同级别。此时的html如下:


<div class="inner">
<button type="button">南城FEbutton>
<div class="blob">div>
div>

blob元素和button都使用了绝对定位,因为按钮上面有文字,所以层级上button更高。blob元素增加了两个伪元素,先看after


&:after {
width: calc(100% - 4rem);
height: calc(100% - 4rem);
top: 2rem;
left: 2rem;
border-radius: 5rem;
box-shadow: 0 0 0 8rem #fff;
}

基于当前界面减少实际按钮的区域,并通过定位居中,再通过box-shadow填充白色背景,还增加了圆角,此时按钮的背景变成如下所示,按钮的雏形已经有了。



然后before主要也是通过box-shadow来增加额外的元素显示,分为三个部分,中间部分跟随鼠标移动,上下两个部分为鼠标移动到边界的反向效果区域。核心代码如下:


box-shadow: 0 0 0 0.75rem #fff, 0 -8rem 0 2rem #fff, 0 8rem 0 2rem #fff;

再配合基于js传入的坐标值应用到translate平移,box-shadow部分的内容即可跟随鼠标动起来了。这里用到了一个css3的函数clamp,它可以用来限制一个值的范围。clamp函数接受三个参数,分别表示最小值、推荐值和最大值。函数的返回值为推荐值,但是它会被限制在最小值和最大值之间。所以这里超出按钮的显示区域会有临界点,不会完全脱离,核心代码如下:


transform: translate(
clamp(5%, calc(var(--x) - 50%), 550%),
clamp(1rem, calc(var(--y) - 50%), 5rem)
);

此时按钮的效果如下,圆形部分即是上面的0 0 0 0.75rem #fff,下面的半圆即是0 8rem 0 2rem #fff,因为增加了圆角border-radius: 100%所以都是圆形。为什么下面的是半圆白色,因为after中的box-shadow白色背景遮挡了,所以不会完全显示,又因为是白色阴影加上混合模式所以这块区域以亮色白色显示。



是不是和目标效果有些接近了,加上一行关键代码即可。


filter: blur(12px) contrast(50);

这里使用filter属性处理,首先对元素进行模糊处理,如果只是增加模糊的效果如下,可以看到增加的伪元素圆形都被磨平了,完美的融入到了按钮本身的背景色中。



再加上contrast调整元素的对比度即可达到最终的效果,这里切记执行的顺序不能写反。在CSS中 filter 属性中的函数是按照从左到右的顺序执行的。如果你在 filter 属性中使用了多个函数,那么它们会按照从左到右的顺序依次执行。



按钮的文字阴影变化


文字的阴影变化主要是改变其水平和垂直的偏移量,以及模糊半径,这里就要用到最开始传入的按钮宽高的数据了,因为偏移量的计算会基于整个按钮的面积,这样才会显得更逼真。


先看水平和垂直的偏移量,核心还是基于clamp函数,设置最小值,最大值,中间的推荐值则会随着鼠标的坐标值变化而变化,具体的数值有兴趣的可以调整体验,以下是文字阴影的水平和垂直的偏移量计算的代码:


clamp(-6px, calc((var(--width) / 2 - var(--x)) / 12), 6px)
clamp(-4px, calc((var(--height) / 2 - var(--y)) / 16), 4px)

然后是模糊半径的计算,这里用到了max函数,最大取5px,其他情况基于坐标值和宽高计算得出。


max(
calc((var(--width) / 2 - var(--x)) / 8 +
((var(--height) / 2 - var(--y)) / 3)),
calc((
((var(--width) / 2 - var(--x)) / 8) +
((var(--height) / 2 - var(--y)) / 3)
) * -1
),
5px
)

最终的效果如下:



最后


到此整个核心的实现过程就结束了,整个代码中我们使用了box-shadowtext-shadowmix-blend-modefilter等属性,还有CSS3函数maxclampcalc。还有transition动画相关没有说明,涉及的知识点比较多,有兴趣的同学可以看源码了解。


在线代码预览:



到此本文就结束了,看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~



作者:南城FE
来源:juejin.cn/post/7212516589060849720
收起阅读 »

Android应用被抓包?防护手段需知道

为了提高网络数据传输的安全性,业内采用HTTPS的方式取代原来的HTTP,Android的应用开发也不例外,我们似乎只需要修改一下域名就能完成http到https的切换,无需做其他额外的操作,那么这个HTTPS是如何实现的?是否真的就安全了?在不同的Andro...
继续阅读 »

为了提高网络数据传输的安全性,业内采用HTTPS的方式取代原来的HTTP,Android的应用开发也不例外,我们似乎只需要修改一下域名就能完成http到https的切换,无需做其他额外的操作,那么这个HTTPS是如何实现的?是否真的就安全了?在不同的Android版本上是否有差异?今天我们就来详细研究一下以上的问题。


Tips:本篇旨在讨论HTTPS传输的安全性,应用本地安全不在讨论范畴。


HTTPS原理



诞生背景



首先就是老生常谈的问题,什么是HTTPS,相信大家有有所了解,这里简单提一下:


由于HTTP协议(HyperText Transfer Protocol,超文本传输协议)中,传输的内容是明文的,请求一旦被劫持,内容就会完全暴露,劫持者可以对其进行窃取或篡改,因此这种数据的传输方式存在极大的安全隐患。


因此,在基于HTTP协议的基础上对传输内容进行加密的HTTPS协议(HyperText Transfer Protocol over Secure Socket Layer)便诞生了,这样即使传输的内容被劫持,由于数据是加密的,劫持者没有对应的密钥也很难对内容进行破解,从而提高的传输的安全性。



密钥协商



既然要对传输的内容进行加密,那就要约定好加密的方式与密钥管理。首先在加密方式的选择上,有对称加密非对称加密两种,这两种方式各有有缺。


对称加密:


加密和解密使用相同的密钥,这种效率比较高,但是存在密钥维护的问题。如果密钥通过请求动态下发,会有泄漏的风险。如果密钥存放到Client端,那么密钥变更时就要重新发版更新密钥,而且如果要请求多个服务器就要维护多个密钥,对于服务器端也是同理,这种密钥的维护成本极高。


非对称加密:


加密和解密使用不同的密钥,即公钥与私钥,私钥存放在Server端,不对外公开,公钥是对外公开的,这样无论是公钥打包进Client端还是由Server端动态下发,也无需担心泄漏的问题。但是这种加密方式效率较低。


HTTPS协议中,结合了对称加密和非对称加密两种方式,取其精华,弃其糟粕,发挥了两者各自的优势。


假设目前Server端有一对密钥,公钥A和私钥A,在Client端发起请求时,Server端下发公钥A给Client端,Client端生成一个会话密钥B,并使用公钥A对会话密钥B进行加密传到Server端,Server端使用私钥A进行解密得到会话密钥B,这时Client端和Server端完成了密钥协商工作,之后Client和和Server端交互的数据都使用会话密钥B进行对称加解密。在密钥协商过程中,就算被劫持,由于劫持者没有私钥A,也无法获取协商的会话密钥B,因此保证了数据传输的安全性。


密钥协商过程简图如下:


密钥协商简图.png



CA证书



上面的过程貌似解决了数据传输的安全问题,但依然有一个漏洞,就是如果劫持者篡改了Server端下发给Client端的公钥的情况。


中间人攻击(MITM攻击)简图如下:


中间人攻击简图.png


为了解决Client端对Server端下发公钥的信任问题,出现了一个被称作CA(Certificate Authority)的机构。


CA机构同样拥有采用非对称加密的公钥和私钥,公钥加上一些其他的信息(组织单位、颁发时间、过期时间等)信息被制作成一个cer/pem/crt等格式的文件,被称作证书,这些CA机构用来给其他组织单位签发证书的证书叫做根证书,根证书一般都会被预装在我们的设备中,被无条件信任


以Android设备为例,我们可以在设置 -> 安全 -> 更多安全设置 -> 加密与凭据 -> 信任的凭据中查看当前设备所有的预装的证书。


设备预装的证书.jpeg


如果Server端部署的证书是正规CA机构签发的证书(CA机构一般不会直接用根证书为企业签发域名证书,而是使用根证书生成的中间证书,一般情况下证书链是三级,根证书-中间证书-企业证书),那么我们在进行HTTPS请求的时候,不需要做其他额外操作,Client端获取到Server端下发的证书会自动与系统预装的证书进行校验,以确认证书是否被篡改。


如果Server端的证书是自签的,则需要在Client端自行处理证书校验规则,否则无法正常完成HTTPS请求。


这也是为什么,我们在Android开发网络请求时,无需做额外操作便能丝滑切换到HTTPS,但是这样真的就能保证网络请求的安全性了吗?


真的安全了吗?


经过上面的介绍我们可以了解到,如果Client端(手机、浏览器)中预装了大量正规CA机构的根证书,Server端如果是正规CA签发的证书,理论上是解决了HTTPS通信中双端的信任问题,但是还存在一个问题,就是这些Client端一般都会支持用户自行安装证书,这将会给Android端的网络安全带来哪些风险?接下来我们就继续来聊聊。


由于Android版本更新迭代较快,且不同版本之前差异较大,因此分析这个问题的时候一定要基于一个特定的系统版本,区别分析。Android 5.0(21)之前的版本太过古老,这里就不再进行分析,直接分析5.0之后的版本。


在一个只采用默认配置的的测试项目中进行HTTPS请求的抓包测试,发现在5.0(包括)到7.0(不包括)之间的版本,可以通过中间人或VPN的方式进行抓包,而7.0及以上版本则无法正常抓包,抓包情况如下



7.0以下手机代理抓包情况:



Android7.0以下.jpeg



7.0及以上手机代理抓包情况:



之所以7.0是个分水岭,是因为在Android7.0之前,系统除了对系统内置CA证书无条件信任外,对用户手动安装的CA证书也无条件信任了。


虽然说7.0及以上的设备不再信用用户自行添加的CA证书,安全性比之前的高很多,但是无门却无法阻止那些抓包的人使用7.0之下的手机,除非提高应用的最小支持版本,但这样就意味着要放弃一些用户,显然也不适用于所有情况。


那么如何在保证低版本兼容性的同时兼顾安全性呢,我们接下来继续探讨。


如何更安全


除了系统默认的安全校验之外,我们也可以通过如下手段来提高请求的安全性,让抓包变得更加困难。



禁用代理



该方式适用于所有Android版本。


在网络请求时,通过调用系统API获取当前网络是否设置了代理,如果设置了就终止请求,达到保护数据安全的目的。因为通过中间人的方式进行抓包,需要把网络请求转发到中间人的代理服务器,如果禁止了代理相当于从源头解决了问题。


优势:设置简单,系统API简单调用即可获取代理状态。


劣势:




  1. 会错杀一些因为其他场景而使用代理的用户,导致这样的用户无法正常使用




  2. 通过开启VPN在VPN上设置代理转发到中间人服务器的方式绕过




由于设置禁用代理的方式很容易被绕过且有可能影响正常开启VPN用户的使用,因此不推荐使用该方式。



数据加密



该方式适用于所有Android版本。


对请求传输的数据进行加密,然后再通过HTTPS协议传输。HTTPS本身在传输过程中会生成一个会话密钥,但是这个密钥可以被抓包获取,如果对传输的数据进行一次加密后再传输,即使被抓包也没法解析出真实的数据。


优势:安全性较高,只要密钥没有泄漏,数据被破获的风险较低


劣势:




  1. 修改同时修改Client端和Server端代码,增加加解密逻辑




  2. 加解密操作影响效率且有密钥维护的成本




在对数据安全性要求比较高的接口上,可以采用这种方式对传输内容进行增强保护。



证书单向认证



该方式适用于所有Android版本。


在默认情况下,HTTPS在握手时,Server端下证书等信息到Client端,Client端校验该证书是否为正规CA机构签发,如果是则通过校验。这里我们可以自定义校验规则,可以下载Server端的证书到打包到APK中,在请求时进行证书校验。


https单向认证.png


优势:安全性高。


劣势:证书容易过期,当前企业证书有效期只有1年,需要每年进行续签,Client需要维护证书更新的问题。



证书双向认证



该方式适用于所有Android版本。


在单向认证中,Client端会验证Server端是否安全,但是Server端并没有对Client进行校验,这里可以让Server端对Client也进行一次认证。这种认证需要在单向认证的基础上再额外创建一套证书B,存放在Client端,并在Client端完成对Server端的校验后,把Client端的公钥证书发送到Server端,由Server端进行校验,校验通过后开始密钥协商等后续步骤。


https双向认证.png


优势:安全性非常高!


劣势:




  1. Server端要存放Client端公钥证书,如果一个Server对应多个Client则需要维护多套




  2. 增加了校验成本,会降低相应速度





网络安全配置文件



该方案为google官方推荐的方案,也是一种证书的单向校验,不过在Android7.0及更高版本上,配置简单,只需要再清单文件的application节点下增加一个networkSecurityConfig项,并指向一个按固定的格式创建一个xml文件,即可完成网络安全的校验,体验相当丝滑,唯一美中不足的是该配置不支持7.0以下的版本。


在7.0及以上版本中,在xml文件夹下创建名为network_security_config_wanandroid的网络安全配置文件:


网络安全文件配置.jpeg


该文件只需要在清单文件application节点的networkSecurityConfig中引用该文件即可,如此就完成了对wanandroid.com域名及其所有次级域名的证书单向认证。


在7.0以下版本中:


由于networkSecurityConfig是7.0版本新增的,因此在所有7.0以下的设备上无法生效,所以针对7.0以下的设备只能通过代码进行认证。推荐使用OkHttp:


okHttp进行证书校验.png


需要注意的是,在通过代码配置指定域名的证书校验时,根域名和次级域名需要分别进行配置。


优势:安全性较高,代码改动少。


劣势:本质还是证书的单向认证。



选择要校验的证书



如果说采取了google推荐的方式进行安全校验,那校验证书链中的哪个证书比较合适呢?


理论上来说,当然是校验企业自己的证书最好,即证书链的第三层企业证书


image.png


但是该层证书的有效期比较短,一般每年都要进行重签,重签之后证书的Sha256就会发生变化,这时候就要及时更新Client端中信息,否则就无法正常完成校验。


为了规避证书频繁过期的问题,我们可以直接对根证书进行校验,一般来说,根证书的有效期是比较长的:


image.png


这样就不用担心证书频繁过期的问题了,但是如果再企业证书续签的时候更换了CA机构,那就必须要更新Client端中的根证书信息了,不过这就是另外的一个问题了。



只校验根证书会不会存在风险?



几乎不会,因为正规的CA机构在给一个企业颁发证书的时候,会有审核机制的,一般不会出现错误办法的状况,但在历史上确实出现过CA机构被骗,将证书颁发给了相应域名之外的人。下面截图来自Google官网:


列入黑名单.png


不过这是非常小概率的事件了,因此校验域名+根证书摘要算是即安全又避免了证书频繁过期的问题,再加上google官方的推荐,算的上是最佳解决方案了。


这篇文章就介绍到这里,感谢观看~~


上号.jpg


作者:王远道
来源:juejin.cn/post/7210688688921821221
收起阅读 »

扒一扒抖音是如何做线程优化的

背景 最近在对一些大厂App进行研究学习,在对某音App进行研究时,发现其在线程方面做了一些优化工作,并且其解决的问题也是之前我在做线上卡顿优化时遇到的,因此对其具体实现方案做了深入分析。本文是对其相关源码的研究加上个人理解的一个小结。 问题 创建线程卡顿 在...
继续阅读 »

背景


最近在对一些大厂App进行研究学习,在对某音App进行研究时,发现其在线程方面做了一些优化工作,并且其解决的问题也是之前我在做线上卡顿优化时遇到的,因此对其具体实现方案做了深入分析。本文是对其相关源码的研究加上个人理解的一个小结。


问题


创建线程卡顿


在Java中,真正的内核线程被创建是在执行 start函数的时候, nativeCreate的具体流程可以参考我之前的一篇分析文章 Android虚拟机线程启动过程解析 。这里假设你已经了解了,我们可以可以知道 start()函数底层涉及到一系列的操作,包括 栈内存空间分配、内核线程创建 等操作,这些操作在某些情况下可能出现长耗时现象,比如由于linux系统中,所有系统线程的创建在内核层是由一个专门的线程排队实现,那么是否可能由于队列较长同时内核调度出现问题而出现长耗时问题? 具体的原因因为没有在线下复现过此类问题,因此只能大胆猜测,不过在线上确实收集到一些case, 以下是线上收集到一个阻塞现场样本:



那么是不是不要直接在主线程创建其他线程,而是直接使用线程池调度任务就没有问题? 让我们看下 ThreadPoolExecutor.execute(Runnable command)的源码实现



从文档中可以知道,execute函数的执行在很多情况下会创建(JavaThread)线程,并且跟踪其内部实现后可以发现创建Java线程对象后,也会立即在当前线程执行start函数。



来看一下线上收集到的一个在主线程使用线程池调度任务依旧发生卡顿的现场。



线程数过多的问题


在ART虚拟机中,每创建一个线程都需要为其分配独立的Java栈空间,当Java层未显示设置栈空间大小时,native层会在FixStackSize函数会分配默认的栈空间大小.



从这个实现中,可以看出每个线程至少会占用1M的虚拟内存大小,而在32位系统上,由于每个进程可分配的用户用户空间虚拟内存大小只有3G,如果一个应用的线程数过多,而当进程虚拟内存空间不足时,创建线程的动作就可能导致OOM问题.



另一个问题是某些厂商的应用所能创建的线程数相比原生Android系统有更严格的限制,比如某些华为的机型限制了每个进程所能创建的线程数为500, 因此即使是64位机型,线程数不做控制也可能出现因为线程数过多导致的OOM问题。


优化思路


线程收敛


首先在一个Android App中存在以下几种情况会使用到线程



  • 通过 Thread类 直接创建使用线程

  • 通过 ThreadPoolExecutor 使用线程

  • 通过 ThreadTimer 使用线程

  • 通过 AsyncTask 使用线程

  • 通过 HandlerThread 使用线程


线程收敛的大致思路是, 我们会预先创建上述几个类的实现类,并在自己的实现类中做修改, 之后通过编译期的字节码修改,将App中上述使用线程的地方都替换为我们的实现类。


使用以上线程相关类一般有几种方式:



  1. 直接通过 new 原生类 创建相关实例

  2. 继承原生类,之后在代码中 使用 new 指令创建自己的继承类实例


因此这里的替换包括:



  • 修改类的继承关系,比如 将所有 继承 Thread类的地方,替换为 我们实现 的 PThread

  • 修改上述几种类直接创建实例的地方,比如将代码中存在 new ThreadPoolExecutor(..) 调用的地方替换为 我们实现的 PThreadPoolExecutor


通过字码码修改,将代码中所有使用线程的地方替换为我们的实现类后,就可以在我们的实现类做一些线程收敛的操作。


Thread类 线程收敛


在Java虚拟机中,每个Java Thread 都对应一个内核线程,并且线程的创建实际上是在调用 start()函数才开始创建的,那么我们其实可以修改start()函数的实现,将其任务调度到指定的一个线程池做执行, 示例代码如下


class ThreadProxy : Thread() {
override fun start() {
SuperThreadPoolExecutor.execute({
this@ThreadProxy.run()
}, priority = priority)
}
}

线程池 线程收敛


由于每个ThreadPoolExecutor实例内部都有独立的线程缓存池,不同ThreadPoolExecutor实例之间的缓存互不干扰,在一个大型App中可能存在非常多的线程池,所有的线程池加起来导致应用的最低线程数不容小视。


另外也因为线程池是独立的,线程的创建和回收也都是独立的,不能从整个App的任务角度来调度。举个例子: 比如A线程池因为空闲正在释放某个线程,同时B线程池确可能正因为可工作线程数不足正在创建线程,如果可以把所有的线程池合并成 一个统一的大线程池,就可以避免类似的场景。


核心的实现思路为:



  1. 首先将所有直接继承 ThreadPoolExecutor的类替换为 继承 ThreadPoolExecutorProxy,以及代码中所有new ThreadPoolExecutor(..)类 替换为 new ThreadPoolExecutorProxy(...)

  2. ThreadPoolExecutorProxy 持有一个 大线程池实例 BigThreadPool ,该线程池实例为应用中所有线程池共用,因此其核心线程数可以根据应用当前实际情况做调整,比如如果你的应用当前线程数平均是200,你可以将BigThreadPool 核心线程设置为150后,再观察其调度情况。

  3. 在 ThreadPoolExecutorProxy 的 addWorker 函数中,将任务调度到 BigThreadPool中执行



AsyncTask 线程收敛


对于AsyncTask也可以用同样的方式实现,在execute1函数中调度到一个统一的线程池执行



public abstract class AsyncTaskProxy<Params,Progress,Result> extends AsyncTask<Params,Progress,Result>{

private static final Executor THREAD_POOL_EXECUTOR = new PThreadPoolExecutor(0,20,
3, TimeUnit.MILLISECONDS,
new SynchronousQueue<>(),new DefaultThreadFactory("PThreadAsyncTask"));


public static void execute(Runnable runnable){
THREAD_POOL_EXECUTOR.execute(runnable);
}

/**
* TODO 使用插桩 将所有 execute 函数调用替换为 execute1
* @param params The parameters of the task.
* @return This instance of AsyncTask.
*/

public AsyncTask<Params, Progress, Result> execute1(Params... params) {
return executeOnExecutor(THREAD_POOL_EXECUTOR,params);
}


}

Timer类


Timer类一般项目中使用的地方并不多,并且由于Timer一般对任务间隔准确性有比较高的要求,如果收敛到线程池执行,如果某些Timer类执行的task比较耗时,可能会影响原业务,因此暂不做收敛。


卡顿优化


针对在主线程执行线程创建可能会出现的阻塞问题,可以判断下当前线程,如果是主线程则调度到一个专门负责创建线程的线程进行工作。


    private val asyncExecuteHandler  by lazy {
val worker = HandlerThread("asyncExecuteWorker")
worker.start()
return@lazy Handler(worker.looper)
}


fun execute(runnable: Runnable, priority: Int) {
if (Looper.getMainLooper().thread == Thread.currentThread() && asyncExecute
){
//异步执行
asyncExecuteHandler.post {
mExecutor.execute(runnable,priority)
}
}else{
mExecutor.execute(runnable, priority)
}

}

32位系统线程栈空间优化


在问题分析中的环节中,我们已经知道 每个线程至少需要占用 1M的虚拟内存,而32位应用的虚拟内存空间又有限,如果希望在线程这里挤出一点虚拟内存空间来,可以参考微信的一个方案, 其利用PLT hook需改了创建线程时的栈空间大小。


而在另一篇 juejin.cn/post/720930… 技术文章中,也介绍了另一个取巧的方案 :在Java层直接配置一个 负值,从而起到一样的效果



OOM了? 我还能再抢救下!


针对在创建线程时由于内存空间不足或线程数限制抛出的OOM问题,可以做一些兜底处理, 比如将任务调度到一个预先创建的线程池进行排队处理, 而这个线程池核心线程和最大线程是一致的 因此不会出现创建线程的动作,也就不会出现OOM异常了。



另外由于一个应用可能会存在非常多的线程池,每个线程池都会设置一些核心线程数,要知道默认情况下核心线程是不会被回收的,即使一直处于空闲状态,该特性是由线程池的 allowCoreThreadTimeOut控制。



该参数值可通过 allowCoreThreadTimeOut(value) 函数修改



从具体实现中可以看出,当value值和当前值不同 且 value 为true时 会触发 interruptIdleWorkers()函数, 在该函数中,会对空闲Worker 调用 interrupt来中断对应线程



因此当创建线程出现OOM时,可以尝试通过调用线程池的 allowCoreThreadTimeOut 来触发 interruptIdleWorkers 实现空闲线程的回收。 具体实现代码如下:



因此我们可以在每个线程池创建后,将这些线程池用弱引用队列保存起来,当线程start 或者某个线程池execute 出现OOM异常时,通过这种方式来实现线程回收。


线程定位


线程定位 主要是指在进行问题分析时,希望直接从线程名中定位到创建该线程的业务,关于此类优化的文章网上已经介绍的比较多了,基本实现是通过ASM 修改调用函数,将当前类的类名或类名+函数名作为兜底线程名设置。这里就不详细介绍了,感兴趣的可以看 booster 中的实现



字节码修改工具


前文讲了一些优化方式,其中涉及到一个必要的操作是进行字节码修改,这些需求可以概括为如下



  • 替换类的继承关系,比如将 所有继承于 java.lang.Thread的类,替换为我们自己实现的 ProxyThread

  • 替换 new 指令的实例类型,比如将代码中 所有 new Thread(..) 的调用替换为 new ProxyThread(...)


针对这些通用的修改,没必要每次遇到类似需求时都 进行插件的单独开发,因此我将这种修改能力集成到 LanceX插件中,我们可以通过以下 注解方便实现上述功能。


替换 new 指令


@Weaver
@Group("threadOptimize")
public class ThreadOptimize {

@ReplaceNewInvoke(beforeType = "java.lang.Thread",
afterType = "com.knightboost.lancetx.ProxyThread")
public static void replaceNewThread(){
}

}

这里的 beforeType表示原类型,afterType 表示替换后的类型,使用该插件在项目编译后,项目中的如下源码



会被自动替换为



替换类的继承关系


@Weaver
@Group("threadOptimize")
public class ThreadOptimize {

@ChangeClassExtends(
beforeExtends = "java.lang.Thread",
afterExtends = "com.knightboost.lancetx.ProxyThread"
)
public void changeExtendThread(){};



}

这里的beforeExtends表示 原继承父类,afterExtends表示修改后的继承父类,在项目编译后,如下源码



会被自动替换为



总结


本文主要介绍了有关线程的几个方面的优化



  • 主线程创建线程耗时优化

  • 线程数收敛优化

  • 线程默认虚拟空间优化

  • OOM优化


这些不同的优化手段需要根据项目的实际情况进行选择,比如主线程创建线程优化的实现方面比较简单、影响面也比较低,可以优先实施。 而线程数收敛需要涉及到字节码插桩、各种对象代理 复杂度会高一些,可以根据当前项目的实际线程数情况再考虑是否需要优化。


线程OOM问题主要出现在低端设备 或一些特定厂商的机型上,可能对于某些大厂的用户基数来说有一定的收益,如果你的App日活并没有那么大,这个优化的优先级也是较低的。


性能优化专栏历史文章:


文章地址
监控Android Looper Message调度的另一种姿势juejin.cn/post/713974…
Android 高版本采集系统CPU使用率的方式juejin.cn/post/713503…
Android 平台下的 Method Trace 实现及应用juejin.cn/post/710713…
Android 如何解决使用SharedPreferences 造成的卡顿、ANR问题juejin.cn/post/705476…
基于JVMTI 实现性能监控juejin.cn/post/694278…

参考资料


1.某音App


2.内核线程创建流程


3.juejin.cn/post/720930… 虚拟内存优化: 线程 + 多进程优化


4.github.com/didi/booste…


作者:卓修武K
来源:juejin.cn/post/7212446354920407096
收起阅读 »

Android无需权限调起系统相机拍照

在进行一些小型APP的开发,或者是对拍照界面没有自定义要求时,我们可以用调起系统相机的方式快速完成拍照需求 和不需读写权限进行读写操作的方案一样,都是通过Intent启动系统的activity让用户进行操作,系统再将用户操作的结果告诉我们,因为过程对APP是完...
继续阅读 »

在进行一些小型APP的开发,或者是对拍照界面没有自定义要求时,我们可以用调起系统相机的方式快速完成拍照需求


和不需读写权限进行读写操作的方案一样,都是通过Intent启动系统的activity让用户进行操作,系统再将用户操作的结果告诉我们,因为过程对APP是完全透明的,所以不会侵犯用户隐私。


有两种方法可以调起系统相机拍照获取图片,我们先讲比较简单的一种


1、直接获取用户拍照结果

val launcher = registerForActivityResult(ActivityResultContracts.TakePicturePreview()) {bitmap->
bitmap ?: return@registerForActivityResult
vm.process(bitmap)
}

launcher.launch("image/*")

这个在旧版本的API中就等于


startActivityForResult(Intent(MediaStore.ACTION_IMAGE_CAPTURE),CODE)

等到用户完成拍照,返回我们的activity时,我们就可以得到一张经过压缩的bitmap。这个方法很简单,它的缺点就是获得的bitmap像素太低了,如果对图片像素有要求的话需要使用第二种方法


2、用户拍照之后指定相机将未压缩的图片存放到我们指定的目录

var uri: Uri? = null

val launcher =
registerForActivityResult(ActivityResultContracts.TakePicture()) {
if(it){
uri?.let { it1 -> vm.process(it1) }
}
}

val picture = File(externalCacheDir?.path, "picture")
picture.mkdirs()
uri = FileProvider.getUriForFile(
this,
"${BuildConfig.APPLICATION_ID}.fileprovider",
File(picture, "cache")
)
launcher.launch(uri)

这里我逐行进行解释:



  1. 首先,我们需要指定拍摄的照片要存到哪,所以我们先指定图片的存放路径为externalCacheDir.path/picture/cache 注意这张图片在文件系统中的名字就叫做cache了(没有文件后缀)。

  2. 然后我们通过FileProvider构建一个有授权的Uri给系统相机,相机程序拿到我们的临时授权,才有权限将文件存放到APP的私有目录。

  3. 系统相机拍照完成之后就会走到回调,如果resultCode为RESULT_OK才说明用户成功拍照并保存图片了。这样我们就能得到一张系统相机拍出来的原图的Uri,这样我们就可以用这张图片去处理业务了。


注意:使用方法二需要用到FileProvider,所以我们还要在AndroidManifest里声明


<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths" />
</provider>

@xml/provider_paths是我们授权访问的文件路径,这里我写的是


<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-path name="external_files" path="."/>
</paths>

关于这个"path.xml",其实还有一些可以补充说明的,后面有空会补上,这里我简单说明一下:


因为我们创建临时文件的时候,文件指定的目录是externalCacheDir?.path,对应的path就是external-cache-path,表示我们要临时授权的目录是externalCacheDir,如果文件目录指定的是其他路径,那path节点也需要改成代表对应文件夹的节点,这样其他应用才能访问到

作者:用户5944254635000
来源:juejin.cn/post/7211400484104388663
我们APP的私有目录

收起阅读 »

放弃熬夜,做清晨的霸主🔥

☀️ 前言 不知道最近大家有没有在 b 站刷到硬核的HeyMatt老师一个视频,标题叫做放弃熬夜,做清晨的霸主(人生效率的巨变)。 抱着随便看看的心情点了进去后,我沉默了并思考了片刻,我决定按照他视频里的建议和方法尝试一下。 在尝试早起将近一个月的时间后,我...
继续阅读 »

☀️ 前言



  • 不知道最近大家有没有在 b 站刷到硬核的HeyMatt老师一个视频,标题叫做放弃熬夜,做清晨的霸主(人生效率的巨变)

  • 抱着随便看看的心情点了进去后,我沉默了并思考了片刻,我决定按照他视频里的建议和方法尝试一下。

  • 在尝试早起将近一个月的时间后,我发现,我的效率确实是有了质的提升,接下来我会根据HeyMatt老师提到的方法和我一些实践来进行说明,感兴趣的小伙伴欢迎收藏慢慢看。


🕐 极致利用晚上时间的错觉



  • 会不会有很多小伙伴会有这种情况,每天辛勤劳作后,到了11点半大脑就会提示你:累了一天了,要不要放松一下呢?视频里说到,这种大脑暗示的放松大体分为三种:

    • 开始刷视频,打个游戏,借助浅层的刺激感来放松

    • 点个宵夜,搞个小烧烤吃吃,借助食物换取特定心境

    • 想一些过往能够牵动情绪的往事,沉浸在起伏连绵的情绪中



  • 绝了,以上三种我都尝试过,全中,但是作为程序员我还会有其他的几种:

    • 学习知识📖

    • 优化代码💼

    • 加快需求进度,赶需求🏃



  • 我经常会有这种想法,如果晚上11点半到1点半我可以把这些事情做完或者做多一点,那么我的时间就会被延长🕐。

  • 错❌,看了这个视频后我真的悟了,我花掉了N个晚上的两个小时,但是换不回来人生相应的发展,甚至很多质量很差的决策、代码都是在这个时间段产出的。

  • 可能你确实在这晚上获得了很多愉悦感,但是这个愉悦感是没有办法持续的第二天又赖床又想逃避,你会去想我白白浪费了晚上两个小时刷剧,过了一个晚上这个愉悦感在你早上醒来的时候会忽然转化为你的焦虑感

  • 确实是这样的,特别是在周末熬夜的时候,你会潜意识的特别晚睡,第二天让睡眠拉满,直接到中午才起床,但其实这样不是浪费了更多的时间吗?


🤔 三个风险



  • HeyMatt老师提到在熬夜的这些时间,面临了至少三个风险。


时间的消耗不可控



  • 就拿我来举例,我前段时间老是想着公司需求怎么做,需求的方案是不是不完整,是不是有可以优化的点,要修复的Bug怎么定位,怎么解决。

  • 我不自觉的就会想,噢我晚上把它给搞定,那么第二天就可以放下心去陪家人出去走走。

  • 可是事实呢?运气好一点或许可以在2个小时解决1点准时睡觉,但是运气不好时,时间会损耗越来越多,2个半小时,3个小时,4个小时,随着时间的消逝,问题没有解决就会越发焦虑,不禁查看时间已经凌晨3-4点了。

  • 就更不用说以前大学的时候玩游戏,想着赢一局就睡觉,结果一晚上都没赢过...😓


精神方面的损耗



  • 当我们消耗了晚上睡眠时间来工作、来学习、来游戏,那么代价就是你第二天会翻倍的疲惫。

  • 你会不自觉的想要睡久一点,因为这样才能弥补你精神的损耗,久而久之你就会养成晚睡晚起的习惯,试问一下自己有多久没有在周末看过清晨的阳光了?

  • 再说回我,当我前一个晚上没有解决问题带着焦虑躺在床上时,我脑子会不自觉全是需求、Bug,这真的不夸张,我真的睡着了都会梦到我在敲代码。这其实就是一种极度焦虑而缺乏休息的大脑能干出来的事情。

  • 我第二天闹钟响了想起我还有事情没做完,就会强迫自己起床,让自己跟**“想休息的大脑”**打架,久而久之这危害可想而知。


健康维度的损耗



  • 随着熬夜次数的增多,年龄的增长,很多可见或不可见的身体预警就会越来越多,具体有什么危害,去问AI吧,它是懂熬夜的。



🔥 做清晨的霸主



  • 那么怎么解决这些问题呢,其实很简单,把晚上11.30后熬夜的时间同等转化到早上即可,比如11.30-1.30,那么就转化到6.30-8.30,这时候就会有同学问了:哎呀小卢,你说的这么简单,就是起不来呀!!

  • 别急,我们都是程序员,最喜欢讲原理了,HeyMatt老师也将原理告诉了我们。


赖床原理



  • 其实我们赖床起不来的很大一部分原因是自己想太多了。

  • 闹钟一响,你会情不自禁去思考,“我真的要现在起床吗?” “我真的需要这一份需要早起的工作吗?” “我起床之后我需要干什么?” “这么起来会不会很累,要不还是再睡一会,反正今天不用上班?”

  • 这时候咱们大脑就处于一种**“睡眠”“清醒”**的重叠状态,就跟叠buffer一样,大脑没有明确的收到指令是要起床还是继续睡。

  • 当我们想得越多,意识就变得越模糊,但是大脑不愿意去思考,大脑无法清晰地识别并执行指令,导致我们又重新躺下了。


练就早起



  • 在一次采访中,美国作家 Jocko Willink 老师提出了一种早起方法::闹钟一响,你的大脑什么都不要想,也不需要去想,更不用去思考,让大脑一片空白,你只需执行动作即可。

  • 而这个动作其实特别简单,就是坐起来--->站起来--->去洗漱,什么都不用想,只用去做就好。

  • 抱着试一试的心态,我尝试了一下这种方法,并在第二天调整了闹钟到 6:30。第二天闹钟一响,直接走进卫生间刷个牙洗个脸,瞬间清醒了,而且我深刻的感觉到我的专注力精神力有着极大的提升,大脑天然的认为现在是正常起床,你是需要去工作和学习👍。

  • 绝了,这个方法真的很牛*,这种方法非常有效,让我觉得起床变得更容易了,推荐大家都去试试,你会回来点赞的。


克服痛苦



  • 是的没错,上面这种办法是会给人带来痛苦的,在起床的那一瞬间你会感觉仿佛整个房间的温度都骤降了下来,然后,你使劲从被窝里钻出来,脚底下着地的瞬间,你感到冰凉刺骨,就像是被一桶冰水泼醒一样。你感到全身的毛孔都瞬间闭合,肌肉僵硬,瑟瑟发抖,好像一股冰冷的气流刺痛着你的皮肤。

  • 但是这种痛苦是锐减的,在三分钟之后你的痛苦指数会从100%锐减到2%

  • 带着这种征服痛苦的快感,会更容易进入清晨的这两小时的写作和工作中。


✌️ 我得到了什么



  • 那么早起后,我收获了什么呢❓❓


更高效的工作时间



  • 早起可以让我在开始工作前有更多的时间来做自己想做的事情,比如锻炼、读书、学习新技能或者提升自己的专业知识等,这些事情可以提高我的效率专注力,让我在工作时间更加高效。

  • 早起可以让我更容易集中精力,因为此时还没有太多事情干扰我的注意力。这意味着我可以更快地完成任务,更少地分心更少地出错


更清晰的思维



  • 早上大脑比较清醒,思维更加清晰,这有助于我更好地思考解决问题,我不用担心我在早上写的需求方案是否模糊,也能更好的做一些决策

  • 此外,早起还可以让我避免上班前匆忙赶路的情况,减少心理上的紧张压力


更多可支配的时间



  • 早起了意味着早上两个最清醒的时间随便我来支配,我可以用半小时运动,再用10分钟喝个咖啡,然后可以做我喜欢做的事情。

  • 可以用来写代码,可以用来写文章,也可以用来运营个人账号

  • 可以让我有更多的时间规划安排工作,制定更好的工作计划时间管理策略,从而提高工作效率减少压力


更好的身体健康



  • 空腹运动对我来说是必须要坚持的一件事情,早起可以让我有更多的时间来锻炼身体,这对程序员来说非常重要,因为长时间的坐着工作容易导致身体不健康

  • 用来爬楼,用来跑步,用来健身环等等等等,随便我支配,根本不用担心下班完了后缺乏运动量。


👋 写在最后



  • 我相信,我坚持了一年后,我绝对可以成为清晨的霸主,你当然也可以。

  • 而且通过早起不思考这个方法,很多在生活有关于拖延的问题都可以用同样的方式解决,学会克服拖延直接去做,在之后就会庆幸自己做出了正确的决定

  • 如果您觉得这篇文章有帮助到您的的话不妨🍉🍉关注+点赞+收藏+评论+转发🍉🍉支持一下哟~~😛您的支持就是我更新的最大动力。

  • 如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群,大家一起畅谈天下~~~

作者:快跑啊小卢_
链接:https://juejin.cn/post/7210762743310417977
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

对标chatgpt?百度今日正式发布文心一言

3月16日下午,百度正式发布文心一言,包括五大能力——“文学创作、商业文案创作、数理逻辑推算、中文理解、多模态生成”。 百度李彦宏介绍称,内测中“文心一言”并不完美,但市场有需求必须要推出来。 《文心雕龙》是一本中国古代文学批评著作,作者刘勰在书中提出了“文心...
继续阅读 »

3月16日下午,百度正式发布文心一言,包括五大能力——“文学创作、商业文案创作、数理逻辑推算、中文理解、多模态生成”。


百度李彦宏介绍称,内测中“文心一言”并不完美,但市场有需求必须要推出来。


《文心雕龙》是一本中国古代文学批评著作,作者刘勰在书中提出了“文心”这一概念,指的是文学创作的内心体验和情感表达。《一言》则是唐代文学家韩愈的一篇散文,其中提到“一言既出,驷马难追”,意思是说一旦说出口的话就很难收回。


因此,百度的名字“文心一言”寓意着搜索引擎能够帮助人们快速地找到自己想要的信息,同时也提醒人们在言行上要慎重,避免后悔。


image.png


文心一言五大能力


新闻发布会现场,李彦宏展示了文心一言在五个使用场景的表现,包括文学创作、商业文案创作、数理推算、中文理解和多模态生成。从直播展示来看,文心一言某种程度上具有了对人类意图的理解能力,回答的准确性、逻辑性、流畅性都逐渐接近人类水平。但李彦宏也多次提及,这类大语言模型还远未到发展完善的阶段,进步空间很大,未来这段时间它一定会飞速发展,日新月异。


中文理解


image.png


多模态内容




  • 根据描述生成海报
    image.png




  • 用四川话语音讲述
    image.png




  • 视频生成能力
    不会对所有用户开放,百家号之前已经在运用。




image.png


对话式 AI 涉及的技术方向


image.png


文心大模型框架图


image.png


文心一言已有650家生态合作伙伴


文心一言已有650家生态合作伙伴


生成式大模型的三大产业机会


image.png


文心一言体验方式


百度同时公布了文心一言的邀请测试方案。3月16日起,首批用户即可通过邀请测试码,在文心一言官网体验产品,后续将陆续开放给更多用户。此外,百度智能云即将面向企业客户开放文心一言API接口调用服务。3月16日起正式开放预约,搜索“百度智能云”进入官网,可申请加入文心一言云服务测试。


作者:Captaincc
链接:https://juejin.cn/post/7210996975981690936
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

关于ChatGPT-4,你需要知道什么?

关于ChatGPT-4,你需要知道什么? 开启对话式AI的未来:特性、应用和伦理考虑 ChatGPT-4正以其先进的自然语言理解能力, 改进的上下文保留和更像人类的反应, 对话式AI的世界进行革命. 作为OpenAI开创性的ChatGPT-3的继任者, Cha...
继续阅读 »

关于ChatGPT-4,你需要知道什么?


开启对话式AI的未来:特性、应用和伦理考虑


ChatGPT-4正以其先进的自然语言理解能力, 改进的上下文保留和更像人类的反应, 对话式AI的世界进行革命. 作为OpenAI开创性的ChatGPT-3的继任者, ChatGPT-4在AI领域树立了新的基准, 在各种应用中为用户提供无缝和高度互动的体验.


自GPT-2推出以来, AI语言模型在理解和生成类似人类的文本的能力方面已经取得了长足的进步. 通过ChatGPT-3, OpenAI推动了AI能够实现的边界, 现在, ChatGPT-4更进一步, 有望实现前所未有的性能改进, 并在AI领域开辟新的可能性.


本文全面介绍了ChatGPT-4的主要特性和改进, 其广泛的应用和用例, 以及围绕该技术的伦理考虑. 无论你是AI爱好者, 开发者还是企业主, 本文将帮助你了解ChatGPT-4是如何改变我们与技术互动的方式, 以及它对各行业的潜在影响.


0_ZXO7Gmke5dDkbCGX.jpg


一 特性和改进


ChatGPT-4最显著的进步之一是它能够产生更自然和类似人类的反应. 通过利用最先进的机器学习算法和大量的训练数据, AI模型现在可以有效地进行复杂的对话, 表现出同情心, 甚至在适当的时候表现出幽默感.


ChatGPT-4对成语表达, 俚语和俗语有更好的理解, 使其在处理不同的沟通方式时更具适应性和通用性. 这种改进的语言理解确保用户可以更自然地与AI模型交谈, 而不必为适应技术而调整他们的语言.


为了提供真正的个性化体验, ChatGPT-4可以根据个人用户的喜好和沟通方式进行定制. 通过先进的机器学习技术, AI模型可以从用户的输入中学习, 并相应地调整其反应, 确保每次互动都感觉真实和定制.


ChatGPT-4的情境感知个性化使它能够理解不同用户情境的细微差别, 如专业, 休闲或教育环境. 这使AI模型能够根据情况调整其语气和风格, 为用户提供更有亲和力和符合背景的对话体验.


0_jP5vmSZApn4Eejd6.jpg


二 应用和用例


客户支持和服务 ChatGPT-4可以集成到客户支持系统中, 提供即时, 高效和准确的援助, 减少等待时间, 提高客户满意度. 其先进的语言理解和个性化功能使它能够处理各种查询, 并为用户提供量身定做的解决方案.


内容创作和编辑 ChatGPT-4可以帮助作家, 营销人员和内容创作者生成高质量, 有创意和有吸引力的内容, 从博客文章到社交媒体帖子. 其先进的语言能力可以帮助用户克服写作障碍, 完善他们的想法, 并产生引人注目的内容, 与他们的观众产生共鸣.


虚拟助理 ChatGPT-4增强的对话能力使其成为支持虚拟助手的理想候选者, 为用户提供了与数字伙伴之间更直观, 更像人类的互动. 从安排约会到回答问题和提供建议, ChatGPT-4使虚拟助理变得更有帮助和更全面.


电子学习和辅导 ChatGPT-4的高级语言理解和上下文感知的个性化, 可以用来创建互动和自适应的电子学习平台. 人工智能模型可以帮助学生按照自己的节奏学习, 回答问题, 提供反馈, 并根据他们的独特需求和能力提供个性化的学习路径.


0_WrIF8U62_yRU3joj.jpg


三 伦理顾虑和AI安全


解决人工智能系统中的偏见 OpenAI致力于确保ChatGPT-4的开发是负责任的, 符合道德的. AI系统的主要问题之一是训练数据中存在的偏见, 这可能会导致有偏见的输出. OpenAI积极致力于减少这些偏见, 完善训练过程, 利用多样化和有代表性的数据源, 并不断迭代模型以解决已发现的问题.


隐私和数据保护 随着ChatGPT-4这样的AI模型越来越普遍, 对用户隐私和数据保护的关注也越来越重要. OpenAI遵守严格的数据保护准则, 并确保用户数据得到负责任和安全的处理, 符合相关法规和最佳做法.


防止误用和内容审核 OpenAI认识到滥用AI技术的潜在风险, 如ChatGPT-4. 为了减少这些风险, OpenAI实施了强大的内容审核和滥用预防措施, 确保AI模型的使用是负责任的, 并遵循道德准则.


正在进行的研究和合作 OpenAI致力于推进人工智能安全研究, 解决与部署ChatGPT-4等AI系统相关的挑战, 并促进与其他研究机构, 行业利益相关者和公众的合作. 通过分享知识和合作, AI社区可以为AI安全和伦理制定最佳实践.


0_sHoYhenR7WRd4NIc.jpg


四 挑战和未来方向


ChatGPT-4的其余局限性 尽管有了显著的进步, ChatGPT-4仍然有局限性, 比如它的反应偶尔会有不准确或不一致的地方. OpenAI继续致力于完善该模型以解决这些问题并提高其整体性能.


进一步发展的机会 随着AI技术的不断发展, 将不断有机会增强ChatGPT-4的能力, 扩大其应用范围, 并解决其限制. 该模型的未来迭代可能具有更强的语言理解, 语境保持和个性化能力.


0_IKgWTh_KNk_dW34n.jpg


五 总结


ChatGPT-4是对话式AI领域的一个重要里程碑, 为用户提供了增强的类人互动和广泛的潜在应用. 其先进的功能和改进有希望改变行业, 彻底改变我们的沟通方式, 并塑造AI驱动的未来体验.


OpenAI邀请用户探索和参与ChatGPT-4, 提供宝贵的反馈和见解, 这将有助于塑造这一突破性技术的持续发展.


随着我们继续见证像ChatGPT-4这样的AI技术的快速发展, 我们必须对这些进展的道德和社会影响保持警惕. 通过促进合作, 透明度和对负责任的发展的共同承诺, 我们可以确保AI技术服务于更大的利益, 并释放其全部潜力以造福人类.


作者:bytebeats
链接:https://juejin.cn/post/7211506841691750437
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

我尝试用ChatGPT理解了下GPT4的现场直播,结果。。。

今天一早醒来,就被GPT4的发布给霸屏了。OpenAI官网上的介绍确实过于震撼,各个公众号的文章中也有提及,从专业考试到人类梗图,GPT4不只是回答的像模像样,更超越了我们这些普通人。 除了这些具体任务上的表现,GPT4的能力也有了突破——不仅可以处理更长的内...
继续阅读 »

今天一早醒来,就被GPT4的发布给霸屏了。OpenAI官网上的介绍确实过于震撼,各个公众号的文章中也有提及,从专业考试到人类梗图,GPT4不只是回答的像模像样,更超越了我们这些普通人。


除了这些具体任务上的表现,GPT4的能力也有了突破——不仅可以处理更长的内容(最长3.2万个token),也可以更好的理解图像内容。除了能力的增强,GPT4也更安全、更人性化了。


除了官网的Blog,OpenAI在北京时间2023年3月15日凌晨1点举办了一场25分钟左右的直播,具体展示GPT4的新能力。视频已经发布在国外某视频网站上,我们这就尝试用ChatGPT来总结一下这个现场直播的主要内容。


工具与原理


这里主要使用了VidSummize扩展,该扩展可以解析视频网站的字幕,并且利用OpenAI的API对字母内容进行分析。结合特定的prompt,便可以生成视频的概述。


prompt设置


这里采用默认的prompt,具体如下:



summarize this text using bullet points, give it a big, bold heading as well. make it: easy to read and exhaustive but also provide context on topics or concepts the reader might not know of if necessary. remember that you heading should be separated by two new lines from the bullet points.



翻译过来就是:



请使用项目符号列出要点,提供一个大而醒目的标题,并确保易读且详尽。如有必要,请为读者提供有关主题或概念的背景信息。请注意,您的标题应与项目符号间隔两个新行。



模型设置


这里选择使用ChatGPT类的Turbo模型——GPT-3.5-Turbo


结果展示


等待片刻,ChatGPT分析后的输出结果为:



Chapter 1 - OpenAI Demonstrates GPT-4 Capabilities in Live Stream



  • OpenAI has been building GPT-4 technology for the past two years

  • The company has focused on delivering GPT4 by rebuilding their entire training stack and testing it in real-world scenarios

  • OpenAI demonstrated how to make GPT-4 shine and get the most out of it

  • The company showed how to use GPT-4 as a tool and partner

  • OpenAI showcased GPT-4s ability to summarize an article with every word beginning with a specific letter

  • The company also demonstrated how a Discord using GPT-4 as an AI programming assistant

  • GPT-4 can leverage documentation it has not memorized and can synthesize new content in new ways

  • OpenAI showed how to debug code with GPT-4 and how it can accept inputs that intersperse images and text.


Chapter 2 - Using GPT-4 to Accomplish Tasks and Solve Problems



  • GPT-4 is a neural network that can be used to accomplish tasks and solve problems.

  • It can be used to describe images in detail, even if they are not explicitly tagged.

  • GPT-4 can also be used to understand dense content, such as tax code, and provide explanations and calculations.

  • The model is still being developed and optimized for prime time use.

  • GPT-4 has a length limit of32,000 tokens and be used for long documents.

  • The system message can be to get the in the mood of the task at hand.

  • GPT can output and create working websites from hand-drawn mock-ups.

  • The model can be used as an augmenting tool to increase productivity, but it is important to be in the drivers seat and understand what is going.

  • PT is flexible system that applied various and applications.


Chapter 3 - Exciting Opportunities with OpenAI Evals



  • OpenAI Evals is a model that can be improved by contributions from everyone

  • Improving the model can benefit a lot of people

  • OpenAI Evals offers exciting opportunities for building new things

  • The team is excited to see what people will build with the model

  • Contributions to OpenAI Evals are welcome and encouraged



对应的中文如下:



第一章 - OpenAI在直播中展示了GPT-4的能力



  • OpenAI过去两年一直在开发GPT-4技术。

  • 公司专注于通过重新构建整个训练系统并在真实情境中测试它来交付GPT4。

  • OpenAI展示了如何让GPT-4发挥作用并充分利用它。

  • 公司展示了如何将GPT-4用作工具和合作伙伴。

  • OpenAI展示了GPT-4摘要文章的能力,每个单词都以特定字母开头。

  • 公司还演示了使用GPT-4作为AI编程助手的Discord。

  • GPT-4可以利用它没有记忆的文档,并以新的方式综合新内容。

  • OpenAI展示了如何使用GPT-4调试代码以及如何接受交替图片和文本的输入。


第二章 - 使用GPT-4完成任务和解决问题



  • GPT-4是一个神经网络,可用于完成任务和解决问题。

  • 即使没有明确标记,它也可以详细描述图像。

  • GPT-4还可用于理解密集内容,例如税法,并提供解释和计算。

  • 该模型仍在开发和优化中,以供主流使用。

  • GPT-4的长度限制为32,000个标记,可用于长文档。

  • 系统消息可用于让用户进入工作状态。

  • GPT可以从手绘模型中输出和创建工作网站。

  • 该模型可用作增强工具,以提高生产力,但重要的是要掌握局面并理解正在进行的工作。

  • PT是灵活的系统,适用于各种应用程序。


第三章 - OpenAI Evals带来令人兴奋的机遇



  • OpenAI Evals是一个可以通过所有人的贡献改进的模型。

  • 改进模型可以惠及许多人。

  • OpenAI Evals为构建新事物提供了令人兴奋的机遇。

  • 团队很高兴看到人们将用该模型构建什么。

  • 欢迎和鼓励为OpenAI Evals做出贡献。



可以看出,这个结果很详尽,但是其中也会包含一些词法和语法错误,但这些并不影响我们了解视频的大体内容。


最后我再人工总结下直播中关键demo:



  • 结对编程时,代码运行出现错误的情况下通过输入最新文档进行bug修复

  • 对图片以及带梗的图片进行理解

  • 根据手绘图片,生成页面代码

  • 输入超长的税法条文,分析计算应纳税额

  • 总结编写打油诗


上述内容的截图如下(可参考截图中的视频时间查看原始视频):


结对编程解决BUG


图片内容理解


手绘图片转网页,这里出现了一个非技术原因导致的“翻车”


纳税额计算


打油诗内容总结


总结


相比ChatGTP,GPT4升级的地方主要有以下几个方面:



  • token的数量上有了很大的提升,从ChatGPT的4096直接提升到了32000,高了一个数量级,这使得普通人依赖机器解决专业问题(计算税、阅读法律条文)成为了可能。

  • 具备了多模态能力——除了自然语言,目前还可以处理图片。

  • 在逻辑推理能力上也有显著提升。


目前官网暂时没有给出GPT4的API,所以即刻体验的方式只有一种:加入ChatGPT Pro计划。需要等待体验的方式就是加入WaitingList排队,可以通过给OpenAI Evals贡献模型评价加快排队进度。


作者:centurysee
链接:https://juejin.cn/post/7210747150827913272
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

一文解码百度地图红绿灯倒计时

百度地图红绿灯倒数计时是什么? 当驾驶员打开百度地图导航,并经过红绿灯路口时,可以看到红绿灯变灯剩余秒数,也会在倒计时结束前收到语音播报,做好启停准备,从而避免急加速、急减速,还可缓解红绿灯被前车遮挡时的焦虑。 据反馈,红绿灯倒计时有助于提升“超视距”的驾驶体...
继续阅读 »

百度地图红绿灯倒数计时是什么?


当驾驶员打开百度地图导航,并经过红绿灯路口时,可以看到红绿灯变灯剩余秒数,也会在倒计时结束前收到语音播报,做好启停准备,从而避免急加速、急减速,还可缓解红绿灯被前车遮挡时的焦虑。


据反馈,红绿灯倒计时有助于提升“超视距”的驾驶体验,也能够助力交管部门提高信控路口整体通行效率。


图片


图 百度地图路口红绿灯倒计时


百度地图红绿灯倒计时数据从何而来? 百度地图红绿灯倒计时数据有两种来源,一种是大数据计算所得,另一种是官方权威数据接入。下面详解两种数据来源的基础原理和优缺点。


来源一:大数据计算红绿灯倒计时


数据来源: 脱敏的位置服务数据;道路拓扑结构数据;红绿灯准静态数据(即,与红绿灯相关但一般不会发生变动的信息,包括:红绿灯的空间位置数据、红绿灯控制的进口道车道及流向信息等)等。


技术说明: 百度地图基于海量的脱敏位置服务数据,计算得出每个路口红绿灯的周期时长和绿信比;同时,基于路口不同方向进口道的历史车流数据,挖掘红绿灯灯色的切换时间点;进而综合以上两类数据得到实时的倒计时读秒。


优点: 通过大数据计算的红绿灯倒计时,可支持在全国范围大部分的城市路口提供红绿灯倒计时服务,覆盖面广。同时,计算红绿灯倒计时的方法效率高、成本低,对于短期内暂不具备官方合作直接接入红绿灯数据条件的城市,也可以为市民提供红绿灯倒计时服务,方便市民体验。因此,大数据计算的红绿灯倒计时,可极大地提升日常出行体验和交通运行效率。


缺点:


1)大数据计算的红绿灯倒计时覆盖时段和范围可能存在缺失的情况:部分路口部分时段由于红绿灯非定周期控制、配时调整等因素,无法通过大数据计算得到精准且稳定的倒计时数据。


例如:由于自适应信号控制是根据路网实时的车流状态去配置最优信号配时方案,变化性强,因此自适应信号控制路口暂时无法通过大数据精准计算得到这类红绿灯的倒计时信息。


2)依托于大数据的计算方法,也不可避免大数据算法的天然缺陷,例如:算法可能无法完美模拟和还原真实世界,从而导致存在部分难以完全消除的误差。


来源二:权威接入红绿灯倒计时


数据来源: 路口静态数据;公安交通管理部门的交通信号控制平台的信号灯态数据。


技术说明: 2020年10月,公安部交通管理局签发《关于进一步加强城市道路交通信号控制应用工作的指导意见》(公交管〔2020〕302号)提出:积极探索应用车路协同技术。有条件的地方要结合车联网、车路协同技术应用和发展的需要,推动交通信号灯状态信息、交通事件及管控信息的开放共享,主动向通行车辆推送建议速度、路况动态等实时信息,帮助出行者及时掌握交通状况,合理选择出行路线。


权威接入正是基于此指导意见与各地公安交通管理部门一起积极探索,将交通信号控制平台的红绿灯灯态数据,共享给百度地图,再精准实时推送给百度地图的用户。


同时,数据传输中严格遵守中华人民共和国公共安全行业标准《公安交通集成指挥平台通信协议》(GA/T 1049-2013)、《公安视频图像信息系统安全技术要求第3部分:安全交互》(GA/T 1788.3-2021),符合公安部网络交互要求,充分保障数据安全。


图片


图《公安交通集成指挥平台通信协议第1部分:总则》(GA/T 1049.1-2013)


优点: 通过权威接入,百度地图可为出行用户提供实时准确、持续稳定、权威官方的红绿灯信息。即使在根据流量变化实时调整红绿灯配时的自适应信控路口,百度地图也可以基于接入的自适应红绿灯数据,为导航用户精准推送红绿灯信息。


缺点: 相较大数据计算红绿灯倒计时,由于不同城市交通信号控制相关工作的管理机制、软硬件配置等存在诸多差异,以及数据接入后的服务稳定需要持续保障,百度地图需要逐一和各地具体对接,一城一策,规模化覆盖的速度会慢一些。


百度地图红绿灯倒计时已经上线了吗? 基于大数据算法,百度地图充分发挥AI技术能力对城市路口红绿灯倒计时应算尽算,同时,百度地图与各地公安交通管理部门联合,已在西安、兰州等30多个城市实现全城数以千计的路口红绿灯灯态独家上线百度地图APP。


在兰州,使用百度地图导航时,驾驶员不仅可获得实时的红绿灯信息,还可以获得更高阶的智能出行服务:绿波出行引导,即:基于交警信号管控、区域实时交通状态、用户驾驶行为、导航规划路径等数据,可综合计算出不停车通过下一信号控制路口的“建议车速”,百度地图导航语音提醒驾驶人调整车速,助力真正实现“一路绿灯”,让驾驶人获得“畅通无阻”的舒适驾驶体验,降低交通系统中急加、急减、频繁启停的驾驶能耗。


图片


图 百度地图导航中的绿波车速引导


兰州市公安局交警支队科设大队副大队长杨懿认为,关于百度地图红绿灯上图,一是在城市出行方面为驾驶员个性化出行服务做出了探索;二是为车路协同等前沿领域奠定了基础;三是为下一步红绿灯控制优化提供了渠道;四是在出行诱导方面发挥了重要作用。


地图导航中红绿灯倒计时服务的目的不只是在路口为用户提供视觉盲区的倒计时提醒,也是为了提醒用户遵守行车规则、避免急停急启、关注驾驶行为、让每一次出发都更温和,更是为了助力城市交通运行协调和优化升级。


湖南省交通运输厅科技信息中心部长乔川龙认为,西安、兰州等城市的交管部门能够把交通红绿灯数据接入导航软件是智能交通发展中的一个里程碑事件,体现了中国智慧,为解决世界城市交通问题提供了中国方案。


百度地图始终致力于为用户提供更安全、更贴心、更智能的出行服务。欢迎更多地方交警与百度地图联合,为公众提供更优质高效的出行服务,打造城市智能交通和便民服务新名片。


红绿灯相关概念:


交通信号: 在道路空间上无法实现分离的地方,主要是在平面交叉口中,给不同方向的交通流在时间上分配通行权的一种交通管理措施。交通红绿灯用不同颜色的灯指标交通的通行和停止,灯色一般为红、黄、绿三色,所以交通红绿灯通常称为红绿灯。


周期时长: 某一进口道红绿灯的各种灯色轮流显示一次所需的时间,即各种灯色显示时间之和。


绿信比: 一个信号相位的有效绿灯时长与周期时长之比。有效绿灯时间是显示绿灯时间减去损失时间,其中损失时间是由绿灯启亮时的反应延迟、绿灯快结束时的驾驶放缓车速等候带来必然损失。


干线控制(绿波系统): 把一条干道上一批相邻的交通信号连接起来,加以协调控制,让相邻信号间的绿灯时差与车辆在其间的行程时间相适应,使车辆能连续通过尽可能多的绿灯。


绿波车速引导: 用户在建议车速下行驶,可实现一次通过多个路口不等灯,提高交通系统整体通行效率。


作者:百度地图开放平台
链接:https://juejin.cn/post/7211800391011336248
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

【Flutter基础】Dart中的并发Isolate

前言 说到 Flutter 中的异步,我想大家都不陌生。一般我们使用 Future、async-await 来进行网络请求、文件读取等异步加载,但要提到 Isolate ,大家就未必能够说的明白了,今天我就带大家了解下 Dart 中的并发 Isolate。 一...
继续阅读 »

前言


说到 Flutter 中的异步,我想大家都不陌生。一般我们使用 Futureasync-await 来进行网络请求、文件读取等异步加载,但要提到 Isolate ,大家就未必能够说的明白了,今天我就带大家了解下 Dart 中的并发 Isolate


一、Isolate的基本用法


1.1 Isolate的基本用法


对于 Isolate ,我们一般通过 Isolate.spawn() 来实现并发处理。


  const String downloadLink = '下载链接';
 final resultPort = ReceivePort();
 await Isolate.spawn(readAndParseJson, [resultPort.sendPort, downloadLink]);
 String fileContent = await resultPort.first as String;
 print('展示文件内容: $fileContent');

Isolate.spawn() 内部传递一个 entryPoint 初始化函数,用于执行异步操作。这里我们定义 readAndParseJson 函数,通过设置 延迟2秒 来模拟文件读取。


Future<void> readAndParseJson(List<dynamic> args) async {
 SendPort resultPort = args[0];
 String fileLink = args[1];

 print('获取下载链接: $fileLink');

 String fileContent = '文件内容';
 await Future.delayed(const Duration(seconds: 2));
 Isolate.exit(resultPort, fileContent);
}

运行结果:


WX20230314-232225@2x.png


1.2 Isolate的异常处理


由于 Isolate 开启的是一块新的隔离区,完全和启动的 Isolate 独立,自然是无法通过 try-catch 进行捕获。


好在 Isolate 提供了异常通知的能力,我们依旧可以通过 ReceivePort 来接收 Isolate 产生的异常,代码如下所示:


  const String downloadLink = '下载链接';
 final resultPort = ReceivePort();

 await Isolate.spawn(
   readAndParseJsonWithErrorHandle,
  [resultPort.sendPort, downloadLink],
   onError: resultPort.sendPort,
   onExit: resultPort.sendPort,
);

 // 获取结果
 final response = await resultPort.first;
 if (response == null) { // 没有消息
   print('没有消息');
} else if (response is List) { // 异常消息
   final errorAsString = response[0]; //异常
   final stackTraceAsString = response[1]; // 堆栈信息
   print('error: $errorAsString \nstackTrace: $stackTraceAsString');
} else { // 正常消息
   print(response);
}

readAndParseJsonWithErrorHandle 函数中,我们通过手动 throw Exception 来触发异常处理。


Future<void> readAndParseJsonWithErrorHandle(List<dynamic> args) async {
 SendPort resultPort = args[0];
 String fileLink = args[1];
 String newLink = '文件链接';

 await Future.delayed(const Duration(seconds: 2));
 throw Exception('下载失败');
 Isolate.exit(resultPort, newLink);
}

运行结果:


WX20230315-212149@2x.png


1.3 Isolate.run()


如果我们每次使用时都需要通过 ReceivePort 来实现 Isolate 的消息通信,这样会过于繁琐。好在官方也考虑到了这个问题,通过提供 Isolate.run() 来直接获取返回值:



注意:该方法需要在 Dart 2.19 以上的版本使用,对应 Flutter 3.7.0 以上。



 const String downloadLink = '下载链接';
String fileContent = await Isolate.run(() => handleReadAndParseJson(downloadLink));
print('展示文件内容: $fileContent');

/// 处理读取并解析文件内容
Future<String> handleReadAndParseJson(String fileLink) async {
 print('获取下载链接: $fileLink');
 String fileContent = '文件内容';
 await Future.delayed(const Duration(seconds: 2));
 return fileContent;
}

其原理就是内部通过对 Isolate.spawn() 进行封装,通过 Completer 来实现 Future 的异步回调。关键代码如下:


    var result = Completer<R>();
   var resultPort = RawReceivePort();
  ...
   try {
     Isolate.spawn(_RemoteRunner._remoteExecute,
             _RemoteRunner<R>(computation, resultPort.sendPort),
             onError: resultPort.sendPort,
             onExit: resultPort.sendPort,
             errorsAreFatal: true,
             debugName: debugName)
        .then<void>((_) {}, onError: (error, stack) {
       // Sending the computation failed asynchronously.
       // Do not expect a response, report the error asynchronously.
       resultPort.close();
       result.completeError(error, stack);
    });
  } on Object {
     // Sending the computation failed synchronously.
     // This is not expected to happen, but if it does,
     // the synchronous error is respected and rethrown synchronously.
     resultPort.close();
     rethrow;
  }


Tip:从官方的源码中我们可以学到,在调用 Isolate.spawn() 时,建议通过 tray-catch 捕获可能发生的异常,并且在最后需要关闭 ReceivePort 避免内存泄漏。



二、Flutter中的compute


除了上述在 Dart 中的用法外,我们还可以在 Flutter 中通过 compute() 来实现。并且这也是官方推荐的用法,因为 compute() 允许在非原生平台 Web 上运行。



官方原文:If you’re using Flutter, consider using Flutter’s compute() function instead of Isolate.run(). The compute function allows your code to work on both native and non-native platforms. Use Isolate.run() when targeting native platforms only for a more ergonomic API.



2.1 compute的使用


Isolate.run() 的使用方式类似,通过传入 callback 函数让 Isolate 执行:


  String content = await compute((link) async {
   print('开始下载: $link');
   await Future.delayed(const Duration(seconds: 2));
   return '下载的内容';
}, '下载链接');
 print('完成下载: $content');

运行结果:


WX20230315-223530@2x.png



Tip:在引入 Flutter 包之前,我们可以直接右键 run 'islate.dart' with Coverage 在Coverage 运行;在引入 Flutter 包之后,我们就需要在手机上运行,可以通过命令:open -a simulator 启动一个 iOS 模拟器运行。



2.2 compute的异常处理


查看 compute() 源码发现,内部使用的是 Isolate.run(),而 Isolate.run() 内部是通过 Completer 来完成异步回调的。因此,我们直接通过 try-catch 即可捕获异常:


  try {
   await compute((link) async {
     await Future.delayed(const Duration(seconds: 2));
     throw Exception('下载失败');
  }, '下载链接');
} catch (e) {
   print('error: $e');
}
 print('结束');

运行结果:


WX20230315-225157@2x.png


2.3 compute的源码分析


compute() 实际是对 isolates.compute 的实例化:


const ComputeImpl compute = isolates.compute;

Isolates 却是通过不同的平台来指定引入的类,这样也印证了为什么官方推荐在 Flutter 中使用 compute()


import '_isolates_io.dart'
 if (dart.library.js_util) '_isolates_web.dart' as isolates;

_isolates_io.dart 中是通过 Isolate.run() 来实现:


Future<R> compute<Q, R>(isolates.ComputeCallback<Q, R> callback, Q message, {String? debugLabel}) async {
 debugLabel ??= kReleaseMode ? 'compute' : callback.toString();

 return Isolate.run<R>(() {
   return callback(message);
}, debugName: debugLabel);
}

_isolates_web.dart 中是通过 await null; 抽取单帧来执行函数:


Future<R> compute<Q, R>(isolates.ComputeCallback<Q, R> callback, Q message, { String? debugLabel }) async {
 // To avoid blocking the UI immediately for an expensive function call, we
 // pump a single frame to allow the framework to complete the current set
 // of work.
 await null;
 return callback(message);
}

2.4 compute小结



  1. 因为 compute() 需要引入 flutter/foundation.dart,所以只能在 Flutter 中运行。

  2. 在 Flutter 中推荐使用 compute() 来实现,因为兼容 Web 平台。

  3. 其内部实现:在平台侧通过 Isolate.run(),在 Web 侧通过 await null; 抽取单帧来执行函数。


三、Isolate 的工作原理


在 Dart 中,Isolate 是一种类似于线程的概念,可以独立于其他 Isolate 运行,并且具有自己的堆栈和内存空间。这使得 Isolate 可以并行执行代码,并且不会受到其他 Isolate 的影响。


3.1 Future 为何还是会导致卡顿?


有时候我们可能会困惑,为什么明明已经使用了 Future 来异步执行任务,还是会出现卡顿的现象。那是因为 Dart 是单线程的,如果在执行 Future 时遇到耗时的计算任务或者 I/O操作,这些操作会占用当前线程的资源,从而导致应用出现卡顿现象,影响用户体验。


相比之下,Isolate 可以实现多线程并发执行任务,可以利用多核 CPU,因此可以更有效地处理大规模的计算密集型任务、I/O 密集型任务以及处理需要大量计算的算法等。在 Isolate 中执行任务不会占用 UI 线程的资源,从而可以保证应用的流畅性和响应速度。


3.2 Isolate 的工作原理


Isolate 的工作原理是通过使用 Dart 的隔离机制来实现的。每个 Isolate 都运行在独立的隔离环境中,并且与其他 Isolate 共享代码的副本。这意味着Isolate之间不能直接共享数据,而必须使用消息传递机制来进行通信。


其实我们在执行 main() 时,就开始了主 Isolate 的运行,如下图所示:


basics-main-isolate.png


3.3 Isolate 的生命周期


Isolate的生命周期可以分为三个阶段:创建、运行和终止。



  1. 创建阶段:使用 Isolate.spawn() 方法可以创建一个新的 Isolate,并且将一个函数作为参数传递给这个方法。这个函数将作为新的 Isolate 的入口点,也就是 Isolate 启动时第一个执行的函数。创建 Isolate 时还可以指定其他参数,例如 Isolate 的名称、是否共享代码等等。

  2. 运行阶段:一旦创建了 Isolate,它就会开始执行入口点函数,并且进入事件循环。在事件循环中,Isolate 会不断地从消息队列中获取消息,并且根据消息的类型执行相应的代码。Isolate 可以同时执行多个任务,并且可以通过消息传递机制来协调这些任务的执行顺序。

  3. 终止阶段:当 Isolate 完成了它的任务,或者由于某些原因需要停止时,可以调用 Isolate.kill() 方法来终止 Isolate。此时,Isolate 会立即停止执行,并且 Isolate 对象和所有与它相关的资源都会被释放。


basics-isolate.png


3.4 Isolate 组


Dart 2.15 也就是 Flutter 2.8 版本之后,当一个 Isolate 调用了 Isolate.spawn(),两个 Isolate 将拥有同样的执行代码,并归入同一个 Isolate 组 中。Isolate 组会带来性能优化,例如新的 Isolate 会运行由 Isolate 组持有的代码,即共享代码调用。同时,Isolate.exit() 仅在对应的 Isolate 属于同一组时有效。


其原理是同一个 Isolate 组中的 Isolate 共享同一个堆,避免了对象的重复拷贝。这意味着生成一个新 Isolate 的速度提高了 100 倍,消耗的内存减少了 10-100 倍。



注意不要和前面的概念混淆,Isolate 仍然无法彼此共享内存,仍然需要消息传递。



四、使用场景


4.1 使用原则



  • 如果一段代码不会被中断,那么就直接使用正常的同步执行就行。

  • 如果代码段可以独立运行而不会影响应用程序的流畅性,建议使用 Future

  • 如果繁重的处理可能要花一些时间才能完成,而且会影响应用程序的流畅性,建议使用 Isolate


4.2 耗时衡量


通过原则来判断可能过于抽象,我们可以用耗时来衡量:



  • 对于耗时不超过 16ms 的操作推荐使用 Future

  • 对于耗时超过 16ms 以上的操作推荐使用 Isolate


至于为什么用 16ms 作为衡量呢,因为屏幕一帧的刷新间隔就是 16ms



compute API文档原文:


/// {@template flutter.foundation.compute.usecase} /// This is useful for operations that take longer than a few milliseconds, and /// which would therefore risk skipping frames. For tasks that will only take a /// few milliseconds, consider [SchedulerBinding.scheduleTask] instead. /// {@endtemplate}



五、结语


至此,我们完成了对 Isolate 概念和用法的认识。项目源码:Fitem/flutter_article


如果觉得这篇文章对你有所帮助的话,不要忘了一键三连哦,大家的点赞是我更新的动力🥰。最后祝大家周末愉快~



参考资料:


Isolate 的工作原理


Isolates in Flutter


作者:Fitem
链接:https://juejin.cn/post/7211539869805805623
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android应用被抓包?防护手段需知道

为了提高网络数据传输的安全性,业内采用HTTPS的方式取代原来的HTTP,Android的应用开发也不例外,我们似乎只需要修改一下域名就能完成http到https的切换,无需做其他额外的操作,那么这个HTTPS是如何实现的?是否真的就安全了?在不同的Andro...
继续阅读 »

为了提高网络数据传输的安全性,业内采用HTTPS的方式取代原来的HTTP,Android的应用开发也不例外,我们似乎只需要修改一下域名就能完成http到https的切换,无需做其他额外的操作,那么这个HTTPS是如何实现的?是否真的就安全了?在不同的Android版本上是否有差异?今天我们就来详细研究一下以上的问题。


Tips:本篇旨在讨论HTTPS传输的安全性,应用本地安全不在讨论范畴。


HTTPS原理



诞生背景



首先就是老生常谈的问题,什么是HTTPS,相信大家有有所了解,这里简单提一下:


由于HTTP协议(HyperText Transfer Protocol,超文本传输协议)中,传输的内容是明文的,请求一旦被劫持,内容就会完全暴露,劫持者可以对其进行窃取或篡改,因此这种数据的传输方式存在极大的安全隐患。


因此,在基于HTTP协议的基础上对传输内容进行加密的HTTPS协议(HyperText Transfer Protocol over Secure Socket Layer)便诞生了,这样即使传输的内容被劫持,由于数据是加密的,劫持者没有对应的密钥也很难对内容进行破解,从而提高的传输的安全性。



密钥协商



既然要对传输的内容进行加密,那就要约定好加密的方式与密钥管理。首先在加密方式的选择上,有对称加密非对称加密两种,这两种方式各有有缺。


对称加密:


加密和解密使用相同的密钥,这种效率比较高,但是存在密钥维护的问题。如果密钥通过请求动态下发,会有泄漏的风险。如果密钥存放到Client端,那么密钥变更时就要重新发版更新密钥,而且如果要请求多个服务器就要维护多个密钥,对于服务器端也是同理,这种密钥的维护成本极高。


非对称加密:


加密和解密使用不同的密钥,即公钥与私钥,私钥存放在Server端,不对外公开,公钥是对外公开的,这样无论是公钥打包进Client端还是由Server端动态下发,也无需担心泄漏的问题。但是这种加密方式效率较低。


HTTPS协议中,结合了对称加密和非对称加密两种方式,取其精华,弃其糟粕,发挥了两者各自的优势。


假设目前Server端有一对密钥,公钥A和私钥A,在Client端发起请求时,Server端下发公钥A给Client端,Client端生成一个会话密钥B,并使用公钥A对会话密钥B进行加密传到Server端,Server端使用私钥A进行解密得到会话密钥B,这时Client端和Server端完成了密钥协商工作,之后Client和和Server端交互的数据都使用会话密钥B进行对称加解密。在密钥协商过程中,就算被劫持,由于劫持者没有私钥A,也无法获取协商的会话密钥B,因此保证了数据传输的安全性。


密钥协商过程简图如下:


密钥协商简图.png



CA证书



上面的过程貌似解决了数据传输的安全问题,但依然有一个漏洞,就是如果劫持者篡改了Server端下发给Client端的公钥的情况。


中间人攻击(MITM攻击)简图如下:


中间人攻击简图.png


为了解决Client端对Server端下发公钥的信任问题,出现了一个被称作CA(Certificate Authority)的机构。


CA机构同样拥有采用非对称加密的公钥和私钥,公钥加上一些其他的信息(组织单位、颁发时间、过期时间等)信息被制作成一个cer/pem/crt等格式的文件,被称作证书,这些CA机构用来给其他组织单位签发证书的证书叫做根证书,根证书一般都会被预装在我们的设备中,被无条件信任


以Android设备为例,我们可以在设置 -> 安全 -> 更多安全设置 -> 加密与凭据 -> 信任的凭据中查看当前设备所有的预装的证书。


设备预装的证书.jpeg


如果Server端部署的证书是正规CA机构签发的证书(CA机构一般不会直接用根证书为企业签发域名证书,而是使用根证书生成的中间证书,一般情况下证书链是三级,根证书-中间证书-企业证书),那么我们在进行HTTPS请求的时候,不需要做其他额外操作,Client端获取到Server端下发的证书会自动与系统预装的证书进行校验,以确认证书是否被篡改。


如果Server端的证书是自签的,则需要在Client端自行处理证书校验规则,否则无法正常完成HTTPS请求。


这也是为什么,我们在Android开发网络请求时,无需做额外操作便能丝滑切换到HTTPS,但是这样真的就能保证网络请求的安全性了吗?


真的安全了吗?


经过上面的介绍我们可以了解到,如果Client端(手机、浏览器)中预装了大量正规CA机构的根证书,Server端如果是正规CA签发的证书,理论上是解决了HTTPS通信中双端的信任问题,但是还存在一个问题,就是这些Client端一般都会支持用户自行安装证书,这将会给Android端的网络安全带来哪些风险?接下来我们就继续来聊聊。


由于Android版本更新迭代较快,且不同版本之前差异较大,因此分析这个问题的时候一定要基于一个特定的系统版本,区别分析。Android 5.0(21)之前的版本太过古老,这里就不再进行分析,直接分析5.0之后的版本。


在一个只采用默认配置的的测试项目中进行HTTPS请求的抓包测试,发现在5.0(包括)到7.0(不包括)之间的版本,可以通过中间人或VPN的方式进行抓包,而7.0及以上版本则无法正常抓包,抓包情况如下



7.0以下手机代理抓包情况:



Android7.0以下.jpeg



7.0及以上手机代理抓包情况:



之所以7.0是个分水岭,是因为在Android7.0之前,系统除了对系统内置CA证书无条件信任外,对用户手动安装的CA证书也无条件信任了。


虽然说7.0及以上的设备不再信用用户自行添加的CA证书,安全性比之前的高很多,但是无门却无法阻止那些抓包的人使用7.0之下的手机,除非提高应用的最小支持版本,但这样就意味着要放弃一些用户,显然也不适用于所有情况。


那么如何在保证低版本兼容性的同时兼顾安全性呢,我们接下来继续探讨。


如何更安全


除了系统默认的安全校验之外,我们也可以通过如下手段来提高请求的安全性,让抓包变得更加困难。



禁用代理



该方式适用于所有Android版本。


在网络请求时,通过调用系统API获取当前网络是否设置了代理,如果设置了就终止请求,达到保护数据安全的目的。因为通过中间人的方式进行抓包,需要把网络请求转发到中间人的代理服务器,如果禁止了代理相当于从源头解决了问题。


优势:设置简单,系统API简单调用即可获取代理状态。


劣势:




  1. 会错杀一些因为其他场景而使用代理的用户,导致这样的用户无法正常使用




  2. 通过开启VPN在VPN上设置代理转发到中间人服务器的方式绕过




由于设置禁用代理的方式很容易被绕过且有可能影响正常开启VPN用户的使用,因此不推荐使用该方式。



数据加密



该方式适用于所有Android版本。


对请求传输的数据进行加密,然后再通过HTTPS协议传输。HTTPS本身在传输过程中会生成一个会话密钥,但是这个密钥可以被抓包获取,如果对传输的数据进行一次加密后再传输,即使被抓包也没法解析出真实的数据。


优势:安全性较高,只要密钥没有泄漏,数据被破获的风险较低


劣势:




  1. 修改同时修改Client端和Server端代码,增加加解密逻辑




  2. 加解密操作影响效率且有密钥维护的成本




在对数据安全性要求比较高的接口上,可以采用这种方式对传输内容进行增强保护。



证书单向认证



该方式适用于所有Android版本。


在默认情况下,HTTPS在握手时,Server端下证书等信息到Client端,Client端校验该证书是否为正规CA机构签发,如果是则通过校验。这里我们可以自定义校验规则,可以下载Server端的证书到打包到APK中,在请求时进行证书校验。


https单向认证.png


优势:安全性高。


劣势:证书容易过期,当前企业证书有效期只有1年,需要每年进行续签,Client需要维护证书更新的问题。



证书双向认证



该方式适用于所有Android版本。


在单向认证中,Client端会验证Server端是否安全,但是Server端并没有对Client进行校验,这里可以让Server端对Client也进行一次认证。这种认证需要在单向认证的基础上再额外创建一套证书B,存放在Client端,并在Client端完成对Server端的校验后,把Client端的公钥证书发送到Server端,由Server端进行校验,校验通过后开始密钥协商等后续步骤。


https双向认证.png


优势:安全性非常高!


劣势:




  1. Server端要存放Client端公钥证书,如果一个Server对应多个Client则需要维护多套




  2. 增加了校验成本,会降低相应速度





网络安全配置文件



该方案为google官方推荐的方案,也是一种证书的单向校验,不过在Android7.0及更高版本上,配置简单,只需要再清单文件的application节点下增加一个networkSecurityConfig项,并指向一个按固定的格式创建一个xml文件,即可完成网络安全的校验,体验相当丝滑,唯一美中不足的是该配置不支持7.0以下的版本。


在7.0及以上版本中,在xml文件夹下创建名为network_security_config_wanandroid的网络安全配置文件:


网络安全文件配置.jpeg


该文件只需要在清单文件application节点的networkSecurityConfig中引用该文件即可,如此就完成了对wanandroid.com域名及其所有次级域名的证书单向认证。


在7.0以下版本中:


由于networkSecurityConfig是7.0版本新增的,因此在所有7.0以下的设备上无法生效,所以针对7.0以下的设备只能通过代码进行认证。推荐使用OkHttp:


okHttp进行证书校验.png


需要注意的是,在通过代码配置指定域名的证书校验时,根域名和次级域名需要分别进行配置。


优势:安全性较高,代码改动少。


劣势:本质还是证书的单向认证。



选择要校验的证书



如果说采取了google推荐的方式进行安全校验,那校验证书链中的哪个证书比较合适呢?


理论上来说,当然是校验企业自己的证书最好,即证书链的第三层企业证书


image.png


但是该层证书的有效期比较短,一般每年都要进行重签,重签之后证书的Sha256就会发生变化,这时候就要及时更新Client端中信息,否则就无法正常完成校验。


为了规避证书频繁过期的问题,我们可以直接对根证书进行校验,一般来说,根证书的有效期是比较长的:


image.png


这样就不用担心证书频繁过期的问题了,但是如果再企业证书续签的时候更换了CA机构,那就必须要更新Client端中的根证书信息了,不过这就是另外的一个问题了。



只校验根证书会不会存在风险?



几乎不会,因为正规的CA机构在给一个企业颁发证书的时候,会有审核机制的,一般不会出现错误办法的状况,但在历史上确实出现过CA机构被骗,将证书颁发给了相应域名之外的人。下面截图来自Google官网:


列入黑名单.png


不过这是非常小概率的事件了,因此校验域名+根证书摘要算是即安全又避免了证书频繁过期的问题,再加上google官方的推荐,算的上是最佳解决方案了。


这篇文章就介绍到这里,感谢观看~~


上号.jpg


作者:王远道
链接:https://juejin.cn/post/7210688688921821221
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android无需权限调起系统相机拍照

在进行一些小型APP的开发,或者是对拍照界面没有自定义要求时,我们可以用调起系统相机的方式快速完成拍照需求 和不需读写权限进行读写操作的方案一样,都是通过Intent启动系统的activity让用户进行操作,系统再将用户操作的结果告诉我们,因为过程对APP是完...
继续阅读 »

在进行一些小型APP的开发,或者是对拍照界面没有自定义要求时,我们可以用调起系统相机的方式快速完成拍照需求


和不需读写权限进行读写操作的方案一样,都是通过Intent启动系统的activity让用户进行操作,系统再将用户操作的结果告诉我们,因为过程对APP是完全透明的,所以不会侵犯用户隐私。


有两种方法可以调起系统相机拍照获取图片,我们先讲比较简单的一种


1、直接获取用户拍照结果

val launcher = registerForActivityResult(ActivityResultContracts.TakePicturePreview()) {bitmap->
bitmap ?: return@registerForActivityResult
vm.process(bitmap)
}

launcher.launch("image/*")

这个在旧版本的API中就等于


startActivityForResult(Intent(MediaStore.ACTION_IMAGE_CAPTURE),CODE)

等到用户完成拍照,返回我们的activity时,我们就可以得到一张经过压缩的bitmap。这个方法很简单,它的缺点就是获得的bitmap像素太低了,如果对图片像素有要求的话需要使用第二种方法


2、用户拍照之后指定相机将未压缩的图片存放到我们指定的目录

var uri: Uri? = null

val launcher =
registerForActivityResult(ActivityResultContracts.TakePicture()) {
if(it){
uri?.let { it1 -> vm.process(it1) }
}
}

val picture = File(externalCacheDir?.path, "picture")
picture.mkdirs()
uri = FileProvider.getUriForFile(
this,
"${BuildConfig.APPLICATION_ID}.fileprovider",
File(picture, "cache")
)
launcher.launch(uri)

这里我逐行进行解释:



  1. 首先,我们需要指定拍摄的照片要存到哪,所以我们先指定图片的存放路径为externalCacheDir.path/picture/cache 注意这张图片在文件系统中的名字就叫做cache了(没有文件后缀)。

  2. 然后我们通过FileProvider构建一个有授权的Uri给系统相机,相机程序拿到我们的临时授权,才有权限将文件存放到APP的私有目录。

  3. 系统相机拍照完成之后就会走到回调,如果resultCode为RESULT_OK才说明用户成功拍照并保存图片了。这样我们就能得到一张系统相机拍出来的原图的Uri,这样我们就可以用这张图片去处理业务了。


注意:使用方法二需要用到FileProvider,所以我们还要在AndroidManifest里声明


<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths" />
</provider>

@xml/provider_paths是我们授权访问的文件路径,这里我写的是


<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-path name="external_files" path="."/>
</paths>

关于这个"path.xml",其实还有一些可以补充说明的,后面有空会补上,这里我简单说明一下:


因为我们创建临时文件的时候,文件指定的目录是externalCacheDir?.path,对应的path就是external-cache-path,表示我们要临时授权的目录是externalCacheDir,如果文件目录指定的是其他路径,那path节点也需要改成代表对应文件夹的节点,这样其他应用才能访问到我们APP的私有目录


作者:用户5944254635000
链接:https://juejin.cn/post/7211400484104388663
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

如何看待 AI 和 ChatGPT?

当下互联网和移动互联网的流量已经触顶,虽然偶尔还会出现一些爆款的产品,但是流量总量摆在那里,各个产品之间流量只是此消彼长而已。就互联网技术而言,现在大厂们出的互联网技术,基本是那种花很大力气但是收效并不大。在这种情况下,ChatGPT 或者 AI 会是下一个引...
继续阅读 »

当下互联网和移动互联网的流量已经触顶,虽然偶尔还会出现一些爆款的产品,但是流量总量摆在那里,各个产品之间流量只是此消彼长而已。就互联网技术而言,现在大厂们出的互联网技术,基本是那种花很大力气但是收效并不大。在这种情况下,ChatGPT 或者 AI 会是下一个引爆点吗?


1、ChatGPT


首先,让我们来了解下 ChatGPT。


ChatGPT 刚出来那会儿我就用了几次。当时我还调侃了一下,



客观来说,ChatGPT 的效果还是挺震撼的。尤其是用它来生成一些基本的算法和 Android 代码的时候,


IMG_0856.png


对于我来说,我可能会用它来帮助我做润色文本,修正英语翻译中的错误等一些基础性的工作。


ChatGPT 的问题是你无法保证它的结果总是正确,


IMG_0859.png


有时候还会给人一种说正确的废话的感觉。


尽管 ChatGPT 在回答问题方面已经很强大,但把 ChatGPT 和搜索引擎关联起来简直是误导。搜索引擎和 ChatGPT 的区别在于,搜索引擎给你提供的是参考,而 ChatGPT 直接告诉你了一个可能的答案。搜索引擎需要你自己去甄别,这在一定程度上可以保证你得到的答案的正确性。在搜索引擎的应用场景中,ChatGPT 只适合充当一个助手。另一个问题在于,在产品层面,很难将两者有机的结合在一起。因为两者提供的功能是存在重叠的。


ChatGPT 很火,在我看来起最重要的价值是,它是一种重要的人机交互能力。虽然,几年之前涌现出了大批不同品牌的智能音箱,但是那些智能音箱的“智能”还无法和 ChatGPT 媲美。ChatGPT 可以帮助机器更好地理解人类的语言。ChatGPT 的上下文关联的能力还可以通过对话修正 ChatGPT 的答案。想象一下 ChatGPT 和机器人结合在一起的场景。科幻片中的机器人指日可待。这也是我觉得 ChatGPT 这种人工智能的产品形态最大的潜力。


ChatGPT 只是 AI 应用的一个方面,加上之前的 AlphaGo 等,足以彰显 AI 的巨大潜力。


2、谁将被 AI 取代?


在未来,ChatGPT 以及未来的 AI 产品必将会取代一部分人工,甚至现在都已经有了这个苗头。这可不是危言耸听,
比如当下非常火的 AICG 技术。我们可以用 AI 来生成插画。这将取代一部分插画师的角色。


截屏2023-03-16 23.35.16.png


我们可以用 AI 生成模特效果图(现在已经有公司在研究这个),这可能取代一部分模特的角色。可以说,任何重复性的工作都可以被人工智能取代。


不过以上只是从使用价值来讨论 AI. 如果说从情感价值呢?


就比如说,一只猫和一个 ChatGPT 音箱,谁能给我们提供更多的情感价值呢?我觉得是猫。猫的价值在于不可预测性。它有自己的想法、行为。如果从输入信息来看,AI 输入的是二维平面的,但是猫输入的是三维的空间。所以,在这方面,当下的人工智能还无法和猫相比。


不过,假如有一天,AI 机器人已经足够强大,你会愿意和 AI 机器人谈恋爱吗?这可能是不久我们就要面对的问题。


3、AI 即未来


我之前的文章里也提到过互联网红利将尽。事实上有些头部互联网已经在寻找下一个风口。比如之前火过的 Web3 和元宇宙。


对于 web3,我之前提到过,它本质上并没有新的技术产生,是基于产品逻辑的创新。web3 的本质诉求是用户的数据归属和隐私安全。web3 是一次创新,但还不足以引领下一次变革。对于元宇宙,我个人无法理解为什么要放弃现实生活去追求虚拟的生活,还要求虚拟的世界尽可能接近现实。所以,元宇宙更像是大厂推动起来的一个伪风口。


但 AI 不一样!AI 很有可能会推动下一次产业的革新,而且是彻底的革新。生产方式都可能会由此发生翻天覆地的变化。 判断一个技术是否足以称得上变革,一个评价标准是它是否能够提升社会的生产效率。比如,石器时代是从赤手空拳进化到用石器而提升了效率,此外,还有蒸汽和电气带动的工业革命。从这个层面讲,AI 甚至比互联网能带来更大的变革。


But,AI 可能会带来一系列的社会问题。相比于失业而言,更严重的问题在于,但在一个不够公平的社会里,新的生产方式的变革可能会导致社会贫富的分化更加严重。因为,相对公平的社会里可以通过对 AI 企业征收更多的税,然后把税收用在公共福利上让普通人享受社会发展的红利。而不公平的社会里,普通人不仅无法享受到科技、社会进步带来的福利,还可能会因为 AI 失去工作。


4、参与 AI


最近我也有一个想法“是不是现在不学习 AI 就晚了”。AI 学习需要一定的数学门槛,此外,数据和计算资源也是一个门槛。比如,ChatGTP 用到的大模型就需要大量的数据进行训练,需要调几千个参数。这不是小作坊能够搞得起的。但不妨碍我们学习一些入门的 AI,做一些小的产品。大体上还是要了解一些 AI,不然很容易跟社会脱节。


今天我也看到了百度发布的文心一言。花费很短的时间仓促得地做出来,总给人一种趋之若鹜的感觉。


我也常常想一个问题,是不是任何行业都是外国人发现了一个行业,然后一帮中国人进去死命的卷。


科技的创新并不是靠商业判断规划出来的,只有靠兴趣的推动还需要一些冒险精神才能发现新大陆。另一方面也说明,靠中国式的内卷和低容错的生活节奏是很难孕育出创新的。当然我们可以通过看准了机遇之后快速推进。但,说到底,这种方式在科技进步的道路上只能做一个追随者而不是领导者。


总结


新的时代在呼唤着新的英雄,也许下一个乔布斯已经准备在车库里组装自己的产品了。AI 必将引领一次新的变革,让我们拭目以待。


作者:开发者如是说
来源:juejin.cn/post/7211116982513827900
收起阅读 »

我在字节的这两年

web
前言 作为脉脉和前端技术社区的活跃分子,我比较幸运的有了诸多面试机会并最终一路升级打怪如愿来到了这里。正式入职时间为2021年1月4日,也就是元旦后的第一个工作日。对于这一天,我印象深刻。踩着2020年的尾巴接到offer,属实是过了一个快乐的元旦。不知不觉已...
继续阅读 »

前言


作为脉脉和前端技术社区的活跃分子,我比较幸运的有了诸多面试机会并最终一路升级打怪如愿来到了这里。正式入职时间为2021年1月4日,也就是元旦后的第一个工作日。对于这一天,我印象深刻。踩着2020年的尾巴接到offer,属实是过了一个快乐的元旦。不知不觉已经两年多了,细细回想起来,更多的是岁月推移,并没有回头看看现在的自己和两年前的自己有什么差别。


决定写文章记录一下还要感谢那个离职前在飞书上和我告别的老哥,他说已经学到了想学的


那我呢?似乎还没有。


和优秀的人做有挑战的事不止是简单的一句话。


在字节停留时间越久,越是能感觉到身边人的优秀,也正是这份优秀推动着我不断前进。


本文将会从思维方式、问题排查、技术思考三个方面以回顾自我成长的视角展开叙述,欢迎阅读。


思维方式


思维方式指的是看待事物的角度、方式和方法。放到工作当中来看,我逐渐摸索出了几个具体的点。


工作优先级


曾很长一段时间里,我在工作上没有刻意区分优先级或者说有优先级但是区分度不是那么明显。这意味着只要不是恰好有紧急事情处理,基本上业务方提过来的合理需求我都会第一时间安排。不论需求大小,也不问紧急程度,都默认当作紧急处理。


诚然,在交付后得到业务方肯定的那一刻是有成就感的。但我逐渐意识到,这真的是有点本末倒置。由于我负责的这部分工作和底层数据相关,可能很多需求直接或间接的都会找到我。事实上,完成对齐过的工作才是我更应该高优做的事,剩下时间用来完成这些零散需求才更为合理。


起初我觉得有些小需求可能就是一两行代码的事,顺手一个分支就带上去了。但仔细想想,这好像引发了蝴蝶效应。一件事仅仅完成是不够的,该有的环节要有。 开发,测试,上线,周知业务方验收。这样一个小流程走下来耗费的时间可不仅仅是一两行代码占用的时间可比。更何况,可能还不止一个零散需求。时不时被打断,自然就会导致原有工作安排非预期delay。


在意识到这个问题后,来自业务方的需求我会主动问一下优先级。如果不是特别紧急的事情将不会安排在当前周期的工作计划里。此外,优先级判定上我会和业务方确认完使用场景后有自己的思考。对接次数多了,发现有些紧急并不是真的紧急,只是单纯的性子急。后来,对于这种零散需求,我会在项目管理平台写好描述和需求提出人,方便后续沟通。


这个记录还是很有意义的,深感好处明显。



  • 可以起到一个备忘录的作用,定期查看,提醒自己有todo要处理

  • 业务方(需求提出人)可能因业务场景变更或有了其他解决方案,不再需要后续支持

  • 原业务方(需求提出人)转岗或离职,不再需要后续支持


等到决定去做的时候,如果发现时间间隔较久,不要急着写代码,先和业务方二次确认这个需求是否有必要继续做。试想,如果耗时耗力做完,最后邀请业务方验收时候对方又反馈用不到了。什么心情?那肯定满脸黑人问号啊?实惨如我,曾有过这样的经历。深感前置确认真的很有必要,这样能有效避免打黑工的场景。


在有意识对工作优先级进行划分后,原定对齐的工作进展基本都可以得到保障。等到工作周期结束进行总结的时候,看到比较高的完成度,我觉得这份成就感更高。


ROI考量


ROI 全称为 Return On Investment,指的是投资回报率。我是在完成一个比较重要的功能模块迁移后才更加认识到这个东西的重要性。在做数据迁移的时候,我写脚本进行的全量迁移。为了兼容新旧平台的格式差异,我做了好几处的格式转换,过程中还遇到好几个bad case需要手动处理,总之并不是那么顺利。等到一切准备就绪,我开始拉群周知用户并以表格形式逐个进行使用情况的回访。结果很尴尬,实际使用的用户远低于历史存量用户。量少到我完全可以采用更快的手动迁移,省去做格式转换和写脚本的时间。


对于那些实际没人用的数据,我后来又进行了删除处理。这一波操作下来,真的投入产出比就不高了。算是吃一堑长一智吧,在对一个功能模块进行迁移的时候,前置工作除了搞清楚历史背景,实现原理,更应该确定实际使用人群。尤其是对于一个存在年头比我入职时间还久的功能,更应该花时间在这个点上好好调研下。确定目标人群才好"对症下药",这样才有可能是多人的狂欢而非仅仅是一个人单纯完成迁移工作的孤独玩耍。


有心和无意真的是两种不同的感觉。 实际上,在经历这个事情之前我对自己研发的模块也会有很多想法。有较长一段时间里,我脑海中冒出来的小想法会连同某个分支功能带上去,改动不大,但是可能要思考的点会比较多。现在回想起来,大多数属于ROI比较低的。而现在,不论是业务方提出的需求还是我自己的小想法我都会优先考虑ROI的问题。时间是很宝贵的,在有限时间内产生更高价值带来的成就感和自我认同感绝对是翻倍的。


技术与业务关联


在来字节前,我很喜欢花大把的时间去钻研一些自己喜欢但可能实际未必会用到或者说使用场景比较局限的东西。比如我曾跟着视频教程鼓捣过一段时间的Angular 1.x 。当时觉得ng-xx这个指令写起来倍感新奇,有种发现新大陆的小激动。也曾跟风学过一段时间的php,被其数量庞大的内置函数所震惊。等转回到业务上,发现花费大量时间研究的东西和业务根本不沾边或者说没必要为了尝试而去强切技术栈。如此一来,割裂就产生了。我曾好长一段时间困在这个技术和业务二选一的局面走不出来。


等入职字节并工作了一段时间后,我发现当业务形态开始变得复杂,对技术的考验也会随之而来善于运用技术恰到好处地解决业务痛点,远远比单纯研究技术有意义。 自嗨终究是自嗨,没有实际落地场景,过一段时间就会忘记。如果还没想清楚技术服务于业务这个关键点,那就会陷入【钻研技术->长久不用->遗忘->钻研技术】这个循环。保持技术热情是好事,但是对于一个几乎没有业务落地场景的技术,投入大把时间研究又有什么用呢?知识是检索的,当需要时自然会朝着这个方向靠近,有具体落地场景才能更好地巩固。


进一步让我体会到技术与业务是相辅相成的契机是对图数据库bytegraph的相关技术调研和最终的投入使用。业务场景需要,我这边会涉及不同类型数据之间关联关系的管理(CRUD操作)。这个关联有层级的概念,全部关联建立数据量已到千万级别。从设计角度和实践角度综合考量,已经不是MySQL擅长的场景。细想一下,层层关联铺开不就是一张图吗?自然是图数据库存储更为合适。


在我看完bytegraph相关文档并使用Gremlin图数据库语言写了几个符合自我预期的基础语句后,突然又找回了曾经独自钻研技术的快乐。在使用过程中,很自然的就和业务关联起来了。比如如何设计点和边?如何提高关联图查询速度?我曾写过一篇关于图数据库bytegraph介绍和基本使用的文档,有同学在看过后就着某个具体业务场景下点该如何设计这个话题和我进行了语音交流,最后我结合实际使用场景给出了有效结论,被肯定的瞬间同样是成就感满满。此外,在工作中对bytegraph的使用诉求,还推动了bytegraph NodeJS SDK 的诞生。有幸成为第一个吃螃蟹的人,真的很有纪念意义。


寻求长期方案


很多时候,解决问题的方案都不止一个。绝大多数情况下,选择临时解决方案是最快最省力的。当然,也不排除某些极限情况下足够的临时趋近于长久。但临时终归是临时,这意味着中后期规划可能会有变更,从而导致现有的方案不再适用,所以说寻求长期稳定的解决方案才是最终目的。尤其是当系统稳定性和切换成本冲突时,更应攻坚克难去破局。近期完成了权限平台相关接口的升级替换,由于历史包袱沉重,旧的权限接口越来越不稳定,已经影响平台侧权限的正常使用。在这种情况下,真的是不得不换。好处还是很明显的,虽然过程艰难,但稳定性上确实得到了保障。


相信字节内很多平台都是对权限系统强依赖的,这意味着一旦权限系统服务出了问题,其他的下游服务都会受牵连。这种权限问题感知相当明显,最简单的一个例子:为什么自己创建的东西在操作时提示没权限?


为了降低权限系统不可用对自身业务的影响,我用redis对所有涉及权限读数据的地方做了缓存(如用户权限列表)。每次刷新页面会在获取用户信息的同时查询最新的权限信息,当检测到返回结构非预期时,则不再更新,直接返回缓存数据。一般来说,读权限场景比写权限场景更多,有这样一层缓存来兜底,还是很有价值的。


此外,为了避免自己创建的东西在操作时提示没权限的尴尬局面,我进行了业务自身数据库优先权限系统接口查询的处理。这个很好理解,写到自己数据库再读取往往比写到权限系统数据库再读取来的方便,后者可能会有延迟。完成整体权限系统接口升级替换,再结合redis缓存,数据库优先权限系统接口读取这两个策略,在业务侧整体权限稳定性上可以看作是一个长期稳定的方案了。


直面问题


对于一个开发来说,出现问题在所难免。解决问题固然重要,但是摆正心态也同样重要。工作中基本都是多人协作开发,当收到线上报警消息时,如果能确定和自己的某些操作有关应及时和相关同学说明,避免其他人一同跟着排查。有句话听起来很矛盾,但是语境还挺合适的:"我知道你很慌,但是先别慌。" 出现问题,排查清楚后,及时修复就好,切莫讳疾忌医。


此外,有些问题隐藏比较深,复现链路较为隐晦,甚至可能除了开发自身,其他人几乎不会有感知。我曾遇到过一个这样的case,代码写完过了一年,也没有人反馈,最后还是我自己在某次调试时候发现并修复的。随着编码经验的积累,思维发散性也会更广,不同阶段考虑的点自然也有差异。没必要过多纠结当时为什么没有考虑到这个场景,更应该思量的是下次遇到类似情况如何避免。亡羊补牢,为时未晚。


问题排查


问题排查可以说是一个开发人员必备的能力。个人感觉保证开发永远不出bug的方式就是不去开发。当然,这并不现实。在字节这两年多的时间里,我踩过好多的坑,也出过事故,逐渐摸索出了一些问题排查的经验。


环境一致性校验


工作中我这边常用到的是本地环境、测试环境(boe),生产预览环境(ppe)和正式生产环境(prod)。每个阶段都有可能会引发问题,在开始排查问题前,需要先确定自己的调试环境与引发问题的环境一致。乍一看可能感觉这句话是废话,但是有过相关经验的人都知道这一条真的很重要。


说来惭愧,我有过本地调试半天发现死活不生效最后意识到看的是生产环境页面的尴尬经历,真的是又气又无奈。


优先保证这一点,能少走很多弯路。


格式一致性校验


格式一致性校验指的是确认原始数据在有意格式处理或漏处理后,是否和后续程序要接收的数据格式保持一致。


一般来说,编码粗心或者测试不够充分都有可能引发格式相关的问题。


有意处理的场景:


const list=[1,2,3]
// 有意处理
const formatList =list.map(d=>({
id:d
}))
// 省略一大段代码

// 此处错误传入了list,应使用formatList
getData(list)

function getData(list){
// do something...
return xxx
}

在前端操纵数据store也有可能存在类似的问题,原始数据格式在某个组件里被修改导致另一个组件无法预期解析。


漏处理的场景:


// sequelize findAll查询 限定只返回id属性
const ids = await modelA.findAll({
attributes: ['id'],
});

await modelB.findAll({
where: {
id: ids,//这里漏掉了对ids的处理
},
});

如图,使用了sequelize model方法中的findAll查询并限定只返回id属性,且变量命名为ids。


实际上,返回的结构是对象数组{id:number}[],而不是数字数组number[]。


请求响应一致性校验


服务里定义的路由地址和前端请求时的地址对不上,导致请求404。


可能是因为单词拼写错误:username or ursename? cornjob or cronjob? 或者cv后没有改全。


前置条件确认


这个偏向于涉及事件触发的场景,要先满足其前置条件。


下面列举几个有代表性的场景:



  1. 如果想在群里接收某个机器人推送的消息,需要先把机器人拉进群

  2. 如果想在eventbus消费生产者产生的数据,需要确保消费者是开启状态

  3. 如果想使用sdk正常解析hive数据,需要先申请表权限


分区间排查


这种方式适用于排查由程序代码引起但尚不确定具体代码位置的场景。


我将其划分为三段式:



  1. 给怀疑会出问题的代码圈定一个区间,非怀疑区间代码直接注释(前端更有效)或return掉(后端更有效)

  2. 添加相关打印并重新运行程序,观测输出和程序运行结果是否符合预期

  3. 收缩区间,重复1,2步骤,直至发现问题




这里举一个我在使用bytegraph过程中亲身遇到的一个cpu暴涨的例子。


最初bytegraph并不支持全图查询,所以在获取某个点所在的整张关联图谱时拆分成了以下三个步骤:



  1. 查询某个点在整张图上的关联点

  2. 遍历每个点,查询入边和出边

  3. 根据边的指向拼出完整的图谱


伪代码如下:


function getGraph(vertex:Vertex){
// 查询某个点在整张图上的关联点
const nodes=await getNodes(vertex);
console.log('get nodes')
// return 分割区间一,后续直接return
// 遍历每个点,查询入边和出边。
const edges=await getEdges(nodes)
console.log('get edges')
// return 分割区间二,后续直接return
// ... other
}

async function getEdges(vertexs: Vertex[]) {
let res: any = [];
for (let i = 0; i < vertexs.length; i++) {
const vertex = vertexs[i];
// 根据点查询入边和出边
const itemEdges=await findEdge(vertex);
res = [ ... res, ... itemEdges];
}
// return res 分割区间三,不执行uniqWith返回res
// 深度去重
return uniqWith(res, isEqual);
}

采用分区间排查问题的思路,在关键节点添加打印日志,触发调试。


查看打印信息,发现每次都是在获取所有边那里卡住。


此时可以进到getEdges里边查看,发现内部有一个去重操作。


试着去掉这个过程,再重试,问题未复现。ok,定位问题。




针对这个问题,我写了一个可复现的最小demo,感兴趣的可自行尝试。


结论是lodash的uniqWith和isEqual方法对大数据 重复率不高的数据进行深度去重会导致cpu暴涨。


const { uniqWith, isEqual } = require('lodash');
const http = require('http');
http
.createServer(async (req, res) => {
const arr = [];
for (let i = 0; i < 10000; i++) {
arr.push({
n: Math.random() * 20000,
m: Math.random() * 20000,
});
}
console.log(uniqWith(arr, isEqual));
res.end('hello world');
})
.listen(3000);

请求溯源


对于有提供Open API 给其他业务方使用或者说当前服务存在开放性接口(未设置权限)的情况下,都有可能存在非预期调用,其中最典型的是参数错误和session信息缺失。


我有过类似经历,某个已经线上稳定运行过一段时间的接口突然开始报错,从错误信息来看是参数错误。随后我仔细查找了代码里的调用点,只有可能在平台使用时触发。进一步查看,确认是开放性接口,没有权限管控。意识到应该是某个用户手动触发的,因为平台侧正常使用的请求参数符合预期。如果能定位到具体的人自然最好,如果找不到人就需要在代码层面做一个参数校验,如果传递过来的参数不符合预期,直接return掉。类似的,平台侧调用一定可以拿到session信息,但是接连几次报错都是拿不到session导致的,怀疑是非常规调用,直接return。


安全日志记录


我负责的工作中涉及很多底层数据,这些数据属性变更有可能会引发非预期的安全卡点。开启卡点的资产越多,类似问题感知就会越明显。内部定时任务,外部平台配置变更,扫描任务,人工变更都可以导致资产属性发生变化。因此,究竟是哪一环节发生的变更显得尤为重要,这能有效缩短问题排查链路。


通过在每个变更节点添加一条安全日志记录,可以有效辅助排查。此外,还可以作为业务方溯源的一个途径。比如解答某个资产卡点什么时候开启的?卡点开启同步自哪个部门?


审查数据库字段


在某些业务场景里会在数据库中存储JSON 字符串,此时需要对实际可能的JSON大小做一个预判,之后再设定与之匹配的字段类型和数据大小。否则当实际长度超过数据库设定字段长度时,JSON字符串就会被截断,导致最后的解析环节出错。


超时归因


开发中遇到网络超时问题太常见了,大多数情况下都可以通过添加重试机制,延长timeout的方式解决。这里我想说的是一个比较特别的场景,海外,国内跨机房通信。 绝大多数海外和国内的通信都是存在区域隔离的,调用不通表现上可能就是网络超时,这种情况下,重试也没用。解决途径也比较直观,要么直接避免这种情况,海外调海外,国内调国内,要么申请豁免。


善用工具


argos观测诊断平台


在问题排查上,观测诊断平台能起到有效的辅助作用。除了报错日志,还可以看到所在服务psm,集群,机房。这些都是缩短问题排查链路的有效信息,在服务实例比较多的情况下表现尤为明显。此外,还可以配置报警规则,命中后会有报警机器人进行推送,可及时感知线上问题的发生。


飞书机器人


真心觉得飞书机器人是一个很好用的小东西。用它可以干很多事,比如按时提醒该喝水了。在报警感知上,也可以通过机器人搞点事情。例如在某个装饰器里对核心接口请求地址(如包含/core/)进行识别,随后在catch代码块里捕获错误,最后将error message or error stack 推送到指定的飞书群里,这样团队其他成员也能及时感知。


飞书表格


个人精力有限,不可能时时刻刻盯着报警信息其他什么都不干。对于一些看起来影响不大,不用紧急修复的报警可以先通过飞书表格记录下来,等有时间后当成待办事项逐一解决。亲测,这种先收集后集中处理的方式比发现一个处理一个更省时间。


技术思考


规范


很长一段时间里我对技术的理解是运用掌握的知识完成开发,仅此而已。但事实上,开发流程不应仅局限于开发环节,还有其他很多有价值的事情需要关注,比如一些规范。团队协作和独立开发还是有明显区别的,没有规矩不成方圆。既然是协作,就要有达成一致的规范。


我曾写过一篇关于lint的文章并在小组内和其他同事对齐,共同商讨缩进风格,哪些规则要开启,哪些规则要禁用。项目编码风格统一的管控实现上依赖husky和lint-staged,在提交代码时进行lint检测,不符合检测规则无法提交,这样可以有效避免个人编码风格差异导致的格式change。


在代码提交上,由组内另一个同学制定了git工作流规范,共同约定了不同功能分支如何命名,分支间如何检出与合并,commit 应该如何编写。这种规范形成文档后作用明显,不论是日常开发还是线上部署,都有了更清晰的操作流程。此外,见名知意的commit message也更有助于查找具体功能点。试想一下,如果简写一个fix,或fix err ,等过段时间再看,哪里还记得到底fix了个什么?


类似的,小组内还有需求迭代,上线部署等相关规范,这些规范站在开发的全局视角来看,都是很有价值的。


质量


研发质量问题是一个非常值得重视的点,开发完成并不意味着整个研发环节就结束了,质量过关才是最后的收尾节点。简单来说,上线后功能平稳运行,无bug和性能问题,这样才算是合格。虽说百密一疏,但反复踩同样的坑或者踩不应该踩的坑就有些说不过去了。我印象比较深刻的踩坑点在于数据格式处理,这个在上文报警排查处有提到,不再赘述。还有一点,对于跨越大版本的sdk升级,一定要认真且足够详细的审查是否存在break change。有些break change是比较隐晦的,乍一看可能察觉不到玄机,切记想当然,在项目代码中搜索看看,总比自我回忆要可信的多。想要收获一批忠实用户,研发质量一定是排位比较靠前的。


稳定性


这里特指研发的系统稳定性,初期我这边涉及到的系统架构比较简单,所有功能模块共用一个服务。这样好处是很多代码可以复用,开发和上线也比较方便。祸福相依,但是一旦服务崩溃,除了影响自身业务正常使用,还会朝着下游其他业务辐射。具体表现上来看,一般是OEPN API不可用。为避免类似问题再发生,我和小组内其他同事一起完成了服务架构升级,将不同子模块拆分成不同的服务,接口层面根据重要等级和业务类型并借助负载均衡能力,分散至各自所在服务的不同集群。架构升级完成后,即使某个子模块出现问题,也不至于牵动整个服务崩盘。在此次架构升级中更深刻体会到了不同类型数据库在特定场景下的使用,Redis,MySQL,MongoDB,bytegraph都有涉及,收获颇多。


文档先行


对于一些偏复杂的模块,先找个文档梳理一下,逐步拆解清楚后再开始编码,属于磨刀不误砍柴工。以前我的习惯是想一个大概,然后投入开发,写着写着发现之前想错了,然后删掉代码,再写新的,这个过程可能会反复好几次。冷静下来好好想想,真不如先写清楚文档更省时省力。实测,让思维在文档上交锋,远比在编辑器里打架轻松的多。


沉淀总结


我始终觉得,有输入就应该有输出。不论是日常基础搬砖,还是攻坚克难了某个业务痛点,又或者加深了自己对某项技术的理解,都应该有所展现。并不是说非要落笔成文,但至少应该在一个属于自己的小天地里留些痕迹。如果实在懒得打字,不妨试试拍照式记忆。亲测,这个是科学中带有点玄学的方法。


先找到想要记住的画面,可以是控制台的数据打印,也可以是bug调试截图,又或者某段关键代码,然后想一个主题,与之进行关联,重复思考几次。好的,记住了。


还是那句话,有心和无意是不一样的。有心留意,这份记忆就会更为深刻。当下次遇到类似场景,近乎是条件反射的思维反应。比如我现在每次写删除语句一定会检查是否加上了where条件。这是有特殊意义的一段经历,不堪回首。


落地统计


辛辛苦苦搬砖究竟产生了怎样的价值呢?究竟有哪些人在用?这同样是一个比较关键的点。我曾梳理了一个关于OPEN API 业务落地情况的表格,里边记载了哪些业务方在用,什么场景下会用,对接人是谁。这样除了价值考量,还可以在接口变更或下线时及时联系使用方,避免造成非预期的影响。


总结


不知不觉,洋洋洒洒写了几千字,梦回毕业论文。曾觉得自己属于有所成长,但是成长算不上快那种。写完这篇文章后再回首,竟也方方面面很多点。不错,经过一番努力,终于从一棵小葱茁壮成长为一棵参天大葱了。


回到最初的问题上,时至今日,我仍然觉得还有很多东西要学。距离把想学的都学到,大概还有很长一段路要走。


好在这一路不算孤独,能和身边优秀的人一起做有挑战的事。


前方的路,仍然值得期待。


作者:冷月心
来源:juejin.cn/post/7211716002383429693

完结,撒花!

收起阅读 »

30 岁了!通过 AI 问答完成了这篇思考文章

大家好,我是 shixin。 岁数越大,越不愿承认自己的真实年龄。前段时间别人问我年纪的时候,我嘴硬的说“二十九周岁”,现在,就只能无奈的说“三十”了。 说来也奇怪,为什么会觉得无奈呢?我想,我是想保留「二十多岁」的青春朝气、心无旁骛,抗拒「三十多岁」的中年危...
继续阅读 »

大家好,我是 shixin。


岁数越大,越不愿承认自己的真实年龄。前段时间别人问我年纪的时候,我嘴硬的说“二十九周岁”,现在,就只能无奈的说“三十”了。


说来也奇怪,为什么会觉得无奈呢?我想,我是想保留「二十多岁」的青春朝气、心无旁骛,抗拒「三十多岁」的中年危机、生活压力。


无论怎样我终究还是和三十岁相遇了,既然逃不掉,那今天就和它聊一聊。


三十岁意味着什么


我拿着这个问题问了 ChatGPT,它根据我的上下文给的回答如下:




可以看到,它给的回答还是蛮好的,基本上道出了现在困扰我的一些点。


三十岁,工作和生活对我的要求更高了。


工作方面,现在需要考虑的比以前更多了一些。除了个人贡献还需要做团队贡献,为自己的小组和整个团队带来更大价值,把自己知道的技术和经验传播给更多小伙伴。


家庭方面,快到要小孩的时候了。理论上三十岁已经年纪不小应该响应国家号召,但无奈生娃养娃的成本太大,还得多奋斗几年才有底气。今年准备先把婚礼办了(疫情影响婚礼日期改了好几次,上帝保佑这次顺利),过两年再考虑要孩子吧。


至于工作生活的平衡,老实讲目前还没有足够的资本,还得在工作上投入大部分时间。如何解决这种情况呢?是个值得思考的问题。


三十岁前我的人生


三十岁前,我的人生里有很多意想不到


十岁的我,没有想到未来我会去包头,更没有想到会在高中遇到现在的老婆。那时的我在呼和浩特,有四五个很要好的朋友,搬家的时候心里有一万个不舍。


十五岁的我,没有想到我会去西安读书,学的是计算机。那时的我还在想方设法溜到网吧通宵打游戏。


二十岁的我,没有想到我会从事安卓开发,也没有想到会去上海工作。那时的我在盲目瞎学,手机上写 OJ,看小甲鱼和黑马程序员,图书馆借了几本很老的 MFC 和 HTML CSS 书,跟着例子敲出来一个 H5 打飞机游戏。


二十五岁的我,没有想到我会在上海定居。那时我想的是干几年去西安定居,在那里离老家近一点,买房压力也小一点。后来机缘巧合,在买房时和几个前辈朋友聊了聊,听了他们的劝导,改成在上海定居。




ChatGPT 的这段回答让我泪目。有时候打的字越多,越渴望得到认可的回复,这种感觉,它给到了。



三十岁的我,虽然没有 100% 达到五年前预想的目标,但好在完成了一些当时觉得很难的事,比如买房、写书、直播分享,这些事是我成长的见证,也让我沉淀下一些经验和教训。


希望自己可以继续保持的


我希望自己继续保持的第一个点:在损失可以接受的情况下,多尝试多探索。


之前打德扑的时候,我属于比较激进和浪的那种,这种性格的缺点是会浪费很多筹码,但优点是过程很有趣,也常常会博到一些额外的收益。


生活里也是类似,在大学做小生意的时候,我愿意多跑几家店看看有没有价格更合适的货,也愿意多推开一扇门去问一下是否有需求,虽然收到不少白眼、也没赚大钱,但这段经历让我意识到:反正被拒绝也没什么损失,多试一次就多一个机会。


第二个需要继续保持的点:多种善因。


过往人生的关键节点,让我深刻的感受到:当下的果,往往来自过去不经意间种下的因。


就拿今年的几件事来说:



  1. 二月有机会在社区里做分享,缘自去年国庆主动报名 GDE 项目,虽然没通过筛选,但好在建立了联系,有这种机会时人家才会想到我



  1. 上周组里做的 ReactNative 技术培训,缘自字节时做的 Diggo 项目,在其中提升了前端开发技术,以至于后面做 RN 很顺畅,从而走在团队前头


今年很多事都是之前种下的善因结出的果实,除了满足,还需要多想想:



  1. 怎样为以后种下更多善因



  1. 现在要做的事,从长期来看,重复多次后的收益是怎样的



第三个需要继续保持的点:每日、每周、每年必做计划。


每日预则立,不立则废。我是一个善忘的人,如果哪天没有定好计划,基本上就稀里糊涂的过去了。首次发现这个问题,是我写2016 年度总结的时候,回顾发现好多细节都不记得了,有的月份里可能只记得一两件事,剩下的日子都进了黑洞无影无踪。


从那以后我就经常做记录、做计划,既然内存不够用,那就用磁盘缓存。做好每天的计划后,即使被突发事情分了心,我也可以及时调整状态回归高优。在日积月累下,才渐渐地完成了一件件看似很难的事,比如一篇有价值的文章、一个高质量的开源库(github.com/shixinzhang…)。



希望自己可以避免的


除了需要继续保持的,我也有很多后悔的事,比如做错事、说错话、浪费时间。


总结原因后,大概有这几点需要避免:



  1. 避免思想上的懒惰,少说这样的话:没办法、算了、就这样吧;多说:我试试、或许这样做就可以



  1. 避免和他人比较,比别人优秀或者差都不重要,重要的是有没有持续前进



  1. 避免没有进展的时候硬逼自己,多思考方向、方法是不是有问题



  1. 避免花钱的时候只看价钱,不对比购买后的体验和长期区别



  1. 避免做计划的时候过于悲观,目标定高点才可能做的更好



  1. 避免追求完美而不愿意开始,做完比做好优先级更高



  1. 避免在累的时候不休息,贪图享乐而继续浑浑噩噩




  1. 避免骄傲自满、自我膨胀,骄傲一来羞耻就来了




大胆想象一下,三十五岁的我


借用亚马逊的逆向工作法,先想象一下我 35 岁的情况:



  1. 第一种可能:独立开发了某个产品,为细分领域的人提供了独特的价值,从而获得不错的收益,业务比较忙的时候雇佣了几个助手



  1. 第二种可能:继续打工,但因为技术较好、沟通表达能力不错、有商业思维,担任某个业务的技术负责人



  1. 第三种可能:因为工作经验和年纪薪资不匹配被裁,投简历基本没有回复,最后忍痛降薪 50% 接了个 offer


要达到第一种情况,需要具备技术广度,可以独立完成产品的需求调研、设计、全栈开发和运营,更重要的是,尽早捕捉到信息,挖掘出其中的信息不平衡点或者需求点。这种情况对人的要求更高、风险也更高。


要达到第二种情况,需要付出的努力比上面略微少一点,需要具备一定的技术深度和广度、提升对公司业务和行业趋势的了解,主导完成一些有价值的事,同时在公司内部有一定的影响力。这种情况比第一种更稳一点。


要避免第三种情况,需要经常了解市场相关岗位的要求,不断提升自己的技术和业务价值以匹配要求,最好有代表性的作品和影响力。


总结


这篇文章是我三十岁当天开始动笔写的,因为种种原因拖到今天才完成,实在不应该(捂脸哭。


总是听人讲“三十而立”,为了看自己到底立没立,我看了好些名人的视频,想从中寻找答案。



到现在我悟了,所谓的“立“就是建立、确定、稳固。人活着最重要的就是吃饱和开心,三十岁,能够有一技之长和自我融洽的三观,就算是立住了吧!



作者:张拭心
来源:juejin.cn/post/7210386831451357221
收起阅读 »

放弃熬夜,做清晨的霸主🔥

☀️ 前言 不知道最近大家有没有在 b 站刷到硬核的HeyMatt老师一个视频,标题叫做放弃熬夜,做清晨的霸主(人生效率的巨变)。 抱着随便看看的心情点了进去后,我沉默了并思考了片刻,我决定按照他视频里的建议和方法尝试一下。 在尝试早起将近一个月的时间后,我...
继续阅读 »

☀️ 前言



  • 不知道最近大家有没有在 b 站刷到硬核的HeyMatt老师一个视频,标题叫做放弃熬夜,做清晨的霸主(人生效率的巨变)

  • 抱着随便看看的心情点了进去后,我沉默了并思考了片刻,我决定按照他视频里的建议和方法尝试一下。

  • 在尝试早起将近一个月的时间后,我发现,我的效率确实是有了质的提升,接下来我会根据HeyMatt老师提到的方法和我一些实践来进行说明,感兴趣的小伙伴欢迎收藏慢慢看。


🕐 极致利用晚上时间的错觉



  • 会不会有很多小伙伴会有这种情况,每天辛勤劳作后,到了11点半大脑就会提示你:累了一天了,要不要放松一下呢?视频里说到,这种大脑暗示的放松大体分为三种:

    • 开始刷视频,打个游戏,借助浅层的刺激感来放松

    • 点个宵夜,搞个小烧烤吃吃,借助食物换取特定心境

    • 想一些过往能够牵动情绪的往事,沉浸在起伏连绵的情绪中



  • 绝了,以上三种我都尝试过,全中,但是作为程序员我还会有其他的几种:

    • 学习知识📖

    • 优化代码💼

    • 加快需求进度,赶需求🏃



  • 我经常会有这种想法,如果晚上11点半到1点半我可以把这些事情做完或者做多一点,那么我的时间就会被延长🕐。

  • 错❌,看了这个视频后我真的悟了,我花掉了N个晚上的两个小时,但是换不回来人生相应的发展,甚至很多质量很差的决策、代码都是在这个时间段产出的。

  • 可能你确实在这晚上获得了很多愉悦感,但是这个愉悦感是没有办法持续的第二天又赖床又想逃避,你会去想我白白浪费了晚上两个小时刷剧,过了一个晚上这个愉悦感在你早上醒来的时候会忽然转化为你的焦虑感

  • 确实是这样的,特别是在周末熬夜的时候,你会潜意识的特别晚睡,第二天让睡眠拉满,直接到中午才起床,但其实这样不是浪费了更多的时间吗?


🤔 三个风险



  • HeyMatt老师提到在熬夜的这些时间,面临了至少三个风险。


时间的消耗不可控



  • 就拿我来举例,我前段时间老是想着公司需求怎么做,需求的方案是不是不完整,是不是有可以优化的点,要修复的Bug怎么定位,怎么解决。

  • 我不自觉的就会想,噢我晚上把它给搞定,那么第二天就可以放下心去陪家人出去走走。

  • 可是事实呢?运气好一点或许可以在2个小时解决1点准时睡觉,但是运气不好时,时间会损耗越来越多,2个半小时,3个小时,4个小时,随着时间的消逝,问题没有解决就会越发焦虑,不禁查看时间已经凌晨3-4点了。

  • 就更不用说以前大学的时候玩游戏,想着赢一局就睡觉,结果一晚上都没赢过...😓


精神方面的损耗



  • 当我们消耗了晚上睡眠时间来工作、来学习、来游戏,那么代价就是你第二天会翻倍的疲惫。

  • 你会不自觉的想要睡久一点,因为这样才能弥补你精神的损耗,久而久之你就会养成晚睡晚起的习惯,试问一下自己有多久没有在周末看过清晨的阳光了?

  • 再说回我,当我前一个晚上没有解决问题带着焦虑躺在床上时,我脑子会不自觉全是需求、Bug,这真的不夸张,我真的睡着了都会梦到我在敲代码。这其实就是一种极度焦虑而缺乏休息的大脑能干出来的事情。

  • 我第二天闹钟响了想起我还有事情没做完,就会强迫自己起床,让自己跟**“想休息的大脑”**打架,久而久之这危害可想而知。


健康维度的损耗



  • 随着熬夜次数的增多,年龄的增长,很多可见或不可见的身体预警就会越来越多,具体有什么危害,去问AI吧,它是懂熬夜的。



🔥 做清晨的霸主



  • 那么怎么解决这些问题呢,其实很简单,把晚上11.30后熬夜的时间同等转化到早上即可,比如11.30-1.30,那么就转化到6.30-8.30,这时候就会有同学问了:哎呀小卢,你说的这么简单,就是起不来呀!!

  • 别急,我们都是程序员,最喜欢讲原理了,HeyMatt老师也将原理告诉了我们。


赖床原理



  • 其实我们赖床起不来的很大一部分原因是自己想太多了。

  • 闹钟一响,你会情不自禁去思考,“我真的要现在起床吗?” “我真的需要这一份需要早起的工作吗?” “我起床之后我需要干什么?” “这么起来会不会很累,要不还是再睡一会,反正今天不用上班?”

  • 这时候咱们大脑就处于一种**“睡眠”“清醒”**的重叠状态,就跟叠buffer一样,大脑没有明确的收到指令是要起床还是继续睡。

  • 当我们想得越多,意识就变得越模糊,但是大脑不愿意去思考,大脑无法清晰地识别并执行指令,导致我们又重新躺下了。


练就早起



  • 在一次采访中,美国作家 Jocko Willink 老师提出了一种早起方法::闹钟一响,你的大脑什么都不要想,也不需要去想,更不用去思考,让大脑一片空白,你只需执行动作即可。

  • 而这个动作其实特别简单,就是坐起来--->站起来--->去洗漱,什么都不用想,只用去做就好。

  • 抱着试一试的心态,我尝试了一下这种方法,并在第二天调整了闹钟到 6:30。第二天闹钟一响,直接走进卫生间刷个牙洗个脸,瞬间清醒了,而且我深刻的感觉到我的专注力精神力有着极大的提升,大脑天然的认为现在是正常起床,你是需要去工作和学习👍。

  • 绝了,这个方法真的很牛*,这种方法非常有效,让我觉得起床变得更容易了,推荐大家都去试试,你会回来点赞的。


克服痛苦



  • 是的没错,上面这种办法是会给人带来痛苦的,在起床的那一瞬间你会感觉仿佛整个房间的温度都骤降了下来,然后,你使劲从被窝里钻出来,脚底下着地的瞬间,你感到冰凉刺骨,就像是被一桶冰水泼醒一样。你感到全身的毛孔都瞬间闭合,肌肉僵硬,瑟瑟发抖,好像一股冰冷的气流刺痛着你的皮肤。

  • 但是这种痛苦是锐减的,在三分钟之后你的痛苦指数会从100%锐减到2%

  • 带着这种征服痛苦的快感,会更容易进入清晨的这两小时的写作和工作中。


✌️ 我得到了什么



  • 那么早起后,我收获了什么呢❓❓


更高效的工作时间



  • 早起可以让我在开始工作前有更多的时间来做自己想做的事情,比如锻炼、读书、学习新技能或者提升自己的专业知识等,这些事情可以提高我的效率专注力,让我在工作时间更加高效。

  • 早起可以让我更容易集中精力,因为此时还没有太多事情干扰我的注意力。这意味着我可以更快地完成任务,更少地分心更少地出错


更清晰的思维



  • 早上大脑比较清醒,思维更加清晰,这有助于我更好地思考解决问题,我不用担心我在早上写的需求方案是否模糊,也能更好的做一些决策

  • 此外,早起还可以让我避免上班前匆忙赶路的情况,减少心理上的紧张压力


更多可支配的时间



  • 早起了意味着早上两个最清醒的时间随便我来支配,我可以用半小时运动,再用10分钟喝个咖啡,然后可以做我喜欢做的事情。

  • 可以用来写代码,可以用来写文章,也可以用来运营个人账号

  • 可以让我有更多的时间规划安排工作,制定更好的工作计划时间管理策略,从而提高工作效率减少压力


更好的身体健康



  • 空腹运动对我来说是必须要坚持的一件事情,早起可以让我有更多的时间来锻炼身体,这对程序员来说非常重要,因为长时间的坐着工作容易导致身体不健康

  • 用来爬楼,用来跑步,用来健身环等等等等,随便我支配,根本不用担心下班完了后缺乏运动量。


👋 写在最后



  • 我相信,我坚持了一年后,我绝对可以成为清晨的霸主,你当然也可以。

  • 而且通过早起不思考这个方法,很多在生活有关于拖延的问题都可以用同样的方式解决,学会克服拖延直接去做,在之后就会庆幸自己做出了正确的决定

  • 如果您觉得这篇文章有帮助到您的的话不妨🍉🍉关注+点赞+收藏+评论+转发🍉🍉支持一下哟~~😛您的支持就是我更新的最大动力。

  • 如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群,大家一起畅谈天下~~~


🌅 往期精彩


我被骂了,但我学会了如何构造高性能的树状结构🔥
466👍🏻


入职Apifox研发组三个月,我领悟了30个高效开发方法🔥
1218👍🏻


面试官:你觉得你最大的缺点是什么? 433👍🏻


几个一看就会的实用JavaScript优雅小技巧🌟
826👍🏻


作者:快跑啊小卢_
来源:juejin.cn/post/7210762743310417977
收起阅读 »

后端一次给你10万条数据,如何优雅展示,到底考察我什么?

web
前言 大家好,我是林三心,用最通俗的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心,今天跟大家来唠唠嗑,如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 前置工作 先把前置工作给做好,后...
继续阅读 »

前言


大家好,我是林三心,用最通俗的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心,今天跟大家来唠唠嗑,如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端)


image.png


前置工作


先把前置工作给做好,后面才能进行测试


后端搭建


新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务



没有安装nodemon的同学可以先全局安装npm i nodemon -g



// server.js

const http = require('http')
const port = 8000;

http.createServer(function (req, res) {
// 开启Cors
res.writeHead(200, {
//设置允许跨域的域名,也可设置*允许所有域名
'Access-Control-Allow-Origin': '*',
//跨域允许的请求方法,也可设置*允许所有方法
"Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
//允许的header类型
'Access-Control-Allow-Headers': 'Content-Type'
})
let list = []
let num = 0

// 生成10万条数据的list
for (let i = 0; i < 100000; i++) {
num++
list.push({
src: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
text: `我是${num}号嘉宾林三心`,
tid: num
})
}
res.end(JSON.stringify(list));
}).listen(port, function () {
console.log('server is listening on port ' + port);
})

前端页面


先新建一个index.html


// index.html

// 样式
<style>
* {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
overflow: auto;
}
.sunshine {
display: flex;
padding: 10px;
}
img {
width: 150px;
height: 150px;
}
</style>

// html部分
<body>
<div id="container">
</div>
<script src="./index.js"></script>
</body>


然后新建一个index.js文件,封装一个AJAX函数,用来请求这10w条数据


// index.js

// 请求函数
const getList = () => {
return new Promise((resolve, reject) => {
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
ajax.open('get', 'http://127.0.0.1:8000');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
resolve(JSON.parse(ajax.responseText))
}
}
})
}

// 获取container对象
const container = document.getElementById('container')

直接渲染


最直接的方式就是直接渲染出来,但是这样的做法肯定是不可取的,因为一次性渲染出10w个节点,是非常耗时间的,咱们可以来看一下耗时,差不多要消耗12秒,非常消耗时间


截屏2021-11-18 下午10.07.45.png


const renderList = async () => {
console.time('列表时间')
const list = await getList()
list.forEach(item => {
const div = document.createElement('div')
div.className = 'sunshine'
div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
container.appendChild(div)
})
console.timeEnd('列表时间')
}
renderList()

setTimeout分页渲染


这个方法就是,把10w按照每页数量limit分成总共Math.ceil(total / limit)页,然后利用setTimeout,每次渲染1页数据,这样的话,渲染出首页数据的时间大大缩减了


截屏2021-11-18 下午10.14.46.png


const renderList = async () => {
console.time('列表时间')
const list = await getList()
console.log(list)
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)

const render = (page) => {
if (page >= totalPage) return
setTimeout(() => {
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
const div = document.createElement('div')
div.className = 'sunshine'
div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page)
console.timeEnd('列表时间')
}

requestAnimationFrame


使用requestAnimationFrame代替setTimeout,减少了重排的次数,极大提高了性能,建议大家在渲染方面多使用requestAnimationFrame


const renderList = async () => {
console.time('列表时间')
const list = await getList()
console.log(list)
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)

const render = (page) => {
if (page >= totalPage) return
// 使用requestAnimationFrame代替setTimeout
requestAnimationFrame(() => {
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
const div = document.createElement('div')
div.className = 'sunshine'
div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
container.appendChild(div)
}
render(page + 1)
})
}
render(page)
console.timeEnd('列表时间')
}

文档碎片 + requestAnimationFrame


文档碎片的好处



  • 1、之前都是每次创建一个div标签就appendChild一次,但是有了文档碎片可以先把1页的div标签先放进文档碎片中,然后一次性appendChildcontainer中,这样减少了appendChild的次数,极大提高了性能

  • 2、页面只会渲染文档碎片包裹着的元素,而不会渲染文档碎片


const renderList = async () => {
console.time('列表时间')
const list = await getList()
console.log(list)
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)

const render = (page) => {
if (page >= totalPage) return
requestAnimationFrame(() => {
// 创建一个文档碎片
const fragment = document.createDocumentFragment()
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
const div = document.createElement('div')
div.className = 'sunshine'
div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
// 先塞进文档碎片
fragment.appendChild(div)
}
// 一次性appendChild
container.appendChild(fragment)
render(page + 1)
})
}
render(page)
console.timeEnd('列表时间')
}

懒加载


为了比较通俗的讲解,咱们启动一个vue前端项目,后端服务还是开着


其实实现原理很简单,咱们通过一张图来展示,就是在列表尾部放一个空节点blank,然后先渲染第1页数据,向上滚动,等到blank出现在视图中,就说明到底了,这时候再加载第二页,往后以此类推。


至于怎么判断blank出现在视图上,可以使用getBoundingClientRect方法获取top属性



IntersectionObserver 性能更好,但是我这里就拿getBoundingClientRect来举例



截屏2021-11-18 下午10.41.01.png


<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
// 跟上面一样的代码
}

const container = ref<HTMLElement>() // container节点
const blank = ref<HTMLElement>() // blank节点
const list = ref<any>([]) // 列表
const page = ref(1) // 当前页数
const limit = 200 // 一页展示
// 最大页数
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// 真实展示的列表
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
// 当前页数与最大页数的比较
if (page.value > maxPage.value) return
const clientHeight = container.value?.clientHeight
const blankTop = blank.value?.getBoundingClientRect().top
if (clientHeight === blankTop) {
// blank出现在视图,则当前页数加1
page.value++
}
}

onMounted(async () => {
const res = await getList()
list.value = res
})
</script>

<template>
<div id="container" @scroll="handleScroll" ref="container">
<div class="sunshine" v-for="(item) in showList" :key="item.tid">
<img :src="item.src" />
<span>{{ item.text }}</span>
</div>
<div ref="blank"></div>
</div>
</template>


虚拟列表


虚拟列表需要讲解的比较多,在这里我分享一下我的一篇虚拟列表的文章,哈哈我自认为讲的不错吧哈哈哈哈哈哈


结合“康熙选秀”,给大家讲讲“虚拟列表”


结语


如果你觉得此文对你有一丁点帮助,点个赞,鼓励一下林三心哈哈。


如果你想一起学习前端或者摸鱼,那你可以加我,加入我的摸鱼学习群,点击这里 ---> 摸鱼沸点


如果你是有其他目的的,别加我,我不想跟你交朋友,我只想简简单单学习前端,不想搞一些有的没的!!!


作者:Sunshine_Lin
来源:juejin.cn/post/7031923575044964389
收起阅读 »

【Webpack Plugin】写了个插件跟喜欢的女生表白,结果......😭😭😭

web
👋 事情是这样的 作为一名母胎 solo 二十几年的我,平平无奇的一直活在别人的狗粮之下。渐渐的,我好像活成了一个随时见证别人爱情,也随时能为失恋的人排忧解难的角色。 直到前两天,公司新来了一个前端妹子。 相视的第一眼,我神迷了,我知道,终究是躲不过去了.....
继续阅读 »

👋 事情是这样的


作为一名母胎 solo 二十几年的我,平平无奇的一直活在别人的狗粮之下。渐渐的,我好像活成了一个随时见证别人爱情,也随时能为失恋的人排忧解难的角色。


image.png


直到前两天,公司新来了一个前端妹子。


相视的第一眼,我神迷了,我知道,终究是躲不过去了......


image.png


相逢却似曾相识,未曾相识已相思!


当晚,彻夜未眠...


6839f22e-2f0c-4117-b02b-5db21822e8f9.jpg


第二天早上,从同事的口中得知了女生的名字,我们暂且叫她小舒吧。


为了不暴露我的狼子野心(欲擒故纵拿捏的死死的),我决定出于同事的关心询问一下项目了解的怎么样了,有没有需要我帮忙的。


没想到小舒像抓到了救命稻草一样:“小哥,你来的正好,过来帮我看看项目怎么跑不起来??”


8f8a7944-af3a-41a3-9d46-0828aade3146.jpg


我回到座位上,很快的发现是由于项目中部分包的版本不兼容导致的,更新下版本就可以了。


正准备起身去找小舒时,一个奇怪的念头闪过......


我决定给我们的第一次交流一个惊喜:借着这次解决问题的机会,好好拉近一下我们之间的关系!!!


10145af4-9407-40a8-ba24-8b64bfebeaa8.jpg


想法一来便挡也挡不住。我决定在项目中运行一个插件:当启动项目时,直接在控制台中向小舒表达我的心意!!!😏😏😏


没办法,单身这么多年肯定是有原因的!一定是我不够主动!这次我可要好好把握这个机会!!!


f689092c-a552-4fda-8189-d6c7f59fecd3.jpg


🏂 说干就干


有了想法就开干,哥从来不是一个拖拖拉拉的人。


小舒的项目用的是 Webpack + React 技术栈,既然想要在项目启动的时候做事情,那肯定是得写个 Webpack 插件了。


先去官网了解一下 Webpack Plugin 的概念:



Webpack Plugin:向第三方开发者提供了 Webpack 引擎中完整的能力。使用阶段式的构建回调,开发者可以在 Webpack 构建流程中引入自定义的行为。创建插件比创建 loader 更加高级,因为你需要理解 Webpack 底层的特性来处理相应的钩子



867997b1-26f7-40fb-b4b2-c911306bdda4.jpg


通俗点说就是可以在构建流程中插入我们的自定义的行为,至于在哪个阶段插入或者做什么事情都可以通过 Webpack Plugin 来完成。


另外官网还提到,想要弄清楚 Webpack 插件 得先弄清楚这三个东西:tapablecompilercompilation对象,先快点花几分钟去了解一下,争取在中午吃饭前搞定!


27df2766-960f-4c9c-823c-46d62092bdd9.jpg


💁 tapable的使用姿势


tapable是一个类似于 Node.js 中的 EventEmitter 的库,但它更专注于自定义事件的触发和处理。通过 tapable 我们可以注册自定义事件,然后在适当的时机去触发执行。


e9bb13dc-a5b9-4e89-a258-8001c80d7558.jpg


举个例子🌰:类比到 VueReact 框架中的生命周期函数,它们就是到了固定的时间节点就执行对应的生命周期,tapable 做的事情就和这个差不多,可以先注册一系列的生命周期函数,然后在合适的时间点执行。


概念了解的差不多了,接下来去实操一下。初始化项目,安装依赖:


npm init //初始化项目
yarn add tapable -D //安装依赖

安装完项目依赖后,根据以下目录结构来添加对应的目录和文件:


├── dist # 打包输出目录
├── node_modules
├── package-lock.json
├── package.json
└── src # 源码目录
└── index.js # 入口文件

根据官方介绍,tapable 使用起来还是挺简单的,只需三步:



  1. 实例化钩子函数( tapable会暴露出各种各样的 hook,这里以同步钩子Synchook为例)

  2. 注册事件

  3. 触发事件


src/index.js


const { SyncHook } = require("tapable"); //这是一个同步钩子

//第一步:实例化钩子函数,可以在这里定义形参
const syncHook = new SyncHook(["author"]);

//第二步:注册事件1
syncHook.tap("监听器1", (name) => {
console.log("监听器1:", name);
});

//第二步:注册事件2
syncHook.tap("监听器2", (name) => {
console.log("监听器2", name);
});

//第三步:触发事件
syncHook.call("不要秃头啊");

运行 node ./src/index.js,拿到执行结果:


监听器1 不要秃头啊
监听器2 不要秃头啊

63c7e8b4-11bd-4cc5-a96d-be8bcc486365.jpg


从上面的例子中可以看出 tapable 采用的是发布订阅模式通过 tap 函数注册监听函数,然后通过 call 函数按顺序执行之前注册的函数


大致原理:


class SyncHook {
constructor() {
this.taps = [];
}

//注册监听函数,这里的name其实没啥用
tap(name, fn) {
this.taps.push({ name, fn });
}

//执行函数
call(...args) {
this.taps.forEach((tap) => tap.fn(...args));
}
}

另外,tapable 中不仅有 Synchook,还有其他类型的 hook:


image.png


image.png


这里详细说一下这几个类型的概念:



  • Basic(基本的):执行每一个事件函数,不关心函数的返回值

  • Waterfall(瀑布式的):如果前一个事件函数的结果 result !== undefined,则 result 会作为后一个事件函数的第一个参数(也就是上一个函数的执行结果会成为下一个函数的参数)

  • Bail(保险的):执行每一个事件函数,遇到第一个结果 result !== undefined 则返回,不再继续执行(也就是只要其中一个有返回了,后面的就不执行了)

  • Loop(循环的):不停的循环执行事件函数,直到所有函数结果 result === undefined


大家也不用死记硬背,遇到相关的需求时查文档就好了。


在上面的例子中我们用的SyncHook,它就是一个同步的钩子。又因为并不关心返回值,所以也算是一个基本类型的 hook。


0564085f-3d25-4be0-aeed-6e24c6205762.jpg


👫 tabpable 和 Webpack 的关系


要说它们俩的关系,可真有点像男女朋友之间的难舍难分......


5be98b8a-f500-4f28-8240-a69e567e71b1.jpg


Webpack 本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,比如



  • 在打包前需要处理用户传过来的参数,判断是采用单入口还是多入口打包,就是通过 EntryOptionPlugin 插件来做的

  • 在打包过程中,需要知道采用哪种读文件的方式就是通过 NodeEnvironmentPlugin 插件来做的

  • 在打包完成后,需要先清空 dist 文件夹,就是通过 CleanWebpackPlugin 插件来完成的

  • ......


而实现这一切的核心就是 tapable。Webpack 内部通过 tapable 会提前定义好一系列不同阶段的 hook ,然后在固定的时间点去执行(触发 call 函数)。而插件要做的就是通过 tap 函数注册自定义事件,从而让其控制在 Webapack 事件流上运行:


image.png


继续拿 Vue 和 React 举例,就好像框架内部定义了一系列的生命周期,而我们要做的就是在需要的时候定义好这些生命周期函数就好。


9fca05f9-1d48-436a-bafd-f45d808a3b49.jpg


🏊‍♀️ Compiler 和 Compilation 


在插件开发中还有两个很重要的资源:compilercompilation对象。理解它们是扩展 Webpack 引擎的第一步。



  • compiler 对象代表了完整的 webpack 生命周期。这个对象在启动 Webpack 时被一次性建立,并配置好所有可操作的设置,包括 optionsloaderplugin。当在 Webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用。可以使用它来访问 Webpack 的主环境。

  • compilation 对象代表了一次资源版本构建。当运行 Webpack 开发环境中间件( webpack-dev-server)时,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调,以供插件做自定义处理时选择使用。


5dd8339b-4ebd-4007-9e14-f1ca58c17d53.jpg


还是拿 React 框架举例子...... React:


590d1a42-2273-41c5-8ac2-d9e9ed90cf76.jpg


compiler比喻成 React 组件,在 React 组件中有一系列的生命周期函数(componentDidMount()render()componentDidUpdate()等等),这些钩子函数都可以在组件中被定义。


compilation比喻成 componentDidUpdate()componentDidUpdate()只是组件中的某一个钩子,它专门负责重复渲染的工作(compilation只是compiler中某一阶段的 hook ,主要负责对模块资源的处理,只不过它的工作更加细化,在它内部还有一些子生命周期函数)。


如果还是不理解,这里画个图帮助大家理解:


image.png


图上的 entryOptionafterPluginsbeforeRuncompilation 等均是构建过程中的生命周期,而 compilation 只是该过程中的其中一部分,它主要负责对模块资源的处理。在 compilation 内部也有自己的一系列生命周期,例如图中的 buildModulefinishModules 等。


cf8d3c96-74d9-434b-a27d-060dc5244311.jpg


至于为什么要这么处理,原因当然是为了解耦!!!


比如当我们启动 Webpack 的 watch模式,当文件模块发生变化时会重新进行编译,这个时候并不需要每次都重新创建 compiler 实例,只需要重新创建一个 compilation 来记录编译信息即可


另外,图中并没有将全部的 hook 展示出来,更多的hook可以自行查阅官网:compiler上挂载的 hookcompilation上挂载的 hook


ef377b09-4933-4828-9ce1-6bd2b2536e6f.jpg


🏃 如何编写插件


说了这么多,到底要怎么写一个 Webpack 插件?小舒还等着我呢!!!


bb9b6a98-7058-48fc-9ec5-bc84d7bcf8f2.jpg


刚才知道了在 Webpack 中的 compilercompilation 对象上挂载着一系列的生命周期 hook ,那接下来应该怎么在这些生命周期中注册自定义事件呢?


webpack 插件:


cb597c1b-a21a-4b8d-9fa8-b129380a3b9e.jpg


Webpack Plugin 其实就是一个普通的函数,在该函数中需要我们定制一个 apply 方法。当 Webpack 内部进行插件挂载时会执行 apply 函数。我们可以在 apply 方法中订阅各种生命周期钩子,当到达对应的时间点时就会执行。


bb740142-acbd-49da-898c-e0e765ec6552.jpg


这里可能有同学要问了,为什么非要定制一个apply方法?为什么不是其他的方法?


在这里我贴下官方源码:github.com/webpack/web…
大家一看便一目了然:


if (options.plugins && Array.isArray(options.plugins)) {
//这里的options.plugins就是webpack.config.js中的plugins
for (const plugin of options.plugins) {
plugin.apply(compiler); //执行插件的apply方法
}
}

这里官方写死了执行插件中的 apply 方法....,并没有什么很高深的原因.....


68456079-6083-46b1-9248-97f943d7d06d.jpg


那我们就按照规范写一个简易版的插件赶紧来练练手:在构建完成后打印日志。


首先我们需要知道构建完成后对应的的生命周期是哪个,通过 查阅文档得知是 complier 中的done 这个 hook :


image.png


接下来创建一个新项目验证我们的想法,时间不早了!小舒现在肯定很着急!!!


安装依赖:


npm init //初始化项目
yarn add webpack webpack-cli -D

安装完项目依赖后,根据以下目录结构来添加对应的目录和文件:


├── dist # 打包输出目录
├── plugins # 自定义插件文件夹
│ └── demo-plugin.js
├── node_modules
├── package-lock.json
├── package.json
├── src # 源码目录
│ └── index.js # 入口文件
└── webpack.config.js # webpack配置文件

demo-plugin.js


class DemoPlugin {
apply(compiler) {
//在done(构建完成后执行)这个hook上注册自定义事件
compiler.hooks.done.tap("DemoPlugin", () => {
console.log("DemoPlugin:编译结束了");
});
}
}

module.exports = DemoPlugin;

package.json


{
"name": "webpack-plugin",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"tapable": "^2.2.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}

src/index.js


console.log("author:""不要秃头啊");

webpack.config.js


const DemoPlugin = require("./plugins/demo-plugin");

module.exports = {
mode: "development",
entry: "./src/index.js",
devtool: false,
plugins: [new DemoPlugin()],
};

运行 yarn build,运行结果:


yarn build
$ webpack
DemoPlugin:编译结束了
asset main.js 643 bytes [emitted] (name: main)
./src/index.js 476 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 71 ms
Done in 0.64s.

db4cafab-ece6-4bbb-8103-79e4589f0ebe.png


💘 开始我的表白之路....


好了,终于搞清楚怎么写插件了!!!


39d696c9-90ee-4544-9999-c056db959cfc.jpg


直接把刚才学的的demo插件改造一下:


class DonePlugin {
apply(compiler) {
//在done(构建完成后执行)这个hook上注册自定义事件
compiler.hooks.done.tap("DonePlugin", () => {
console.log(
"小姐姐,我知道此刻你很意外。但不知道怎么回事,我看见你的第一眼就沦陷了...可以给我一个多了解了解你的机会吗? ————来自一个热心帮你解决问题的人"
);
});
}
}
module.exports = DonePlugin;

正准备提交代码,思来想去,直接叫小姐姐好像不太好吧?是不是显得我很轻浮?


再说了,小舒怎么知道我在跟她说呢?


想了一会,不如直接用她的 git 账号名吧(当时要是脑子不抽风就好了......😭),于是改成动态获取git 用户名,为了显眼甚至还加了点颜色:


const chalk = require("chalk");//给日志加颜色插件
const execSync = require("child_process").execSync;

const error = chalk.bold.red; //红色日志
const warning = chalk.keyword("orange"); //橘色日志

class DonePlugin {
apply(compiler) {
compiler.hooks.done.tap("DonePlugin", () => {
//获取git账号信息的username
let name = execSync("git config user.name").toString().trim();

console.log(
error(`${name},`),
warning(
"我知道此刻你很意外。但不知道怎么回事,我看见你的第一眼就沦陷了...可以给我一个多了解了解你的机会吗? ————来自一个热心帮你解决问题的人"
)
);
});
}
}

module.exports = DonePlugin;

大致效果就是这样...


image.png


98936199-cfea-4dce-afd1-a25b2a8b1f58.jpg


😳 等待回应


把这一切都准备妥当后,剩下的就交给天意了。


结果是左等右等,到了下午四点迟迟没有等到小舒的回应......


072c64a4-ff38-4a44-83f0-40c754980149.jpg


难道是没看到吗?不应该啊,日志还加了颜色,很明显了!!!


莫非是女孩子太含蓄了,害羞了?


不行,我得主动出击!!


image.png


乘兴而去,败兴而归!!!还在同事圈里闹了个笑话!!!


但是为了下半生,豁出去了!!!


经过我的一番解释,小舒总算相信了我说的话,而我也赶紧去优化了一下代码......


自此以后,每天一句不重样的小情话,小舒甚至还和我互动了起来:


image.png


就这样,我们慢慢的发展成了无话不谈的男女朋友关系,直到前两天甚至还过了1000天纪念日,还给小舒送了点小礼物,虽然被骂直男...


image.png


接下来也该考虑结婚了!!!


“滴~~~,滴~~~,滴~~~,不要命了!等个红绿灯都能睡着?“


“喂,醒醒,醒醒。我的尿黄,让我去渍醒他!”


只听旁边有人说到......


原来只是黄粱一梦。


38d25691-8bdb-4d7b-9b5c-adb0b090c206.jpg


💔 最后的结局


最后,给大家一个忠告:追女孩子一定不要这样, 一定要舍得送花,一定要懂浪漫!!!没有哪个女孩子会因为你写个插件就跟你在一起的!!!


我决定勇敢的试一试:


image.png


卒。


作者:不要秃头啊
来源:juejin.cn/post/7160467329334607908
收起阅读 »

为什么大厂前端监控都在用GIF做埋点?

web
什么是前端监控? 它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,为产品优化指明方向,为用户提供更加精确、完善的服务。 前端监控 一般来讲一个成熟的产品,运营与产品团队需要关注用户在产品内的行为记录,通过用户的行为记录来...
继续阅读 »

什么是前端监控?


它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,为产品优化指明方向,为用户提供更加精确、完善的服务。


前端监控


一般来讲一个成熟的产品,运营与产品团队需要关注用户在产品内的行为记录,通过用户的行为记录来优化产品,研发与测试团队则需要关注产品的性能以及异常,确保产品的性能体验以及安全迭代。


所以前端监控一般也分为三大类:


数据监控(监控用户行为)



  • PV/UV: PV(page view):即页面浏览量或点击量;UV:指访问某个站点或点击某条新闻的不同 IP 地址的人数

  • 用户在每一个页面的停留时间

  • 用户通过什么入口来访问该网页

  • 用户在相应的页面中触发的行为,等...


统计这些数据是有意义的,比如我们知道了用户来源的渠道,可以促进产品的推广,知道用户在每一个页面停留的时间,可以针对停留较长的页面,增加广告推送等等。


性能监控(监控页面性能)



  • 不同用户,不同机型和不同系统下的首屏加载时间

  • 白屏时间

  • http 等请求的响应时间

  • 静态资源整体下载时间

  • 页面渲染时间

  • 页面交互动画完成时间,等...


这些性能监控的结果,可以展示前端性能的好坏,根据性能监测的结果可以进一步的去优化前端性能,尽可能的提高用户体验。


异常监控(监控产品、系统异常)


及时的上报异常情况,可以避免线上故障的发上。虽然大部分异常可以通过 try catch 的方式捕获,但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括:



  • Javascript 的异常监控

  • 样式丢失的异常监控


埋点上报


OK,上面我们说到了前端监控的三个分类,了解了一个产品需要监控哪些内容以及为什么需要监控这些内容,那么我们应该怎么实现前端监控呢?


实现前端监控,第一步肯定是将我们要监控的事项(数据)给收集起来,再提交给后台进行入库,最后再给数据分析组进行数据分析,最后处理好的数据再同步给运营或者是产品。数据收集的丰富性和准确性会直接影响到我们做前端监控的质量,因为我们会以此为基础,为产品的未来发展指引方向。


现在常见的埋点上报方法有三种:手动埋点、可视化埋点、无埋点


手动埋点


手动埋点,也叫代码埋点,即纯手动写代码,调用埋点 SDK 的函数,在需要埋点的业务逻辑功能位置调用接口,上报埋点数据,像**[友盟][百度统计]**等第三方数据统计服务商大都采用这种方案。手动埋点让使用者可以方便地设置自定义属性、自定义事件;所以当你需要深入下钻,并精细化自定义分析时,比较适合使用手动埋点。


手动埋点的缺陷就是,项目工程量大,需要埋点的位置太多,而且需要产品开发运营之间相互反复沟通,容易出现手动差错,如果错误,重新埋点的成本也很高。


可视化埋点


通过可视化交互的手段,代替上述的代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。


可视化埋点的缺陷就是可以埋点的控件有限,不能手动定制。


无埋点


无埋点则是前端自动采集全部事件,上报埋点数据,由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本,缺点是流量和采集的数据过于庞大,服务器性能压力山大。


为什么都用GIF来做埋点?


发现过程


首先说一下我是怎么发现的,前一段时间,产品提了个需求,说我们现在的书籍曝光上报规范并不是他们想要的数据,并且以后所有页面的书籍上报都统一成最新规范。


曝光规范:



  • 书籍出现在可视区并停留1秒,算作有效曝光

  • 书籍不能重复曝光,假如它一直在可视区滚动时只能上报一次

  • 当它移出可视区后再回到可视区,再按第一点进行曝光


OK,既然要所有页面统一,那就只能封装成通用库来使用了,这里实现逻辑就不贴了,想看的私聊我发你,主要的难点就是停留时长计算,以及曝光标记。


const exposeReportClass = new exposeReport({
scrollDom: "", // 滚动容器,建议指定一个滚动容器,不传默认为window
watchDom: ".bookitem", // 监听的dom,建议使用class类,标签也支持
time: 1000 // 停留有效时长ms
});
// 提供两个上报方法
exposeReportClass.didReport(()=>{
// 手动上报
//callback
})
exposeReportClass.scrollReport(()=>{
// 滚动动上报
//callback
})
//

具体业务逻辑之需要放在对应的callback里面,而上报逻辑开发者无需考虑,因为我底层已经统一处理好了。


然后我再测试的时候就发现,上报发的请求居然是通过图片发起的,并不是我们认为的接口上报。


report.png


然后我去查了下资料,发现很多大厂的上报都是这么干的!


使用GIF上报的原因


向服务器端上报数据,可以通过请求接口,请求普通文件,或者请求图片资源的方式进行。只要能上报数据,无论是请求GIF文件还是请求js文件或者是调用页面接口,服务器端其实并不关心具体的上报方式。那为什么所有系统都统一使用了请求GIF图片的方式上报数据呢?



  • 防止跨域


一般而言,打点域名都不是当前域名,所以所有的接口请求都会构成跨域。而跨域请求很容易出现由于配置不当被浏览器拦截并报错,这是不能接受的。但图片的src属性并不会跨域,并且同样可以发起请求。(排除接口上报)



  • 防止阻塞页面加载,影响用户体验


通常,创建资源节点后只有将对象注入到浏览器DOM树后,浏览器才会实际发送资源请求。反复操作DOM不仅会引发性能问题,而且载入js/css资源还会阻塞页面渲染,影响用户体验。


但是图片请求例外。构造图片打点不仅不用插入DOM,只要在js中new出Image对象就能发起请求,而且还没有阻塞问题,在没有js的浏览器环境中也能通过img标签正常打点,这是其他类型的资源请求所做不到的。(排除文件方式)



  • 相比PNG/JPG,GIF的体积最小


最小的BMP文件需要74个字节,PNG需要67个字节,而合法的GIF,只需要43个字节。


同样的响应,GIF可以比BMP节约41%的流量,比PNG节约35%的流量。


并且大多采用的是1*1像素的透明GIF来上报


1x1像素是最小的合法图片。而且,因为是通过图片打点,所以图片最好是透明的,这样一来不会影响页面本身展示效果,二者表示图片透明只要使用一个二进制位标记图片是透明色即可,不用存储色彩空间数据,可以节约体积。


作者:前端南玖
来源:juejin.cn/post/7065123244881215518
收起阅读 »

我是埋点SDK,看我如何让甲方爸爸的页面卡顿10s+

web
背景音: Sir,收到線報啦,今日喺生產環境用戶訪問網頁嘅時候,竟然感受到咁卡卡地!完全冇得爽啊!已經導致唔少用戶投訴。根據推斷,昨日更新咗埋點SDK... 昨日,一位前端程序员在优化公司的埋点SDK使用方式后,出了一些小插曲。不知道是什么原因,更新之后就...
继续阅读 »

背景音:



Sir,收到線報啦,今日喺生產環境用戶訪問網頁嘅時候,竟然感受到咁卡卡地!完全冇得爽啊!已經導致唔少用戶投訴。根據推斷,昨日更新咗埋點SDK...



昨日,一位前端程序员在优化公司的埋点SDK使用方式后,出了一些小插曲。不知道是什么原因,更新之后就开始有用户反馈说网页卡卡地,走得比蜗牛还慢。


六点二十分,第一个用户提交了投诉工单,但这只是个开始。


今天早上九点十分,公司的运维团队已经接到了一大堆反馈工单,许多用户都遭受到了同样的问题。这是一个巨大的问题,一旦得不到解决,可能导致数万的用户受到影响。运维人员立即开始了排查工作,想要找出问题所在。


经过一个小时的紧急排查,他们终于想到了昨日的这名前端程序员,一经沟通发现是SDK版本更新引起的问题。在新的版本中,有一些不稳定的代码导致了性能问题。


然而,这不仅仅是个技术问题,因为接下来,他们要开始着手写事故报告,准备给上层领导交代。


接下来,进入正题:


一、问题排查定位


根据更新的版本体量,可以缩小和快速定位问题源于新引入埋点SDK



  1. 打开 开发者工具-性能分析,开始记录

  2. 刷新页面,重现问题

  3. 停止记录,排查分析性能问题


性能分析


如上图,按照耗时排序,可以快速定位找到对应的代码问题。


首先把编译压缩后的代码整理一下,接下来,深入代码一探究竟。


代码耗时.png


⏸️暂停一下,不妨猜猜看这里是为了干嘛?


🍵喝口茶,让我们沿着事件路径,反向继续摸清它的意图吧。


image.png


这里列举了231个字体名称,调用上文的 detect() 来分析。


⏸️暂停一下,那么这个操作为什么会耗时且阻塞页面渲染呢?


...


休息一下,让我们去看看这段代码的来龙去脉。


上面我们大概猜到代码是用于获取用户浏览器字体,那就简单检索一下 js get browser font


搜索结果.png


代码示例.png


证据确凿,错在对岸。


二、解决问题


相信大家也看出来了,我不是埋点SDK,我也不是甲方爸爸,我只能是一位前端开发。


联系反馈至SDK方,需要走工单,流程,而这一切要多少时间?


我唔知啊!领导也不接受啊!


👐没办法,只能自己缝补缝补了。


那么如何解决呢?



  1. 尝试修复 getFonts detect 字体检测逻辑,避免多次重绘。

  2. 缩短待检测字体目录。


人生苦短,我选方案3,直接修改返回值,跳过检测


getFonts () { return 'custom_font' }

那么让我们继续搬砖吧。



  1. 寻根


image.png


首先找到 SDK 加载对应 JS 的加载方式,看看能不能动点手脚。
这里可以看到,是采用很常见的 通过 appendScript loadJs 的方案,那么就可以复写拦截一下 appendChild 函数。



  1. 正源


通过拦截 appendChild,将SDK加载的JS改为加载修复后的JS文件。


核心代码如下:


var tempCAppend = document.head.appendChild
document.head.appendChild = function (t) {
if (t.tagName === 'SCRIPT' && t.src.includes('xxx.js')) {
t.src = 'custom_fix_xxx.js'
}
return tempCAppend.bind(this)(t)
}

三、后续


这件事情发生在21年底,今天为什么拿出来分享一下呢?


近期排查 qiankun 部分子应用路由加载异常的时候,定位到与 document.head.appendChild 被复写有关,于是去看SDK方是否修复,结果纹丝未动....


结合近期境遇,不得不感慨,业务能不能活下去,真的和代码、技术什么的毫无关系。


其他


❄️下雪了,简单看了几眼文心一言的发布会,更凉了。


作者:夏无凉风冬有雪
来源:juejin.cn/post/7211020974023868475
收起阅读 »

这几个群,程序员可千万不要进!

震惊!某摸鱼网站惊现肾结石俱乐部! (图源V2EX) 无关地域、无关性别,各位程序员们在肾结石这个病上面有着出奇一致的反应。诸如此类的各种职业病在我们的生活中更是十分常见。 也可能是到年纪了,在办公室里放眼望去,一群处于亚健康状态的同事们格外显眼:手上戴着护...
继续阅读 »

震惊!某摸鱼网站惊现肾结石俱乐部!
在这里插入图片描述


(图源V2EX)


无关地域、无关性别,各位程序员们在肾结石这个病上面有着出奇一致的反应。诸如此类的各种职业病在我们的生活中更是十分常见。


也可能是到年纪了,在办公室里放眼望去,一群处于亚健康状态的同事们格外显眼:手上戴着护腕的,脖子上贴着膏药的,闲着没事锤两下后背的,甚至还有站着办公时不时嘶哈两声的……


悄悄问了那位站着办公的同事,结果平白遭受了一个白眼:你见过花季少女割痔疮的吗?


没有,不过现在见到了。


不愧是万物生长的季节,那些困扰程序员们的各类职业病也开始逐渐冒头,像“肾结石俱乐部”这样的群,程序员们也许建了成百上千个,不信往下看看?


1、腱鞘炎相亲相爱一家人


在这里插入图片描述


专家建议


腱鞘炎对程序员群体来说已成为一种常见疾病,虽然不会对我们的生命构成威胁,但都或多或少地影响了我们的生活质量:


手部运动不灵活,手腕无力太软弱。
疼痛一来闹心窝,让人意乱难工作。


想知道自己有没有腱鞘炎,分享给大家一个小方法:
在这里插入图片描述


腱鞘炎保养可以从这几个方面入手:


休息:保证手腕足够的休息时间,比如每30分钟活动下手腕,避免过多接触冷水。
热敷:温热水泡手,或是热水袋热敷,每天2次,每次30~45分钟。
按摩:对侧拇指沿手指掌面按摩,按摩范围包括整个手掌指背以及手指的掌侧。


如果腱鞘炎比较严重,需要配合一些药物治疗、局部封闭注射治疗或手术治疗,具体需咨询医生。对于还没有腱鞘炎的小伙伴,以下几个手部操送给你,开启腱鞘炎预防之旅吧!


在这里插入图片描述


2、颈椎患者大本营


在这里插入图片描述


专家建议


其实随着与手机、电脑相处的时间越来越长,颈椎病的发病人群也逐渐年轻化。当我们在低头玩手机时,脊椎正在承受原本无法承受之重。


举个例子:一个人的头部重约5kg,当我们前倾看手机或低头时,颈部的负重就会大大增加。
在这里插入图片描述


看到这里,请大家立刻挺胸抬头并阅读、实践以下内容,减轻颈椎负担!
在这里插入图片描述


3、干眼症娱乐部


在这里插入图片描述


说起干眼症,大多数程序员都不陌生。引起干眼症的原因比较多,比如过劳致“干”、药物致“干”环境致“干”等等……干眼症很难根治,只能靠日常保养加以改善,从这个意义上讲,干眼症确实可以称为“绝症”。来听听专家的建议吧!


专家建议


1)调位置


电脑显示器的位置和字体大小,让眼睛距离屏幕50-60厘米,屏幕中心在视线水平或稍向下10-15厘米。
在这里插入图片描述


2)多眨眼


多眨眼可以放松睫状肌,滋润眼球。建议每分钟眨眼次数 >15-20次。


3)少看屏幕,多远眺


用电脑或看手机都要注意时间,避免长时间盯着屏幕。参考20原则:用眼20分钟可以盯着20米以外的地方,休息至少20秒。


4)其他小窍门



  • 使用蒸汽眼罩或热毛巾热敷,每天1-2次,每次5-10分钟;

  • 在医生的建议下使用人工泪液;

  • 佩戴隐形眼镜每天应控制在8小时以内,不超过12小时;

  • 使用空气加湿器,让空气湿度适宜;

  • 增加户外运动。


不说了,眼睛发干,需要摸会儿鱼休息一下(误)~


4、防脱治疗所


身边的程序员们说:一个程序员一生能写的程序行数是有限的,写一行代码就会掉一根头发,直到青丝落尽,就是这个程序员隐退江湖的时候。


当然,这只是玩笑话。引起脱发的原因可能是遗传、压力大、熬夜通宵、 频繁烫染或饮食不均衡等。怎么确定自己的史密斯夫妇还有约翰逊家族们安全,两个步骤测试一下:


在这里插入图片描述


保护我们的史密斯夫妇还有约翰逊家族们有这三个妙招:


在这里插入图片描述在这里插入图片描述


这些我们眼中的“小病小灾”就像技术债务,短期内选择了忽视,累计到一定程度就会变成身体里的“定时炸弹”。所以,当我们开始长时间的久坐、低头盯手机,当我们压力变大,习惯于加班、熬夜、饮食不规律……更需要停下来想想。



在非洲有个部落
人如果连续赶路三天
就一定要停下来休息一天
因为人们害怕灵魂跟不上自己的脚步
……
——阮靖《风会记得你走过的路》



如果一直忙着赶路,也要记得停下休息,别让健康跟不上我们的脚步。


作者:禅道程序猿
链接:https://juejin.cn/post/7208817601841250360
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

“ChatGPT 们” 所需算力真是“贵滴夸张”!

先抛几个数据: 当下,每天有超过 2 亿的人在疯狂地抛出各式各样的问题请求 ChatGPT 回复 如果要完成这 2 亿+ 的咨询量,初始投入需要 3 万+ 块英伟达 A100 GPU 来计算 而 A100 是当下这个星球拥有最强 AI 算力的芯片,买一块至少要...
继续阅读 »

先抛几个数据:


当下,每天有超过 2 亿的人在疯狂地抛出各式各样的问题请求 ChatGPT 回复


如果要完成这 2 亿+ 的咨询量,初始投入需要 3 万+ 块英伟达 A100 GPU 来计算


而 A100 是当下这个星球拥有最强 AI 算力的芯片,买一块至少要 7W+ RMB💴


image.png


意思就是:光计算这些有意义/无意义的问题,就要花费:21 亿+ RMB 💴


这还不算每天的电费/维护费等,众所周知,这种庞大计算类似矿机,很费电


一块 A100,功率 400W,30000 块 A100 ,就是 12_000_000 W,是 12 MW(12 个 100 万瓦)


image.png


目前,“GPT们”就像是井喷一样出现了各类产品,先不管算的结果怎么样,大家先支棱起来、先算起来


有预测:十年后,“GPT们” 一天所需算力的生产功率相当于半个核电站产生的功率,这是离谱且夸张的!全球算力几乎快要无法满足“GPT们”了


image.png


所以,以 ChatGPTPlus(每月20刀) 为代表的 “GPT们” 很贵,因为它本来算力消费就很贵,“用 GPT 编程比招一个普通程序员更贵”的段子并非玩笑。


所以,为什么算力如此重要?为什么微软要和韩国SK集团布局自建核电站?为什么咱们要强调西数东算、云计算等等?从这里也能窥见一斑。


不夸张的说,在未来,国力强弱一方面将通过算力强弱来体现。


image.png


2016年6月的不同国家之间的超级计算机500强的分布


image.png


超级计算机模拟风洞实验


小思考:在未来,算力的瓶颈将如何突破?


—— 目前芯片仍处在传统冯·诺伊曼架构之下,存储和计算区域是分离的,搬运数据“从存储到计算”花费巨大的功耗,如果能实现“存算一体”(就像大脑一样)将提升算力进入新的量级。


所以“存算一体”可能是个方向~


作者:掘金安东尼
链接:https://juejin.cn/post/7210028417617395772
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

在国内如何不用梯子就使用ChatGPT

首先看效果图 如何国内访问 由于OpenAI官方服务器在国内被限制,所以想要在国内直接访问ChatGPT并不容易。但是,今天格子衫将介绍一种无需使用梯子的方法,就可以通过API接口访问ChatGPT。 要使用这种方法,您需要获取一个ApiKey。下面是如何...
继续阅读 »

首先看效果图


1678790956947.jpg


1678790977126.jpg


如何国内访问


由于OpenAI官方服务器在国内被限制,所以想要在国内直接访问ChatGPT并不容易。但是,今天格子衫将介绍一种无需使用梯子的方法,就可以通过API接口访问ChatGPT。


要使用这种方法,您需要获取一个ApiKey。下面是如何获取ApiKey的步骤:


获取 Api Key


首先,您需要注册一个OpenAI的账号(文末有其他方式)。



  1. 使用浏览器打开Account API Keys - OpenAI API,如果没有登录,会跳转到登录页面,按照页面登录即可。

  2. 登录完成以后,再次访问刚才的 Account API Keys - OpenAI API,就可以获取ApiKey了,按照下图操作即可获取ApiKey。


Create api key


点击 Create new secret key,会生成如下图所示的秘钥。


请点击右侧的“复制”按钮将ApiKey复制到剪贴板中,然后立即将它保存到一个安全的地方。这样,即使您的剪贴板内容被覆盖或丢失,您仍然可以访问到ApiKey。你应该跟保存密码一样保存它。


Create api key success


**注意:**ApiKey只会显示一次。如果您不小心丢失了它,您需要重新生成一个ApiKey。这可能需要您再次使用梯子访问OpenAI官方服务器,有点麻烦。


接下来,拿着这个 ApiKey,去访问国内版ChatGPT,把ApiKey输入到下图所示的指定位置;


image-20230312143953871


然后无需梯子就可以直接访问 ChatGPT了,直接在聊天窗口输入即可,可以和ChatGPT进行对话了!如下图所示:


image-20230312144941252


感兴趣的小伙伴们快行动起来吧!


地址是 chatv.fu520.top/


作者:智慧的格子衫
链接:https://juejin.cn/post/7210320199689764924
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

我为什么用TheRouter而不玩Arouter了呢

TheRouter 简介   TheRouter是货拉拉开源的路由框架,针对Android平台实现组件化、跨模块调用、动态化等功能的集成框架。 TheRouter 掘金:juejin.cn/post/713971… Github: github.com/Huo...
继续阅读 »

TheRouter 简介


  TheRouter是货拉拉开源的路由框架,针对Android平台实现组件化、跨模块调用、动态化等功能的集成框架。

TheRouter 掘金:juejin.cn/post/713971…

Github: github.com/HuolalaTech…

官网:therouter.cn/


为什么要用TheRouter


功能TheRouterARouterWMRouter
Fragment路由✔️✔️✔️
支持依赖注入✔️✔️✔️
加载路由表无运行时扫描无反射运行时扫描dex反射实例类性能损耗大运行时读文件反射实例类性能损耗中
注解正则表达式✔️✖️✔️
Activity指定拦截器✔️(四大拦截器可根据业务定制)✖️✔️
导出路由文档✔️(路由文档支持添加注释描述)✔️✖️
动态注册路由信息✔️✔️✖️
APT支持增量编译✔️✔️(开启文档生成则无法增量编译)✖️
plugin支持增量编译✔️✖️✖️
多 Path 对应同一页面(低成本实现双端path统一)✔️✖️✖️
远端路由表下发✔️✖️✖️
支持单模块独立初始化✔️✖️✖️
支持使用路由打开第三方库页面✔️✖️✖️


上图是从官方获取的介绍,结合自己使用,从以下几点介绍他的好处



  • 使用简易

  • 针对后台startActivity的兼容处理

  • 直接获取Intent对象

  • 动态下发路由表的骚操作

  • 和Arouter性能相比


- 使用简易


  针对刚入手的同学,很多同学其实需要的功能不多,主要就是跳转页面,原先使用过的Arouter,也能快速适应。想深入学习更多的同学可以再去官网或者官方掘金see see


// 简单的传参和路由跳转
TheRouter.build("test://webview/home")
.withString("url", "http://www.baidu.com")
.navigation(act)

// 如果要打开的是fragment,需要使用 .createFragment();

- 针对后台startActivity的兼容处理



Android 10 (级别 29) 及更高版本对后台应用可启动 Activity 的时间施加限制。这些限制有助于最大限度地减少对用户造成的中断(可以更省电),并且可以让用户更好地控制其屏幕上显示的内容。



  官方针对Android10以及以上版本调用startActivity的限制,也就是在后台调用该方法是无法跳转的,TheRoute提供兼容处理,先暂停跳转,等APP重新启动了再继续跳转。


// 以下代码只是功能介绍,大家按需自取
// 后台跳转页面
fun goBackActivity(activity: Activity) {
val navigator: Navigator =
TheRouter.build("test://webview/home")
.withString("paramStr", paramStr)
.withInt("paramInt", 0)
if (AndroidVersion.hasQ() && !AppUtils.isAppForeground()) {
// pending() 会标记存入集合LinkedList
navigator.pending().navigation(activity)
} else {
navigator.navigation(activity)
}
}

// Application监听
class ApplicationObserver : DefaultLifecycleObserver {

override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// 应用重进onResume,把原先pending()存入集合的navigation,重新取出全部执行
// sendPendingNavigator是Navigator的顶级函数
sendPendingNavigator()
}
}

- 直接获取Intent对象


  大部分的路由框架都不提供直接返回Intent,但是有时候我们又只需要对应其他模块的intent对象并不需要跳转,例如构建系统通知栏的点击需要传入PendingIntent,可能需要通过Intent对象构建。


// 获取intent
val intent = TheRouter.build("test://login/hello").createIntent(activity)

- 动态下发路由表的『骚操作』


   为什么我个人说这是『骚操作』呢?我们以前写一个页面,页面崩溃了,那么我们就想办法修复,让用户先忍忍。可是用你这个APP的人真的能忍受你的崩溃吗?答案是不能的,因此我们想尽各种办法例如热修复等等,但是还是有没有经过热修复的人崩溃了,还是大面积的崩溃。


  那动态下发路由表,让这个崩溃页面的路由改下其他页面,例如这个崩溃页面的路由跳转H5页面,告知用户正在紧急修复,这样的过渡会比直接崩溃使用感受好。


  当然不止这个场景,再举例一个我们最常见的,例如A页面忘了给相机权限,然后上线了跳转A页面的时候才发现少了这个权限,咋整?重发版呗。但是如果用TheRouter,可以在原工程预留一个过渡页面,我们动态下发路由表,跳到这个过渡页获取权限了再重新跳转原来A页面。


// 获取远端的路由map
/**
[
{
"path""test://home/webview/pre",
"action""test://action/start_activity?path=test://app/alert?type=-1&permissionJson={"android.permission.READ_PHONE_STATE": "需要获取您的手机网络状态"}",
"description""",
"className""com.test.main.PreWebViewV2Activity",
"params": {
}
}
]
// action说明: 可以写一个test://app/alter权限弹窗页面,传入permissionJson参数授权,授权成功之后再重新执行原来的路由地址
*/
fun getServiceRouterMap() {
try {
val gson = "注释提供的格式"
if (gson.isNullOrEmpty()) {
return
}
Kv.putEnv(LOCAL_ROUTER_MAP, gson) // 本地存储,方便下次取出
mRouteItem = GsonUtils.fromJson(gson, object : TypeToken?>() {}.type)
} catch (e: Exception) {
Log.d("updateRouterMap", e?.toString())
}
}

// 把远端路由遍历添加到本地
fun addMdapRouteMap() {
Log.d("HllMarsConfigTask", "asyncInitRouteMap")
var list = mRouteItem
if (list != null && list.size > 0) {
// 建议远端下发路由表差异部分,用远端包覆盖本地更合理
addRouteMap(list) // TheRouter库RouteMap.kt提供顶级函数
}
}

// 以下是TheRouter库RouteMap.kt类
// 具体实现:如何把远端路由添加到本地
@Synchronized
fun addRouteMap(routeItemArray: Collection?) {
if (routeItemArray != null && !routeItemArray.isEmpty()) {
for (entity in routeItemArray) {
addRouteItem(entity)
}
}
}

@Synchronized
fun addRouteItem(routeItem: RouteItem) {
var path = routeItem.path
if (path.endsWith("/")) {
path = path.substring(0, path.length - 1)
}
debug("addRouteItem", "add $path")
ROUTER_MAP[path] = routeItem
onRouteMapChangedListener?.onChanged(routeItem)
}

- 和Arouter性能相比


  以阿里的Arouter来说,它是有比较沉重的历史包袱,虽然后面有迭代几个版本来优化,但是更多的还是在历史基础上优化,TheRouter却没有历史包袱。下面是我们自己工程跑的对比效果


therouter和arouter性能对比.png


作者:jeff_wang
链接:https://juejin.cn/post/7148639882401808391
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

一个app到底会创建多少个Application对象

问题背景 最近跟群友讨论一个技术问题: 一个应用开启了多进程,最终到底会创建几个application对象,执行几次onCreate()方法? 有的群友根据自己的想法给出了猜想 甚至有的群友直接咨询起了ChatGPT 但至始至终都没有一个最终的结论。于是...
继续阅读 »

问题背景


最近跟群友讨论一个技术问题:


交流1


一个应用开启了多进程,最终到底会创建几个application对象,执行几次onCreate()方法?


有的群友根据自己的想法给出了猜想


交流2


甚至有的群友直接咨询起了ChatGPT


chatgpt1.jpg


但至始至终都没有一个最终的结论。于是乎,为了弄清这个问题,我决定先写个demo测试得出结论,然后从源码着手分析原因


Demo验证


首先创建了一个app项目,开启多进程


<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<application
android:name=".DemoApplication"
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Demo0307"
tools:targetApi="31">
<!--android:process 开启多进程并设置进程名-->
<activity
android:name=".MainActivity"
android:exported="true"
android:process=":remote">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>
</application>

</manifest>

然后在DemoApplication的onCreate()方法打印application对象的地址,当前进程名称


public class DemoApplication extends Application {
private static final String TAG = "jasonwan";

@Override
public void onCreate() {
super.onCreate();
Log.d(TAG, "Demo application onCreate: " + this + ", processName=" + getProcessName(this));
}

private String getProcessName(Application app) {
int myPid = Process.myPid();
ActivityManager am = (ActivityManager) app.getApplicationContext().getSystemService(Context.ACTIVITY_SERVICE);
List<ActivityManager.RunningAppProcessInfo> runningAppProcesses = am.getRunningAppProcesses();
for (ActivityManager.RunningAppProcessInfo runningAppProcess : runningAppProcesses) {
if (runningAppProcess.pid == myPid) {
return runningAppProcess.processName;
}
}
return "null";
}
}

运行,得到的日志如下


2023-03-07 11:15:27.785 19563-19563/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote

查看当前应用所有进程


查看进程1


说明此时app只有一个进程,且只有一个application对象,对象地址为@fb06c2d


现在我们将进程增加到多个,看看情况如何


<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<application
android:name=".DemoApplication"
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Demo0307"
tools:targetApi="31">
<!--android:process 开启多进程并设置进程名-->
<activity
android:name=".MainActivity"
android:exported="true"
android:process=":remote">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>
<activity
android:name=".TwoActivity"
android:process=":remote2" />
<activity
android:name=".ThreeActivity"
android:process=":remote3" />
<activity
android:name=".FourActivity"
android:process=":remote4" />
<activity
android:name=".FiveActivity"
android:process=":remote5" />
</application>

</manifest>

逻辑是点击MainActivity启动TwoActivity,点击TwoActivity启动ThreeActivity,以此类推。最后我们运行,启动所有Activity得到的日志如下


2023-03-07 11:25:35.433 19955-19955/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote
2023-03-07 11:25:43.795 20001-20001/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote2
2023-03-07 11:25:45.136 20046-20046/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote3
2023-03-07 11:25:45.993 20107-20107/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote4
2023-03-07 11:25:46.541 20148-20148/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote5

查看当前应用所有进程


查看进程2


此时app有5个进程,但application对象地址均为@fb06c2d,地址相同意味着它们是同一个对象。


那是不是就可以得出结论,无论启动多少个进程都只会创建一个application对象呢?并不能妄下此定论,我们将MainActivityprocess属性去掉再运行,得到的日志如下


2023-03-07 11:32:10.156 20318-20318/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@5d49e29, processName=com.jason.demo0307
2023-03-07 11:32:15.143 20375-20375/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote2
2023-03-07 11:32:16.477 20417-20417/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote3
2023-03-07 11:32:17.582 20463-20463/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote4
2023-03-07 11:32:18.882 20506-20506/com.jason.demo0307 D/jasonwan: Demo application onCreate: com.jason.demo0307.DemoApplication@fb06c2d, processName=com.jason.demo0307:remote5

查看当前应用所有进程


查看进程3


此时app有5个进程,但有2个application对象,对象地址为@5d49e29和@fb06c2d,且子进程的application对象都相同。


上述所有进程的父进程ID为678,而此进程正是zygote进程


zygote进程


根据上面的测试结果我们目前能得出的结论:



  • 结论1:单进程只创建一个Application对象,执行一次onCreate()方法;

  • 结论2:多进程至少创建2个Application对象,执行多次onCreate()方法,几个进程就执行几次;


结论2为什么说至少创建2个,因为我在集成了JPush的商业项目中测试发现,JPush创建的进程跟我自己创建的进程,Application地址是不同的。


jpush进程


这里三个进程,分别创建了三个Application对象,对象地址分别是@f31ba9d,@2c586f3,@fb06c2d


源码分析


这里需要先了解App的启动流程,具体可以参考《App启动流程》


Application的创建位于frameworks/base/core/java/android/app/ActivityThread.javahandleBindApplication()方法中


	@UnsupportedAppUsage
private void handleBindApplication(AppBindData data) {
long st_bindApp = SystemClock.uptimeMillis();
//省略部分代码

// Note when this process has started.
//设置进程启动时间
Process.setStartTimes(SystemClock.elapsedRealtime(), SystemClock.uptimeMillis());

//省略部分代码

// send up app name; do this *before* waiting for debugger
//设置进程名称
Process.setArgV0(data.processName);
//省略部分代码

// Allow disk access during application and provider setup. This could
// block processing ordered broadcasts, but later processing would
// probably end up doing the same disk access.
Application app;
final StrictMode.ThreadPolicy savedPolicy = StrictMode.allowThreadDiskWrites();
final StrictMode.ThreadPolicy writesAllowedPolicy = StrictMode.getThreadPolicy();
try {
// If the app is being launched for full backup or restore, bring it up in
// a restricted environment with the base application class.
//此处开始创建application对象,注意参数2为null
app = data.info.makeApplication(data.restrictedBackupMode, null);

//省略部分代码
try {
if ("com.jason.demo0307".equals(app.getPackageName())){
Log.d("jasonwan", "execute app onCreate(), app=:"+app+", processName="+getProcessName(app)+", pid="+Process.myPid());
}
//执行application的onCreate方法()
mInstrumentation.callApplicationOnCreate(app);
} catch (Exception e) {
if (!mInstrumentation.onException(app, e)) {
throw new RuntimeException(
"Unable to create application " + app.getClass().getName()
+ ": " + e.toString(), e);
}
}
} finally {
// If the app targets < O-MR1, or doesn't change the thread policy
// during startup, clobber the policy to maintain behavior of b/36951662
if (data.appInfo.targetSdkVersion < Build.VERSION_CODES.O_MR1
|| StrictMode.getThreadPolicy().equals(writesAllowedPolicy)) {
StrictMode.setThreadPolicy(savedPolicy);
}
}
//省略部分代码
}

实际创建过程在frameworks/base/core/java/android/app/LoadedApk.java中的makeApplication()方法中,LoadedApk顾名思义就是加载好的Apk文件,里面包含Apk所有信息,像包名、Application对象,app所在的目录等,这里直接看application的创建过程


	@UnsupportedAppUsage
public Application makeApplication(boolean forceDefaultAppClass,
Instrumentation instrumentation) {
if ("com.jason.demo0307".equals(mApplicationInfo.packageName)) {
Log.d("jasonwan", "makeApplication: mApplication="+mApplication+", pid="+Process.myPid());
}
//如果已经创建过了就不再创建
if (mApplication != null) {
return mApplication;
}

Trace.traceBegin(Trace.TRACE_TAG_ACTIVITY_MANAGER, "makeApplication");

Application app = null;

String appClass = mApplicationInfo.className;
if (forceDefaultAppClass || (appClass == null)) {
appClass = "android.app.Application";
}

try {
java.lang.ClassLoader cl = getClassLoader();
if (!mPackageName.equals("android")) {
Trace.traceBegin(Trace.TRACE_TAG_ACTIVITY_MANAGER,
"initializeJavaContextClassLoader");
initializeJavaContextClassLoader();
Trace.traceEnd(Trace.TRACE_TAG_ACTIVITY_MANAGER);
}
ContextImpl appContext = ContextImpl.createAppContext(mActivityThread, this);
//反射创建application对象
app = mActivityThread.mInstrumentation.newApplication(
cl, appClass, appContext);
if ("com.jason.demo0307.DemoApplication".equals(appClass)){
Log.d("jasonwan", "create application, app="+app+", processName="+mActivityThread.getProcessName()+", pid="+Process.myPid());
}
appContext.setOuterContext(app);
} catch (Exception e) {
Log.d("jasonwan", "fail to create application, "+e.getMessage());
if (!mActivityThread.mInstrumentation.onException(app, e)) {
Trace.traceEnd(Trace.TRACE_TAG_ACTIVITY_MANAGER);
throw new RuntimeException(
"Unable to instantiate application " + appClass
+ ": " + e.toString(), e);
}
}
mActivityThread.mAllApplications.add(app);
mApplication = app;

if (instrumentation != null) {
try {
//第一次启动创建时,instrumentation为null,不会执行onCreate()方法
instrumentation.callApplicationOnCreate(app);
} catch (Exception e) {
if (!instrumentation.onException(app, e)) {
Trace.traceEnd(Trace.TRACE_TAG_ACTIVITY_MANAGER);
throw new RuntimeException(
"Unable to create application " + app.getClass().getName()
+ ": " + e.toString(), e);
}
}
}

// 省略部分代码
return app;
}

为了看清application到底被创建了几次,我在关键地方埋下了log,TAG为jasonwan的log是我自己加的,编译验证,得到如下log


启动app,进入MainActivity
03-08 17:20:29.965 4069 4069 D jasonwan: makeApplication: mApplication=null, pid=4069
//创建application对象,地址为@c2f8311,当前进程id为4069
03-08 17:20:29.967 4069 4069 D jasonwan: create application, app=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307, pid=4069
03-08 17:20:29.988 4069 4069 D jasonwan: execute app onCreate(), app=:com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307, pid=4069
03-08 17:20:29.989 4069 4069 D jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307, pid=4069
03-08 17:20:36.614 4069 4069 D jasonwan: makeApplication: mApplication=com.jason.demo0307.DemoApplication@c2f8311, pid=4069

点击MainActivity,跳转到TwoActivity
03-08 17:20:39.686 4116 4116 D jasonwan: makeApplication: mApplication=null, pid=4116
//创建application对象,地址为@c2f8311,当前进程id为4116
03-08 17:20:39.687 4116 4116 D jasonwan: create application, app=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote2, pid=4116
03-08 17:20:39.688 4116 4116 D jasonwan: execute app onCreate(), app=:com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote2, pid=4116
03-08 17:20:39.688 4116 4116 D jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote2, pid=4116
03-08 17:20:39.733 4116 4116 D jasonwan: makeApplication: mApplication=com.jason.demo0307.DemoApplication@c2f8311, pid=4116

点击TwoActivity,跳转到ThreeActivity
03-08 17:20:41.473 4147 4147 D jasonwan: makeApplication: mApplication=null, pid=4147
//创建application对象,地址为@c2f8311,当前进程id为4147
03-08 17:20:41.475 4147 4147 D jasonwan: create application, app=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote3, pid=4147
03-08 17:20:41.475 4147 4147 D jasonwan: execute app onCreate(), app=:com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote3, pid=4147
03-08 17:20:41.476 4147 4147 D jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote3, pid=4147
03-08 17:20:41.519 4147 4147 D jasonwan: makeApplication: mApplication=com.jason.demo0307.DemoApplication@c2f8311, pid=4147

点击ThreeActivity,跳转到FourActivity
03-08 17:20:42.966 4174 4174 D jasonwan: makeApplication: mApplication=null, pid=4174
//创建application对象,地址为@c2f8311,当前进程id为4174
03-08 17:20:42.968 4174 4174 D jasonwan: create application, app=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote4, pid=4174
03-08 17:20:42.969 4174 4174 D jasonwan: execute app onCreate(), app=:com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote4, pid=4174
03-08 17:20:42.969 4174 4174 D jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote4, pid=4174
03-08 17:20:43.015 4174 4174 D jasonwan: makeApplication: mApplication=com.jason.demo0307.DemoApplication@c2f8311, pid=4174

点击FourActivity,跳转到FiveActivity
03-08 17:20:44.426 4202 4202 D jasonwan: makeApplication: mApplication=null, pid=4202
//创建application对象,地址为@c2f8311,当前进程id为4202
03-08 17:20:44.428 4202 4202 D jasonwan: create application, app=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote5, pid=4202
03-08 17:20:44.429 4202 4202 D jasonwan: execute app onCreate(), app=:com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote5, pid=4202
03-08 17:20:44.430 4202 4202 D jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@c2f8311, processName=com.jason.demo0307:remote5, pid=4202
03-08 17:20:44.473 4202 4202 D jasonwan: makeApplication: mApplication=com.jason.demo0307.DemoApplication@c2f8311, pid=4202

结果很震惊,我们在5个进程中创建的application对象,地址均为@c2f8311,也就是至始至终创建的都是同一个Application对象,那么上面的结论2显然并不成立,只是测试的偶然性导致的。


可真的是这样子的吗,这也太颠覆我的三观了,为此我跟群友讨论了这个问题:


不同进程中的多个对象,内存地址相同,是否代表这些对象都是同一个对象?


群友的想法是,java中获取的都是虚拟内存地址,虚拟内存地址相同,不代表是同一个对象,必须物理内存地址相同,才表示是同一块内存空间,也就意味着是同一个对象,物理内存地址和虚拟内存地址存在一个映射关系,同时给出了java中获取物理内存地址的方法Android获取对象地址,主要是利用Unsafe这个类来操作,这个类有一个作用就是直接访问系统内存资源,具体描述见Java中的魔法类-Unsafe,因为这种操作是不安全的,所以被标为了私有,但我们可以通过反射去调用此API, 然后我又去请教了部门搞寄存器的大佬,大佬肯定了群友的想法,于是我添加代码,尝试获取对象的物理内存地址,看看是否相同


public class DemoApplication extends Application {
public static final String TAG = "jasonwan";

@Override
public void onCreate() {
super.onCreate();
Log.d(TAG, "DemoApplication=" + this + ", address=" + addressOf(this) + ", pid=" + Process.myPid());
}

//获取对象的真实物理地址
public static long addressOf(Object o) {
Object[] array = new Object[]{o};
long objectAddress = -1;
try {
Class cls = Class.forName("sun.misc.Unsafe");
Field field = cls.getDeclaredField("theUnsafe");
field.setAccessible(true);
Object unsafe = field.get(null);
Class unsafeCls = unsafe.getClass();
Method arrayBaseOffset = unsafeCls.getMethod("arrayBaseOffset", Object.class.getClass());
int baseOffset = (int) arrayBaseOffset.invoke(unsafe, Object[].class);
Method size = unsafeCls.getMethod("addressSize");
int addressSize = (int) size.invoke(unsafe);
switch (addressSize) {
case 4:
Method getInt = unsafeCls.getMethod("getInt", Object.class, long.class);
objectAddress = (int) getInt.invoke(unsafe, array, baseOffset);
break;
case 8:
Method getLong = unsafeCls.getMethod("getLong", Object.class, long.class);
objectAddress = (long) getLong.invoke(unsafe, array, baseOffset);
break;
default:
throw new Error("unsupported address size: " + addressSize);
}
} catch (Exception e) {
e.printStackTrace();
}
return objectAddress;
}
}

运行后得到如下日志


2023-03-10 11:01:54.043 6535-6535/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@930d275, address=8050489105119022792, pid=6535
2023-03-10 11:02:22.610 6579-6579/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@331b3b9, address=8050489105119027136, pid=6579
2023-03-10 11:02:36.369 6617-6617/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@331b3b9, address=8050489105119029912, pid=6617
2023-03-10 11:02:39.244 6654-6654/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@331b3b9, address=8050489105119032760, pid=6654
2023-03-10 11:02:40.841 6692-6692/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@331b3b9, address=8050489105119036016, pid=6692
2023-03-10 11:02:52.429 6729-6729/com.jason.demo0307 D/jasonwan: DemoApplication=com.jason.demo0307.DemoApplication@331b3b9, address=8050489105119038720, pid=6729

可以看到,虽然Application的虚拟内存地址相同,都是331b3b9,但它们的真实物理地址却不同,至此,我们可以得出最终结论



  • 单进程,创建1个application对象,执行一次onCreate()方法

  • 多进程(N),创建N个application对象,执行N次onCreate()方法

作者:小迪vs同学
链接:https://juejin.cn/post/7208345469658415159
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »