![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能优化
文章平均质量分 77
你才是向阳花
这个作者很懒,什么都没留下…
展开
-
前端开发优化之路
前端开发中的性能优化内容广泛,旨在提升网页的加载速度、交互流畅度和用户体验。原创 2024-05-10 13:34:24 · 547 阅读 · 1 评论 -
HTTP 缓存 - 强制缓存和协商缓存
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存,以便下一次访问时重复使用,节省带宽,提高访问速度,降低服务器压力。http缓存机制主要在http响应头中设定,响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求的结果缓存的到期时间,即再次发送请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。原创 2024-04-24 16:41:25 · 1066 阅读 · 0 评论 -
webpack 打包优化 - splitChunks
webpack5 默认情况下只对异步模块做打包优化,额外的打包必须满足 4 个条件(webpack 的默认配置,可修改)。根据需求可调整为只对初始模块做打包优化,或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之:chunks 控制打包作用范围,其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的,不过推荐还是使用默认模式,或者提取一下第三方库。原创 2024-04-19 21:17:19 · 2988 阅读 · 0 评论 -
长页面多模块调接口优化
背景:查询近3年数据之类的,接口就会有大量数据需要查询做聚合,因此接口响应较慢。同时前端页面有大量不同维度展示的图表,渲染阻塞时间过长,用户体验较差,长时间loading,导致无法交互。因此前端做了一个懒加载功能。原创 2024-04-17 11:12:37 · 248 阅读 · 0 评论 -
浏览器渲染,重排和重绘,如何优化
documentFragment不是真实DOM树的一部分,它的属性变化不会直接导致DOM树的更新,故频繁改动不会有性能问题。2. 尽量使用脱离文本流的动画主体,比如让它fixed 或者absolute,脱离文档流,将全局的重排转化为局部的重排,提升一部分性能;浏览器解析页面内容时会生成一个渲染树,当渲染树中部分或全部元素的尺寸、结构、内容发生变化是,浏览器就会出发重新生成渲染树的方法,进而进行重新渲染。一般情况下,动画都会频繁操作dom,会导致被操作的dom比较多的时候页面性能降低。原创 2024-03-29 16:03:40 · 332 阅读 · 0 评论 -
CDN是做什么的,CDN和DNS有什么异同?
用户向CDN全局负载均衡设备发出请求,CDN全局负载均衡设备会根据IP+url选择一台用户所属区域内的负载均衡设备,选择合适的空闲的服务器提供服务,用户就向这个服务器发出请求再返回所需内容。浏览器输入地址之后,先在浏览器缓存中查找是否有该域名,没有的话再去操作系统缓存中查找(host),路由器缓存,ISP的DNS服务器,根域名服务器,按此顺序查找。DNS解析之后,指向CDN专用的DNS服务器,会将域名解析权交给CNAME指向的CDN专用的DNS服务器,CDN就将全局负载均衡设备返回给用户。原创 2024-03-29 16:01:54 · 607 阅读 · 0 评论 -
前端性能优化
思考:从A页面 到B页面,会经历哪些步骤?跳转特别慢,如何优化?首先需要知道到底是哪一步特别慢,可以利用浏览器提供的钩子埋点,检测每个步骤的耗时:chrome提供的performance。原创 2024-03-28 20:10:28 · 1060 阅读 · 0 评论