前端性能优化

1 防抖

函数触发频繁，希望在固定时间内，某事件只触发一次

function debounceFn (fn, time) {
	let timer = null;
	return function() {
		let _this = this
		const args = [...arguments]
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			fn.apply(_this, args)
		}, time)
	}
}

2 节流

连续触发事件，但在n秒内只执行一次

function throttleFn(fn, time) {
	let timer = null
	return function(){
		const _this = this
		const args = [...arguments]
		if (!timer) {
			timer = setTimeout(() => {
				timer = null
				fn.apply(_this, args)
			}, time)	
		}
	}

}

3 打包去掉console和开启gzip压缩

在config.ts中配置

import CompressionPlugin from 'compression-webpack-plugin'

export default defineConfig({
	//需要安装babel-plugin-transform-remove-console插件
	extraBabelPlugins: ['transform-remove-console']，
	chainWebpack: (config, {webpack}) => {
		//需要安装compression-webpack-plugin插件
		config.plugin('compression-webpack-plugin').use(CompressionPlugin, [{
			test: /\.(js|css|html)$/i,
			threhold: 10240, // 超过10k的文件压缩
			deleteOriginalAssets: false, //不删除源文件
		}])
	}
})

// 前端的gzip压缩已完成，后续需要在nginx中配置gzip_static on

4 前端缓存

web缓存分为浏览器缓存和http缓存

• 浏览器缓存：localStorage、sessionStorage和cookie
• http缓存：强制缓存、协商缓存

（1）强制缓存

• expires（已废弃）：设置缓存时间，在这个事件之前请求资源都从本地读取（本地事件不准会存在问题）
• cache-control：设置max-age需要缓存多久

cache-control属性：

• max-age：客户端资源被缓存多久
• s-maxage：代理服务器缓存时长
• no-cache：强制进行协商缓存
• no-store：禁止任何缓存策略
• public：资源可以被浏览器缓存也可以被代理服务器缓存
• private：资源只能被浏览器缓存

（2）协商缓存
基于last-modified的协商缓存实现：

1. 将服务器端读出的修改时间赋给last-modified字段
2. 设置cache-control：no-cache

当客户端读取到last-modified字段时，会在下次请求头中携带if-modified-since，之后服务端需要对比if-modified-since的时间和再次读取该资源的修改时间来判断

上述情况存在以下问题：

• 如果文件内容没有修改，例如修改文件名后改回来，会导致缓存失效
• 当文件在几百毫秒时间内修改完成，而文件修改时间记录的最小单位是秒，会导致文件修改时间不会改变

基于ETag的协商缓存：
etag的值是根据文件内容生成的唯一哈希值

5 使用defer异步加载script文件或将script文件放在最后加载

6 将图片格式转换为webp

7 将moment.js换成day.js

8 启用事件委托

将绑定在子元素上的事件委托给父元素

9 适当使用memo

10 使用懒加载

11 使用骨架屏