粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • Performance

    • 性能优化
    • 网络层面优化
    • CDN的缓存与回源机制
    • DNS 预解析
    • 图片优化
    • 懒加载与执行
    • 监控
    • 资源预加载
    • 页面预渲染
    • 服务端渲染
    • 节流与防抖

资源预加载

vuePress-theme-reco 粥里有勺糖    2018 - 2023

资源预加载

粥里有勺糖 2020-04-14 大前端性能优化

# 资源预加载

某些资源不需要马上用到,但是希望尽早获取,这时候就可以使用预加载。

浏览器会将所需的资源提前请求加载到本地,后面在需要用到时就直接从缓存中读取资源。

# 使用场景

如果网页在加载完成之前,会长时间的展现为一片空白,此时可以对对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。其它资源使用预加载技术。

# 可行的方式

# 1.link

<link rel="preload" href="sourceName.suffix">
1

# 2.display:none

<img src="xxx.png" style="display:none"/>
1

加载完成后通过js脚本展示

Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34