首页 > 其他分享 >前端性能优化

前端性能优化

时间:2023-01-25 20:11:58浏览次数:36  
标签:缓存 渲染 前端 dom 雪碧图 图标 优化 性能 加载

图片压缩和文件压缩、雪碧图/精灵图、节流防抖、HTTP缓存、本地缓存、Vue的keep-alive缓存、ssr服务器端渲染、懒加载、对dom查询进行缓存、将dom操作合并 标准回答 前端性能优化分为两类,一类是文件加载更快,另一类是文件渲染更快。

加载更快的方法: 让传输的数据包更小(压缩文件/图片):图片压缩和文件压缩 减少网络请求的次数:雪碧图/精灵图、节流防抖 减少渲染的次数:缓存(HTTP缓存、本地缓存、Vue的keep-alive缓存等)

渲染更快的方法: 提前渲染:ssr服务器端渲染 避免渲染阻塞:CSS放在HTML的head中 JS放在HTML的body底部 避免无用渲染:懒加载 减少渲染次数:对dom查询进行缓存、将dom操作合并、使用减少重排的标签 加分回答 雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起,比如logo、搜索图标、切换图标等。

电商项目中最常用到的懒加载,一般在查看商品展示的时候通常下拉加载更多,因为商品数据太多,一次性请求过来数据太大且渲染的时间太长。

标签:缓存,渲染,前端,dom,雪碧图,图标,优化,性能,加载
From: https://www.cnblogs.com/jycom/p/17067218.html

相关文章

  • m基于PSO粒子群优化算法的最优样本组合策略分析matlab仿真
     1.算法描述        PSO算法是一种随机的、并行的优化算法。它的优点是:不要求被优化函数具有可微、可导、连续等性质,收敛速度较快,算法简单,容易编程实现。然而,P......
  • 前端重新部署如何通知用户刷新网页?
    1.目标场景有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。2.思考解决方案如何去......
  • 2022前端年底面试总结
    又到年底了,很多小伙伴又开始​​跳槽​​​了,本次汇总都是​​面试真题​​​,来自各位小伙伴有​​大厂​​​也有​​小厂​​​,还有​​外包​​可以说很全面了。某外包公......
  • 前端常用英语系列
    大家好,我是小满zs,今年23,没错就是哔哩哔哩那个。录制视频经常被大家吐槽英语不标准,这边汇总一下常用词汇,查缺补漏,可以联系我。大部分素材来自于MDNHTML(只统计常用标签)<!DOCT......
  • 如何高效高性能的选择使用 MySQL 索引?
    想要实现高性能的查询,正确的使用索引是基础。本小节通过多个实际应用场景,帮助大家理解如何高效地选择和使用索引。1.独立的列独立的列,是指索引列不能是表达式的一部分,也不......
  • m基于GA遗传优化的BP神经网络时间序列预测算法matlab仿真
    1.算法描述       将遗传算法(GA)与BP神经网络相结合,使用GA优化BP神经网络的主要参数。然后将影响输出响应值的多个特征因素作为GA-BP神经网络模型的输入神经元,输......
  • 前端性能优化篇
    HTTP1.1升级到HTTP21.改进持久连接HTTP/1.0每进行一次HTTP通信,都需要经历建立TCP连接、传输HTTP数据和断开TCP连接三个阶段(如下图)。http1 http1.1之后 从上图可以看......
  • vue-grid-layout数据可视化图表面板优化过程所遇问题汇总
    对于drag事件不熟悉的,请先阅读:《drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践》之前老项目grafana面板,如下图所示(GEM添加图表是直接到图表编辑,编辑完成后自......
  • C++Day09 深拷贝、写时复制(cow)、短字符串优化
    一、std::string的底层实现1、深拷贝1classString{2public:3String(constString&rhs):m_pstr(newchar[strlen(rhs)+1]()){4}5private:6cha......
  • 如何通过top发现性能问题
    在性能测试时,Linux操作系统中可以通过top命令来发现和定位服务器性能消耗的问题。执行top命令后获取到的数据如下图所示第1行显示的是系统运行信息:系统当前时间为15:5......