仰望星空时

JS基于原型的继承理解原型＆原型链JavaScript 只有一种结构：对象。每个对象（object）都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。 JavaScript 对象是动态的属性（指其自有属性）“包”。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。 student._proto_ === Student.prototype // 隐式原型 显示原型 class Person{ constructor(name){ this.name = name; } drink(){ console.log('喝水'); ...

V8垃圾回收机制垃圾回收机制目标：清除不再使用的对象，使腾退出所占用的内存 在浏览器的发展历史上有两种解决策略： 标记清除 引用计数 标记清除标记清除分为：标记阶段和清除阶段。 首先它会遍历堆内存上所有的对象，分别给它们打上标记，然后在代码执行过程结束之后，对所使用过的变量取消标记。在清除阶段再把具有标记的内存对象进行整体清除，从而释放内存空间。 使用标记清除策略的最重要的优点在于简单，无非是标记和不标记的差异。通过标记清除之后，剩余的对象内存位置是不变的，也会导致空闲内存空间是不连续的，这就造成出现内存碎片的问题。内存碎片多了后，如果要存储一个新的需要占据较大内存空间的对象，就会造成影响。对于通过标记清除产生的内存碎片，还是需要通过标记整理策略进行解决。 简而言之： 优点：简单 缺点：内存碎片化、分配速度慢 标记整理经过标记清除策略整理后，老生代内存中因此产生了许多内存碎片，如果不进行清理内存碎片，就会对存储造成影响。 标记整理（Mark-Compact）算法 就可以有效地解决标记清除的两个缺点。它的标记阶段和标记清除算法没有什么不同，只是标记结束后，标记整理算法会将活着的对 ...

vue中的Diff算法的理解Diff算法虚拟dom：表示真实DOM的JS对象 Diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实DOM，进而提高效率。 使用虚拟DOM算法的损耗计算： 总损耗 = 虚拟DOM增删改+（与Diff算法效率有关）真实DOM差异增删改+（较少的节点）排版与重绘 直接操作真实DOM的损耗计算： 总损耗 = 真实DOM完全增删改+（可能较多的节点）排版与重绘 Diff算法的原理新旧虚拟DOM对比的时候，Diff算法比较只会在同层级进行, 不会跨层级比较。 所以Diff算法是:深度优先算法。 时间复杂度:O(n) Diff对比流程当数据改变时，会触发setter，并且通过Dep.notify去通知所有订阅者Watcher，订阅者们就会调用patch方法，给真实DOM打补丁，更新相应的视图。 newVnode和oldVnode：同层的新旧虚拟节点 patch方法这个方法作用就是，对比当前同层 ...

前端响应式的实现Flex布局flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 一般会用到的属性： flex-direction:设置Flex容器中子元素的排列方向 flex-wrap:设置Flex容器中子元素的换行方式 flex-flow:设置Flex容器中子元素的排列方向和换行方式 justify-content:设置Flex容器中子元素在主轴上的对齐方式 align-items：用于设置Flex容器中子元素在交叉轴上的对齐方式。 align-content：用于设置多行或多列的Flex容器中子元素在交叉轴上的对齐方式 百分比布 ...

JS实现仿京东首页商品轮播图近期做了一个面试题，仿照京东首页商品轮播图实现一个轮播图 1. HTML 结构搭建HTML 部分主要负责构建轮播图的整体结构，包含一个轮播图容器、图片展示区域以及分页器容器： <div class="carousel"> <div class="carousel-images"> <!-- 多个图片项 --> <div class="carousel-image active"><img src="1.jpg" alt="Image 1"></div> <div class="carousel-image"><img src="2.jpg" alt="Image 2"></div> <!-- 更多图片... --> ...

Vue2.7.14下的单元测试环境搭建依赖 vue”: “^2.7.14”, “@babel/preset-env”: “~7.24.5”, “babel-core”: “~6.26.3”, “@vue/compiler-dom”: “~3.4.26”, “@vue/compiler-dom”: “~3.4.26”, “@vue/test-utils”: “~1.3.6”, “babel-jest”: “~29.7.0”, “babel-preset-env”: “~1.7.0”, “jest”: “~29.7.0”, “jest-environment-jsdom”: “~29.7.0”, “jest-serializer-vue”: “~3.1.0”, “jest-transform-stub”: “~2.0.0”, “jsdom”: “16.7.0”, “vue-jest”: “~3.0.7”, “vue-server-renderer”: “2.7.16”, 安装依赖： npm install @babel/preset-env bab ...

