一个成功的网站开发必须要用到的几个属性
简介
得益于浏览器技术的不断发展,现代网页应用体验已经不断接近原生应用,许多大公司也将原生应用迁移到浏览器,甚至更极端的,放弃原生应用,只提供网页应用。随之而来的,网页应用的代码量在不断增加,如果还像以前的样子,将所有代码放到一两个文件中,势必会影响网页加载和渲染的速度。所以网页应用一般都会利用构建工具,如 webpack、gulp 和 rollup 等,将代码按模块、路由或者命名空间进行分割,然后生成一个个比较小的 js、css 和 html 文件。但是问题又随之而来了,在如此众多的资源文件中,该如何决定加载的先后顺序和优先级呢?幸运的是,浏览器提供了preload
、prefetch
、preconnect
和prerender
等指令用来帮助网页优化资源的加载。这些指令用于<link>标签中,可以用来加载图像、css、js 和字体等关键资源。
preload
<link rel="prelaod" as="script" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly94eHguY29tL3h4eC5qcw==">
指定了preload
的 link 标签将会告诉浏览器,提高该资源的加载优先级,必须而且要提前进行资源加载,不管该资源是否被使用。同时,preload
不会阻塞页面的渲染过程,避免了下载资源对页面渲染造成的延迟。preload
主要用于网页必须的关键资源加载,对于不确定是否使用的资源,使用preload
可能会造成带宽的浪费,以及性能损耗。
prefetch
<link rel="prefetch" as="script" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly94eHguY29tL3h4eC5qcw==">
与 preload 不同,prefetch 是一个低优先级的资源提示,它的作用是告诉浏览器加载可能会用到的资源,比如其他网页、继续滚动才会加载的资源等等。
prefetch 有 prefetch 和 dns-prefetch 两种:
1. prefetch
<link rel="prefetch" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbS8=" >
提前加载未来可能会用到的资源,浏览器将会在空闲时获取资源,获取完成后,将会存储在浏览器缓存中,等到真正使用时,直接从内存中读取即可。
2. dns-prefetch
<link rel="dns-prefetch" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbS8=" >
标识了dns-prefetch
的资源,在真正获取之前,将会提前进行 dns 解析,可以加快请求的速度。一般dns-prefetch
针对的是跨域资源,同域资源其实是无效的。道理也很简单,同域的资源在请求 html 页面的时候已经解析完成了,所以dns-prefetch
一般用于 CDN、以及请求第三方资源,比如 google font、google analytics 等。
preconnect
<link rel="preconnect" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9jZG4uZXhhbXBsZS5jb20=">
preconnect
允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作,这包括 DNS 解析,TLS 协商,TCP 握手,这消除了往返延迟并为用户节省了时间。可以理解为preconnect
是升级版的dns-prefetch
,预执行更多动作,同时也消耗更多的性能,请谨慎使用。
prerender
<link rel="prerender" rel="nofollow" href="https://mybj123.com/links?url=aHR0cDovL2V4YW1wbGUuY29t">
prerender
,也就是预渲染,将会下载完整的网页资源,然后在后台进行渲染,这时会创建 DOM 结构,执行 CSS 和 JavaScript,结果将会被放置在内存中。注意此指令将会加载链接包含的所有资源,会消耗大量的网络带宽、内存和 cpu,建议只用于用户肯定会访问的页面链接。
总结
通过浏览器为我们提供了preload
、prefetch
、preconnect
和prerender
等指令来帮助网页优化资源的加载。将这些指令用于<link>标签中,可以用来加载图像、css、js 和字体等关键资源,从而达到网页的更好优化,提升用户体验。
码云笔记 » 一个成功的网站开发必须要用到的几个属性