说一说前端性能优化手段？

【得分点】
图片压缩和文件压缩、雪碧图/精灵图、节流防抖、HTTP缓存、本地缓存、Vue的keep-alive缓存、ssr服务器端渲染、懒加载、对dom查询进行缓存、将dom操作合并
【参考答案】
标准回答
前端性能优化分为两类，一类是文件加载更快，另一类是文件渲染更快。
加载更快的方法：
• 让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩
• 减少网络请求的次数：雪碧图/精灵图、节流防抖
• 减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等）
渲染更快的方法：
• 提前渲染：ssr服务器端渲染
• 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
• 避免无用渲染：懒加载
• 减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签
加分回答
雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起，比如logo、搜索图标、切换图标等。
电商项目中最常用到的懒加载，一般在查看商品展示的时候通常下拉加载更多，因为商品数据太多，一次性请求过来数据太大且渲染的时间太长。
延伸阅读
雪碧图/精灵图
• 雪碧图/精灵图：多张图标合并在一张大图中
• 使用方法
1. 引入图片
2. 通过背景定位具体图标
• 优化方式
o 减少加载网页图片时服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数， 降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
ssr服务器端渲染
1. CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的， js文件运行在浏览器上面，服务端只返回一个html模板。
2. SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
• 优化方式：减少网络传输：响应快，用户体验好，首屏渲染快，对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO.
缓存
• http缓存：不需要通过服务器传输数据，直接从http缓存中获取
o 协商缓存
o 强制缓存
• 本地缓存：
o localstorage：把一般不需要变动的大型数据存储在localstorage中，打开页面判断localstorage中是否有该数据，有就直接从浏览器中获取
• 优化方式：
o 减少网络传输的次数
css和js文件的位置

// 不缓存DOM查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
// 每次循环，都会计算length，频繁进行DOM查询
// 缓存DOM查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i++) {
// 缓存length，只进行一次DOM查询
}

• 优化方式：减少相同运算的运算次数
将dom操作合并
• 多次dom操作合并成一次
• 优化方式：减少dom渲染的次数

// 未合并
const listNode = document.getElementById('list')
// 执行插入
for (let i = 0; i < 10; i++) {
const li = document.createElement('li')
li.innerHTML = 'list item ' + i
// 创建一个插入一个
listNode.appendChild(frag)
}
// 合并
const listNode = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()
// 执行插入
for (let i = 0; i < 10; i++) {
const li = document.createElement('li')
li.innerHTML = 'list item ' + i
frag.appendChild(li)
}
// 都完成之后，再插入到DOM树中
listNode.appendChild(frag)