浏览器技术的不断发展,现代网页应用体验已经不断接近原生应用,许多大公司也将原生应用迁移到浏览器,甚至更极端的,放弃原生应用,只提供网页应用。随之而来的,网页应用的代码量在不断增加,如果还像以前的样子,将所有代码放到一两个文件中,势必会影响网页加载和渲染的速度。所以网页应用一般都会利用构建工具,如webpack、gulp和rollup等,将代码按模块、路由或者命名空间进行分割,然后生成一个个比较小的js、css和html文件。但是问题又随之而来了,在如此众多的资源文件中,该如何决定加载的先后顺序和优先级呢?幸运的是,浏览器提供了preload、prefetch、preconnect和prerender等指令用来帮助网页优化资源的加载。这些指令用于<link>标签中,可以用来加载图像、css、js和字体等关键资源。. @+ e8 Z0 k8 n3 O 一、preload ' t W, E" i; N G* X, O6 a, Y
与preload不同,prefetch是一个低优先级的资源提示,它的作用是告诉浏览器加载可能会用到的资源,比如其他网页、继续滚动才会加载的资源等等。 6 W. s( M4 p8 Hprefetch有prefetch和dns-prefetch两种! W( o, _0 R& O, h
1. prefetch0 C4 Z9 g; i' K: r3 U