zoukankan      html  css  js  c++  java
  • H5前端性能优化之预加载知识的标签

    介绍几个通过浏览器特性来很容易提高资源加载速度的方法:

    (1)DNS prefetching

    DNS解析的速度可用通过下面的标签来进行预解析:

    <link rel=”dns-prefetch” href=”//weibo.com”>

    (2)Preconnect

    和DNS预解析差不多,Preconnect还会做TCP握手和TLS Negotiation。

    <link rel=”preconnect” href=”http://css-tricks.com”>

    (3)Prefetching
    如果我们猜测用户接下来将要访问哪个具体的资源,那就可以用prefetching来预加载确定的资源了:

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

    (4)Prerendering pages

    预先渲染页面,这是更牛的预加载方式了,他的作用就类似打开一个隐藏的tab差不多:

    <link rel=”prerender” href=”http://css-tricks.com”>

    (5)新特性:Preloading
    和prefetching不同的是,preloading会让浏览器无论如何都下载指定的资源:

    <link rel=”preload” href=”image.png”>

    (6)H5音乐预加载 preload=”auto”

    <audio src=”music.mp3″ autoplay=”autoplay” loop preload=”auto” id=”sendid2″></audio>

    恩,合理利用以上标签,可以一定程度上提高用户体验。

  • 相关阅读:
    03Qt信号与槽(2)
    01Qt中的隐式共享
    10GNU C语言函数调用
    09GNU C语言程序编译
    第一本C语言笔记(下)
    07控制器和控制卡(3)
    06控制器和控制卡(2)
    集合
    linux指令(目录类操作指令)
    面向对象三大特征
  • 原文地址:https://www.cnblogs.com/asbefore/p/8532963.html
Copyright © 2011-2022 走看看