新足迹 › 论坛 › 兴趣爱好区 › IT与科技 › IT专业论坛 › Best place for JavaScript block

精华好帖回顾
· 风玲教学日记之一--早教理论基础：Image of the child—在你心里，孩子的形象是什么？ (2008-11-16) 风玲	· 双职工家庭的福音之三西餐中吃最简单的炒鸡翅 (2005-3-23) binbingogo
· 谈古论今-过年风俗谈 (2011-2-1) 征途归来	· 疯跑，疯跑，厉兵墨马，挑战自我！（2013墨尔本马拉松贴）（比赛结束！恭喜顺利完赛！请关注我们的成绩！） (2013-6-28) 疯跑

12 / 2 页下一页

查看: 3080|回复: 43

Best place for JavaScript block [复制链接]

Dan.and.Andy

铜靴族

发表于 2011-8-4 09:25 |显示全部楼层

此文章由 Dan.and.Andy 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 Dan.and.Andy 所有！转贴必须注明作者、出处和本声明，并保持内容完整

选择题

<html>
<head>

<link rel="stylesheet" href="stylez.css" type="text/css" />

</head>
<body>

...
<p>All the page content ...</p>
...

</body>
</html>


请选择 JavaScript 放哪里会理论上让页面load更快？再加一问，为什么？

[ 本帖最后由 Dan.and.Andy 于 2011-8-4 08:52 编辑 ]

评分

参与人数 2	积分 +9	收起理由
bulaohu	+ 6	感谢分享
kr2000	+ 3	感谢分享

查看全部评分

阿Ka

水晶靴族

发表于 2011-8-4 09:28 |显示全部楼层

此文章由阿Ka 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者阿Ka 所有！转贴必须注明作者、出处和本声明，并保持内容完整

鱼羊鲜

水晶靴族

发表于 2011-8-4 09:31 |显示全部楼层

此文章由鱼羊鲜原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者鱼羊鲜所有！转贴必须注明作者、出处和本声明，并保持内容完整

看情况多数D 有时B

psaux

布鞋族

发表于 2011-8-4 09:58 |显示全部楼层

此文章由 psaux 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 psaux 所有！转贴必须注明作者、出处和本声明，并保持内容完整

我的理解是
1. load 的快慢跟放得位置无关。
2. 如果使用framework 的类似于$(document).ready() or onDOMReady()的event，放在哪里都可以（但一般都不会放在A)。
3. 如果不是2的情况，D和E是安全的，因为可以确定类似于document.getElementById()的function不会return null.
4. 如果是2的情况，大多数人会放在B，因为看上去干净一点。

atransformer

头像被屏蔽

禁止访问

发表于 2011-8-4 10:09 |显示全部楼层

书上说是 D

此文章由 atransformer 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 atransformer 所有！转贴必须注明作者、出处和本声明，并保持内容完整

乱码

银靴族

发表于 2011-8-4 10:24 |显示全部楼层

此文章由乱码原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者乱码所有！转贴必须注明作者、出处和本声明，并保持内容完整

公认的是D，既然问出这个问题来，肯定有其他原因，说说看。

kr2000

白金靴族

发表于 2011-8-4 10:26 |显示全部楼层

此文章由 kr2000 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 kr2000 所有！转贴必须注明作者、出处和本声明，并保持内容完整

不知道，等正解

典

银靴族

发表于 2011-8-4 10:35 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

这是一个很大的话题，在书上有好几章分析这个东西
简单说来有几个基本的方面：
1) script blocking: 一般来说如果script开始下载，页面的其它部分（如果还没开始）是要被停止的，要等待script download完，并且运行完才开始继续，基于这个理由，基本原则是放在底部要快。
但是实际情况是复杂的，有很多技巧来避免blocking, 比如script differ, XHR injection....

2）script inline vs external:
因为浏览器在加载外部js的时候，需要httprequest,所以认为inline快，但是实际情况是外部文件可以reuse,所以效率更高

3）writing efficient script ....这个靠个人功夫

4）minify gzip optimize，
比如http://closure-compiler.appspot.com/home

原代码
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');

优化后
alert("Hello, New user");

[ 本帖最后由典于 2011-8-4 10:08 编辑 ]

评分

参与人数 1	积分 +3	收起理由
乱码	+ 3	你太有才了

查看全部评分

linkspeed

头像被屏蔽

禁止发言

发表于 2011-8-4 11:06 |显示全部楼层

此文章由 linkspeed 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 linkspeed 所有！转贴必须注明作者、出处和本声明，并保持内容完整

好像那个yahoo的yslow也有这么1条

Dan.and.Andy

铜靴族

发表于 2011-8-4 11:12 |显示全部楼层

公认是D

1.Ref: http://developer.yahoo.com/performance/rules.html#js_bottom --- 根据HTTP/1.1 specification的标准，一个browsers download no more than two components in parallel per hostname, 大块的javascript会阻碍其他内容的下载

2.尽量不要使用$(document).ready()，能避免就避免，bad practice，放在D正好可以立即使用Dom elements而不用检测，ready event 是计时器驱动的定时查询，浪费时间且没有效率。

