SyrupFight2021
学位论文刀下冤魂
获得徽章 1
- #青训营笔记创作活动#
1月23日 打卡day10
今天阅读了css属性。
Css很多属性的场景确实很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。
position: sticky，empty 选择器和gap，都是我们经常使用的一些属性，还有背景的文字效果的background-clip: text。今天这篇的阅读的收获颇丰展开评论点赞 - #青训营笔记创作活动#
1月22日 打卡day09
今天阅读了图片压缩。
在实际工作中，我们前端从ps，蓝湖等工具导出来的图片，都是没有经过压缩的，体积会比较大。如果都不经过处理，很容易导致加载的图片太大而后面图片加载很久，体验就比较差了。在这篇文章中主要就这个问题详细聊了聊图片压缩的方法。
TinyPng工具，使用智能的有损压缩技术减少WEBP,JPEG,PNG文件的大小。具体是通过选择性的减少图像中的颜色数量，使用更少的字节来存储数据。总结来说，TinyPng提供两种压缩方法。1.官网上手动压缩。2.通过官方提供的tinify进行压缩。
还有我们常用的webpack构建工具，开发一个webpack plugin也可以，在打包生产环境代码的时候，进行处理。展开评论点赞 - #青训营笔记创作活动#
1月21日 打卡day08
今天阅读了Esbuild。
什么是Esbuild呢？Esbuild是基于Golang开发的一款打包工具，它构建速度比传统快10-100倍，最近我正在使用的VITE就是基于Esbuild的。
Esbuild是多核并行，让打包更快，并且从零开始造轮子。没有任何第三方库的黑盒逻辑。保证了代码性能。
传统打包工具中，一般会频繁解析和传递AST数据，比如string--TS--JS--string，会涉及很多编译工具链，比如webpack，babel，terser，Esbuild从头到尾尽可能复用AST节点数据，大大提高内存利用效率。
展开评论点赞 - #青训营笔记创作活动#
1月20日 打卡day07
今天阅读了WebRTC。
什么是WebRTC？它是一项实时通讯技术，允许网络应用或者站点，在不借助中间媒体的情况下，建立浏览器之间的点对点的连接，实现视频流和音频流或者其他任意数据的传输。WebRTC包含的这些标准使得用户在无需安装任何插件或者第三方的软件情况下，创建点对点的数据分享和电话会议成为可能。
我们会在哪些场景需要WebRTC技术？直播，游戏，视频会议，屏幕共享等等。这些场景都是比较贴近实地生活的。比如我们远程代码调试或者沟通代码的开发，可能用到屏幕共享。
什么是媒体流？媒体流可以来自本地设备，也可以来自远程设备。媒体流可以是实时的或者非实时的。通过摄像头，麦克风，屏幕共享等方式获取媒体流，通过webRTC技术将媒体流传输到远端实现实时通讯。
通过webRTC技术，可以实现一个简单的背景替换的功能。
针对纯色的背景进行替换比较容易，如果复杂的背景，可以通过图像分割的方式实现背景替换，比如身体切割等。展开评论点赞 - #青训营笔记创作活动#
1月19日 打卡day06
今天阅读了抓包。
什么是抓包？就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包，我们可以分析网络问题，分析流通量，探测企图入侵网络的攻击等等。
我们知道，数据在网络上是以很小的帧为单位传输的，抓包通常是抓取应用层的http/https的包。
Http抓包。由于http中没有对通信端身份验证的标准，对于服务端，也只要求请求报文符合规范。所以http抓包，只需要让中间人负责转发客户端和服务端的数据包即可。
Https抓包，需要在https加密通信之前。1.截取客户端发送的包含证书的报文，伪装成服务端，把自己的证书发给客户端，拿到客户端返回的包含对称加密通信密匙的报文。生成中间人与客户端对称加密的密匙。2.同样伪装成客户端，以服务端自己非对称公钥加密发给服务端，获得服务端生成的对称加密密钥。3.加密通信建立完成，中间人拿到了通信的数据密钥。可以查看，修改https的通信报文。
展开评论点赞 - #青训营笔记创作活动#
1月18日 打卡day05
今天阅读了js11个工具方法。
第一个是使用moment插件来实现的 计算下次生日还有多少天。这个可以说是在web应用或者app都比较频繁的。
第二个是回到顶部，这个也很不错，因为如果是长页面，一般是需要提供回到顶部的功能的。工具一般都会考虑到代码的鲁棒性，可以放心使用。
其中第四个，关于防抖和节流的就更不提了，必定是项目中经常使用的。防抖是清除定时器cleartimeout，节流是将定时器赋值为null来清除。
还有很多都比较常用，在工程化的项目中都比较实用。展开评论点赞 - #青训营笔记创作活动#
1月17日 打卡day04
今天阅读了promise/async await文章。
Js是单线程的。耗时操作是交给浏览器的，而不是像多线程的语言自己解决。那JS的代码执行顺序，其实并不是完全按照书写顺序来的，遇到异步函数并不会阻塞后面的代码运行，而是将异步操作放入事件队列，继续执行后续的同步代码。这样就很容易导致开发中出错。
Promise的提出，很大程度上解决这个问题，promise立即执行，回调函数传入两个参数回调函数:resolve和reject。统一规范，增强了阅读性和扩展性，小幅度减少了回调地狱。
回调地狱的终极解决方案就是async/await。它其实类似generator。
最后，我想说的是，这篇文章写的不太好，可阅读性很差，知识点梳理的较为混乱，感觉作者也没有很好的理解这两个知识点，很难讲解得一针见血。
关于promise和async/await，大家可以看看阮一峰的es6中的讲解，讲的比这个好很多。
展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡day03
今天阅读了Monorepo--一种新的项目管理方式。
什么是Monorepo呢？就是把多个项目放在一个仓库里，而与之相对的是传统的MultiRepo模式，也就是每个项目对应一个单独的仓库来分散管理。
现在想来，我之前所有的开发，都是传统的MultiRepo模式。因为它们都只有一个package.json。
传统的方式，如果多个项目使用的逻辑，我们其实可以使用npm发包的方式来解决这一需求。但是如果这个npm包的代码需要更改，那么需要重新发包，并且在项目中安装新版本，这样流程复杂了，就容易出问题。而Monorepo就解决了这个问题，复用起来方便，有依赖代码变动，项目立马感知。展开评论点赞 - #青训营笔记创作活动#
1月15日 打卡day02
今天阅读了16个前端必备的实用工具，发现里面有很多的确是之前常用的，例如在线图片压缩，这个在实际项目开发中会经常用到，因为我们的UI设计交付的图可能会比较大，在实际的应用场景中并不是所有的图都要高清画质的，这个时候就可以稍微牺牲清晰度来大幅度压缩图片大小展开评论点赞 - #青训营笔记创作活动#
1月13日打卡day1
今天看了手写拖拽的文章，受益匪浅。原生拖拽的体验想必大多数人多会有，细细想来确实体验一般。使用纯js实现拖拽效果后，瞬间体验拉满，同时也感受到实现这个功能的细节其实也比较多，需要注意的事项并不少。展开评论点赞