SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 15:05:39 +01:00
Code Issues Projects Releases Packages Activity

Optimize loading speed of the website pages

Browse source
This commit is contained in:
Alex Dima 2016-10-22 13:27:34 +02:00
parent 33f534fbe9
commit 825ed22017
17 changed files with 250 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

1
website/playground/new-samples/creating-the-editor/hello-world/sample.css
View file

@ -0,0 +1 @@

43
website/playground/playground-runner.html
View file

@ -2,17 +2,22 @@
<html style="height:100%">
<head>
<link rel="stylesheet" href="./spinner.css" />
<link data-inline="yes-please" href="./spinner.css" rel="stylesheet" />
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../../release/dev/vs/editor/editor.main.css" />
<style type="text/css">
body { margin: 0; padding: 0; border: 0; }
.monaco-editor { overflow: hidden; }
</style>
<script type="text/javascript" src="../../release/dev/vs/loader.js"></script>
<script type="text/javascript">
var geval = eval;
<script>var require = { paths: { 'vs': '../../release/dev/vs' } };</script>
<script src="../../release/dev/vs/loader.js"></script>
<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
<script src="../../release/dev/vs/editor/editor.main.js"></script>
<script type="text/javascript">
var receivedCall = null;
window.load = function (js, html, css) {
receivedCall = {
@ -21,12 +26,21 @@
css: css
};
};
</script>
</head>
<body>
<div id="loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
require.config({
paths: {
vs: "../../release/dev/vs"
}
});
<script type="text/javascript">
var geval = eval;
require(['require', 'vs/editor/editor.main'], function (require) {
"use strict";
@ -65,16 +79,5 @@
}
});
</script>
</head>
<body>
<div id="loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</body>
</html>

16
website/playground/playground.css
View file

@ -10,18 +10,18 @@ select {
width: initial;
}
.title {
.playground-page .title {
font-family: "Segoe UI Light","HelveticaNeue-UltraLight", sans-serif;
font-weight: 100;
font-size: 1.8em;
}
.tabArea {
.playground-page .tabArea {
height: 20px;
box-sizing: border-box;
border-bottom: 1px solid #999;
}
.tab {
.playground-page .tab {
height: 20px;
line-height: 20px;
box-sizing: border-box;
@ -32,11 +32,11 @@ select {
cursor: pointer;
float: left;
}
.tab.active {
.playground-page .tab.active {
color: black;
border-bottom: 1px solid white;
}
.action {
.playground-page .action {
height: 20px;
line-height: 20px;
box-sizing: border-box;
@ -48,10 +48,10 @@ select {
float: right;
padding-left: 16px;
}
.action.run {
background: url('run.png') no-repeat left center;
.playground-page .action.run {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAE1JREFUOE9jKCsrY6AEU6QZZPHgNeA/0Hn7gdiBUPjg8gLIABjGaxAxBuA1iBQDYAalIXuLFAOweoUYA8gOA4pigegERrRCXOlhGBgAAGmggVf7bEk0AAAAAElFTkSuQmCC') no-repeat left center;
}
.editor-container {
.playground-page .editor-container {
border: 1px solid #999;
border-top: 0;
}

26
website/playground/playground.js
View file

@ -17,11 +17,12 @@ window.onload = function() {
' onError: Function;',
'};',
].join('\n'), 'require.d.ts');
var loading = document.getElementById('loading');
loading.parentNode.removeChild(loading);
load();
});
var loading = document.getElementById('loading');
loading.parentNode.removeChild(loading);
load();
});
};
@ -333,7 +334,24 @@ function doRun(runContainer) {
});
}
var preloaded = {};
(function() {
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
elements.forEach(function(el) {
var path = el.getAttribute('data-preload');
preloaded[path] = el.innerText || el.textContent;
el.parentNode.removeChild(el);
});
})();
function xhr(url) {
if (preloaded[url]) {
return monaco.Promise.as({
responseText: preloaded[url]
});
}
var req = null;
return new monaco.Promise(function(c,e,p) {
req = new XMLHttpRequest();