浏览器技术的不断发展，现代网页应用体验已经不断接近原生应用，许多大公司也将原生应用迁移到浏览器，甚至更极端的，放弃原生应用，只提供网页应用。随之而来的，网页应用的代码量在不断增加，如果还像以前的样子，将所有代码放到一两个文件中，势必会影响网页加载和渲染的速度。所以网页应用一般都会利用构建工具，如webpack、gulp和rollup等，将代码按模块、路由或者命名空间进行分割，然后生成一个个比较小的js、css和html文件。但是问题又随之而来了，在如此众多的资源文件中，该如何决定加载的先后顺序和优先级呢？幸运的是，浏览器提供了preload、prefetch、preconnect和prerender等指令用来帮助网页优化资源的加载。这些指令用于<link>标签中，可以用来加载图像、css、js和字体等关键资源。/ k- b7 D* @+ ^! q" L! | r 一、preload 7 {0 o* D$ e2 @1 t2 u) `( n( P, C" f <link rel="prelaod" as="script" href="https://xxx.xxx.com/xxx.js">/ @0 d+ d# u9 u* Z. o6 N g2 G 二、prefetch $ R$ W3 O( u. U0 P& ~8 P* M' R& c <link rel="prefetch" as="script" href="https://xxx.xxx.com/xxx.js">4 p _- y+ ?3 @& o" Z; L& u prefetch有prefetch和dns-prefetch两种* W3 C, C9 N' B 1. prefetch ; t* c1 X2 p0 M" C <link rel="prefetch" href="https://fonts.gstatic.com/" >$ v6 `% W( S5 F- r; R 2. dns-prefetch 0 u5 G- r! i$ g- V4 \# C <link rel="dns-prefetch" href="https://fonts.gstatic.com/" >" [7 x* A i; `$ b/ p 三、preconnect : [9 U* F* o) V0 }9 H1 G <link rel="preconnect" href="https://cdn.example.com">- o+ p. z0 q( S% U& C 四、prerender ) x$ y3 e& ^+ P* q q: H- a) m <link rel="prerender" href="http://example.com"> 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-7-19 08:59:17