前端学习笔记1

paradise_i

已于 2024-06-06 09:21:29 修改

阅读量158

点赞数 3

分类专栏： web 文章标签：前端学习笔记

于 2024-03-22 17:14:48 首次发布

本文链接：https://blog.csdn.net/weixin_46147758/article/details/136946982

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

npm link 软链接

https://blog.csdn.net/qq_37833745/article/details/129167913
首先在本地依赖包路径下执行 npm link 命令，这会在全局的node_modules/下创建一个symlink（符号链接）。
然后，在项目中 npm link package-name 会从全局安装的 package-name 向当前文件夹的 node_modules/ 创建一个符号链接，至此npm link完成，你可以使用这个本地依赖包了。

cd ~/projects/node-redis    # go into the package directory
npm link                    # creates global link
cd ~/projects/node-bloggy   # go into some other package directory.
npm link redis              # link-install the package

monorepo项目架构

应用场景：自己团队内部的业务组件库（通用性不高的仅仅单个业务线项目使用），若是组件库采用单独项目部署的话（私有依赖库），组件库调试困难，和主项目耦合度低，因此monorepo模式+pnpm，业务组件库和主项目放在一块，基于主项目方便调试，实时引用到最新代码。（私有依赖库也可采用npm link 的形式调试，麻烦点）

https://juejin.cn/post/7065141885576151070

https://www.baidu.com/link?url=MzGw0yNTOR3vpNzYcfiXQpfhX1t3sgArni-xisktaAJVIMUp-j7QN-ddTVFx1WTOOY6cqtsZjO_AqlJcO4jJhZNfx-nIl52G38kYEiTqhU_&wd=&eqid=e53b04d00003a9d00000000465fd0385

https://www.bilibili.com/video/BV1Rt4y1T7wM/?spm_id_from=333.337.search-card.all.click&vd_source=6582cc1c15e8f8d66ad1f835b693c4a0

babel 和PolyFill

babel转换器只会转化新的语法，对一些API不转化，比如你执行了.[].find()方法，如果j旧版本浏览器不支持，它就会自动帮你处理为”循环遍历”；

Promise.all 如何一个请求失败也能得到其余正确的请求结果

useCallback 作用

1、来缓存所需传入的回调函数，使得此函数在当前组件重渲染时不会被重新生成，内存地址不会变化
2、此函数作为props传入子组件，结合react.memo 使用，子组件不会重新渲染

DOMContentLoaded load Finish

DOMContentLoaded : DOM 树构建完成后触发（渲染树之前）。即 HTML 页面由上向下解析 HTML 结构到末尾的封闭标签 html，但并没有加载外部样式和图片等外部资源。
Load: 页面加载完毕。DOM 树构建完成后，继续加载 html/css 中的 img、icon 等外部资源加载完毕，可以访问到img大小。

