性能优化八股
性能优化八股
Milo针对CSS，如何优化性能
- 减少选择器的数量：其直接影响到页面的加载速度
- 避免使用复杂的CSS属性：如 border-radius、box-shadow、filter、:nth-child 等，需要浏览器进行较多的计算；
- 使用CSS压缩工具，移除未使用的CSS代码减少文件体积
- 使用缓存，可以将常用CSS文件存储在用户本地
- 避免重绘与回流
针对HTML，如何优化性能
- 优化图片
- 压缩图片
- 选择正确的图片格式
- 懒加载图片
- 合并css和js以减少HTTP请求，避免重复加载资源
- 缓存策略
- 通过HTTP设置缓存头，让浏览器缓存静态资源
- 利用CDN来缓存和分发静态资源
- 异步加载和延迟加载
- 将非关键资源异步加载
- 实现延迟加载
- 通过优化和合并DNS查找，减少页面加载的DNS延迟
- 减少重绘和回流：避免频繁操作DOM，尽量使用CSS3动画和过渡
- 避免使用内联样式，减少HTML文件大小
- 使用语义化标签
- 使用性能分析工具，Chorome Devtools,lighthouse等
针对Javascript，如何优化性能
- 减少DOM操作：频繁的DOM操作会导致页面的重绘和回流，会消耗大量性能
- 使用事件委托：将事件监听器绑定在父元素，利用事件冒泡机制来处理子元素事件，减少事件处理函数的数量
- 使用节流和防抖：处理一些高频触发的事件时，使用防抖和节流可以限制事件处理函数的执行次数
- 避免内存泄露：及时清理不再使用的变量和对象，避免占用内存
- 代码优化和压缩：使用压缩工具和代码优化工具对Javascript代码优化压缩，减小文件体积
- 代码拆分和懒加载：将大型代码库拆分为较小的模块，并用懒加载来按需加载这些模块
- 使用性能分析工具：使用Chorome DevTools,Lighthouse等工具来识别和优化性能瓶颈
哪些操作会造成内存泄露？
内存泄露是指本应该被垃圾回收器回收的内存，因为某些原因未被回收，导致内存持续占用。
- 全局缓存，一个对象不再需要却没有被清除
- 闭包，过度使用闭包可能会持续持有引用，导致外部上下文无法被回收
- 给元素添加了事件监听器，但当元素不再使用时，未移除这些监听器
- 设置了定时器setInterval未在适当时候使用clearInterval清除
- 某些DOM元素从文档中移除了，但是其引用未被释放
- 创建了全局变量来长期存储数据，不需要时未适当清理
一句话总结（面试背）“前端内存泄漏就 6 大坑：全局缓存、闭包循环、事件未 off、定时器未清、DOM 游离引用、window 大数据；
定位用 Performance + Memory 快照，修复就一句话：“用完置 null / removeEventListener / clearInterval”。”
前端性能优化从哪些方面考虑
- 减少HTTP请求：合并文件，使用雪碧图等方法
- 利用缓存：使用浏览器缓存，服务端缓存，减少重复请求
- 压缩资源：压缩CSS，JS，HTML文件减少文件大小
- 异步加载：用异步方式加载JS，避免阻塞页面渲染
- 延迟加载：对不立即需要的资源，可以延迟加载，比如图片懒加载
- 代码分隔：按需加载，将代码分隔成小块，只加载用户需要的部分
- 优化CSS选择器：编写高效的CSS选择器，避免复杂选择器影响性能
- 减少重绘和回流：优化DOM操作
- 使用CDN：通过内容分发网络加速资源加载
- 优化图片：使用合适格式和大小，如WebP格式
