前端性能优化

优化原则：

• 以空间换时间，使用内存、缓存等方法
• 减少请求次数，减少CPU计算
• 减少IO操作

优化 - 资源加载

压缩代码，减少代码体积（如webpack打包时的开发模式和生产模式）
合并代码（图片、css文件等）减少请求次数、
采用缓存策略：浏览器静态资源缓存
SSR：服务端渲染技术
CDN：让静态资源加载更快

优化 - 渲染

css放在head中，js放在body后面
图片懒加载
使用DomContentLoaded，尽早执行js
dom查询操作缓存
dom增删操作，多次操作合并为一次操作
事件节流防抖

preload 和 prefetch

preload和prefetch为我们提供了更加细粒度地控制浏览器加载资源的方法。
使某些资源在浏览器进入渲染的主进程之前就加载。

preload

<link rel="preload" as="script" href="demo.js" onload="handleOnload()" onerror="handlepreloadError()">
<link rel="preload" as="style" href="demo.css" onload="this.rel=stylesheet"> // css加载后立即生效

1、rel属性值为preload；
2、as属性用于规定资源的类型，并根据资源类型设置Accep请求头，以便能够使用正常的策略去请求对应的资源；
3、href为资源请求地址；
4、onload和onerror则分别是资源加载成功和失败后的回调函数；
5、在请求跨域资源时推荐加上crossorigin属性，否则可能会导致资源的二次加载

<link rel="preload" as="font" href="www.font.com" crossorigin="anonymous">
<link rel="preload" as="font" href="www.font.com" crossorigin="use-credentials">

preload特点

• preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；
• preload可以支持加载多种类型的资源，并且可以加载跨域资源；
• preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码，待到需要时自行调用；

prefetch

• prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；
• 通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；
• 页面跳转的时候，fetch请求不会被中断；
• 加载到的资源可以放入缓存中至少五分钟；
• 当资源加载完成后，如果资源是可以被缓存的，那么其被存储在http
  cache中等待后续使用；如果资源不可被缓存，那么其在被使用前均存储在memory cache；

支持度检测

const preloadSupported = () => {
     
	const link = document.createElement('link');
	const relList = link.relList;
	if (!relList || relList.supports)
		return false;
	return relList.supports('preload');
}