从SSR到ESR的前端渲染方式探索背景对于 web 页面来说，首跳场景（例如 SEO、付费引流）的性能普遍比二跳场景下要差。原因有多种，主要是首跳用户在连接复用，和本地资源缓存利用方面，有很大的劣势。首跳场景下，很多在端上的优化手段（预加载，预执行，预渲染等）无法实施。 在客户端缓存能力无法利用的情况下，利用 cdn 距离用户近的特性，可以结合缓存做一些性能优化。 SSR（Server Side Rendering）为了性能优化考虑，我们一般都会通过服务端渲染（SSR） ，将首屏动态内容直接服务端输出。 这种方式的优点是一次 html 返回即可包含页面主体内容，不需要浏览器二次请求接口后再用 js 渲染。但这种方式的缺点也比较明显，对于距离服务端远，或者服务端处理时间较长的场景，用户会看到较长时间的白屏。而且即使 html 返回完成了，用户并不会立即看到内容，页面还需要加载前置的 js，css 等资源后，才能看到内容。 缺点： ⾮常依赖服务端的处理时间 需要加载js 、css 、图⽚等静态资源， ⽩屏时间⻓ CSR（Client Side Rendering）为了减少白屏时间，考 ...

前端版本更新提示技术方案调研与实现需求场景项目迭代频繁，如果用户打网页后，长时间不关闭对应标签页，也不刷新页面，而此期间有新的版本已经上线了，需要用户手动刷新，不然会出现一直使用旧版本以及会出现一些不可预知的错误 实现思路 采取定时检查，定期向服务器发送请求，检查是否有新版本可用。 拦截页面的网络请求，并且在发现有新版本时，提示用户更新或者自动更新。 通过WebSocket连接实时接收到服务器的推送消息，如果有新版本可用，服务器可以通过WebSocket发送通知给客户端，提醒用户刷新页面。 主流实现方案方案一 通过 ETag 获取应用版本"ETag"(Entity Tag)是HTTP标头的一部分，用于标识网络资源的版本。它通常与HTTP缓存机制一起使用，以便客户端可以在后续请求中使用ETag来检查资源是否已经发生了变化。 ETag的生成 对于静态文件(如css、js、图片等)，ETag的生成策略是:文件大小的16进制+修改时间 对于字符串或Buffer，ETag的生成策略是:字符串/Buffer长度的16进制+对应的hash值 代码实现我们可以通 ...

Ant Design Vue 解决表单验证＋多选框引发的输入值不生效问题开发环境 Vue 2 Ant-Design-Vue 1.7.1 问题复现一个弹框组件采用了Ant Design Vue，包含一个多选框和一个输入框，整体格式为： <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form-model-item prop="nation"> <a-select mode="multiple" v-model="nation" :options="regionOptions" @change ...

计算机网络考纲复习第一章 计算机网络和英特网：计算机网络的定义：两台以上具有独立操作系统的计算机通过某些介质连接成的相互共享软硬件资源的集合体。 协议的定义和基本要素：定义了两个或多个通信实体间所交换报文的格式和次序，以及在报文发送和/或接收或者其他事件方面所采取的行动（响应）。 基本要素： 语法：报文格式 语义：各字段的含义 同步(时序)：报文传输的先后顺序 Internet的构成描述：具体构成： 硬件上： 数以亿计的计算互连设备、通信链路(link)、分组(packet)交换。 服务上： 提供网络应用基础架构、为分布式应用程序提供通信服务接口（无连接服务和面向连接服务）。 网络交换方式： 电路交换 多路复用（Multiple Access） 分片分配到会话 分片没有被会话使用的情况下，分片空载(不共享) 电路级性能（有保证）要求呼叫建立－－建立一个专门的端到端线路(意味着每个链路上预留一个线路) （1）预先建立连接，预留资源，发送方以恒定速度发送数据 （2）电路和通信链路的区别 （3）链路带宽和一条电路的传输速率的关系 （4）频分多路复用和时分多路复用（会计算） （5 ...