[ 本帖最后由 Dan.and.Andy 于 2011-8-4 10:37 编辑 ]

评分

参与人数 1	积分 +6	收起理由
bulaohu	+ 6	感谢分享

查看全部评分

典

银靴族

发表于 2011-8-4 11:16 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 linkspeed 于 2011-8-4 10:06 发表
好像那个yahoo的yslow也有这么1条

yslow是Steve Souders发明的
Steve Souders有两本书

High Performance Website
Even Faster Websites

我觉得这两本书对我个人帮助非常大，虽然我只从中学到很小的一部分，

kr2000

白金靴族

发表于 2011-8-4 11:19 |显示全部楼层

此文章由 kr2000 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 kr2000 所有！转贴必须注明作者、出处和本声明，并保持内容完整

我看她是这么说的

The problem caused by scripts is that they block parallel downloads. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

所以js是从本地还是google都没有区别。图片从其他host可能会快点。
不知道我的理解对不对

原帖由 Dan.and.Andy 于 2011-8-4 10:12 发表
公认是D

1.Ref: http://developer.yahoo.com/performance/rules.html#js_bottom --- 根据HTTP/1.1 specification的标准，一个browsers download no more than two components in parallel per hostname, 大块的javasc ...

[ 本帖最后由 kr2000 于 2011-8-4 10:20 编辑 ]

50个behaviour面试问题，答案以及问的原因

Dan.and.Andy

铜靴族

发表于 2011-8-4 11:37 |显示全部楼层

原帖由 kr2000 于 2011-8-4 10:19 发表
我看她是这么说的

所以js是从本地还是google都没有区别。图片从其他host可能会快点。
不知道我的理解对不对

你的理解是对的，应该没有区别。

dalaohu

金靴族

发表于 2011-8-4 11:41 |显示全部楼层

回复 Dan.and.Andy 13# 帖子

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

圖片也沒區別的，都是要第一次從服務端下載到本地。

CDN的區別只是，如果2個site都用CDN的話，那麼如果用戶訪問過Site A，那麼那些external res已經被browsercache了，然後讓問Site B是就已經在本地了。

足迹 Reader is phenomenal. If you never used, you never lived 火速下载

典

银靴族

发表于 2011-8-4 11:43 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

CDN的好处应该主要是讲物理位置的，对大网而言，比如说在页面直接引用www.google.com/jquery.js,
好处是各个国家地区的用户能从最近的google服务器得到这个文件

但是一般来说CDN带来的 drawback更大，因为用CDN我们不能控制cache的优化，cache的优化对一般的网站来说是更高一级更重要的问题。

[ 本帖最后由典于 2011-8-4 10:49 编辑 ]

典

银靴族

发表于 2011-8-4 11:49 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 dalaohu 于 2011-8-4 10:41 发表
圖片也沒區別的，都是要第一次從服務端下載到本地。

CDN的區別只是，如果2個site都用CDN的話，那麼如果用戶訪問過Site A，那麼那些external res已經被browsercache了，然後讓問Site B是就已經在本地了。

理论上是这样，但是很不可靠，因为
除非是很popular的js 文件，而popular的js文件的cache设置往往不是我们想要的，人家要考虑更重要的其他东西，（我做过一些跟踪）

dalaohu

金靴族

发表于 2011-8-4 11:50 |显示全部楼层

回复典 15# 帖子

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

對，地理也是一個優勢。

cache會有點問題的，可以用版本好來控制。比如jquery後面都有 x.xxx.x.js

典

银靴族

发表于 2011-8-4 11:56 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 dalaohu 于 2011-8-4 10:50 发表
對，地理也是一個優勢。

cache會有點問題的，可以用版本好來控制。比如jquery後面都有 x.xxx.x.js

问题是人家的设置你可能不喜欢，
比如google.com/jquery1.1.js,
google把一些参数做成了每10分钟就expire （举例而已）,
意味着用户每天可能下载同一个文件多次

如果自己设，可能就设置成一个月expire了,岂不快很多

dalaohu

金靴族

发表于 2011-8-4 11:58 |显示全部楼层

回复典 18# 帖子

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

那是，那是， CDN掌握在人家的手裡不便於自己控制。

你最近做什麼項目，怎麼狂搞js？

dalaohu

金靴族

发表于 2011-8-4 12:00 |显示全部楼层

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

你幫我看看，這個怎麼樣，有實際價值嗎？
http://projects.nikhilk.net/ScriptSharp

典

银靴族

发表于 2011-8-4 12:14 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 dalaohu 于 2011-8-4 10:58 发表
那是，那是， CDN掌握在人家的手裡不便於自己控制。

你最近做什麼項目，怎麼狂搞js？

最近比较闲，自学一下，呵呵

典

银靴族

发表于 2011-8-4 12:15 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 dalaohu 于 2011-8-4 11:00 发表
你幫我看看，這個怎麼樣，有實際價值嗎？
http://projects.nikhilk.net/ScriptSharp

