开头部分引用的JavaScript是否应使用与主文档相同的主机名提供?


12

我的印象是,为了获得最佳性能,应将Javascript视为静态内容,并应从无cookie的域以及CSS文件,图像等提供服务。

但是Google在这里说:不要提供来自cookieless域的早期加载的外部JS文件

对于文档开头引用的JavaScript和页面启动所需的JavaScript,应从与主文档相同的主机名提供服务。由于大多数浏览器会阻止其他下载和渲染,直到所有JavaScript文件都已下载,解析和执行,因此最好避免在此处理时再进行DNS查找的风险。

所以现在我很矛盾。我不清楚“页面启动所需”是什么意思。

我通常有两个JavaScript引用,即ajax.googleapis.com提供的JQuery和$ .document.ready()函数中主要包含事件处理程序的master.js文件。页面启动需要这吗?

给定可用的选项,(ajax.googleapis.com,静态无cookie域,原始主机名)应在哪里提供我的JavaScript?

Answers:


5

所以现在我很矛盾。我不清楚“页面启动所需”是什么意思。

这在很大程度上取决于您的网站如何运作。基本上,只有在某些人可以使用网页之前,它才需要运行JavaScript。

例如,如果您访问http://www.weather.com/,您会看到人们决定使用一些JavaScript魔术来为天气搜索表单提供提示。即,单词Enter Zip, City or Place (e.g. Disney World)出现在文本输入字段中。不幸的是,页面加载时会稍有延迟,至少在我这端。因此,如果页面加载的速度足够慢,并且您的速度足够快,可以在执行JavaScript之前开始输入文本输入(这不是拉伸操作),那么盲目地放置提示的JavaScript可能会破坏您的输入输入框中的文字。

当然,可以通过首先检查文本框中的用户输入或完全放弃这种过时的技术来避免这种情况。但是,那将不是一个很好的例子。

给定可用的选项,(ajax.googleapis.com,静态无cookie域,原始主机名)应在哪里提供我的JavaScript?

不知道您的JavaScript不能真正回答这个问题。另外,正如bpeterson76所暗示的那样,这取决于您网站的具体情况。即页面有多大?您的房东满足需求的情况如何?它会加载多少CSS文件,图像等?正在加载多少外部资源?

根据您的具体情况,这可能是过早的优化。


4

“页面开始呈现之前所需的所有内容都应来自同一服务器”规则通常适用于您的服务器或其他较小的资源-在这种情况下,DNS查找可能花费一秒钟的明显时间(如果您的对象散布在许多域中,则可能会迅速增加)。使用Google的jQuery缓存和其他库等通用公共资源,您的访问者的浏览器很可能已经在今天进行了DNS查找(因为其他站点正在引用该服务的内容),并且文件也可能在缓存中,因此没有传输需要完成(或者,如果发出请求,它可能只会返回简短的“ 304-未修改”响应)。即使需要完全下载该对象,对于大多数用户而言,Google的内容交付网络也将比您的小规模运营更快。

一个相关规则:页面的正确功能不需要的对象(如用户所见)应在主HTTP响应中尽可能晚地引用。例如,诸如广告/统计服务所需的脚本(即Google Analytics(分析)及其类似工具)之类的内容-尽快为用户提供您的内容,然后加载您真正感兴趣的背景内容。我封锁了一些广告/统计服务(通过将它们映射到我的主机文件中的127.0.0.1),因为它们通常太慢了,而且早先引用它们的网站在等待脚本时给了我空白页较晚地引用它们,以便我可以阅读我在那里的内容,而其他内容则在后台徘徊。

无cookie的域对静态内容的有用性取决于规模。如果您在Cookie中只有一个10字节的会话ID,并且每天有一万名访问者每次访问请求约20个静态对象,那么您每月仅节省约118 MB的带宽(20 * 20 * 10000 * 31/1024/1024)。另一方面,如果您的站点在Cookie中保留了一个或两个KB的内容,则差异可能会更大得多,尤其是如果您的任何用户通过慢速连接(例如,通过网络绑定到移动设备的GPRS或-在高干扰区域拥挤的wifi链接),或者每天获得数百万次访问。

总而言之,对于在页面可以呈现我的首选项之前必须加载的脚本,将是:

  1. ajax.googleapis.com或类似的
  2. 呼叫页面的原始主机名
  3. 静态无cookie域

对于对于初始页面呈现来说不是必不可少的资源,请尽可能晚地引用它们,并反转上面的首选项列表(尽管除非大规模运行,否则原始主机名和无cookie域之间的差异很可能并不重要。 )。


With common public resources ... there is a good chance that your visitor's browser has already done that DNS lookup today 就个人而言,在我的网站上依靠它会感到不舒服。我希望它在尽可能多的情况下尽可能快。无论如何,您都提出了要点。+1
George Marian

1

Google运行着一个庞大的内容网络,分布在世界各地,它使内容比您可能正在运行的任何一台服务器(想想Akami,但归Google拥有)更接近用户。因此,从速度的角度来看,这是有理由的Google会比本地服务器更快地将文件发送给用户……除非他们与您的个人服务器非常接近。

这个问题在Stackoverflow上已经遍地开花,上面的答案似乎总是共识。但是从现实的角度来看,从长远来看,托管在一个与另一个托管上所获得的收益将很小。通过最小化,优化和减少总体http请求,您将比仔细检查事物的实际位置获得更好的收益。在开始变得重要的情况下(我所做的工作是页面每天加载1.5+百万次,因此5k的改进意味着节省了5兆的带宽),通常会有一组决策者负责研究这些决策。

就我个人而言,我通常会在Google托管,其唯一原因是他们会向我提供我所寻找内容的最新副本。


您在哪里托管自定义JavaScript?静态的无cookie域或原始主机名?
詹姆斯·劳鲁克

老实说,在(大部分)在线Jquery之外,确实没有很多不能动态链接的。我倾向于使用(主要)核心Jquery和Jquery UI将巫毒减至最少,但Datatables插件可能除外。我坚信“保持简单”(愚蠢)的概念,并且如果不向后兼容,则不会发布代码,这会排除很多选择。就像我上面说的,将文件放在非cookieless域上没什么大不了的。
bpeterson76 '08

1

要记住的重要一件事是,浏览器对将从同一域中同时下载的资源有限制,具体取决于浏览器,通常在2到6之间。通过使用其他域,浏览器可以同时从您的域下载更多内容。

因此,最好的解决方案是使用流行的CDN(例如ajax.googleapis.com),因为这样就没有cookie。用户可能已经完成了DNS查找,甚至可能已经缓存了资源。CDN已针对速度进行了优化,并可能在您的用户附近拥有一台服务器。

如果没有CDN选项,则如果您有很多Cookie或要下载的资源(图像等),那么请使用无Cookie的域(无论如何,只需一次执行DNS查找)。

如果您来自同一域的资源(只有一个自定义javascript文件)和cookie(只有一个很小的会话ID)很少。

好的资源:

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

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


1

尽管以上答案已经解决了您的大部分问题,但我将为“页面启动所需”做出贡献。我将其翻译为:此脚本对于使用网站是否必不可少?根据经验,通常答案是否定的。但是,在以下情况下,我会:

  • 表格验证
  • 基于JavaScript的导航(无论如何都不理想)
  • 如果布局取决于JavaScript
  • 如果使用JavaScript或库(如jQuery)进行至关重要的DOM修改

并提供雅虎的YSlow性能指南供参考。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.