前端知识图谱

tsh的笔记
243 阅读7分钟

图谱

f2e.tech/?source=kno…

学习材料补充

中阶

一级目录

二级目录

补充材料

框架

React

  • VDOM 虚拟DOM
  • 声明式写法
  • 组件化
  • 单向响应的数据流，会比双向绑定的更安全，速度更快
  • TypeScript 支持
  • 完备的周边技术体系，UI 组件库
  • star 195k
  • reactjs.org/

全球流行度最高框架，也是集团主推框架，在上层建立了完备的UI组件库如，Ant Desgin，Fusion Design 

研发路线：

脚手架

关联知识：

参考产品：脚手架开发工具 yeoman：yeoman.io/

包管理

关联知识：

参考产品：nvm：nvm.sh/

开发

关联知识：

参考产品：mkcert：www.npmjs.com/package/mkc…

构建

关联知识：

参考产品：astExplorer：astexplorer.net/、[cssnano](www.npmjs.com/package/css…](www.npmjs.com/package/ter…

代码规范

测试

jest、playwright

CI/CD

库：

代码设计原则

建议参考历年的 State Of JS 来关注前端界正在逐渐被摒弃以及逐渐崛起的前端库等
附上最新 2021 年的地址：StateOfJs 2021：2021.stateofjs.com/en-US/libra…

知识扩展

  • DRY 原则
  • YAGNI 原则
  • Rule Of Three 原则

参考读物

  1. 阮一峰《代码抽象三原则》：www.ruanyifeng.com/blog/2013/0…
  2. Martin Fowler 的《重构》第二版

CSS

个人建议经常翻一翻同事以及开源社区别人写的 CSS 代码，看其中是否有自己没见过的 CSS 属性与用法。
通过 MDN 查阅与学习自己没见过的 CSS 属性与用法。

举例：
模糊效果 filter blur: MDN：developer.mozilla.org/en-US/docs/…

参考读物

  1. 想学习 CSS 奇淫技巧，推荐一个 github 项目：iCSS：github.com/chokcoco/iC…
  2. 想学习 CSS 基础知识，推荐 learn css code：www.bitdegree.org/learn/css-c…

JS

这一部分将采用按类别分别列举部分好用的开源项目的方式来写，个人建议的学习方式：阅读官方文档；项目中合适场景使用；尝试阅读源码；

关于如何查找该关注的社区优秀开源库，建议

  1. 通过 StateOfJS 看趋势，哪些 JS 库是新星，哪些 JS 库是声量逐渐变小的
  2. 一些大佬的整理，这里举一个云谦的例子：awesome-javascript：github.com/sorrycc/awe…

React 工具库

JS - 日期处理工具

  • momentjs
  • dayjs
  • date-fns

JS - 请求库

  • axios
  • umi-request

JS - 图表库

  • d3
  • echarts
  • antv 系列
  • recharts
  • highcharts（不免费，不建议业务使用）

JS - url 处理库

  • url-parse
  • query-string
  • URLSeachParams

JS - 走马灯组件

  • swiperjs
  • antd carousel
  • dingtalk-design-mobile swiper
  • 小程序内置组件

图片修剪器工具

JS - 富文本编辑器

  • quill

JS - 拖拽处理

JS - 签字板

  • signature-pad

JS - 工具集

JS - 新手引导工具库

JS - 代码工具

  • tslint（已废弃）
  • eslint
  • prettier
  • stylelint

代码工具对应的 rules

  • f2e-spec

JS - 构建工具

  • webpack
  • rollup
  • vite
  • snowpack
  • esbuild

JS - 包管理工具

  • npm
  • yarn
  • pnpm

JS - monorepo 工具

  • lerna
  • npm workspace
  • pnpm workspace
  • yarn workspace

动画

除了常用的 CSS animation 之外，浏览器对 Web Animation API 的支持始通过 JS 处理动画更方便，推荐阅读 MDN 这篇对 Web Animation API 的介绍：developer.mozilla.org/en-US/docs/…

CSS 动画库

animate.css：animate.style/

高兼容性的JS 动画库：

GSAP：greensock.com/gsap/

framer-motion：www.npmjs.com/package/fra…

基于滚动的动画库：

GSAP plugin —— scrolltrigger：gsap.com/scroll/

scrollmagic：scrollmagic.io/

wow：github.com/graingert/w…

动画制作与播放引擎

  • Lottie
  • Mars

Canvas

设备视频流/录像/拍照/录音

聊天窗 UI 组件

打字机效果组件

国际化

设计原则/组件库

当前集团内前端委员会认证过的组件库只有 fusion：fusion.design/pc/?themeid… 和 antd 两个，其余各经济体的组件库基本都是基于其中之一进行扩展定制

性能优化

指标

其他性能优化常关注的指标：

  • White Screen（白屏时间）
  • First Meaningful Painting （FMP 首次有效渲染）
  • First Screen（首屏时间）

评估工具

具体问题分析：性能相关的分析工具主要使用 Chrome Performance： 的能力。：developer.chrome.com/docs/devtoo…

标准Web API：Navigation and resource timings：developer.mozilla.org/en-US/docs/…

埋点上报：自定义耗时上报 ARMS logSpeed：aliyuque.antfin.com/ali\_arms/l…

优化方案

知识图谱里面的优化方案已经比较完善了，在这里根据图谱的不同分类做部分的补充，主线还是跟着图谱来，比较体系化。

  • 压缩

  • 打包和依赖选取支持按需加载

  • 使用更聚焦更精简的三方库，如使用 dayjs 而不是 moment

  • 图片优化

  • 充分利用图片cdn的裁剪能力，根据不同场景选择不同尺寸，不同质量的图片资源

  • 体验要求比较高的首屏图片资源可离线化处理

  • 使用雪碧图实现性能体验更好的动画（根据场景，雪碧图可能会比 gif 更大）

  • 加载策略

  • 请求合并：额外说一句，不是所有场景都适合请求合并，请求合并是见啥DNS解析建立链接等的时间，当代浏览器的请求并发量都不少，在简单业务中不会出现并发请求排队的情况，并且浏览器对DNS解析，http 对链接的保持等特性也不会让并发请求额外增加多少时间。还是要根据资源的大小，业务应用的实际情况来考虑请求是拆分还是合并。如果差别不大的情况下，还是建议依据服务的合理分类来决定更好。参考讨论：segmentfault.com/a/119000001…

  • 数据缓存：合理使用闭包缓存，减少 ajax 频繁调用，避免慢请求引起的时序问题。Js closure cache ：https://medium.com/@j.girgis85/caching-slow-api-requests-using-javascript-closure-b8b0caf031d1

  • 应用保活：配合客户端做保活策略，减少应用重复打开对 webView 的初始化，应用初始化时间。

  • 执行渲染

  • 长列表优化：虚拟滚动。：juejin.cn/post/684490…

  • DOM节点：合理控制节点是卸载还是隐藏。

额外补充一下图谱上没有涉及到的代码层面的优化，代码如何去组织如何去设计其实是非常影响我们应用的性能的，尤其是复杂的应用。

  • 代码优化

  • 框架层（以React为例，小程序的可以参考微信官方：developers.weixin.qq.com/miniprogram…

  • 按需依赖，如果Effect只依赖对象中的某个属性，那么请在依赖数组中明确到该属性而不是该对象

  • context 的依赖根据实际情况尽量下沉到叶子节点的组件。避免其他组件不必要的重新渲染。

  • 合理使用 useCallback useMemo useRef 避免重复计算

  • Effect 中如果包含计时器，监听器等可能引起内存泄漏的需要在 return 中清除

  • 语言层

  • DRY 原则，合理抽象公共函数，同一个函数调用次数越高，执行效率也会得到提升。

  • 如果代码中存在大对象，一定要注意实例（对象足够大我们认为都应该以类的形式去组织代码）的生命周期，需要去清理对象，释放内存。

  • 代码分支合理短路：在处理分支逻辑的时候根据分支判断的优先级，推荐在某些场景分支执行完之后直接短路 return 掉（尤其是涉及到渲染层的）。减少js解释执行的时间，提升代码的可读性。

  • 精确比较运算符，使用 ===，!==减少类型转换的耗时。

avatar
文章
阅读
粉丝