前端性能优化总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>面试题默写第一遍</title> </head> <body> <h3>性能优化了解多少？</h3> <p>性能优化这个范围很大，具体分为加载优化、图片优化、css优化、js优化、渲染优化、首屏加载优化、vue优化等</p> <p> 我采用的工具是 chrome 浏览器的 lighthouse 工具，我重点看其中的 opperlizetions 里面会列举很多建议，包括移除多余js，查看开销大的模块，设置合适分辨率的图片，哪些dom操作对渲染有阻碍等 </p> <p> 加载优化中：进行压缩合并 代码分割 大的模块异步加载，小的模块合并加载等；第三方模块用cdn的方式引入；合理使用 prefetch 分步场景适合； </p> <p> 图片优化：图片压缩；使用雪碧图，iconfont，base64内联；根据不同屏幕尺寸使用合适比例以及分辨率的图片，img 有一个 srcset 属性可以进行设置；简化颜色；合并相同属性； </p> <p>css优化：css写在头部；尽量不用内联样式；不使用@import方式引入；css不出现计算；</p> <p>js优化：合理使用 preload prefetch ；js放在body底部；合理使用 async defer</p> <p>渲染优化：减少回流和重绘操作；</p> <p>首屏加载优化：首屏js异步加载，采用内联样式，移除非首屏需要的css，js；采用服务端渲染，加载完html直接渲染；预渲染技术；</p> <p>vue优化：路由动态加载，采用import方式导入；图片懒加载 vue-lazyload，v-if与v-for不用在同一个标签</p> <h1>漏掉的</h1> <p>prefetch预加载，分步场景比较适用</p> <p>合并相同属性，简化颜色</p> <p>使用async defer</p> <p>js 用 defer 放在头部，提前加载，不阻塞dom</p> <p>代码分离，将首屏不需要的代码分离出去</p> <p>使用dns-prefetch 减少 dns 查询时间</p> <p>keep-alive缓存组件</p> <p>列表页添加key</p> <p>使用事件代理</p> </body> </html>
要默写要默写要默写 这是第一遍；