在 jQuery 中经常使用的 $(document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // …代码… }); 监听的是 load 事件。在用jquery的时候，我们一般都会将函数调用写在ready方法内，就是页面被解析后，我们就可以访问整个页面的所有dom元素，可以缩短页面的可交互时间，提高整个页面的体验。

<body>
    <script type="text/javascript">
    console.log(document.querySelector('body #ele')); // null
    </script>
    <div id="ele"></div>
  
    <script type="text/javascript">
    console.log(document.querySelector('body #ele')); // <div id="ele"></div>
    </script>
  </body>

当浏览器解析 HTML 文档时，它会按照文档流的顺序依次加载和执行文档中的资源。当浏览器遇到 <script 标签时，它会立即停止解析 HTML，并开始下载和执行脚本。如果脚本放在文档的头部，浏览器将在执行脚本之前构建和加载整个 DOM 树。所以将 <script 标签放在底部，这样不会影响dom树的构建，缩短DOMContentLoaded时间。

defer 与 async： <script 标签的异步加载，减少页面渲染时间
defer <script 加载和运行都不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行<script脚本
async. <script 加载不会影响 HTML 文档的解析，加载完之后立即运行，会阻塞DOM 解析，脚本运行完之后继续DOM 解析。

使用场景：
当脚本需要依赖于页面的 DOM 结构或需要在页面加载完毕后执行时，可以使用 defer 属性。
适用于脚本文件相对较大或加载时间较长的情况，因为 defer 属性不会阻塞页面的解析和渲染过程。

当脚本与页面的其他内容独立，不依赖于 DOM 结构或其他脚本的执行顺序时，就可以使用 async 属性。
可以用于独立的统计脚本、广告脚本或与页面展示内容无关的其他脚本。可以使用 async 属性。

load：页面加载完毕时间，并且浏览器开始触发 window 对象的 load 事件。这意味着 HTML、CSS、JavaScript 等主要资源已经加载完毕，而对于图片等其他资源，浏览器可能会继续下载和渲染它们，但并不会影响 load 时间点的触发。
Finish：表示浏览器完成了对页面的整个持续性的渲染时间，Load 时间点表示页面加载完成的时间，而 Finish 时间点表示页面渲染完成的时间，比如页面滚动时图片懒加载的持续渲染时间

cdn图片优化方案
作用：压缩图片体积、提高加载速度，减小LCP(最大内容渲染时间)很有效果

编写BaseImage通用组件，内部封装 cdnPathOptions方法，返回对应的type的src，同时使用<picture元素代替img元素。浏览器在picture里遇到不认识的图片时会跳过进而找下一个，直至找到第一个支持的图片格式。也可js写好方法检测该浏览器是否支持webp type，

然后cdn后台开启的图片自适应功能时，按照优先级从高到低 AVIF > Guetzli > TPG > Webp 顺序生效。如同时开启了 AVIF 自适应、Webp 自适应功能。当请求 a.jpg 文件，HTTP 请求头中 accept 头部包含 image/avif、image/webp 时，图片优化将优先匹配 AVIF 自适应，将图片格式转换为 AVIF 格式

/**
 * 图片cdn转换
 * @param src oss访问地址
 * @param width 宽度
 * @param height 高度
 * @param convertCdnPath 域名转换方法
 * @param canWebp 是否使用webp格式  
 * @param mode 图片缩放模式 http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,h_100,w_100
 */
 export type ResizeMode = | 'lfit' // 等比缩放，限制在指定w与h的矩形内的最大图片。
  | 'mfit' // 等比缩放，延伸出指定w与h的矩形框外的最小图片
  | 'fill' // 固定宽高，将延伸出指定w与h的矩形框外的最小图片进行居中裁剪。
  | 'pad' // 固定宽高，缩略填充。
  | 'fixed'; // 固定宽高，强制缩略。
  
export interface CdnPathOptions {
  src: string;
  width: number;
  height: number;
  canWebp?: boolean;
  mode?: ResizeMode;
  convertCdnPath?: ConvertCdnPath;
}


<picture>
	<source srcset="some.avif" type="image/avif" />
	<source srcset="some.webp" type="image/webp" />
	<img src="some.jpg" alt="alternation" width="360" height="360" />
</picture>

Promis-queue

队列的形式限制并发

组件库 package.json 中 exports 作用

exports 字段可以配置不同环境对应的模块入口文件,并且当他存在时,它的优先级最高,当 package.json 文件中存在 exports 字段,设置的 main 字段会失效,在 react 中的 package.json 文件中的 exports 字段有如下配置:

moment依赖库中package.json
"main": "index.js",
"exports": {
".":{"require":"./test.js"
} 

当 require('moment') 则表示会自动导入 moment 包中的 test.js 文件

实现按条件导出es、umd模块
"exports": {
  ".": {
    "import": "./dist/my-lib.es.js",     //    import {} form '' 
    "require": "./dist/my-lib.umd.cjs"   //    require()
  }
}