博客
关于我
使用 Preload&Prefetch 优化前端页面的资源加载
阅读量:837 次
发布时间:2019-03-24

本文共 2386 字,大约阅读时间需要 7 分钟。

对于前端页面来说,静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令——preloadprefetch,它们能够辅助浏览器优化资源加载的顺序和时机,提升页面性能。

一、从一个实例开始

我们开发了一个简单的收银台,支付过程中可以展开优惠券列表选择相应的券。从动图可以看到,列表第一次展开时,优惠券背景有一个逐渐显示的过程,体验上不是很好。

问题的原因也很明显:优惠券列表展开时需要加载图片,导致背景渐显的过程实际上是图片加载的过程;当网速慢的时候,这个问题会更加明显。

经过分析,我们发现问题的根源是背景图的加载时机太晚。如果能在优惠券列表渲染前加载好背景图,这个问题就不会出现。

对于这个问题,我们可以采取以下两个方案:

  • 使用内联图片,即将图片转换为base64编码的data-url。这种方式将图片的信息集成到CSS文件中,避免了图片资源的单独加载。但图片内联会增加CSS文件的大小,增加首屏渲染的时间。

  • 使用JS代码对图片进行预加载。

  • 预加载方案

    和我们之前方案相比,prefetch(预取)是一种更优的解决方案。prefetch是浏览器机制,利用浏览器空闲时间下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示,并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时,便可以快速从浏览器缓存中获取。

    可以看到,在首屏的请求列表中已经出现了优惠券背景图ticket_bg.png的加载请求,但是请求本身看起来和普通请求没什么不同;展开优惠券列表后,network中增加了一次新的ticket_bg.png访问请求,这个请求的status虽然也是200,但有一个特殊的标记——prefetch cache,表明这次请求的资源来自prefetch缓存。

    预加载

    除了prefetch,还有一个相似的预加载方式——preload(预加载)。preload也属于资源提示,用于辅助浏览器优化资源加载。preload用于声明当前页面的关键资源,强制浏览器提前加载。

    我们对比了使用preload前后的页面首次加载效果。再次查看页面字体加载效果:

    字体文件的最大问题是它们的加载时机太迟。当CSS解析到字体文件时,浏览器只能使用降级字体,造成了Flash of Unstyled Text(FOUT)现象。在网络情况较差时,这个问题会更加明显。

    我们在入口HTML文件的head部分加入preload标签:

    这样可以确保字体文件在页面首次加载后很快被浏览器加载,避免了FOUT现象的发生。

    preload 和 Prefetch 的具体实践

    1. preload-webpack-plugin

    对于项目开发,我们可以使用preload-webpack-plugin来自动化处理preload标签的插入。通过webpack插件可以在构建过程中提前注入preload标签,并指定资源类型和路径。

    const PreloadWebpackPlugin = require('preload-webpack-plugin');// 在`webpack`配置中:plugins: [  new PreloadWebpackPlugin({    rel: 'preload',    as(entry) {      if (/\.css$/test(entry)) return 'style';      if (/\.woff$/test(entry)) return 'font';      if (/\.png$/test(entry)) return 'image';      return 'script';    },    include: 'allAssets',    fileBlacklist: [/\.svg$/],  })]

    这里的include属性设为'allAssets',表示所有类型的资源都会被预加载。常见的用途是加载字体文件、图片和脚本等。

    2. 使用场景

    • - preload适用于首屏必需的资源,如字体文件、图表模块等无需动态加载的资源。
    • prefetch适用于不直接加载的资源,如异步加载的模块、需要显式缓存的资源。

    3. 最佳实践

  • 大部分场景下无需特意使用preload
  • 对于类似字体文件这种隐藏在脚本、样式中的首屏关键资源,建议使用preload
  • 异步加载的模块(常见于单页应用中的非首页)建议使用prefetch
  • 大概率即将被访问到的资源可以使用prefetch提升性能和体验。
  • Vue CLI 3 的默认配置

    默认情况下,Vue CLI应用会自动生成preloadprefetch提示。这些提示由@vue/preload-webpack-plugin@vue/prefetch-webpack-plugin负责处理。你可以通过chainWebpack的配置来对这些预加载规则进行修改或删除。

    • preload默认处理所有需要提前加载的资源(如字体文件、图表等)。
    • prefetch默认处理所有异步加载的资源(如动态导入的模块)。

    总结和踩坑

  • preloadprefetch的本质都是预加载,提升资源加载效率。两个机制帮助浏览器在最优资源利用率。
  • preload用于当前页面的资源,prefetch用于未来可能访问的资源。
  • 不要滥用preloadprefetch,需要根据场景进行合理使用。
  • preload的字体资源必须设置crossorigin属性,否则会导致重复加载。
  • prefetch资源缓存时有一些需要注意的事项。例如,当服务器的缓存策略设置为no-store时,prefetch资源不会被存储在本地缓存。
  • 转载地址:http://nqlkk.baihongyu.com/

    你可能感兴趣的文章
    MySql各种查询
    查看>>
    mysql同主机下 复制一个数据库所有文件到另一个数据库
    查看>>
    mysql启动以后会自动关闭_驾照虽然是C1,一直是开自动挡的车,会不会以后就不会开手动了?...
    查看>>
    mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)
    查看>>
    Mysql启动失败解决过程
    查看>>
    MySQL启动失败:Can't start server: Bind on TCP/IP port
    查看>>
    mysql启动报错
    查看>>
    mysql启动报错The server quit without updating PID file几种解决办法
    查看>>
    MySQL命令行登陆,远程登陆MySQL
    查看>>
    mysql命令:set sql_log_bin=on/off
    查看>>
    mySQL和Hive的区别
    查看>>
    MySQL和Java数据类型对应
    查看>>
    mysql和oorcale日期区间查询【含左右区间问题】
    查看>>
    MySQL和SQL入门
    查看>>
    mysql在centos下用命令批量导入报错_Variable ‘character_set_client‘ can‘t be set to the value of ‘---linux工作笔记042
    查看>>
    Mysql在Linux运行时新增配置文件提示:World-wrirable config file ‘/etc/mysql/conf.d/my.cnf‘ is ignored 权限过高导致
    查看>>
    Mysql在Windows上离线安装与配置
    查看>>
    MySQL在渗透测试中的应用
    查看>>
    Mysql在离线安装时启动失败:mysql服务无法启动,服务没有报告任何错误
    查看>>
    Mysql在离线安装时提示:error: Found option without preceding group in config file
    查看>>