zcBaluga-优快云博客

原创面试-假设现在你的项目变得用户数很多，你该从那几个方面思考去做这个项目

前端性能优化：优化前端代码和页面加载速度，减少资源的请求和传输时间，以提升用户访问页面的加载速度和体验。可以使用浏览器缓存、CDN 加速、压缩和合并资源、懒加载等技术手段来优化前端性能。后端性能优化：优化后端代码和数据库查询，减少服务器响应时间，以提升系统的并发处理能力和响应速度。使用缓存技术如 Redis 来提高数据访问的速度，使用负载均衡技术来分摊服务器负载。水平扩展和负载均衡：通过水平扩展（即增加服务器数量）来提高系统的处理能力，同时使用负载均衡技术将请求分发到不同的服务器上，以分摊负载并提高系

2024-05-20 23:58:29 282

原创跨域通信方式

*1.使用代理服务器：常见的使用webpack代理，**Webpack中有一个功能叫做devServer，可以用来启动一个本地的开发服务器，同时也可以配置代理服务器。**2.jsonp:**利用script标签进行通信，创建带有回调函数的script标签来加载一个js文件，服务器返回的数据通过回调函数拿到，**3.cors:**通过在服务器进行设置，允许指定的域名请求进行访问。

2024-05-20 23:57:23 452

原创 css八股（一）

CSS的盒子模型有：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、content IE盒子模型：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：//标准盒子模型//IE盒子模型。

2024-05-19 20:53:15 474

原创面试让你将一个前后端不分离的项目要转成前后端分离的，你怎么规划？

根据项目的需求和团队的经验，选择适合的后端技术栈。通过调试工具，如浏览器开发者工具，Postman等，检查API接口的调用和数据的传输。：定义后端项目的API接口，用于前端项目和后端项目之间的通信。：根据原来的前端功能，重构前端代码，将原有的页面和交互逻辑拆分成组件化的结构，利用API接口和后端项目进行数据的交互。：根据原来的后端功能，重构后端代码，将原有的业务逻辑和数据处理拆分成可复用的模块，提供API接口供前端调用。：搭建后端开发环境，包括安装和配置后端开发工具，如数据库、服务器、开发框架等。

2024-05-18 23:08:01 1176

原创进程和线程的区别？JS单线程带来的好处？

在JS运行的时候可能会阻止UI渲染，这就说明两个线程是互斥的。其中的原因是因为JS可以修改DOM，如果在JS执行的时候UI线程还在工作，就可能导致不能安全的渲染UI。这其实也是一个单线程的好处，得益于JS是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。具体来说，就是你在浏览器打开一个Tab页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS引擎线程、HTTP请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

2024-05-18 23:06:32 274

原创深拷贝和浅拷贝及代码实现

首先可以提供 Object.assign 来解决这个问题，Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以 Object.assign 是浅拷贝不是深拷贝。浅拷贝只解决了第一层的问题，如果接下去的值还有对象的话，那么就又回到最开始的问题了，两者享有相同的地址。通常可以通过 **JSON.parse(JSON.stringify(object))**来解决。通常来说浅拷贝就能解决大部分问题了，但是当我们遇到如下情况时候就可能需要使用深拷贝了。

2024-05-17 22:15:02 225

原创为什么合并文件（合并http请求）之后的性能会变好？

但是注意有特殊的场景，由于合并资源后可能导致网络往返次数的增加，当网络延迟很大时，是会增大耗时的（参考 TCP 拥塞控制）。先简单看下HTTP请求的主要过程：DNS解析（T1）-> 建立TCP连接（T2）-> 发送请求（T3）-> 等待服务器返回首字节（TTFB）（T4）-> 接收数据（T5）从上面请求过程中，可以看出当多个请求时，请求中的DNS解析、建立TCP连接等步骤都会重复执行多遍。经过研究可以得出结论：当文件体积较小的时候，(网络延迟低的场景下)合并后的文件的加载耗时明显小于加载多个文件的总耗时；

2024-05-17 21:15:16 514

原创 flex：1是哪三个属性的复合属性，这三个属性又分别有什么样的含义，用于设置什么的？

1.flex-grow：该属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果一个项目的flex-grow属性为2，而其他项目都为1，则前者占据的剩余空间比其他项多一倍。2.flex-shrink：该属性定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。因此，flex：1等同于flex：1 1 0，表示项目将等分剩余空间，允许缩小，并且初始大小为0。他的默认值为auto，即项目的本来大小。

2024-05-17 21:14:32 606

原创 JS的数组模式

回到上面第二段代码例子，当我们给数组最后一项赋值的时候，本质上相当于这个数组已经具备了一定的长度而且是大于10万的，并且这个数组中间有着非常多的空洞，只有最后一位有数字。这意味着该操作执行完后，数组就会在V8里面进入了字典模式，就会导致在前面耗时会多出很多。两个代码都是在初始化一个长度为1亿的数组，区别是第二段代码先为最后一项赋值了一次。字典模式：预分配数组大于等于100000，且数组有空洞。1.从0开始连续的初始化数组，以避免数组进入字典模式。：对应C语言的数组，速度快，紧凑。首先来看下面两段代码。

2024-05-16 23:27:22 559

原创面试问到GET和POST的区别？不要只说get拿数据，post传数据了

常常可以看到有人说POST请求比GET请求更加安全，其实是错误的，正如前面所说，可以了解到GET POST本质上并无区别，只是约定的规范而已，大家只是更倾向于把GET请求的参数放在query中，POST请求的参数放到body上，这样相对于GET请求的参数直接放到了URL上，如果带有密码或隐私信息，直观上看的确显得不安全，但其实对于网络安全的角度而言，query和body上的参数都是明文的。

2024-05-16 23:05:08 689

原创防抖和节流的概念及代码实现

定义：在单位时间内，只会触发一次事件。如果事件触发后，再次重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束。定义：触发高频事件后，n秒内函数只会执行一次.如果n秒内高频事件再次被触发，则重新计算时间。

2024-05-15 22:15:51 242

原创 JWT的认证过程

2.后端核对账号密码成功后，把用户id等其他信息作为JWT 负载，把它和头部分别进行base64编码拼接后签名，形成一个JWT（token）。因为Token是作为JSON加密的形式保存在客户端，所以JWT是跨语言的，原则上是任何web形式都支持。通过JSON形式作为在web应用中的令牌，可以在各方之间安全地把信息作为JSON对象传输。传统的token验证需要在服务端保存一份token，JWT不需要保存只需要在服务端进行验证。5.验证通过后后端使用JWT中包含的用户信息进行其他的操作，并返回对应结果。

2024-05-15 21:50:30 329

原创 position的五种常规取值

绝对定位：当position取值为absolute时，是绝对定位，脱离文档流的布局，后面的元素会填补它空下来的位置，它的起始位置为最近的position值而不是static的父元素，若没有则是以HTML为准，由top、bottom、left、right确定最终位置，可以使用z-index进行分层。固定定位：当position的取值为fixed时，该元素为固定定位，脱离文档流，它的起始位置相对于视图是固定位置不随滚动条的滑动而滚动。以下是父元素是相对定位，子元素是绝对定位的情况。

2024-05-14 22:05:53 1106

原创 sql调优的23种方案

3.应该尽量避免在where子句中对字段进行null值判断，否则将导致引擎放弃使用索引而进行全表扫描，如：select id from table where num is null，可以在num上设置默认值0以确保表中num列没有null值，然后这样查询：select id from table where num = 0。11.在使用索引字段作为条件时，如果该索引是【复合索引】，那么必须使用到该索引中的【第一个字段】作为条件时才能保证系统使用该索引，否则该索引将不会被使用。

2024-05-14 00:46:04 901

原创 JS实现异步编程常见的几种方法

这些是JavaScript中实现异步编程的一些常见方式。根据具体的应用场景和需求，选择适合的异步编程方式可以使代码更加清晰和可维护。

2024-05-12 01:38:47 360

原创检测当前屏幕尺寸的方法

在这个样式规则中，使用min-device-width和max-device-width指定设备的最小和最大宽度，从而对不同屏幕尺寸应用不同样式。这些方法都可以用来获取设备的屏幕尺寸，根据具体的使用场景和需求，可以选择最合适的方法。注意，获取到的屏幕尺寸值可能和实际屏幕尺寸存在一定的误差，需要进行适当的处理和兼容。这个值是相对于视窗的宽度和高度，可以用来检测设备的屏幕尺寸。这个方法通过获取screen对象的width和height属性，可以获取当前设备屏幕的宽度和高度。如何检测当前设备的屏幕尺寸？

2024-05-12 01:36:06 943

原创前端使用token登录的常见流程

前端保存 Token：前端接收到后端返回的 Token 后，一般会将 Token 保存在本地，通常使用浏览器的 Web Storage（如 localStorage 或 sessionStorage）进行存储。发送 Token：以后每次与后端进行交互时，前端会在请求中携带 Token，通常将 Token 放在请求的头部中的 Authorization 字段中。返回响应：如果 Token 验证通过，后端会根据请求的内容进行相应的处理，并将处理结果以响应的方式返回给前端。

2024-05-12 01:32:19 802

原创关于前端安全了解过什么----八股

跨站脚本攻击（XSS）防御：XSS 是一种常见的安全漏洞，攻击者通过在页面注入恶意脚本，在用户浏览器中执行恶意代码。为防止 XSS 攻击，前端开发人员应使用合适的编码和转义方式来处理用户输入数据，例如对特殊字符进行转义或使用安全的 HTML 渲染库。客户端数据存储安全：当需要在客户端存储数据时，如使用 localStorage 或 sessionStorage，需要注意数据的敏感性。敏感数据应加密处理。输入验证与过滤：前端应对用户输入数据进行有效的验证和过滤，防止用户输入恶意数据或非法字符。

2024-05-12 01:16:54 385

原创降低加载时间和优化页面性能的技巧

使用异步加载：使用异步加载的方式加载JavaScript文件，在页面加载过程中并行下载其他资源。延迟JavaScript加载：将JavaScript文件的加载推迟到页面的最后，或者使用async或defer属性来控制脚本的加载和执行时机，以确保首次渲染的速度不受阻塞。使用缓存：使用适当的缓存策略，让浏览器缓存已下载的文件，避免重复的网络请求。按需加载：根据页面的需求，使用需要时才加载的技术（如懒加载或按需加载库）来延迟加载部分JavaScript代码，以减少初始加载的负载。

2024-05-12 00:58:35 258

原创 Vue3引入的新特性

5.Proxy取代Object.definePropety：Vue3引入了Proxy API来代替了Vue2.x中的Object.defineProperty,从而获得了更好的性能和更加强大的响应式表现。1.Composition API 组合式API：Vue3中引入了组合式API，提供了新的函数API来解决混入（mixin）的问题，使得组件代码更加模块化、可复用、易于维护和测试。6.更好的TypeScript支持：在Vue3中加入了对TS的原生支持，可以自动推断类型和检查类型。

2024-05-12 00:36:20 457

原创 Vite的工作原理是什么？为什么会比webpack快？

热更新：Vite 使用了基于浏览器原生 ES 模块的编译，利用浏览器自带的模块加载器来实现动态更新，而不是像 Webpack 一样常规的热更新。所以Vite 相比于 Webpack，采用了更加高效的 ES 模块加载方式，按需编译，缓存和预构建等技术，从而提高了构建速度，特别是在开发环境下，使得开发者可以更加快速地实现热更新和重新编译。这样可以减少不必要的编译，加快打包速度。缓存：Vite 在编译时会缓存已经编译过的模块，下次重新构建时可以直接使用缓存，不会再次编译已经编译过的模块，提高了构建速度。

2024-05-11 19:42:05 409 1

原创 vue路由有哪几种模式？原理是什么？

需要注意的是，无论使用哪种模式，Vue Router 都会通过监听 URL 的变化来匹配对应的路由，然后根据路由配置展示相应的组件内容。这种匹配和渲染的原理是基于前端的路由机制，通过 JavaScript 来修改浏览器的 URL 并动态加载不同的组件内容，从而实现单页应用的页面切换效果。在 Vue 路由中，有两种常见的路由模式：hash 模式和 history 模式。在实际开发中，可以通过在 Vue Router 的创建时设置。属性来指定使用的路由模式，默认为 hash 模式。vue路由有哪几种模式？

