<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zcBaluga的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zcBaluga</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zcBaluga]]></copyright><item><title><![CDATA[面试-假设现在你的项目变得用户数很多，你该从那几个方面思考去做这个项目]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139077969</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139077969</guid><author>zcBaluga</author><pubDate>Mon, 20 May 2024 23:58:29 +0800</pubDate><description><![CDATA[前端性能优化：优化前端代码和页面加载速度，减少资源的请求和传输时间，以提升用户访问页面的加载速度和体验。可以使用浏览器缓存、CDN 加速、压缩和合并资源、懒加载等技术手段来优化前端性能。
后端性能优化：优化后端代码和数据库查询，减少服务器响应时间，以提升系统的并发处理能力和响应速度。使用缓存技术如 Redis 来提高数据访问的速度，使用负载均衡技术来分摊服务器负载。
水平扩展和负载均衡：通过水平扩展（即增加服务器数量）来提高系统的处理能力，同时使用负载均衡技术将请求分发到不同的服务器上，以分摊负载并提高系]]></description><category></category></item><item><title><![CDATA[跨域通信方式]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139077961</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139077961</guid><author>zcBaluga</author><pubDate>Mon, 20 May 2024 23:57:23 +0800</pubDate><description><![CDATA[*1.使用代理服务器：常见的使用webpack代理，**Webpack中有一个功能叫做devServer，可以用来启动一个本地的开发服务器，同时也可以配置代理服务器。**2.jsonp:**利用script标签进行通信，创建带有回调函数的script标签来加载一个js文件，服务器返回的数据通过回调函数拿到，**3.cors:**通过在服务器进行设置，允许指定的域名请求进行访问。]]></description><category></category></item><item><title><![CDATA[css八股（一）]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139048358</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139048358</guid><author>zcBaluga</author><pubDate>Sun, 19 May 2024 20:53:15 +0800</pubDate><description><![CDATA[CSS的盒子模型有：标准盒子模型、IE盒子模型CSS的盒子模型区别：​	标准盒子模型：margin、border、padding、content​	IE盒子模型：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：//标准盒子模型//IE盒子模型。]]></description><category></category></item><item><title><![CDATA[面试让你将一个前后端不分离的项目要转成前后端分离的，你怎么规划？]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139033155</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139033155</guid><author>zcBaluga</author><pubDate>Sat, 18 May 2024 23:08:01 +0800</pubDate><description><![CDATA[根据项目的需求和团队的经验，选择适合的后端技术栈。通过调试工具，如浏览器开发者工具，Postman等，检查API接口的调用和数据的传输。：定义后端项目的API接口，用于前端项目和后端项目之间的通信。：根据原来的前端功能，重构前端代码，将原有的页面和交互逻辑拆分成组件化的结构，利用API接口和后端项目进行数据的交互。：根据原来的后端功能，重构后端代码，将原有的业务逻辑和数据处理拆分成可复用的模块，提供API接口供前端调用。：搭建后端开发环境，包括安装和配置后端开发工具，如数据库、服务器、开发框架等。]]></description><category></category></item><item><title><![CDATA[进程和线程的区别？JS单线程带来的好处？]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139033131</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139033131</guid><author>zcBaluga</author><pubDate>Sat, 18 May 2024 23:06:32 +0800</pubDate><description><![CDATA[在JS运行的时候可能会阻止UI渲染，这就说明两个线程是互斥的。其中的原因是因为JS可以修改DOM，如果在JS执行的时候UI线程还在工作，就可能导致不能安全的渲染UI。这其实也是一个单线程的好处，得益于JS是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。具体来说，就是你在浏览器打开一个Tab页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS引擎线程、HTTP请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当 请求结束后，该线程可能就会被销毁。]]></description><category></category></item><item><title><![CDATA[深拷贝和浅拷贝及代码实现]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139013998</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139013998</guid><author>zcBaluga</author><pubDate>Fri, 17 May 2024 22:15:02 +0800</pubDate><description><![CDATA[首先可以提供 Object.assign 来解决这个问题，Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以 Object.assign 是浅拷贝不是深拷贝。浅拷贝只解决了第一层的问题，如果接下去的值还有对象的话，那么就又回到最开始的问题了，两者享有相同的地址。通常可以通过 **JSON.parse(JSON.stringify(object))**来解决。通常来说浅拷贝就能解决大部分问题了，但是当我们遇到如下情况时候就可能需要使用深拷贝了。]]></description><category></category></item><item><title><![CDATA[为什么合并文件（合并http请求）之后的性能会变好？]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139013200</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139013200</guid><author>zcBaluga</author><pubDate>Fri, 17 May 2024 21:15:16 +0800</pubDate><description><![CDATA[但是注意有特殊的场景，由于合并资源后可能导致网络往返次数的增加，当网络延迟很大时，是会增大耗时的（参考 TCP 拥塞控制）。先简单看下HTTP请求的主要过程：DNS解析（T1）-> 建立TCP连接（T2）-> 发送请求（T3）-> 等待服务器返回首字节（TTFB）（T4）-> 接收数据（T5）从上面请求过程中，可以看出当多个请求时，请求中的DNS解析、建立TCP连接等步骤都会重复执行多遍。经过研究可以得出结论：当文件体积较小的时候，(网络延迟低的场景下)合并后的文件的加载耗时明显小于加载多个文件的总耗时；]]></description><category></category></item><item><title><![CDATA[flex：1是哪三个属性的复合属性，这三个属性又分别有什么样的含义，用于设置什么的？]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/139013192</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/139013192</guid><author>zcBaluga</author><pubDate>Fri, 17 May 2024 21:14:32 +0800</pubDate><description><![CDATA[1.flex-grow：该属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果一个项目的flex-grow属性为2，而其他项目都为1，则前者占据的剩余空间比其他项多一倍。2.flex-shrink：该属性定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。因此，flex：1等同于flex：1 1 0，表示项目将等分剩余空间，允许缩小，并且初始大小为0。他的默认值为auto，即项目的本来大小。]]></description><category></category></item><item><title><![CDATA[JS的数组模式]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138978731</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138978731</guid><author>zcBaluga</author><pubDate>Thu, 16 May 2024 23:27:22 +0800</pubDate><description><![CDATA[回到上面第二段代码例子，当我们给数组最后一项赋值的时候，本质上相当于这个数组已经具备了一定的长度而且是大于10万的，并且这个数组中间有着非常多的空洞，只有最后一位有数字。这意味着该操作执行完后，数组就会在V8里面进入了字典模式，就会导致在前面耗时会多出很多。两个代码都是在初始化一个长度为1亿的数组，区别是第二段代码先为最后一项赋值了一次。字典模式：预分配数组大于等于100000，且数组有空洞。1.从0开始连续的初始化数组，以避免数组进入字典模式。：对应C语言的数组，速度快，紧凑。首先来看下面两段代码。]]></description><category></category></item><item><title><![CDATA[面试问到GET和POST的区别？不要只说get拿数据，post传数据了]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138978182</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138978182</guid><author>zcBaluga</author><pubDate>Thu, 16 May 2024 23:05:08 +0800</pubDate><description><![CDATA[常常可以看到有人说POST请求比GET请求更加安全，其实是错误的，正如前面所说，可以了解到GET POST本质上并无区别，只是约定的规范而已，大家只是更倾向于把GET请求的参数放在query中，POST请求的参数放到body上，这样相对于GET请求的参数直接放到了URL上，如果带有密码或隐私信息，直观上看的确显得不安全，但其实对于网络安全的角度而言，query和body上的参数都是明文的。]]></description><category></category></item><item><title><![CDATA[防抖和节流的概念及代码实现]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138924930</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138924930</guid><author>zcBaluga</author><pubDate>Wed, 15 May 2024 22:15:51 +0800</pubDate><description><![CDATA[定义：在单位时间内，只会触发一次事件。如果事件触发后，再次重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束。定义：触发高频事件后，n秒内函数只会执行一次.如果n秒内高频事件再次被触发，则重新计算时间。]]></description><category></category></item><item><title><![CDATA[JWT的认证过程]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138924841</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138924841</guid><author>zcBaluga</author><pubDate>Wed, 15 May 2024 21:50:30 +0800</pubDate><description><![CDATA[2.后端核对账号密码成功后，把用户id等其他信息作为JWT 负载，把它和头部分别进行base64编码拼接后签名，形成一个JWT（token）。因为Token是作为JSON加密的形式保存在客户端，所以JWT是跨语言的，原则上是任何web形式都支持。通过JSON形式作为在web应用中的令牌，可以在各方之间安全地把信息作为JSON对象传输。传统的token验证需要在服务端保存一份token，JWT不需要保存只需要在服务端进行验证。5.验证通过后后端使用JWT中包含的用户信息进行其他的操作，并返回对应结果。]]></description><category></category></item><item><title><![CDATA[position的五种常规取值]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138872331</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138872331</guid><author>zcBaluga</author><pubDate>Tue, 14 May 2024 22:05:53 +0800</pubDate><description><![CDATA[绝对定位：当position取值为absolute时，是绝对定位，脱离文档流的布局，后面的元素会填补它空下来的位置，它的起始位置为最近的position值而不是static的父元素，若没有则是以HTML为准，由top、bottom、left、right确定最终位置，可以使用z-index进行分层。固定定位：当position的取值为fixed时，该元素为固定定位，脱离文档流，它的起始位置相对于视图是固定位置不随滚动条的滑动而滚动。以下是父元素是相对定位，子元素是绝对定位的情况。]]></description><category></category></item><item><title><![CDATA[sql调优的23种方案]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138826010</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138826010</guid><author>zcBaluga</author><pubDate>Tue, 14 May 2024 00:46:04 +0800</pubDate><description><![CDATA[3.应该尽量避免在where子句中对字段进行null值判断，否则将导致引擎放弃使用索引而进行全表扫描，如：select id from table where num is null，可以在num上设置默认值0以确保表中num列没有null值，然后这样查询：select id from table where num = 0。11.在使用索引字段作为条件时，如果该索引是【复合索引】，那么必须使用到该索引中的【第一个字段】作为条件时才能保证系统使用该索引，否则该索引将不会被使用。]]></description><category></category></item><item><title><![CDATA[JS实现异步编程常见的几种方法]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138736299</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138736299</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 01:38:47 +0800</pubDate><description><![CDATA[这些是JavaScript中实现异步编程的一些常见方式。根据具体的应用场景和需求，选择适合的异步编程方式可以使代码更加清晰和可维护。]]></description><category></category></item><item><title><![CDATA[检测当前屏幕尺寸的方法]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138736249</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138736249</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 01:36:06 +0800</pubDate><description><![CDATA[在这个样式规则中，使用min-device-width和max-device-width指定设备的最小和最大宽度，从而对不同屏幕尺寸应用不同样式。这些方法都可以用来获取设备的屏幕尺寸，根据具体的使用场景和需求，可以选择最合适的方法。注意，获取到的屏幕尺寸值可能和实际屏幕尺寸存在一定的误差，需要进行适当的处理和兼容。这个值是相对于视窗的宽度和高度，可以用来检测设备的屏幕尺寸。这个方法通过获取screen对象的width和height属性，可以获取当前设备屏幕的宽度和高度。如何检测当前设备的屏幕尺寸？]]></description><category></category></item><item><title><![CDATA[前端使用token登录的常见流程]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138736179</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138736179</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 01:32:19 +0800</pubDate><description><![CDATA[前端保存 Token：前端接收到后端返回的 Token 后，一般会将 Token 保存在本地，通常使用浏览器的 Web Storage（如 localStorage 或 sessionStorage）进行存储。发送 Token：以后每次与后端进行交互时，前端会在请求中携带 Token，通常将 Token 放在请求的头部中的 Authorization 字段中。返回响应：如果 Token 验证通过，后端会根据请求的内容进行相应的处理，并将处理结果以响应的方式返回给前端。]]></description><category></category></item><item><title><![CDATA[关于前端安全了解过什么----八股]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138735884</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138735884</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 01:16:54 +0800</pubDate><description><![CDATA[跨站脚本攻击（XSS）防御：XSS 是一种常见的安全漏洞，攻击者通过在页面注入恶意脚本，在用户浏览器中执行恶意代码。为防止 XSS 攻击，前端开发人员应使用合适的编码和转义方式来处理用户输入数据，例如对特殊字符进行转义或使用安全的 HTML 渲染库。客户端数据存储安全：当需要在客户端存储数据时，如使用 localStorage 或 sessionStorage，需要注意数据的敏感性。敏感数据应加密处理。输入验证与过滤：前端应对用户输入数据进行有效的验证和过滤，防止用户输入恶意数据或非法字符。]]></description><category></category></item><item><title><![CDATA[降低加载时间和优化页面性能的技巧]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138735522</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138735522</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 00:58:35 +0800</pubDate><description><![CDATA[使用异步加载：使用异步加载的方式加载JavaScript文件，在页面加载过程中并行下载其他资源。延迟JavaScript加载：将JavaScript文件的加载推迟到页面的最后，或者使用async或defer属性来控制脚本的加载和执行时机，以确保首次渲染的速度不受阻塞。使用缓存：使用适当的缓存策略，让浏览器缓存已下载的文件，避免重复的网络请求。按需加载：根据页面的需求，使用需要时才加载的技术（如懒加载或按需加载库）来延迟加载部分JavaScript代码，以减少初始加载的负载。]]></description><category></category></item><item><title><![CDATA[Vue3引入的新特性]]></title><link>https://blog.youkuaiyun.com/zcBaluga/article/details/138734893</link><guid>https://blog.youkuaiyun.com/zcBaluga/article/details/138734893</guid><author>zcBaluga</author><pubDate>Sun, 12 May 2024 00:36:20 +0800</pubDate><description><![CDATA[5.Proxy取代Object.definePropety：Vue3引入了Proxy API来代替了Vue2.x中的Object.defineProperty,从而获得了更好的性能和更加强大的响应式表现。1.Composition API 组合式API：Vue3中引入了组合式API，提供了新的函数API来解决混入（mixin）的问题，使得组件代码更加模块化、可复用、易于维护和测试。6.更好的TypeScript支持：在Vue3中加入了对TS的原生支持，可以自动推断类型和检查类型。]]></description><category></category></item></channel></rss>