前端性能优化（加载时及运行时优化）

一、加载时优化

• 减少http请求（可以将多个小文件合并成一个大文件）
• 使用服务器端渲染（客户端渲染是获取html文件，根据需要下载js文件，运行文件，生成DOM再渲染；服务器端端渲染是服务器端返回html文件，客户端只需要解析html文件即可）
• 静态资源使用CDN
• css写在头部，js写在底部（js如果放在头部，需要给script标签加defer属性）
• 字体图标代替图片图标
• 利用缓存不重复加载相同的资源 设置expires
• 图片优化
  – 1.图片延迟加载（在页面中先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片）
  （1）image.getBoundingClientRecr.top() < window.innerHeight，监听滚动事件，图片到窗口顶部的距离小于窗口高度时显示
  （2）IntersectionObserver

<img data-src="xxx" />

const callback = entries => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			const image = entry.target;
			const data_src = image.getSttribute('data-src');
			image.setAttribute('src', data_src);
			observer.unObserve(image);
		}
	})
}

const observer = new IntersectionObserver( callback ):

images.forEach(imgae => {
	observer.observe(image);
});

– 2. 降低图片质量
– 3. 尽可能用css3效果代替图片
– 4. 使用雪碧图

• 通过webpack按需加载代码

二、运行时优化

• 减少重绘重排
  – 1. js修改样式时，不要直接写样式，而是替换class类来该变样式
  – 2. 如果要对dom元素执行一系列的操作，可以将dom元素脱离文档流，修改完成之后再将它带回文档，推荐使用隐藏元素或文档碎片

• 使用事件委托

• if-else对比switch（判断条件多时用switch）

• 不要覆盖原生方法

• 降低css选择器的复杂性

• 使用弹性布局flexbox

• 用transform和opacity属性更改来实现动画（不会触发重排重绘）

1. 加载优化

• 代码压缩合并
• 代码分割，可以基于路由或动态加载
• 大模块异步加载，例如ECharts，在加载成功后再显示对应图表
• 小模块适度合并，将一些零散的小模块合并一起加载速度较快

2. 图片优化

• 小图使用雪碧图，iconFont，base64
• 图片使用懒加载
• webp代替其他格式
• 图片一定要压缩

3. css优化

• css写在头部
• 避免css表达式
• 移除空置的css规则
• 避免行内style样式

4. js优化

• js写在body底部
• js用defer放在头部，提前在后台下载，又不阻塞dom解析

5. 渲染优化

• 尽量减少重绘和回流（涉及到样式、尺寸、节点增减的操作，都会触发）
• 用变量缓存dom样式，不要频繁读取
• 通过documentFragment或innerHTML批量操作dom
• 动画尽量用requestAnimationFrame，不要用定时器

6. 首屏优化

• 代码分离，将首屏不需要的代码分离出去

7. webpack打包优化

8. vue优化

• 路由懒加载组件
• keep-alive缓存组件
• 列表项添加key，保证唯一
• 列表项绑定事件，使用事件代理（v-for）
• v-if和v-for不要用在一个标签上