简体   繁体   English

包含多少个 <HEAD> ?

[英]How many is too many includes in <HEAD>?

I've done some searching on this but can't find any sort of best practice or recommendation -- and perhaps that's because there isn't any. 我已经对此进行了一些搜索,但是找不到任何最佳实践或推荐-可能是因为没有任何最佳实践或推荐。 I'm using all sorts of jQuery plugins on my site, in addition to TinyMCE and some other plugins, and my site's specific JS file. 除了TinyMCE和其他一些插件以及网站的特定JS文件之外,我还在网站上使用了各种jQuery插件。 On top of that, I have three stylesheets ..... and there's more coming as the site grows! 最重要的是,我有三个样式表.....随着网站的发展,还会有更多样式表!

Is there any sort of 'limit' or anything you should keep an eye out for including scripts in the tag? 是否存在某种“限制”或您应注意在标记中包含脚本的任何内容? I know that each one is another HTTP request that needs to be completed, but if they are all minified and as small as can be, will there be issues? 我知道每个请求都是另一个需要完成的HTTP请求,但是如果它们都被缩小并且尽可能小,会不会有问题?

    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" />

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" />
    <![endif]-->

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script>
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script>

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script>

Not good! 不好!

I would reccomend combining these files into one js and one css using a script before deploying to live. 我建议使用脚本将这些文件组合为一个js和一个css,然后再进行部署。 There are many reasons why this is not good, see the link below for more info: 造成这种情况不好的原因有很多,请参见下面的链接以获取更多信息:

http://developer.yahoo.com/performance/rules.html http://developer.yahoo.com/performance/rules.html

Edit: To answer further No, there are no limits on the number of files, but most browsers can only have 2 connections (for a site) to a web server at any one time and thus will load your js 2 files at a time. 编辑:要进一步回答否,文件数量没有限制,但是大多数浏览器一次只能与Web服务器建立2个连接(对于一个站点),因此一次将加载js 2个文件。 The YSlow plugin for firefox will show you a graph of how your files are being downloaded. Firefox的YSlow插件将向您显示文件下载方式的图表。

If you are using ASP.NET this codeproject article might help, if you are on linux then this might help. 如果你正在使用ASP.NET这个CodeProject上的文章可能会帮助,如果你是在Linux上那么这个可能的帮助。

Edit: A simple batch file on windows (to plug into your build tools) would be 编辑:在Windows(插入到您的生成工具)中的简单批处理文件将是

@echo off
copy file1.js + file2.js + file3.js merged.js /b

Browsers have a limit to the number of concurrent requests to a domain, so they can slow down the loading of other items in your page. 浏览器对域的并发请求数量有限制,因此它们可以减慢页面中其他项目的加载速度。 For example, IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2 . 例如, IE8的并发连接数限制为6,而IE7的并发连接数限制为2

I'd recommend combining the files you host locally, referencing others externally (eg on Google), and potentially moving others to the bottom of the page so they don't delay load. 我建议您合并本地托管的文件,从外部引用其他文件(例如,在Google上),并可能将其他文件移动到页面底部,以免延迟加载。

You can combine scripts with a lot of online tools, like jsCompress . 您可以将脚本与许多在线工具(例如jsCompress)结合使用 It's got an "Upload Files" tab, so you can just upload all your js files and it'll compress and minify. 它具有“上传文件”标签,因此您只需上传所有js文件,它就会压缩并缩小。

There are also server-side utilities that will do that for you. 还有服务器端实用程序将为您完成此任务。 You don't say what server-side technology you're using, but for instance in the PHP world you can use Minify . 您没有说使用什么服务器端技术,但是例如在PHP世界中,您可以使用Minify

If it helps you feel better many other sites are "loaded" like that and js files are cached pretty much by all modern ( and even old ) browsers. 如果这样可以帮助您感觉更好,那么所有其他(甚至是旧的)浏览器都会像这样“加载”许多其他站点,并且js文件几乎被缓存。 One thing that might help would be linking your jquery file to one hosted on the googleapis site, because there could be a chance that some other site is linking to the same jquery file hosted there and it's already in their cache: 可能有帮助的一件事是将您的jquery文件链接到googleapis网站上托管的文件,因为其他网站可能会链接到该网站上托管的同一个jquery文件,并且该文件已经在其缓存中了:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Your web server should already optimize files by automatically enabling gzip compression, but double check to make sure. 您的Web服务器应该已经通过自动启用gzip压缩来优化文件,但是请仔细检查以确保安全。

The more CSS and JS files you reference on a page the longer it'll take to load. 您在页面上引用的CSS和JS文件越多,加载时间就越长。 It's much better to combine them into as few files as possible. 最好将它们组合成尽可能少的文件。

I don't know if there's exists a good answer for this kind of question, but if you're interested in optimization, there's a whole number of them done by Yahoo!: http://developer.yahoo.com/performance/rules.html . 我不知道这种问题是否存在很好的答案,但是如果您对优化感兴趣,那么Yahoo!可以完成很多工作: http : //developer.yahoo.com/performance/rules .html

Personally, i tend to ignore most of those rules, simply because the kind of things i'm building aren't all that big. 就我个人而言,我倾向于忽略大多数规则,仅因为我正在构建的东西并不是那么大。

Google Page Speed is your friend. Google Page Speed是您的朋友。 Seems to be basically YSlow on steroids. 似乎对类固醇基本上是YSlow。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM