html-proload
- 对基础与初始化进行预加载
- 加载顺序 document > preload > 正常加载
- media 属性
- 不同设备时的响应式加载 - media="(max-width: 600px)
- as 属性: //as不明的优先级最低并导致二次获取
audio: 音频文件。document: 一个将要被嵌入到](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/frame)或[内部的HTML文档。// href = "/other/widget.html";embed: 一个将要被嵌入到``元素内部的资源。fetch: 那些将要通过fetch和XHR请求来获取的资源,比如一个ArrayBuffer或JSON文件。font: 字体文件。image: 图片文件。object: 一个将会被嵌入到``元素内的文件。script: JavaScript文件。style: 样式表。track: WebVTT文件。worker: 一个JavaScript的web worker或shared worker。video: 视频文件。
实例:
<link rel="preload" href="https://resj.outdoorclub.com.cn/jss/js/vue.min_2.6.10.js" as="script">
<script type="text/javascript" src="https://resj.outdoorclub.com.cn/jss/js/vue.min_2.6.10.js"></script>
- 基于脚本的异步加载- 动态创建一个 link 标签后插入到 head 头部
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
//预加载这个文件,但并不实际执行它
加载样式文件
function LoadStyle(url) {
try {
document.createStyleSheet(url)
} catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
}
}
加载脚本文件
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (typeof(callback) != "undefined") {
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
}
script.src = url;
document.body.appendChild(script);
}
//head无堵塞加载 defer属性或者是 async 属性来实现
- 检测浏览器环境中的支持度 - 忽略对应的 link 标签进行正常加载
const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
}
- 对于一些不是首屏加载的css
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
- 基于标记语言的预加载- 推荐如下写法:
<link rel="stylesheet" href="/首屏加载css.css">
<link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/不是首屏加载的css.css"></noscript> //防止浏览器禁止js
//脚本预加载
<link rel="preload" as="script" href="async_script.js"
onload="var script = document.createElement('script');
script.src = this.href; document.body.appendChild(script);">
为了更好的兼容rel=preload,可以使用loadCSS ,github地址: https://github.com/filamentgroup/loadCSS
对字体的提前加载
- 不带 crossorigin 会二次获取
web 字体是较晚才能被发现的关键资源(late-discovered critical resources)中常见的一类 。web 字体对页面文字的渲染资至关重要,但却被深埋 CSS 中,即便是预加载器有解析 CSS,也无法确定包含字体信息的选择器是否会真正应用在 DOM 节点上。理论上,这个问题可以被解决,但实际情况是没有一个浏览器解决了这个问题。而且,即便是问题得到了解决,浏览器能对字体文件做出合理的预加载,一旦有新的 css 规则覆盖了现有字体规则,前面的预加载就多余了。
总之,非常复杂。
但有了 preload 这个标准,简单的一段代码就能搞定字体的预加载。
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
需要注意的一点是:crossorigin 属性是必须的,即便是字体资源在自家服务器上,因为用户代理必须采用匿名模式来获取字体资源。
type 属性可以确保浏览器只获取自己支持的资源。尽管Chrome 支持 WOFF2,也是目前唯一支持 preload 的浏览器,但未来或许会有更多的浏览器支持 preload,而这些浏览器支不支持 WOFF2 就不好说了。
prefetch
- 告诉浏览器加载下一页面可能会用到的资源
- preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源,prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源
html-proload的更多相关文章
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- Properties类一些常用的用法
直接上代码: package test.properties; import java.io.File; import java.io.FileInputStream; import java.io. ...
- HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
- Preload,Prefetch 和它们在 Chrome 之中的优先级
前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...
- Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- 学习-HTML5
@@ 学习HTML5发现对我们开发工作者来说要方便很多,它现在还在发展阶段,在未来肯定会是主流. 我们知道HTML5目的是取代HTML4.01和XHTML1.0标准,他希望能够减少互联网富应用(RIA ...
- HTML5学习笔记3
7.文档元素 文档元素的主要作用是划分各个不同的内容,让整个页面布局清晰明快,让整个布局具有语义,进一步替代div.基本上没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. h1~h6 ...
- 现代浏览器性能优化-CSS篇
我来填坑了,CSS篇终于写出来了,如果你没看过前面的JS篇,可以在这里观看. 众所周知,CSS的加载会阻塞浏览器渲染或是引起浏览器重绘,目前业界普遍推荐把CSS放到<head>中,防止在C ...
- 开源版本的 uTools。可支持 uTools 所有插件生态
话不多说,先放上截图和仓库地址: 代码仓库:github 故事背景 网络抓包 之前公司内部因为开发需要,需要和后端进行接口联调,测试环境的时候,经常会涉及到一些状态改变要看交互样式的问题.比如测试需要 ...
随机推荐
- linux下如何交叉编译util-linux?
1. 获取源码 wget https://mirrors.edge.kernel.org/pub/linux/utils/util-linux/v2.34/util-linux-2.34.tar.xz ...
- CVR并发写入测试
CVR并发写入测试 测试环境: 主机:DELL Optiplex 790 系统:Windows7SP1 64bit CPU:i5-2500 3.3GB 4核 内存:8GB 硬盘:希捷 7200rpm ...
- Anaconda3详细安装使用教程及问题总结
1.Anaconda是什么? 简单来说,Anaconda是Python的包管理器和环境管理器. 先来解决一个初学者都会问的问题:我已经安装了Python,那么为什么还需要Anaconda呢?原因有以下 ...
- Python实现字符串反转
将字符串 s=‘helloword’ 反转输出为 ‘drowolleh’,以下通过多种方法实现 1.字符串切片法(常用) s='helloword' r=s[::-1] print(r) #结果:dr ...
- L1、L2正则化详解
正则化是一种回归的形式,它将系数估计(coefficient estimate)朝零的方向进行约束.调整或缩小.也就是说,正则化可以在学习过程中降低模型复杂度和不稳定程度,从而避免过拟合的危险. 一. ...
- leetcode548 Split Array with Equal Sum
思路: 使用哈希表降低复杂度.具体来说: 枚举j: 枚举i,如果sum[i - 1] == sum[j - 1] - sum[i],就用哈希表把sum[i - 1]记录下来: 枚举k,如果sum[k ...
- linux命令帮助 man bash
BASH(1) BASH(1) NAME bash - GNU Bourne-Again SHell (GNU 命令解释程序 “Bourne二世”) 概述(SYNOPSIS) bash [option ...
- edusoho twig 引入文件功能
在这里不得不提 edusoho twig 模板引擎了 跟smarty 比较类似 不过感觉还是更好一点儿 这里用的标签就只有一个 {% include '路径/文件名' %} 大家在首页做的改动比较多 ...
- Odoo13 新变化:存货核算
Odoo13将于2019年10月发布,本次发布也包含了大量的改进,例如,对存货核算的重构. 去掉了 产品历史价格product.price.history ,增加了 stock valuation l ...
- idea启动不了,报错Address localhost:1099 is already in use
解决方法 win + R 然后输入cmd netstat -ano|findstr 1099 taskkill -f -pid 你的PID