• Preload

    浏览器会在遇到如下link标签时，立刻开始下载main.js(不阻塞parser)，并放在内存中，但不会执行其中的JS语句。

    只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。
<link rel="preload" href="/main.js" as="script">
  • Prefetch

    浏览器会在空闲的时候，下载main.js, 并缓存到disk。当有页面使用的时候，直接从disk缓存中读取。其实就是把决定是否和什么时间加载这个资源的决定权交给浏览器。

    如果prefetch还没下载完之前，浏览器发现script标签也引用了同样的资源，浏览器会再次发起请求，这样会严重影响性能的，加载了两次，，所以不要在当前页面马上就要用的资源上用prefetch，要用preload。
<link href="main.js" rel="prefetch">

preload 与 prefetch 的区别的更多相关文章

  1. Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  2. Preload，Prefetch 和它们在 Chrome 之中的优先级

    前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...

  3. [PWA] Optimize Assets Delivery using preload and prefetch

    By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch a ...

  4. 一步一步学会preload和prefetch

    preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...

  5. preload、prefetch的认识

    预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...

  6. 资源预加载preload和资源预读取prefetch简明学习

    前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...

  7. preload & prefetch

    原文地址在 我的笔记里,觉得还行就给个 star 吧:) 关于 preload 和 prefetch 早有耳闻,知道它们可以优化页面加载速度,然具体情况却了解不多.搜索了相关的资料后对其有了些认识,在 ...

  8. prefetch 和 preload 及 webpack 的相关处理

    使用预取和预加载是网站性能和用户体验提升的一个很好的途径,本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法,并使用 webpack 进行实现 Link 的链接类型 < ...

  9. 带你玩转prefetch, preload, dns-prefetch，defer和async

    现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到</body>之前,以解决js执行时找不到dom等问题.但随着现代浏览器的普及 ...

随机推荐

  1. shell脚本实例-判断主机存活 以及企业备份方案

    1.上次写了一个脚本我那次考虑不是很周全,这次我将脚本改动了一下,这次是判断三次, 希望关注我的人可以经常交流哈.下面我写上代码. #!/usr/bin/bash while read ip do f ...

  2. nginx保持会话的方式

    1)ip_hash 简单易用,但是有如下缺点 后端服务器宕机后,session会丢失 来自同一局域网的客户端会被转发到同一个后端服务器,可能导致负载失衡 不适用CDN网络,不适用于前段还有代理的情况 ...

  3. ubantu 设置默认python3.叽叽叽的环境变量

    wkp 发表于 2017-8-22 17:49:08 | 只看该作者 sudo vi ~/.bashrc 在里面加一句 alias python='python3' 或者再简单一点 alias p=' ...

  4. python 基础-爬虫-数据处理，全部方法

    生成时间戳 1. time.time() 输出 1515137389.69163 ===================== 生成格式化的时间字符串 1. time.ctime() 输出 Fri Ja ...

  5. Could not open JDBC Connection for transaction

    Could not open JDBC Connection for transaction; nested exception is java.sql.SQLTransientConnectionE ...

  6. [转]一文读懂《梁宁·产品思维30讲》最精华内容（含全套PPT）

    http://chuansong.me/n/2294260949029 8 年前,我的主业是产品经理,产品思维改变了我认识世界的方式,让我明白司空见惯的设计,也有其底层逻辑. 几年后我接触培训.运营自 ...

  7. gcc/g++ 使用 tricks

    0. 优化级别 -O0,不进行优化的编译后的文件大小反而更小,小于 -O2 的: 1. -std 指定 C 语言标准 -ansi -ansi == -std=c90 -std=c99:(std:sta ...

  8. 一种简单的ELF加固方法

    介绍一种ELF文件函数粒度的加固方法,可以有效防止对程序的静态分析.这是一种有源码加固方式,需要被加固程序中代码配合.加固流程如下: 1)读取ELF文件头,获取e_phoff和e_phnum2)通过E ...

  9. Linux Kernel Stack

    整理一些杂乱的内容.以下x86架构. Linux 内核栈大小 内核栈大小是固定的,默认为8k,曾经有选项可以设置为4k栈.由于大小固定,申请过大的栈内存,或者函数调用层次过深,都可能导致栈溢出. 关注 ...

  10. Linux上统计文件夹下文件个数以及目录个数

    对于linux终端用户而言,统计文件夹下文件的多少是经常要做的操作,于我而言,我会经常在谷歌搜索一个命令,“如何在linux统计文件夹的个数”,然后点击自己想要的答案,但是有时候不知道统计文件夹命令运 ...