首屏优化方案

preload与prefetch的区别对比

两者都是link标签的rel属性
除了ref属性
还有as（加载文件的属性，浏览器会根据这个确定加载的优先级）、href（加载文件的地址）、onload（加载完成的毁掉函数）、crossrigin（跨域加载的属性）
如果加载font文件一定要加上as属性否则会到这二次加载

跨域的文件要加上crossorigin

preload是提前加载
一般在加载css的时候会给上这个属性，以免页面在渲染的时候样式没有加载完成导致页面样式错乱

preload有as属性
浏览器会通过as属性的值来确定加载的优先级，
所以preload既不会影响重要资源的加载，也不会让次要资源影响到自身的加载。

prefetch
加载的优先级非常低
常用于闲时加载
对下个页面做预加载

对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch

async 与 defer的区别对比

两者都是使script标签异步加载的属性
不会因为js的加载导致dom的渲染阻塞

defer虽然是异步加载但是如果多个script标签价了defer在执行js代码的时候还是会按照标签的先后吮吸进行加载。

async不会按照script标签的先后顺序执行，而是谁先加载完成谁先执行。
但是如果dom渲染的速度很慢，async的脚本会在页面load完成前就执行了

不加任何属性的script

文档在解析的过程中，遇到script脚本就会停止解析，去加载script脚本的内容，
并且会等到脚本加载完成并执行完成后才会继续加载页面。

defer

script的加载不会阻塞dom的解析和渲染。
当页面解析和渲染完成后等所有脚本加载并按照顺序执行后才会出发DOMContentLoaded。

依赖dom操作的脚本。

async

脚本加载完成后就会去执行。
完全和dom的加载渲染异步。
脚本的加载不计入DOMContentLoaded的时间统计

适用于完全不依赖dom的脚本比如埋点统计

打包

按需引入
分包加载
gzip压缩

网络

http2.0
预加载
cdn分发

用户距离哪台服务器的距离近就从哪个服务器加载资源

对网络请求进行合并，将碎片请求进行合并

视觉

骨架屏
loading
懒加载 loading=“lazy”
路由和组件做动态加载

缓存

给静态资源增加强缓存

框架

做服务端渲染ssr
利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件，可以加入async属性。如果是优先级低且没有依赖的js，可以加入defer属性。