HTML5中的预加载功能

在网站WEB前端设计中,如果想加快网页的加载速度,减少网站访客的等待时间,经常要对html页面文件,css文件,JS文件,图片文件等静态文件进行压缩,也有的会使用CDN一类的加速服务 。而今天我们说一说,html5中的一项预加载功能 。

HTML5中的预加载功能

文章插图
 
HTML5的预加载的方法预加载是浏览器的一种机制,其在浏览器加载完当前页面时,并利用空闲下来的时间,在后台静默加载用户在将来可能要访问的文档或文件 。以便用户在访问其页面时,提高页面的载入速度 。
HTML5页面资源预加载/预读取的功能是通过 Link 标记实现的,将 rel 属性指定为“prefetch”,在 href 属性里指定要加载资源的地址 。
示例代码:
预加载一张图片
<link rel="prefetch" href=https://www.isolves.com/it/cxkf/yy/html5/2019-08-13/"big.jpeg">预加载一个页面
<link rel="prefetch" href=https://www.isolves.com/it/cxkf/yy/html5/2019-08-13/"http://www.feiniaomy.com/post/1.html">预加载一个CSS文件
<link rel='prefetch' href=https://www.isolves.com/it/cxkf/yy/html5/2019-08-13/'style.css'>HTML5的预加载的使用环境在什么页面,什么环境下使用HTML5的预加载功能,这主要取决于网站的页面访问质量 。不过下面总结了三点,大家可以参考一下
1、在网站的首页,对一些重要的页面或点击率高的页面进行预加载
2、对整个网站通用,或是使用频率较高的静态文件进行预加载
3、网站的搜索页面,对结果的下一页面进行预加载
HTML5的预加载注意事项1、服务器配置低或网站的访客量少的网站,不建议使用HTML5预加载
2、对一些访问量高的页面或资源使用预加载功能,对于访问量低的页面或资源尽量不要使用
3、HTML5的预加载功能,会对网站的第三方统计数据造成污染,导致统计数据不准确
4、网站的访问跳出率(第三方统计工具查看)超过90%以上,不建议使用预加载功能

【HTML5中的预加载功能】


    推荐阅读