非关键资产的异步加载(Javascript，CSS)
非关键资产的异步加载(Javascript，CSS)
提问于 2016-08-11 06:29:50
为了更快地加载网站，我们需要在获取站点的非关键资产之前让DOM加载。场景是：
1)优化CSS传递( DOM加载后加载)
2)删除呈现阻塞的JavaScript (各种库)，并在以后加载它们.
3)我们可能有多个页面，其中有依赖于我们正在使用的库的自定义代码。
4)我们不需要使用所需或webpack，因为我们唯一的需求是异步加载。
因此，我们需要一个简单的javascript代码，它可以异步加载资产，并在加载所有资产时触发事件。使用库函数的自定义代码可以侦听该事件。
回答 2
Stack Overflow用户
发布于 2016-08-11 06:29:50
我们的布局或页眉/页脚可以包含此代码，该代码加载指定的资产，并在完成后触发事件。
<body>
...
<script>
// Callback after window is loaded
if (window.addEventListener) {
window.addEventListener("load", downloadFilesAtOnload, false);
} else if (window.attachEvent) {
window.attachEvent("onload", downloadFilesAtOnload);
} else {
window.onload = downloadFilesAtOnload;
}
function downloadFilesAtOnload() {
// List of Javascript files to be loaded
var jsFiles = ["js/library1.min.js", "js/library2.min.js", "CDN.library3.min.js"];
loadScriptArray(jsFiles, function() {
triggerEvent(document, 'scripts_loaded');
});
// List of CSS files to be loaded
var robotoFonts = "https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700";
var cssFiles = ["css/cssfile1.min.css", "css/cssfile2.min.css", robotoFonts];
for (var i = 0; i < cssFiles.length; i++) {
var l = document.createElement('link');
l.rel = 'stylesheet';
l.href = cssFiles[i];
var h = document.getElementsByTagName('head')[0];
h.parentNode.insertBefore(l, h);
}
}
function loadScriptArray(contentArray, contentLoadedCallback){
var contentQuantity = contentArray.length; //Number of Files that needs to be loaded
var contentCompleted = 0; //Number of Files, that have already been loaded
for (var i = 0; i < contentQuantity; i++) {
loadScript(contentArray[i], function(success, path){ //This anonymous function is called everytime a script is finished
//The only way to know which script finished, is to pass the path as an parameter
contentCompleted++;
if (contentCompleted == contentQuantity){ //this was the last file
if (typeof contentLoadedCallback == 'function'){
contentLoadedCallback();
}
}
});
}
}
function loadScript(path, scriptLoadedCallback){
element = document.createElement("script");
element.src = path;
element.async = false;
if (typeof(scriptLoadedCallback) == 'function') { //makes the callback-function optional
element.onload = function() {
return scriptLoadedCallback(true, path); //true = successfull; the path is needed later
};
element.onerror = function() { //you might also call the cb on error
this.parentNode.removeChild(this); //remove faulty node from DOM
return scriptLoadedCallback(false, path); //false = error; the path is needed later
};
}
document.body.appendChild(element); //insert the node in DOM (end of <head>), and load the script
}
function processEvent(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, function() {
handler.call(el);
});
}
}
function triggerEvent(el, eventName) {
var event;
if (window.CustomEvent) {
event = new CustomEvent(eventName);
} else {
event = document.createEvent('CustomEvent');
event.initCustomEvent(eventName);
}
el.dispatchEvent(event);
}
</script>
</body>然后，我们可以使用javascript代码，它依赖于以下任何页面中的外部文件/库：
<script>
processEvent(document, 'scripts_loaded', function(e) {
// Code here
});
</script>Stack Overflow用户
发布于 2016-08-25 09:48:54
下面是使用Javascript承诺的更好的解决方案
布局或页眉/页脚文件可以包含此代码。
// Load css files
var cssFiles = [{
type: "CDN",
src: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
integrity: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u",
}, {
type: "local",
src: "css/cssfile1.min.css"
}, {
type: "local",
src: "css/cssfile2.min.css"
}, {
type: "local",
src: "https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700"
}];
var loadcssFiles = function() {
cssFiles.forEach(function(file) {
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = file.src;
if (file.type == 'CDN') {
style.integrity = file.integrity;
style.crossOrigin = "anonymous";
}
document.head.appendChild(style);
});
}
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
raf(loadcssFiles);
} else {
window.addEventListener('load', loadcssFiles);
}
// Load Javascript files
var jsFiles = [{
index: 1,
type: "CDN",
src: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
integrity: "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa",
}, {
index: 2,
type: "local",
src: "js/library1.min.js"
}, {
index: 3,
type: "local",
src: "js/library2.min.js"
}];
var loadjsFiles = new Promise(function(resolve, reject) {
var failed;
jsFiles.forEach(function(file) {
var script = document.createElement('script');
script.src = file.src;
script.onerror = function() {
failed = true;
reject(this);
}
script.async = false;
if (file.type == 'CDN') {
script.integrity = file.integrity;
script.crossOrigin = "anonymous";
}
document.head.appendChild(script);
script.onload = script.onreadystatechange = function() {
if (!failed && (!this.readyState || this.readyState == "complete") && file.index == jsFiles.length ) {
resolve(this);
}
}
});
});然后，我们可以使用javascript代码，它依赖于以下任何页面中的外部文件/库：
loadjsFiles.then(function() {
// Code here
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38888807
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号