I have a PHP application in which there is a div container which includes the app which has been $_GET from the URL string.
我有一个PHP应用程序,其中有一个div容器,其中包含来自URL字符串$ _GET的应用程序。
Currently, there are two applications which require TinyMCE, and one application which requires jQuery and jQuery UI.
目前,有两个应用程序需要TinyMCE,一个应用程序需要jQuery和jQuery UI。
Question is, where should I include the files on the page?
问题是,我应该在哪里包含页面上的文件?
In the header, the page loads really slowly, >30 seconds (now <10 seconds, using different router), at at the bottom, the pages which require the scripts fail to load correctly.
在标题中,页面加载速度非常慢,> 30秒(现在<10秒,使用不同的路由器),在底部,需要脚本的页面无法正确加载。
The JS files have already been minified and compressed.
JS文件已经缩小并压缩。
TinyMCE won't gZIP becuase Zlib is installed (as a result of GD), so how should I optimise the situation?
由于安装了Zlib(由于GD),TinyMCE不会gZIP,所以我应该如何优化这种情况?
6 个解决方案
#1
The Yahoo! Exceptional Performance team recommends to put the script elements at the end of the body element.
雅虎! Exceptional Performance团队建议将脚本元素放在body元素的末尾。
#2
At the bottom and run your scripts when the document is fully loaded (using "onload" event).
在底部并在文档完全加载时运行脚本(使用“onload”事件)。
#3
By placing the JavaScript file just before the closing BODY tag, you are allowing the rest of the page to load while the JavaScript file is loading. If you place it in the HEAD section, the page will hang until the script loads.
通过将JavaScript文件放在结束BODY标记之前,您可以在加载JavaScript文件时加载页面的其余部分。如果将其放在HEAD部分,页面将挂起,直到加载脚本。
If it's taking 30 seconds to load in the header, though, you are probably facing a different issue. TinyMCE should not take 30 seconds to load.
但是,如果加载标题需要30秒,那么您可能面临着另一个问题。 TinyMCE不应该花30秒加载。
#4
There probably is no one correct answer for this.
对此可能没有一个正确的答案。
Generally placing javascript to <head> works fine, but 30 seconds is way too much. I'm developing a JavaScript app which dynamically loads about 70 uncompressed javascript files (some quite large) and it doesn't take anywhere near 30 seconds.
通常将javascript放到工作正常,但30秒太多了。我正在开发一个JavaScript应用程序,动态加载大约70个未压缩的javascript文件(一些非常大),并且它不需要接近30秒。
Too little information to solve this.
解决这个问题的信息太少了。
#5
How many JS files is it? If its many, then you may want to look at Steve Souders slides for Even Faster Websites. Downloading JS file is a blocking action. Souders has a nice solution for dealing with script blocking. Check the PPT from http://www.thebitsource.com/2009/03/14/sxsw-interactive-2009-steve-souders-on-even-faster-web-sites/
它有多少个JS文件?如果它很多,那么你可能想看看史蒂夫·索德斯为更快的网站幻灯片。下载JS文件是一个阻止操作。 Souders有一个很好的解决方案来处理脚本阻塞。从http://www.thebitsource.com/2009/03/14/sxsw-interactive-2009-steve-souders-on-even-faster-web-sites/查看PPT
Also, where are you serving the JS from? Try serving jQuery from Google AJAX Libraries API. It uses their CDN and caches for a long time. So the user will only have to dl the files 1 time.
另外,你从哪里服务JS?尝试从Google AJAX Libraries API提供jQuery。它使用他们的CDN和缓存很长一段时间。因此用户只需要对文件进行一次扫描。
#6
I want my JS Code be completely seperated from the XHTML, thus putting it inline HTML before the body closing tag won't do for me.
我希望我的JS代码与XHTML完全分离,因此在正文结束标记不能为我做之前将其放在内联HTML中。
I declare one single JS File in the html head. Then copy/paste all Libraries etc into that JS file. This will result in one HTTP Request, which speeds things up on mobile browsers too.
我在html头中声明了一个单独的JS文件。然后将所有Libraries等复制/粘贴到该JS文件中。这将导致一个HTTP请求,这也会加速移动浏览器的速度。
I then use Prototype to get DOM sensitive functions started:
然后我使用Prototype来启动DOM敏感函数:
document.observe("dom:loaded", function) { // code goes here });
document.observe(“dom:loaded”,function){// code goes here});
#1
The Yahoo! Exceptional Performance team recommends to put the script elements at the end of the body element.
雅虎! Exceptional Performance团队建议将脚本元素放在body元素的末尾。
#2
At the bottom and run your scripts when the document is fully loaded (using "onload" event).
在底部并在文档完全加载时运行脚本(使用“onload”事件)。
#3
By placing the JavaScript file just before the closing BODY tag, you are allowing the rest of the page to load while the JavaScript file is loading. If you place it in the HEAD section, the page will hang until the script loads.
通过将JavaScript文件放在结束BODY标记之前,您可以在加载JavaScript文件时加载页面的其余部分。如果将其放在HEAD部分,页面将挂起,直到加载脚本。
If it's taking 30 seconds to load in the header, though, you are probably facing a different issue. TinyMCE should not take 30 seconds to load.
但是,如果加载标题需要30秒,那么您可能面临着另一个问题。 TinyMCE不应该花30秒加载。
#4
There probably is no one correct answer for this.
对此可能没有一个正确的答案。
Generally placing javascript to <head> works fine, but 30 seconds is way too much. I'm developing a JavaScript app which dynamically loads about 70 uncompressed javascript files (some quite large) and it doesn't take anywhere near 30 seconds.
通常将javascript放到工作正常,但30秒太多了。我正在开发一个JavaScript应用程序,动态加载大约70个未压缩的javascript文件(一些非常大),并且它不需要接近30秒。
Too little information to solve this.
解决这个问题的信息太少了。
#5
How many JS files is it? If its many, then you may want to look at Steve Souders slides for Even Faster Websites. Downloading JS file is a blocking action. Souders has a nice solution for dealing with script blocking. Check the PPT from http://www.thebitsource.com/2009/03/14/sxsw-interactive-2009-steve-souders-on-even-faster-web-sites/
它有多少个JS文件?如果它很多,那么你可能想看看史蒂夫·索德斯为更快的网站幻灯片。下载JS文件是一个阻止操作。 Souders有一个很好的解决方案来处理脚本阻塞。从http://www.thebitsource.com/2009/03/14/sxsw-interactive-2009-steve-souders-on-even-faster-web-sites/查看PPT
Also, where are you serving the JS from? Try serving jQuery from Google AJAX Libraries API. It uses their CDN and caches for a long time. So the user will only have to dl the files 1 time.
另外,你从哪里服务JS?尝试从Google AJAX Libraries API提供jQuery。它使用他们的CDN和缓存很长一段时间。因此用户只需要对文件进行一次扫描。
#6
I want my JS Code be completely seperated from the XHTML, thus putting it inline HTML before the body closing tag won't do for me.
我希望我的JS代码与XHTML完全分离,因此在正文结束标记不能为我做之前将其放在内联HTML中。
I declare one single JS File in the html head. Then copy/paste all Libraries etc into that JS file. This will result in one HTTP Request, which speeds things up on mobile browsers too.
我在html头中声明了一个单独的JS文件。然后将所有Libraries等复制/粘贴到该JS文件中。这将导致一个HTTP请求,这也会加速移动浏览器的速度。
I then use Prototype to get DOM sensitive functions started:
然后我使用Prototype来启动DOM敏感函数:
document.observe("dom:loaded", function) { // code goes here });
document.observe(“dom:loaded”,function){// code goes here});