2024-05-11 19:35:48 441 1

原创路由对象route和router的区别

属性是 Vue Router 提供的特殊属性，用于方便地访问当前的路由信息和进行路由的跳转操作。是两个不同的对象，分别代表了当前路由信息和路由器实例。是当前路由的信息对象，用于获取当前路由的相关信息；则是整个路由器的实例，用于管理路由并进行路由的跳转。路由对象route和router的区别。在 Vue Router 中，需要注意的是，在组件中使用的。

2024-05-11 18:39:12 263 1

原创谈谈对JSON的理解

因为JSON的语法基本上是基于JS的，因此很容易将JSON和js中的对象弄混，但是应该要注意的是JSON和js中的对象不是一回事，JSON中的对象格式更加严格，比如说在JSON中属性值不能为函数，不能出现NaN注意的属性值等，因此大多数js对象是不符合JSON对象的格式的。在项目开发中，使用JSON作为前后端数据交换的方式，在前端通过将一个符合JSON格式的数据结构序列化为JSON字符串，任何将它传递到后端，后端通过JSON格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。

2024-05-11 18:30:43 256 2

原创 Vue的响应式原理及其实现方式

4.依赖收集 vue通过Dep类来管理Watcher和属性之间的关系 Vue通过Dep类来管理Watcher和属性之间的关系。当属性的getter被调用时，会将当前的Watcher添加到Dep的数组中，建立起依赖关系。5.Watcher 观察者，创建依赖关系，数据变化时执行对应操作 Watcher是观察者的概念，它负责创建Vue实例中模板中使用到的依赖关系，并在数据变化时执行对应的更新操作。3.setter 修改操作在setter中，当属性被修改时，Vue会通知依赖列表中的所有Watcher进行更新。

2024-05-11 00:44:08 258 1

原创前端八股----JS的内存泄露

内存泄漏指的是在程序运行过程中，分配的内存无法被及时释放或回收，导致内存占用不断增加的情况。被遗忘的定时器或回调函数：当设置了定时器或回调函数后，如果忘记清除它们，那么它们会一直保持活动状态，直到浏览器关闭或手动清除。闭包：闭包可以在内部函数中引用外部函数的变量，如果闭包的生命周期超过了需要，那么外部函数中的变量将无法被释放，导致内存泄漏。无意的全局变量：将变量定义为全局变量时，即使在不再需要它们时，它们也会继续存在于内存中，导致内存泄漏。在处理 DOM 对象时，避免意外地保留对其的引用。

2024-05-11 00:40:10 211 2

原创 sass/less/stylus的区别

Scss 和 LESS 语法较为严谨， LESS 要求⼀定要使用大括号“{}”， Scss 和Stylus 可以通过缩进表示层次与嵌套关系。Sass 是基于Ruby 语⾔的，而 LESS 和Stylus 可以基于NodeJS NPM 下载相应库后进⾏编译；他是CSS 上的⼀种抽象层。他们是⼀种特殊的语法/语⾔编译成 CSS。Scss 无全局变量的概念， LESS 和Stylus 有类似于其它语⾔的作用域概念。均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性。

2024-05-11 00:29:06 178 1

原创 JS和TS有什么区别？

而TypeScript作为JavaScript的超集，可以无缝地与现有的JavaScript生态系统集成，可以使用绝大部分JavaScript库和工具，并且具有更好的类型支持。总之，TypeScript是JavaScript的超集，通过添加静态类型检查和扩展功能，提供了更好的代码可靠性和可维护性。JavaScript是一种动态类型语言，变量的类型在运行时确定。而TypeScript是在JavaScript基础上添加了静态类型系统的超集，可以在编译阶段进行类型检查，提供更好的代码可靠性和开发效率。

2024-05-11 00:23:08 211 2

原创什么是AJAX？如何使用JS发起AJAX请求？

以上是使用纯JavaScript发起AJAX请求的基本步骤。但是，如今的JavaScript框架（如jQuery、axios等）提供了更简单和更强大的方式来处理AJAX请求。这些框架封装了底层的AJAX操作，简化了代码和兼容性问题，给了我们更丰富的应用AJAX的方案。AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式和动态网页的技术。它允许使用JavaScript在不重新加载整个页面的情况下与服务器进行数据交换。如何使用JS发起AJAX请求？

