- 博客(17)
- 收藏
- 关注
RSS订阅原创 Nuxt.js
Nuxt.js 是⼀个基于 Vue.js 的服务端渲染应⽤框架，它能够帮助我们快速地构建出具有良好 SEO 效果的应⽤ 程序， Nuxt.js 框架集成了常⻅的 Vue.js 插件，例如路由、状态管理器、打包压缩等功能，⽆需⾃⾏配置即可使⽤。
2024-06-05 10:57:02
467
1
原创 前端如何实现懒加载/图片懒加载
Intersection Observer 是浏览器提供的⼀种异步观察⽬标元素与其祖先或视窗(viewport)交叉状态 的⽅法。使⽤该 API，我们可以知道什么时候元素进⼊或离开视窗，从⽽进⾏相应的处理。getBoundingClientRect() ⽅法返回元素的⼤⼩及其相对于视⼝的位置，通过这个⽅法，我们可以 判断⽬标元素是否在视窗内，如果在，就开始加载。
2024-05-30 13:31:48
181
原创 vue 是如何监听对象和数组变化的？
Vue通过在Vue实例化时对data选项中的对象进⾏递归遍历，对每个属性进⾏数据劫持，即通过 Object.defineProperty⽅法给每个属性添加setter和getter函数。当调⽤这些数组⽅法时，Proxy会触发相应的拦截器函数，从⽽实现对数组的监听。Vue在数组的原始操作⽅法上包裹了重新解析模板的⽅法 push() 、pop()、shift() 、unshift()、splice() 、sort() 、reverse()Proxy可以监听数组的索引变化，⽽不仅限于数组⽅法的调⽤。
2024-05-30 12:14:15
372
1
原创 如何压缩前端项⽬中 JS 的体积？
使⽤ webpack 的 splitChunksPlugin，把运⾏时、被引⽤多次的库进⾏分包，在分包时要注意避免某⼀ 个库被多次引⽤多次打包。对⽆法 Tree Shaking 的库，进⾏按需引⼊模块，如使⽤ import Button from 'antd/lib/Button' ，此处可⼿写 babel-plugin ⾃动完成，但不推荐。code spliting，路由懒加载，只加载当前路由的包，按需加载其余的 chunk，⾸⻚ JS 体积变⼩ (PS: 次条 不减⼩总体积，但减⼩⾸⻚体积)
2024-05-30 12:04:16
232
原创 DNS及⼯作原理
负载均衡：DNS可以根据负载情况，将⽤户请求分发到多个服务器，实现负载均衡。缓存：当DNS服务器⾸次解析域名后，会将结果缓存，加快未来相同域名的解析速度。顶级域名服务器：管理特定顶级域名（如.com、.net）的DNS服务器。权威域名服务器：管理特定域名的DNS服务器，负责返回对应域名的IP地址。根域名服务器：最顶层的DNS服务器，负责返回顶级域名服务器的地址。本地DNS服务器向权威域名服务器发送查询请求，获取域名对应的。本地DNS服务器向顶级域名服务器发送查询请求。⽤户在浏览器中输⼊域名。
2024-05-30 11:44:21
156
原创 TCP和UDP
是⼀个简单的⾯向数据报的传输层协议，它不提供可靠性，只是把应⽤程序传给IP层的数据报发送 出去，但是不能保证它们能到达⽬的地。由于UDP没有链接建⽴过程，所以有⼀个更好的传输速度，通常⽤于不要求绝对可靠的数据传输的 地⽅，如DNS或者视频播放。UDP是⽆连接的协议，通信双⽅之间没有建⽴连接的过程，所以通信⽅式更简单、灵活，但不保证 可靠传输。TCP提供可靠的传输，通过序列号、确认和重传机制，确保数据的正确性和完整性。TCP是⾯向连接的协议，通信双⽅需要建⽴连接和断开连接，确保可靠传输。
2024-05-30 11:24:16
189
原创 WebSocket协议与HTTP协议区别
WebSocket协议为实时双向的浏览器与服务器通信提供了可能，应⽤⼴泛如在线聊天、实时股票等， 但资源消耗更多，且路由，防⽕墙等可能存在不⽀持的问题。
2024-05-30 11:17:46
512
原创 JS中的执⾏上下⽂是什么？
eval函数执⾏上下⽂运⾏在eval函数中的执⾏上下⽂（⽤不到不做讨论）提升函数声明和变量声明（var声明的变量）（ECMAscript中定义的抽象概念）执⾏上下⽂出栈，js⾃动执⾏垃圾回收机制。，可以存在任意数量的函数执⾏上下⽂。的变量和函数所处的环境。解析和执⾏时存在的环境。
2024-05-30 11:04:27
160
2
原创 为什么会发⽣样式抖动？
频繁修改布局属性：在JavaScript中频繁修改元素的布局属性（如width、height、position等）， 会导致浏览器不断进⾏布局计算和绘制。频繁读取样式：在JavaScript中频繁读取元素的样式属性，如offsetTop、offsetLeft等，会导致浏览器不断进⾏布局计算。使⽤渲染导致回流的属性：当对元素进⾏⼀些会导致⻚⾯回流的属性操作时（例如改变字体⼤⼩、 调整浏览器窗⼝⼤⼩等），会导致样式抖动。重复计算布局：布局计算是相对耗时的操作，频繁进⾏布局计算会降低⻚⾯性能。
2024-05-30 10:54:55
223
原创 CSS伪类和伪元素及应⽤场景
伪类伪类⽤于描述元素的特定状态或⾏为。在选择器后⾯使⽤冒号（:）来表示。常⻅的伪类有 :hover 、 :active 、 :visited 、 :focus 等。伪类选择器根据元素的状态或⾏为来选择元素，例如在⿏标悬停、元素被点击或获取焦点时应⽤样式。伪类选择器可以针对具有特定状态的元素应⽤不同的样式。应⽤场景：链接悬停效果：使⽤ :hover 伪类选择器来为链接添加悬停状态下的样式，增强⽤户交互体验。
2024-05-30 10:46:59
227
原创 跨站脚本攻击DDoS？如何防⽌DDoS攻击？
分布式拒绝服务攻击（Distributed Denial of Service，DDoS）：这是⼀种通过向⽬标服务发送⼤ 量的请求，从⽽耗尽服务资源，导致正常⽤户⽆法访问或使⽤该服务的攻击。攻击者利⽤多个不同来源的计算机（也称为“僵⼫⽹络”或“⾁鸡”）发起攻击，使得⽬标服务器过载或崩溃。
2024-05-30 10:38:47
241
原创 跨站脚本攻击（XSS）？如何防⽌XSS攻击？
跨站脚本攻击（Cross-Site Scripting，XSS）是⼀种常⻅的⽹络安全漏洞，攻击者通过在⽬标⽹⻚ 中注⼊恶意脚本，使⽤户的浏览器执⾏该脚本。恶意脚本可以窃取⽤户敏感信息、修改⻚⾯内容、 重定向⽤户到恶意⽹站等，从⽽对⽤户、⽹站和应⽤造成危害。
2024-05-30 10:07:22
627
3
原创 CDN性能优化
更快、更可靠地将资源文件（音乐、图片、视频、应用程序）发送给用户，来提供高性能、低成本的网络内容传递给用户，提高请求的速度。如果缓存服务器没有缓存用户的请求内容，则会向上一级缓存服务器请求，直到访问网站的源服务器。请求地址，负载均衡设备选择一台最优的缓存服务器（边缘节点服务器）提供访问。回源率=（CDN没缓存+缓存过期+不可缓存的请求）/ 全部的请求。用户发起域名的请求，DNS服务器将域名解析交给CDN。根据URL携带的内容，选择有所需内容的服务器。根据用户的ip地址，距离用户最近的服务器。
2024-05-29 13:39:24
262
原创 http和https
即超⽂本传送协议，是Web联⽹的基础，也是⼿机PC联⽹常⽤的协议之⼀，HTTP协议是建⽴在TCP协议之上的⼀种应⽤。HTTP连接最显著的特点是客户端发送的每次请求都需要服务器响应请求，从建⽴连接到关闭连接的过程称为“⼀次连接”http和https协议的主要区别。HTTP请求-HTTP响应。优化协议，增加更多功能。
2024-05-29 12:39:45
274
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人