我有一个网站要花很长时间才能加载其字体工具包样式，以及一些其他运行有趣的脚本。之所以发生这种情况，是因为我的脚本在本节中都很混乱，但是我担心我对这些脚本的了解不足，无法正确清理文件。谁能建议我可以做些事情来清理并提高网站的速度和功能，尤其是更快地加载字体文本时，是否可以建议您？任何示例或特定的参考文献都将是很棒的-我对这些脚本的所有工作一无所知。这是我身上发生的事情：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=0.3">
<meta name="google-translate-customization" content="d378d0a5e57245bf-c2ed76fd752675aa-g7014305900f205ae-13"></meta>
<title>{embed:title}</title>
<style type="text/css" media="screen">
@import url("/common/css/all.css");
@import url("/common/font_face/stylesheet.css");
@import url("/common/css/jcf.css");
</style>
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
<!--fancybox script starts here-->
<script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
// fancybox for html pages
$(".fancylink").fancybox({
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$(".fancylinksm").fancybox({
'height' : 'auto',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
$('.fancybox').fancybox({
padding : 0,
openEffect : 'elastic'
});
$(".fancybox").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
<!--fancybox script ends here-->
<link rel="shortcut icon" href="/common/images/cut-and-paste-logo.ico" type="image/x-icon" />
</head>
更新的代码
我将所有脚本编译到一个“ compiled.js”文件中，并将所有@import调用都更改为s，但是仍然不能使字体加载更快。这是新的部分：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=0.3">
<meta name="google-translate-customization" content="d378d0a5e57245bf-c2ed76fd752675aa-g7014305900f205ae-13"></meta>
<!-- meta data goes here -->
<title>{embed:title}</title>
<link rel='stylesheet' type='text/css' href='/common/font_face/stylesheet.css'>
<link rel='stylesheet' type='text/css' href='/common/css/all.css'>
<link rel='stylesheet' type='text/css' href='/common/css/jcf.css'>
<link rel="stylesheet" type="text/css" href="/common/css/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/css/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<link rel="stylesheet" href="/common/css/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<link rel="shortcut icon" href="/common/images/characterized_logo_16x16.ico" type="image/x-icon" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->
<script type="text/javascript" src="/common/js/compiled.js"></script>
</head>
最佳答案
您应该将那些@import语句更改为链接标记，这会影响某些浏览器的性能。
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
理想情况下，您要将所有这些JS文件连接为一个请求。您可以使用Google闭包编译器之类的工具来做到这一点：
https://developers.google.com/closure/compiler/
所以你运行类似：
cd C:\path\to\src
java -jar C:\compiler.jar --js=jquery.main.js --js=jquery-1.8.3.js --js=fancybox\lib\jquery.mousewheel-3.0.6.pack.js --js_output_file=all.min.js
以下是有关使用JS引导加载程序来防止阻塞的内容：
http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
关于javascript - 网站字体和JavaScript由于脚本过多而运行缓慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15006641/