H5学习笔记：H5前端性能优化之预加载知识

作为一名专业的前端攻城狮，必须需要了解一些web前端性能优化方面的知识点。

之前25学堂分享了一个web前端性能优化的信息图表，有兴趣的小伙伴可以看下。

1、WebAPP移动前端性能优化规范和设计指导

2、5个CSS性能优化减肥工具|web前端开发必备资源

3、手机网站Html5前端开发的必备知识点，超赞

4、移动端最实用的HTML5+CSS3开发教程【大神笔记】

而今天学堂君继续跟大家分享一些比较高效前端性能优化代码和笔记。主要讲解预加载。

无论你是APP设计师，还是APP产品经理，都有必要了解这个H5前端性能优化的预加载知识点。

1、下面我们先了解下 什么是预加载技术：

WEB中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

图片的预加载技术使用较为广泛，一般的效果是网页中的图片由模糊变得清晰。

比如我们常用的插件：

&  jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。

&  简单的JavaScript图像延迟加载库Echo.js等。

下面这张图展示了一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段：

预加载是H5前端性能优化当中的最重要的一个环节。也是我们最常用的H5前端性能优化手段。

简单明了的解释：

所谓预加载技术，核心思想就是让浏览器提早去加载未来可能会用到的资源，然后浏览器就会把URL对应的资源给缓存起来。

2、下面分享一些前端大牛的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差不多：

（5）新特性：Preloading

和prefetching不同的是，preloading会让浏览器无论如何都下载指定的资源：

（6）H5音乐预加载 preload="auto"

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

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

以上就是25学堂收集各位前端大神的的要点来跟大家分享这些干货。希望各位可以选择性的使用。