2024-05-11 00:20:30 180 2

原创什么是 WebSocket？它和传统的 HTTP 请求有什么区别？

需要注意的是，WebSocket 协议需要服务器端支持，并且与传统的 HTTP 服务器有所不同。连接的持久性：在传统的 HTTP 请求中，客户端向服务器发送请求后，服务器响应请求并关闭连接，整个过程是一次性的。WebSocket 是一种在客户端和服务器之间建立持久性连接的协议，它提供了全双工通信通道，使得服务器可以主动向客户端推送数据，同时也可以接收客户端发送的数据。更高的性能：由于 WebSocket 的双向通信特性，可以减少请求和响应的次数，降低了网络延迟和带宽的占用，从而提高了应用的性能和效率。

2024-05-11 00:16:04 425 1

原创从浏览器地址栏输入url到显示页面的步骤（分简略和详细版）

7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发 load事件 23. 显示页面 (HTML解析过程中会逐步显示页面)17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释。13. 浏览器检查响应状态吗：是否为1XX， 3XX， 4XX， 5XX，这些情况处理与2XX不同。

2024-05-10 23:57:07 707

原创虚拟DOM的解析过程

同时，虚拟 DOM 的比较和更新过程也是高度优化的，只对需要进行更新的部分进行操作，减少了不必要的 DOM 操作，提高了渲染效率。5.应用更新补丁：将生成的更新补丁应用到真实DOM上，进行实际的DOM操作，以达到将真实DOM更新为新的组件状态和结构的目的。2.生成新的虚拟DOM树：随着组件状态的改变，会触发数据更新，从而生成一个新的虚拟DOM树，以表示更新后的组件状态和结构。1.构建初始的虚拟DOM树：在组件渲染的过程中，会创建一个初始的虚拟DOM树，来描述当前组件的状态和结构。

2024-05-10 23:45:33 241

原创几种降低代码耦合度的方法（附带有优缺点）

模块间通过明确的接口进行通信，减少模块间的直接依赖和相互影响。这种方式提供了良好的封装性，每个模块只关注自己的功能，有利于团队合作和代码重用。通过抽象和解耦，可以减少代码间的直接依赖，提高代码的可维护性和可测试性。通过集中管理状态和数据，不同模块之间的交互通过订阅和分发状态变更的方式进行，减少了模块间的直接依赖和通信。优点：减少了模块间的直接耦合，提高状态和数据共享的可控性和可维护性。缺点：引入模块化的规范和机制，增加了一定的开发和构建成本。优点：减少模块间的直接依赖，提高模块的可测试性和可替换性。

2024-05-10 23:02:13 1260

原创子组件是否可以改变父组件的数据？

在Vue中，子组件默认情况下是不可以直接改变父组件的数据的，这是为了维护数据流的单向性，即父组件向子组件传递数据的方式。如果子组件需要修改父组件的数据，需要触发一个自定义事件来通知父组件进行数据的变更，从而达到改变父组件数据。使用总的来说，子组件默认情况下是不可以直接改变父组件的数据的，而是通过props进行数据的传递和修改。如果确实需要在子组件中修改父组件的数据，可以通过自定义事件和特殊的方法来实现。然而，如果确实有需要在子组件中修改父组件的数据，Vue提供了一些特殊的方法来实现，例如在子组件中使用。

2024-05-10 22:30:00 428

原创 Vue的性能优化常用操作

要避免使用不必要的v-if和v-show指令，以及这两者的区别：v-if会在DOM中添加或删除元素，而v-show则是对需要的元素进行隐藏，实际上还会存在。如果没有特殊需要，最好使用v-show。减少不必要的watcher：watcher会增加状态变化的监听，当状态变化时执行操作，当组件状态的变化可以通过简单的计算属性、事件或组件之间的传递来实现时，就不需要用watcher。使用懒加载：对于较大的组件或者资源，可以使用懒加载来避免不必要的初始加载，减少页面的初始网络请求，从而加快页面的基本组件加载。

2024-05-10 00:39:44 342

zcBaluga的博客