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

【性能优化】前端性能优化

时间:2022-10-20 21:47:12浏览次数:53  
标签:样式 性能 图片 优化 前端 加载

背景

我们经常提到要创建高性能的前端,高性能的前端有哪些需要我们注意的能

请求图片样式多,
文件压缩和分割,
工具算法靠策略,
事件委托位操作。

解释

请求:减少请求数量,控制返回数据的大小,静态资源缓存、CDN、SSR
图片:延迟加载、响应式图片、降低图片质量、避免无效宽高、CSS动画替换动图、webp格式的图片
样式:先加载样式后加载JS、重绘重排、Flex、Grid布局、字体图标、选择器优先级、浏览器的60FPS及requestAnimationFrame
压缩:Html、JS、CSS、字体、Gzip
分割:路由、import()、splitChunks、babel-transform-runtime
工具:F12 performance页签、window.performance 对象
算法:考虑时间、空间复杂度,结合查找表、MAP、位运算
事件:使用事件委托

总结
每天背诵一次

标签:样式,性能,图片,优化,前端,加载
From: https://www.cnblogs.com/lee35/p/16811382.html

相关文章

  • #yyds干货盘点#前端图片预加载
    上一篇文章讲了图片懒加载的两种方法,今天再来讲讲图片预加载。用css和JavaScript实现预加载实现预加载图片有很多方法,包括使用css、JavaScript及两者的各种组合。这些技术可......
  • #yyds干货盘点#前端图片预加载
    上一篇文章讲了图片懒加载的两种方法,今天再来讲讲图片预加载。用css和JavaScript实现预加载实现预加载图片有很多方法,包括使用css、JavaScript及两者的各种组合。这些技术可......
  • 前端图形:SVG与Canvas
    00、前端图形前端代码实现图形的几种方式:CSS、SVG、Canvas(主要是JavaScript编码)CSS也是可以画图的,需要借助于高宽、边框border、clip-path裁剪、渐变色背景等属性来模拟......
  • 分布式之计算高性能
    @目录一、计算高性能的概念二、PPC方案[懒加载]三、prefork方案[预先加载进程方案]四、TPC方案五、prethread方案六、线程池方案七、线程池--轮询方案八、多路复用-React......
  • SQL优化笔记(MySQL)
    SQL优化笔记(MySQL)目标减少IO次数降低CPU的计算基本原则1.尽量少joinMySQL的优势在于简单,但这在某些方面其实也是其劣势。MySQL优化器效率高,但是由于其统......
  • Mysql慢sql优化
    Mysql慢sql优化index1.MySQL的执行过程2.索引的定义3.MySQL执行计划explainordesc4.索引使用/创建规则5.弊端6.设计规范7.SQL建议1.MySQL的执行过程 2.索引的定......
  • "百钱买百鸡"的优化算法
       最近独到一篇关于"百钱买百鸡"的Python编程,觉得挺有意思,索性自己改写一下优化算法。   原题目:#我国古代数据加张邱建在《算经》中提出一个著名的数序为......
  • Mysql 系列 | 性能优化 - 紧急临时处理
    在实际开发过程中,业务高峰期常遇到Mysql响应变慢。为了不影响业务,要在短时间内临时提升性能。短链接原因分析短链接是连接数据库后,执行很少的SQL后就断开,下次需......
  • 记录--一些看起来很叼难的前端面试题
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.ajax最大的缺陷「对搜索引擎不友好,并且存在跨域问题限制」搜索引擎会屏蔽掉所有baijavascript代码du,......
  • 平台前端搭建
       git拖一个nuxt模板,修改信息 随后终端执行npminstall,会根据package.json文件下载相关依赖下载element-ui,npminstallelement-ui新建  运行n......