提高浏览器性能-preload、prefetch、prerender

本文介绍了浏览器性能优化的三种策略:preload、prefetch和preconnect。preload具有优先级但不阻塞事件,用于当前页面资源预加载;prefetch在空闲时加载未来可能需要的资源,可能存在资源浪费;preconnect则预先完成DNS解析、SSL建立等操作,加速后续请求。三者都允许跨域,但preload在页面跳转后失效,且preload能通过as字段设置优先级。
摘要由CSDN通过智能技术生成

1.preload

preload是浏览器的一种预加载资源模式,它的作用是将资源率先加载,然后等到需要的时候再去使用,是一种资源的加载和解析解耦的方法。它有如下特点:

  1. 具有优先级,但是并不会阻塞onload事件:preload在网页中具有强制加载的功能,所以它的加载具有优先级,不过它仅仅是加载资源而已,并不会执行,还需要script资源进行加载。
  2. 它设计的目的是为当前页面的资源进行预加载,跳转页面的时候就不会使用到。
  3. 使用as字段来进行设定优先级,如as=style则为最高优先级。优先级顺序为:HTML/CSS>Images>JS

2.prefetch

相比于preloadprefetch的是在浏览器空闲的时候再进行加载,它更关注网页初始化完毕后进行加载的资源或者打开另外一个网页的时候加载的资源。不过prefetch要加载跨域资源的时候需要有crossorigin字段

  1. 它可能是一件坏事,因为加载的内容可能不会使用到
  2. 利用空闲时间再进行加载
  3. 也是实现加载和解析相反的功能

相比于preloadprefetch有更多中选择,有dns-prefetchprerender

  • dns-prefet
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值