我对这个不懂，对你应该没有用吧。

Dan.and.Andy

铜靴族

发表于 2011-8-4 12:33 |显示全部楼层

原帖由 dalaohu 于 2011-8-4 11:00 发表
你幫我看看，這個怎麼樣，有實際價值嗎？
http://projects.nikhilk.net/ScriptSharp

看了，不过觉得C#就是c#, js就是js, 搞这个是省事了还是费力了？真的没什么用

dalaohu

金靴族

发表于 2011-8-4 12:41 |显示全部楼层

回复 Dan.and.Andy 23# 帖子

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

我也是這麼認為。

但現實世界裡，當一個js狂人寫了居多的js後人走掉了。這堆js也基本就死掉了。
但如果js lib使用某種strongly typing+IDE寫的話，優勢就體現出來了。可以用fxcop enforcing coding standard， refactoring， debuging的tool也很多，非常易於日後的升級維護。

足迹 Reader is phenomenal. If you never used, you never lived 火速下载

混不到坑的萝卜

皮靴族

发表于 2011-8-4 12:45 |显示全部楼层

A或者C或者D

此文章由混不到坑的萝卜原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者混不到坑的萝卜所有！转贴必须注明作者、出处和本声明，并保持内容完整

我觉得真正正确的答案是A或者C，但有条件。

首先是要考虑你的script要放在哪里。
如果在CDN，A绝对是最快的，因为CDN的host是独立于你的网页本身的host，所以不会block剩下的部分的下载。
如果在本地，推荐的做法是给你static resources分别放在不同的alias上。这样即使你的static resources和你的web page在同一台电脑上，browser并不知道，它会并行下载。仍然可以放在A，最快。

如果你既没有CDN又没有alias，那么如果你用script loader，那么放在C就是最理想的，越早开始并行下载越快获得整个网页和脚本。

如果以上一切都没有，就是干巴巴地scirpt src=xxx，那么只好A或者D了。没差别。

典

银靴族

发表于 2011-8-4 12:46 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 dalaohu 于 2011-8-4 11:41 发表
我也是這麼認為。

但現實世界裡，當一個js狂人寫了居多的js後人走掉了。這堆js也基本就死掉了。
但如果js lib使用某種strongly typing+IDE寫的話，優勢就體現出來了。可以用fxcop enforcing coding standard， refactoring， debuging的tool也很多，非常易於日後的升級維護。

如果这么想，推荐google Closure
感觉jquery是游击队，小米步枪砍刀之类的。
google Closure是正规军，什么都齐全，其unit test也做的很好。

当然也可以二者同用，

dalaohu

金靴族

发表于 2011-8-4 12:47 |显示全部楼层

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

什麼叫

推荐的做法是给你static resources分别放在不同的alias上

？

混不到坑的萝卜

皮靴族

发表于 2011-8-4 12:53 |显示全部楼层

原帖由 dalaohu 于 2011-8-4 11:47 发表
推荐的做法是给你static resources分别放在不同的alias上？

比如你有个web server叫做myweb.com，你可以给这个domain起多个alias，比如mywebscripts.com, myimages.com, mycss.com。他们的DNS都指向同一个web server。
那么你可以在网页中使用这样的技术：
<script src='http://myscripts.com/aaa.js'></script>
<link rel="stylesheet" href="http://mycss.com/stylez.css" type="text/css" />
...
<img src="http://myimages.com/aaa/jpg" />
...

dalaohu

金靴族

发表于 2011-8-4 12:55 |显示全部楼层

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

這跟直接用 <script src='http://myweb.com/aaa.js'></script> 啥區別？

混不到坑的萝卜

皮靴族

发表于 2011-8-4 12:57 |显示全部楼层

原帖由 dalaohu 于 2011-8-4 11:55 发表
這跟直接用啥區別？

The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your STATIC RESOURCES from multiple hostnames, you can get more than two downloads to occur in parallel

[ 本帖最后由混不到坑的萝卜于 2011-8-4 11:59 编辑 ]

评分

参与人数 1	积分 +3	收起理由
dalaohu	+ 3	感谢分享

查看全部评分

12 / 2 页下一页

返回列表

		自动登录	找回密码
密码			注册

精华好帖回顾

Best place for JavaScript block [复制链接]

评分

书上说是 D

评分

评分

回复 Dan.and.Andy 13# 帖子

回复典 15# 帖子

回复典 18# 帖子

回复 Dan.and.Andy 23# 帖子

A或者C或者D

评分

发表回复

浏览过的版块

退役斑竹

特殊贡献奖章

2010年度奖章获得者

精华好帖回顾

Best place for JavaScript block [复制链接]

评分

书上说是 D

评分

评分

回复 Dan.and.Andy 13# 帖子

回复 典 15# 帖子

回复 典 18# 帖子

回复 Dan.and.Andy 23# 帖子

A或者C或者D

评分

发表回复

浏览过的版块

退役斑竹

特殊贡献奖章

2010年度奖章获得者

回复典 15# 帖子

回复典 18# 帖子