精华内容
下载资源
问答
  • 提高渲染速度,怎么让资源预加载
    2020-08-28 21:18:51

    为什么需要预加载?

    浏览器同时发出并发请求数是有限制的,受最大tcp连接数限制,单个tcp连接,在同一时间只能处理一个http请求(只的是http/1.1,http2支持多路复用),请求一般像Chrome为6个,因此资源获取的时机以及优先级便尤为重要。

    Link 标签 rel=“preload”

    该属性可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。

    <link href="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" rel='preload' as='script'/>
    

    通过 HTTP header 方式:

    Link: <https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js>; rel=preload; as=script
    

    除了rel之外还需要通过hrefas属性指定需要被预加载资源的资源路径及其类型

    as属性的作用

    as属性是必须要设置的,使用as来指定将要预加载的内容的类型,将使得浏览器能够:

    • 更精确地优化资源加载优先级。
    • 匹配未来的加载需求,在适当的情况下,重复利用同一资源。
    • 为资源应用正确的内容安全策略。
    • 为资源设置正确的 Accept 请求头。
      如果未设置或者设置错误as属性,则将不能提高其加载优先级

    哪些资源可以被预加载?

    • audio: 音频文件。
    • document: 一个将要被嵌入到<frame><iframe>内部的HTML文档。
    • embed: 一个将要被嵌入到<embed>元素内部的资源。
    • fetch: 那些将要通过fetchXHR请求来获取的资源,比如一个ArrayBufferJSON文件。
    • font: 字体文件。
    • image: 图片文件。
    • object: 一个将会被嵌入到元素内的文件。
    • script: JavaScript文件。
    • style: 样式表。
    • track: WebVTT文件。
    • worker: 一个JavaScript的web workershared worker
    • video: 视频文件。

    Link 标签 rel=“prefetch”

    **页面资源预加载(Link prefetch)**是浏览器提供的一个技巧,目的是:让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个 Web 页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。优先级会低于preload

    <link rel="prefetch" href="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
    

    资源正在被加载时点击了某个链接

    当用户点击一个连接,或开始任何形式的页面加载时,预取操作将被停止且任何预取提示将被丢弃。如果一个预取文档只下载了一部分,那么这部分文档将被保存在缓存中,供服务端发送一个 "Accept-Ranges: bytes" 的返回头。这个返回头通常是由网络服务器在返回静态内容时生成的。当用户真正访问这个已经(部分)预载过的文档时,该文档的剩余部分将被通过一个 HTTP byte-range 的请求获取。

    Link 标签 rel=“prerender”

    这是一个重量级的选项,它可以让浏览器提前加载指定页面的所有资源。

    <link rel="prerender" href="/nextpage.html"/>
    
    

    要小心的使用 prerender,因为它将会加载很多资源并且可能造成带宽的浪费,尤其是在移动设备上。还要注意的是

    Link 标签 rel=“subresource”

    被Chrome支持了有一段时间,已经移除不必关注,并且已经有些搔到预加载当前导航/页面(所含有的资源)的痒处了。但它有一个问题——没有办法处理所获取内容的优先级(as也并不存在),所以最终,这些资源会以一个相当低的优先级被加载,这使得它能提供的帮助相当有限。


    webpack中的使用

    利用import()动态加载脚本并设置魔法注释实现

    const NotFound = asyncLoad(() => import(/*webpackPrefetch: true */'pages/not-found'));
    
    const NotFound = asyncLoad(() => import(/*webpackPreload: true */'pages/not-found'));
    

    利用preload-webpack-plugin

    preload-webpack-plugin 传送门

    参考链接

    • https://www.w3.org/TR/preload/
    • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
    • https://zhuanlan.zhihu.com/p/31383216
    • https://stackoverflow.com/questions/29475854/what-is-link-rel-subresource-used-for/35104388
    • https://github.com/GoogleChromeLabs/preload-webpack-plugin
    更多相关内容
  • 不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面...
  • 特别说明一下,小程序由于资源包大小限制,很多图片资源会存放到CND图片服务器上,为了实现小程序初始化时按需加载远程图片资源,实现了以下加载器,希望能解决部分小程序新人开发者预加载图片的苦恼。   特别强调...
  • 资源预加载

    2018-11-30 10:44:45
    资源预加载  提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。 资源预加载是另一个...

    资源预加载

     提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。

    资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

    引用 @Patrick Hamann 的解释

    预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可以在当前页面使用到,一些可能在将来的某些页面中被使用。作为开发人员,我们比浏览器更加了解我们的应用,所以我们可以对我们的核心资源使用该技术。

    这种做法曾经被称为 prebrowsing,但这并不是一项单一的技术,可以细分为几个不同的技术:DNS-prefetchsubresource 和标准的 prefetchpreconnectprerender

    DNS 预解析 DNS-Prefetch

    通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如,我们将来可能从 example.com 获取图片或音频资源,那么可以在文档顶部的 <head> 标签中加入以下内容:

    <link rel="dns-prefetch" href="//example.com">
    

    当我们从该 URL 请求一个资源时,就不再需要等待 DNS 的解析过程。该技术对使用第三方资源特别有用。

    在 @Harry Roberts 的文章中提到:

    通过简单的一行代码就可以告知那些兼容的浏览器进行 DNS 预解析,这意味着当浏览器真正请求该域中的某个资源时,DNS 的解析就已经完成了。

    这似乎是一个非常微小的性能优化,显得也并非那么重要,但事实并非如此 —— Chrome 一直都做了类似的优化。当在浏览器的地址栏中输入 URL 的一小段时,Chrome 就自动完成了 DNS 预解析(甚至页面预渲染),从而为每个请求节省了至关重要的时间。

    预连接 Preconnect

    与 DNS 预解析类似,preconnect 不仅完成 DNS 预解析,同时还将进行 TCP 握手和建立传输层协议。可以这样使用:

    <link rel="preconnect" href="http://example.com">
    

    在 @Ilya Grigorik 的文章中有更详细的介绍:

    现代浏览器都试着预测网站将来需要哪些连接,然后预先建立 socket 连接,从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销。然而,浏览器还不够聪明,并不能准确预测每个网站的所有预链接目标。好在,在 Firefox 39 和 Chrome 46 中我们可以使用 preconnect 告诉浏览器我们需要进行哪些预连接。

    预获取 Prefetching

    如果我们确定某个资源将来一定会被使用到,我们可以让浏览器预先请求该资源并放入浏览器缓存中。例如,一个图片和脚本或任何可以被浏览器缓存的资源:

    <link rel="prefetch" href="image.png">
    

    与 DNS 预解析不同,预获取真正请求并下载了资源,并储存在缓存中。但预获取还依赖于一些条件,某些预获取可能会被浏览器忽略,例如从一个非常缓慢的网络中获取一个庞大的字体文件。并且,Firefox 只会在浏览器闲置时进行资源预获取。

    在 @Bram Stein 的帖子中说到,这对 webfonts 性能提升非常明显。目前,字体文件必须等到 DOM 和 CSS 构建完成之后才开始下载,使用预获取就可以轻松绕过该瓶颈。

    注意:要测试资源的预获取有点困难,但在 Chrome 和 Firefox 的网络面板中都有资源预获取的记录。还需要记住,预获取的资源没有同源策略的限制。

    Subresources

    这是另一个预获取方式,这种方式指定的预获取资源具有最高的优先级,在所有 prefetch 项之前进行:

    <link rel="subresource" href="styles.css">
    

    根据 Chrome 文档

    rel=prefetch 为将来的页面提供了一种低优先级的资源预加载方式,而 rel=subresource 为当前页面提供了一种高优先级的资源预加载。

    所以,如果资源是当前页面必须的,或者资源需要尽快可用,那么最好使用 subresource 而不是 prefetch

    预渲染 Prerender

    这是一个核武器,因为 prerender 可以预先加载文档的所有资源:

    <link rel="prerender" href="http://example.com">
    

    @Steve Souders 在他的一篇文章中写到:

    这类似于在一个隐藏的 tab 页中打开了某个链接 —— 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。当用户真正访问该链接时,隐藏的页面就切换为可见,使页面看起来就是瞬间加载完成一样。Google 搜索在其即时搜索页面中已经应用该技术多年了,微软也宣称将在 IE11 中支持该特性。

    需要注意的是不要滥用该特性,当你知道用户一定会点击某个链接时才可以进行预渲染,否则浏览器将无条件地下载所有预渲染需要的资源。

    更多相关讨论:

    所有预加载技术都存在一个潜在的风险:对资源预测错误,而预加载的开销(抢占 CPU 资源,消耗电池,浪费带宽等)是高昂的,所以必须谨慎行事。虽然很难确定用户下一步将访问哪些资源,但高可信的场景确实存在:

    • 如果用户完成一个带有明显结果的搜索,那么结果页面很可能会被加载
    • 如果用户进入到登陆页面,那么登陆成功的页面很可能会被加载
    • 如果用户阅读一个多页的文章或访问一个分页的结果集,那么下一页很可能会被加载

    最后,使用 Page Visibility API 可以防止页面真正可见前被执行。

    Preload

    preload 是一个新规范,与 prefetch 不同(可能被忽略)的是,浏览器一定会预加载该资源:

    <link rel="preload" href="image.png">☄
    

    虽然该规范还没有被所有浏览器兼容,但其背后的思想还是非常有意思的。

    总结

    预测用户下一步将访问哪些资源是困难的,需要进行大量的测试,但是这带来的性能提升是明显的。如果我们愿意尝试这些预获取技术,一定会显著提升用户的体验。

    展开全文
  • H5 图片预加载 字体预加载

    一、背景

    微信活动H5页面的特点之一就是资源多(图、字体、音频等),动不动就几十兆。庞大的资源量很可能导致页面不流畅。如下图,因为背景图还没加载完,进入第二页时会有一瞬间“白屏”。

    为了解决上述问题,主流的解决方法是【资源预加载】——在进入首页前先进入【加载页】,在这里预先加载整个H5需要的所有资源,并显示进度条;等资源加载完毕再跳入首页,这样后面的浏览都会很顺畅啦~

    注:本博客示例使用 vue3 + typescript。

    二、图片预加载

    思路:在真正用到图片前先请求该图片,该图片就会被缓存。这样在真正用到图片时,就不用去服务器拿图片回来,而是直接从缓存拿,速度会快很多。

    1. 图片资源存放位置:src/assets/img;

    2. 在该文件夹下新建文件:imgUrls.ts(不使用ts的则是 imgUrl.js,下同),按以下格式列举所有图片的url:

    const imgUrls = [
      require('./bg.png'),
      require('./bg2.png'),
      // require(图片地址),
    ];
    
    export default imgUrls;

    注:在使用 vue ,且图片放在 src/assets 的情况下,图片地址需要用 require() 来引用!

    3. 在加载页 Loading.vue 中加入如下代码:

    import imgUrls from '@/assets/img/imgUrls.ts';
    
    /** 
     * url: 要加载的图片地址
     */
    function preloadImg(url: string) {
      return new Promise<void>((resolve, reject) => {
        const img = new Image();
        img.src = url; // 从这里开始图片被请求
        img.onload = () => {
          // TODO: 自定义处理,比如更新当前加载进度
          resolve();
        };
        img.onerror = () => {
          reject();
        };
      });
    }
    
    async function preload() {
      const imgPromises: Promise<void>[] = [];
      imgUrls.forEach((url) => {
        imgPromises.push(preloadImg(url));
      });
      try {
        await Promise.all(imgPromises);
        // TODO: 所有图片加载完成后的操作,如跳转到首页
      } catch {
        console.error('预加载图片出错');
      }
    }
    
    // 在组件创建时调用 preload()。如 vue3 的setuup(),vue2的created()等。
    preload();

    4. 到上面为止,跟网上大部分教程都差不多。但我试验过,该方法预加载的图片缓存只在一个页面中有效。也就是说虽然在 Loading 页面中预加载了图片,但在其他页面中要用到这张图片时,还是会重新请求,而不是使用 Loading 中对该图片的缓存(打开F12 Network 可以看到状态码是200而不是304)。我也不太清楚为啥,求大佬指点。。

    5. 好消息是,要让上面这个方法生效,我们只需做一点点修改!修改后的代码如下:

    import imgUrls from '@/assets/img/imgUrls.ts';
    
    /** 
     * url: 要加载的图片地址
     * imgContainer: 一个div,用来放置 img 元素。该 div 可以放在 body 中任何位置,你喜欢就好。
     */
    function preloadImg(url: string, imgContainer: HTMLElement) {
      return new Promise<void>((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = () => {
          img.style.display = 'none';
          // 这一步很重要,必须挂到文档流中。
          imgContainer.appendChild(img);
          // TODO: 自定义处理,比如更新当前加载进度
          resolve();
        };
        img.onerror = () => {
          reject();
        };
      });
    }
    
    async function preload(imgContainer: HTMLElement) {
      const preloadPromises: Promise<void>[] = [];
      imgUrls.forEach((url) => {
        preloadPromises.push(preloadImg(url, imgContainer));
      });
      try {
        await Promise.all(preloadPromises);
        // TODO: 所有图片加载完成后的操作,如跳转到首页
      } catch {
        console.error('预加载图片出错');
      }
    }
    
    // 在组件创建时调用 preload()。如 vue3 的setuup(),vue2的created()等。
    preload();

    这里最核心的修改是增加了一句:imgContainer.appendChild(img);

    也就是把 img 元素给挂载到 document 里了,这样其他页面就可以使用到该缓存。(请求大佬解释一下啥原因)

    小结:图片的预加载可以概括为两步走:“请求-挂载”

    1. “请求”:const img = new Image();   img.src = "图片url";

    2. “挂载”:请求成功后把元素挂到文档流里。img.onload = () => imgContainer.appendChild(img);

    以此类推,实现视频、音频的预加载只需把 Image 改成 Video、Audio 即可。

    三、字体预加载

    核心思路也是上面的“请求-挂载”。不同的地方是,js里并没有 Font 这个对象,需要换个方法请求字体包文件。

    注:有些教程里用了 FontFace 这个对象,类似 Image。我编码的时候编辑器有相关自动补全和提示,但是无法编译构建。

    1. 字体文件:

    在 src/assets/font 中存放字体文件(如 .ttf),并新建两个文件:font.css 和 font.ts。

    /** src/assets/font/font.css */
    
    @font-face {
      font-family: zcoolwenyiti; // 字体名,可自定义
      src: url('./站酷文艺体.ttf'); // 字体包位置,需用 url() 包裹
      font-display: swap; // 当文字没加载好时,会先用系统默认字体,加载完成后会自动换成目标字体。
    }
    /** src/assets/font/font.ts */
    
    /**assets中所有字体的url,用于实现字体的预加载 */
    const fontUrls = [
      require('./站酷文艺体.ttf'),
    ];
    
    /** 在 font.css 的 font-family 中自定义的字体名,注意顺序要与 fontUrls 数组对应*/
    export const fontNames = [
      'zcoolwenyiti',
    ];
    
    export default fontUrls;
    

    2. 在加载页 Loading.vue 中加入如下代码:

    import fontUrls, { fontNames } from '../../assets/font/fontUrls';
    
    function preloadImg() {
      //...
    }
    
    function preloadFont(
      url: string,
      fontName: string,
      fontContainer: HTMLElement
    ) {
      return new Promise<void>((resolve, reject) => {
        // 1.“请求”:通过创建 <link rel="preload" href="字体包路径" as="font" type="font/ttf" crossOrigin /> 标签来请求字体文件
        const linkEl = document.createElement('link');
        linkEl.rel = 'preload';
        linkEl.href = url;
        linkEl.as = 'font';
        linkEl.type = 'font/ttf';
        linkEl.crossOrigin = 'true';
        linkEl.onload = () => {
          // 2.“挂载”
          const divEl = document.createElement('div');
          divEl.innerText = '首页会用到的字';
          divEl.style.width = '0';
          divEl.style.height = '0';
          divEl.style.overflow = 'hidden';
          divEl.style.fontFamily = fontName;
          fontContainer.appendChild(divEl);
          // TODO: 自定义操作,如更新预加载进度
          resolve();
        };
        linkEl.onerror = () => {
          reject();
        };
        // 注意:link 标签要挂到 head 之后才会开始请求
        document.head.appendChild(linkEl);
      });
    }
    
    // 在 preload() 中加上字体预加载:
    async function preload(
      imgContainer: HTMLElement,
      fontContainer: HTMLElement
    ) {
      const preloadPromises: Promise<void>[] = [];
      imgUrls.forEach((url) => {
        preloadPromises.push(preloadImg(url, imgContainer));
      });
      fontUrls.forEach((url, index) => {
        preloadPromises.push(preloadFont(url, fontNames[index], fontContainer));
      });
      try {
        await Promise.all(preloadPromises);
        // TODO: 预加载完成后的操作,如跳到首页
      } catch {
        console.error('预加载图片出错');
      }
    }
    
    // 在加载页创建时调用 preload()。如 vue3 的setuup(),vue2的created()等。
    preload();

    四、预加载“预加载页资源”

    到目前为止,预加载的核心代码我们写完啦!但是有个问题:预加载页需要的资源咋办?总不可能自己给自己预加载吧!

    在 vue 项目中,可以在 main.ts (main.js) 中加入如下代码:

    import { createApp } from 'vue';
    import App from './App.vue';
    import router from './router';
    import { loadingUrls } from './assets/img/imgUrls';
    
    // 预加载 加载页资源
    loadingUrls.forEach((url) => {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        img.style.display = 'none';
        document.body.appendChild(img);
      };
    });
    
    createApp(App).use(router).mount('#app');

    注:在上述代码中,我没有把 createApp(App).use(router).mount('#app')  放在 img.onload 里,因为这可能导致程序运行有些奇怪的问题。而且你也不希望某个资源预加载失败就导致项目无法打开吧!

    这确实可能导致在加载完成前就开始渲染预加载页,但这不重要。我们只需要尽早加载预加载页的资源,而不强求加载完成后再渲染。由此也可得出,预加载页应尽量保持简单,使用的图片资源应少一些,尽量使用裁剪后的字体包或不使用特殊字体。

    五、补充

    关于字体:

    1. 跟设计师沟通,能用系统默认字体就不用特殊字体!

    2. 若使用特殊字体的文字很固定,可以“裁剪”字体包,让字体包里只包含会用到的文字,字体包可以瞬间从几十兆减到几K噢!推荐一个字体包裁剪工具 。

    3. 如果使用特殊字体的文字是动态生成的(如用户名),那没办法了,只能整个字体包加载进来。

    4. 如果能接受 font-display: swap 的效果(当文字没加载好时,会先用系统默认字体,加载完成后会自动换成目标字体),且字体包实在太大(如10M以上),可以不预加载字体包。毕竟这么大的东西放在首页前加载会导致预加载时间过长,也会影响用户体验。

    如有错误,敬请纠正~

    展开全文
  • 资源预加载组件——preload 队列,可以支持队列加载和回调,也可以加载视频或者音频 进度条,可以动态获取进度条信息 支持img标签的预加载,添加pSrc属性即可 原生ES5 demo Install: git clone ...
  • app资源预加载流程图

    2021-07-21 10:46:20
    app资源预加载流程图
  • 网页中的图片预加载 图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 Web 页面中实现图片的预加载其实很...
  • 一、什么是资源预加载当打开一个应用或者网址时,通常会有一个加载资源的进度条,资源加载完成后打开页面。这个过程其实就是资源预加载的一个过程。资源预加载是一种性能优化技术,我...

    一、什么是资源预加载

    当打开一个应用或者网址时,通常会有一个加载资源的进度条,资源加载完成后打开页面。这个过程其实就是资源预加载的一个过程。资源预加载是一种性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能会当前页面用到或者一些可能在以后的某些页面用到。预加载也可以简单的理解为将所有需要的资源提前请求加载到本地,这样后面再需要用到的时候就可以直接从缓存中提取资源。从而加快响应速度。

     

    二、为什么需要使用预加载

    在网页全部加载之前,对一些主要内容进行加载,提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,页面加载完成可能要消耗几秒钟时间甚至更多时间,如果没有使用预加载技术页面将会在一段时间内展现为一片空白,直到所有内容加载完毕。这样将会给用户一个不好的浏览体验。

     

    三、可以被预加载的内容

    1.Script:JavaScript文件。

    2.Style:css样式表。

    3.Front:字体文件。

    4.Image:图片文件。

    5.Video:视频文件。

    6.Audio:音频文件。

    7.Document:一个将要被嵌入到<frame>或<iframe>内部的HTML文档。

    8.Enbed:一个将要被嵌入到<enbed>元素内部的资源。比如插件。

    9.FFetch:将要通过fetch和XHR请求来获取的资源,比如一个ArrayBuffer或JSON文件。

    10.Object:一个将会被嵌入到<embed>元素内的文件。

    11.Track:WebVTT文件。

     

    四、预加载的定义和特性

    preload是link元素中的rel属性值:<link rel=”preload”>

    preload提供了一种声明式的命令,让浏览器提前加载指定资源且加载后并不执行,而是在需要的时候才执行.这样可以将加载和执行分离,不阻塞渲染和document的onload事件。

    使用preload后,不管资源是否使用都将提前加载。对于一些不能确定是否需要加载的资源尽量不要使用proload,以免给页面加载带来负担。

    预加载基本使用格式:

    <link rel=”preload”href=”file” as=”type”>

    其中file表示需要预加载的内容

    type表示需要加载内容的类型

    使用as指定类型的好处:

    1.更加精确的优化资源加载优先级

    2.匹配未来的加载需求,在适当情况下,重复利用同一资源

    3.为资源应用正确的内容安全策略

    4.为资源设置正确的Accept请求头

     

    五、预加载使用实例

    1.预加载js、css

    这里我们预加载了js和css,在后面的页面渲染中,一旦需要使用就可以立即可用。

     

    2.使用Image对象

    var image = new Image()

    image.src = “a.png”

     

    3.脚本化

    先创建一个HTMLLinkElement实例,然后附加到DOM上:

    浏览器预加载了这个文件但不执行它。

    如果需要执行可以使用以下方式:

    4.使用PreloadJS库

    PreloadJS提供了一种预加载内容的一致方式,以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下,PreloadJS会尝试使用XHR加载内容,因为它提供了对进度和完成事件的更好支持,但是由于跨域问题,使用基于标记的加载可能更好。详细使用方式可参考:https://github.com/CreateJS/PreloadJS

     

    六、其他资源预加载机制

    1.<link rel="prefetch"> 已经被许多浏览器支持了相当长的时间,但它是意图预获取一些资源,以备下一个导航/页面使用(比如,当你去到下一个页面时)。这很好,但对当前的页面并没有什么助益。此外,与使用preload的资源相比浏览器会给使用prefetch的资源一个相对较低的优先级。毕竟,当前的页面比下一个页面相对更加重要。

    2.<link rel="subresource">被Chrome支持了有一段时间。但它无法处理所获取内容的优先级(as也并不存在),因此这些资源会以一个相当低的优先级被加载,这使得它能提供的帮助相当有限。

     

    了解新钛云服

    招聘:高级运维工程师

    新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照

    深耕专业,矗立鳌头,新钛云服获千万Pre-A轮融资

    新钛云服,打造最专业的Cloud MSP+,做企业业务和云之间的桥梁

    新钛云服一周年,完成两轮融资,服务五十多家客户

    上海某仓储物流电子商务公司混合云解决方案

    新钛云服出品的部分精品技术干货

    国内主流公有云VPC使用对比及总结

    万字长文:云架构设计原则|附PDF下载

    刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!

    Ceph OSD故障排除|万字经验总结

    七个用于Docker和Kubernetes防护的安全工具

    运维人的终身成长,从清单管理开始|万字长文!

    OpenStack与ZStack深度对比:架构、部署、计算存储与网络、运维监控等

    什么是云原生?

    IT混合云战略:是什么、为什么,如何构建?

    展开全文
  • 里面内容:通过js控制使页面整体缩放的方案,还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案。目前我在使用的是缩放的方案。整体代码基本上是整合的是大牛们分享的一些实用代码
  • 文章目录HTML5页面资源预加载(Link prefetch)写法什么情况下应该预加载页面资源禁止页面资源预加载(Link prefetch)页面资源预加载(Link prefetch)注意事项 引言: 不管是浏览器的开发者还是普通web应用的开发者,...
  • 将网站放在服务器后,因为服务器带宽问题,才发现很多资源比如图片、音频在网站打开后1分钟还没有加载,导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运行,只有资源加载完成了...
  • 下面是其他几种加载方式: 第一种: 体积小,加载慢的方式 [MenuItem("Assets/Build AssetBundles(体积小,加载慢)")] private static void BuildABsToWin64_LZMA() { //在Assets下设定一个文件价用于存储ab资源 ...
  • JavaScript资源预加载组件和滑屏组件的用法推举_.docx
  • 用于图像预加载的高阶React组件 高阶React组件,可轻松处理组件中使用的图像的不同加载状态。 如果要在加载图像时在屏幕上显示某些内容,或者如果无法加载所需的图像,则可以提供一些默认图像,这可能会派上用场。...
  • 文章目录原型官方文档的解释...代码解析(编译)阶段加载 参数要求 常量和变量 只允许常量 总结 preload是godot为自研语言GDScript设计的一种“作弊”手段,所以只要你能提供一个常量地址,就直接用preload好了,其
  • jquery 预加载图片

    2019-04-04 01:26:26
    NULL 博文链接:https://chen-miao.iteye.com/blog/1496730
  • android WebView预加载

    2016-04-18 20:55:14
    这时我们利用启动页或引导页或中间的广告页的时间来预加载webview,利用View.gone,View.visible来实现控件类的隐藏与显示,这样在启动后得到的主页就是一个已经加载好的页面了。此例中加载新浪这样的比较大的网站,...
  • 前端优化 - 资源预加载技术(Prefetch, Preload, DNS-Prefetch,defer和async) 当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快...
  • 如何优雅的做音频资源预加载呢?KUOKUO 通过一个小例子带你学习。 正文 使用版本 CocosCreator 版本 2.2.2 明确目标 我们要做一个音频资源加载模块,与场景解耦,通过名称获取音频资源。(预制体、图片资源同理)如...
  • 大家好,我是SKODE。 小提示:选中右侧目录,可快速找到所需内容 本系列博客地址:传送门 在我们学完上节课后,发现运行游戏,根本看不到游戏效果。...一、资源预加载逻辑 1、初始化资源 2、读取配置表 ...
  • cocos2dx-lua资源预加载的优化

    千次阅读 2018-08-15 15:45:30
    cocos2dx-lua的资源加载也可以进行异步加载,往往加载资源时会造成内存急剧上升,对应应用内存不足时的机子容易使程序闪退,下面介绍种策略,稳定的加载资源:即延时加载,且在每隔几帧时加载一次资源,就会使资源...
  • 一、系统资源预加载    android系统资源加载分两种方式,预加载和在使用进程中加载。  预加载是在zygote进程启动的时候被执行,一般系统中多应用共享的资源会被列为预加载资源,预加载的好处在于系统只在zygote...
  • android 原生使用WebView嵌入H5页面 Hybrid开发 一、性能问题 android webview 里H5加载速度慢 网络流量大 1、H5页面加载速度慢 ...资源加载慢 H5页面的资源多 网络请求数量多 ​ H5页面所有资源都需要从网络...
  • 页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面...
  • 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 &amp; 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案。 目录 1. Andr...
  • 进度条 预加载

    2013-09-04 17:15:19
    Jquery实现网页进度条显示,用于页面预加载
  • jquery图片预加载

    2016-03-16 16:05:35
    HTML+jquery图片预加载功能,实用于web及移动端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,976
精华内容 53,190
关键字:

资源预加载