标签:track iframe ram 复杂 头部 idt 用户 dia eve
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>
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 属性来实现
const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
}
<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
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 就不好说了。
标签:track iframe ram 复杂 头部 idt 用户 dia eve
原文地址:https://www.cnblogs.com/ajaemp/p/11929236.html