性能优化八股

针对CSS，如何优化性能

  1. 减少选择器的数量：其直接影响到页面的加载速度
  2. 避免使用复杂的CSS属性：如 border-radius、box-shadow、filter、:nth-child 等，需要浏览器进行较多的计算；
  3. 使用CSS压缩工具，移除未使用的CSS代码减少文件体积
  4. 使用缓存，可以将常用CSS文件存储在用户本地
  5. 避免重绘与回流

针对HTML，如何优化性能

  • 优化图片
    1. 压缩图片
    2. 选择正确的图片格式
    3. 懒加载图片
  • 合并css和js以减少HTTP请求，避免重复加载资源
  • 缓存策略
    1. 通过HTTP设置缓存头，让浏览器缓存静态资源
    2. 利用CDN来缓存和分发静态资源
  • 异步加载和延迟加载
    1. 将非关键资源异步加载
    2. 实现延迟加载
  • 通过优化和合并DNS查找，减少页面加载的DNS延迟
  • 减少重绘和回流：避免频繁操作DOM，尽量使用CSS3动画和过渡
  • 避免使用内联样式，减少HTML文件大小
  • 使用语义化标签
  • 使用性能分析工具，Chorome Devtools,lighthouse等

针对Javascript，如何优化性能

  • 减少DOM操作：频繁的DOM操作会导致页面的重绘和回流，会消耗大量性能
  • 使用事件委托：将事件监听器绑定在父元素，利用事件冒泡机制来处理子元素事件，减少事件处理函数的数量
  • 使用节流和防抖：处理一些高频触发的事件时，使用防抖和节流可以限制事件处理函数的执行次数
  • 避免内存泄露：及时清理不再使用的变量和对象，避免占用内存
  • 代码优化和压缩：使用压缩工具和代码优化工具对Javascript代码优化压缩，减小文件体积
  • 代码拆分和懒加载：将大型代码库拆分为较小的模块，并用懒加载来按需加载这些模块
  • 使用性能分析工具：使用Chorome DevTools,Lighthouse等工具来识别和优化性能瓶颈