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