服务器/运营-宝塔面板
介绍搭建属于自己的网站, 前几天自己动手购买了一台腾讯云轻量级服务器，自己写代码，node 作为服务端去写接口, 简单部署一下网站的搭建到服务器的部署再到数据库的操作。 整体下来感觉还是有点坑，今天正好有时间，记录一下搭建环境时需要注意的， 自己也总结一下搭建的步骤。 首先拥有属于自己的域名这里不做过多的介绍, , 腾讯云注册域名及使用, 介绍了域名的使用及备案。 DNS 解析域名 其他的可以再官网或者百度上进行查阅 接下来购买属于自己的服务器 其实还是很简单的,首先我们先在腾讯云购买属于自己的 轻量级服务器(较便宜,适合新手), 直接登录自己的微信号, 如果找不到, 直接搜索 轻量级服务器 就在左上角的云产品里。 接着, 我们选择镜像， 选择 宝塔镜像就可以了。 安装宝塔，避免了去操作大量操作 Linux， 宝塔自带可视化面板。 其他的根据自己需要去购买配置即可。 服务器创建之后，在应用管理找到登录，根据要求就可以有自己的宝塔面板的登录链接和账号密码了。 登录过后，关联自己的云服务器，根据要求就可以， 这里我略过...
服务器/运营-私库
介绍近期在review代码的时候发现了一些关于项目的问题，项目中冗余的代码比较多，有很多都是辅助粘贴的，一些utils工具以及一些方法都是多余的，这样不是一个俩个项目是这样的，基本大部分项目都是这样的； 对于企业级的项目，没有任何关于企业的一些工具，这样我想到一种可能：就是将一些工具统一封装成公司内部专用的组件或者工具，因为公司内部都是内网开发的，不适用于将npm包上传到npm上，那么我了解到一个nexus3刚好可以部署私有化的工具； 使用首先还是用到之前1Panel部署的服务，同样在应用商店下载nexus; 然后等待安装，安装完成过之后就可以打开了，打开之后点击右上角的登录，第一次登录密码有存放的目录，找到输入然后需要重置密码； 创建 blob 存储这里需要说明一下： hosted: 本地存储，像官方一样提供本地私库功能 proxy：提供代理其他仓库的类型，如 docker 中央仓 group：组类型，实质作用是组合多个仓库为一个地址 接着，为其创建一个单独的存储空间： 创建 hosted 类型的 npm Name:...
async和defer
<script>标签的defer和async的作用是什么，有什么区别呢？async和 defer 是两个用于控制脚本加载和执行的属性，用于 <script> 标签中。它们的主要区别在于脚本的加载和执行顺序。 <MDN 是如何解释的？> 这里一张图可以完美解释： asyncasync 属性指定脚本应该异步加载，这意味着浏览器会在后台加载脚本，而不会阻塞页面的渲染。脚本加载完成后，会立即执行。 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。 对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。 1<script async src="script.js"></script> 优点： 不会阻塞页面渲染 加载完成后立即执行 缺点 脚本执行顺序不确定 可能会导致脚本依赖的问题 deferdefer...
v-for和v-if不能同时使用
Vue 中 v-for 和 v-if 不建议同时直接应用于同一元素的原因主要涉及以下几个方面： 优先级问题 Vue 2.x 在早期的 Vue 2 版本中，v-for 指令的优先级高于 v-if。这意味着即使 v-if 的条件可能过滤掉大部分项，v-for 仍然会先遍历整个列表。即便最终只有少数几项（甚至一项）需要渲染，也会导致对整个列表进行无谓的迭代和条件判断，从而造成性能浪费。 Vue 3.xVue 3 对这一行为进行了调整，使得 v-if 的优先级高于 v-for。虽然这解决了之前版本中不必要的遍历问题，但新的问题随之出现：如果 v-if 先于 v-for 执行，它可能会尝试访问由 v-for 循环尚未创建的变量，导致运行时错误。这是因为 v-if 在没有循环上下文的情况下无法正确评估其条件表达式。 性能与效率当 v-if 和 v-for 同时作用于一个元素时，无论优先级如何，都可能导致不必要的计算。在 Vue 2 中，即使 v-if 条件仅筛选出列表的一小部分，也必须遍历整个列表。在 Vue 3 中，尽管避免了这种遍历，但若 v-if...
v-if和v-show的区别
Vue 中的 v-if 和 v-show 都是用来实现条件性渲染的指令，它们都允许根据表达式的真假值来决定是否显示对应的 DOM 元素。然而，二者在实现机制、性能影响及适用场景上存在显著差异。 渲染机制 v-if控制元素的显示与否，当条件为false时，vue 在编译阶段会跳过该元素以及子元素的渲染, 这些元素不会在 DOM 树中创建；当条件为 true 时，vue 会动态添加该元素以及子元素。true变为false，相应的元素也会销毁在 DOM 中也会移除；这意味着使用 v-if 的元素会经历一个局部编译/卸载的过程，包括其内部的事件监听器和子组件也会被适当地销毁和重建。 v-show不论初始条件如何，带有 v-show 的元素总会被渲染到 DOM 中。它通过动态修改元素的 CSS 属性（通常是 display: none 或 display: block）来控制元素的显示与隐藏。这意味着当条件变化时，元素本身始终存在于 DOM 结构中，只是简单地改变了其可见性。 编译开销与性能影响： v-if由于它会根据条件动态地添加或删除 DOM...
created和mounted的区别
Vue中的created和mounted在生命周期函数中承担了不同的角色, 他们分别在组件的不同阶段调用，分别对应这组件生命周期的不同状态。 调用时机 created在组件实例创建后立即调用，此时已经完成模板编译、数据观测（data observer）、属性注入（props）以及计算属性/computed、方法/watcher 的设置等工作。在这个阶段，组件的属性和数据已经绑定，但是 DOM 还未生成，也就是html标签还未挂在在页面上; mouted在组件挂载完成之后调用，此时 DOM 已经生成，组件已经挂载到页面上，可以通过this.$el获取组件的根元素。我们通常想要获取某个元素的时候，可以在mounted中获取。 使用场景 created常用于进行非 DOM 依赖的初始化工作： 数据的预处理或默认值设置， 一般初始化操作。 发起异步请求以获取数据（如果不需要等待 DOM 就绪就可以开始）。 注册全局事件监听器或插件。 如果有其他组件依赖于此组件的状态，那么在 created...
watch,watchEffect和computed
vue中的watch, watchEffect,computed是三个不同的工具，用于处理数据响应式和根据数据的改变而执行对应的逻辑。 computed作用计算属性。computed 用于定义那些基于组件状态（如 data、其他 computed 属性、props 等）的衍生值。当其依赖的状态发生变化时，计算属性会自动重新计算并返回结果。 特性 缓存机制： computed是有缓存的，只有依赖的状态发生变化时，才会重新计算。如果依赖未发生变化，则直接返回之前计算的结果，避免了不必要的重复计算，提高了性能 声明式： 在模板中可直接使用computed属性，就像访问普通函数一样 读取优先： computed主要用于读取场景，其值由vue自动维护, 通常不建议在业务逻辑中直接修改computed属性, 因为这会破坏依赖追踪机制，导致计算属性的依赖项变化无法触发重新计算。computed默认是可读的状态； 使用场景 当需要对数据进行复杂计算或者逻辑出库，并且结果仅仅依赖于输入状态时 需要以高效，声明式的方式展示经过处理的数据(格式化，筛选，汇总) watch作用响应式监听器，...
渐进式框架的理解
...
线程引发的思考
在介绍线程之前，会先声明进程, 进程线程的关系，在了解了俩者关系之后，再次思考线程带来的一些问题； 进程与线程进程（Process）是指在操作系统中正在运行的一个程序实例。以下是进程的一些关键特性： 独立性：每个进程都有独立的内存空间，这意味着一个进程的执行不会直接影响到另一个进程。 资源分配：操作系统为每个进程分配资源，如 CPU 时间、内存和文件句柄等。 并发执行：多个进程可以同时运行在多核处理器上，实现真正的并行处理；在单核处理器上，通过时间片轮转等方式实现并发执行的假象。 通信机制：进程间可以通过多种方式通信，如管道（Pipe）、消息队列（Message Queue）、共享内存（Shared Memory）等。 生命周期管理：进程有其生命周期，包括创建、就绪、运行、阻塞和终止等状态。 在nodejs中，我们经常使用child_process创建一个子进程去处理复杂的应用场景； 1234567891011121314const { spawn } = require("child_process");const child...
webpack打包优化(老版本)
优化背景前段时间搞了一个新项目, 用的全新 vue3 和 vant3 的框架，访问项目时长 1 分多都没有加载出来, 其实引入的框架就只有 vant 和一些插件， 对于单页面而言，这是有很大的问题的，页面记载缓慢，资源下载慢, 一个 vender.js 文件 达到了 mb，对于一个新项目而言， 怎么会这么大呢？这时就应该先去考虑一下项目如何优化。怎样实现 11s 到 1s 的效果。 优化方向 文件拆分，代码，图片，文件压缩， Gzip 压缩 node_modules 包体积过大的文件拆分，优化分包策略 优化路由懒加载 拆分第三方插件, 改用 cdn 链接 loading 动画 骨架屏 开始优化体积优化排查冗余依赖，文件资源，图片 删除项目中多余的依赖 静态资源全部放入 assets 文件夹下 图片压缩 手动将图片进行压缩, 但是这样比较麻烦 引入插件 image-webpack-loade，进行压缩 12// installnpm i image-webpack-loader -D 1234567891011121314//...